Doesn't work with NASA Night launch theme

[floriath]

Hi,

When I use this with the Night Launch theme there appears an additional blank bar at the top. Doesn't happen w/ other themes.

Thanks
Pushpraj

[Quicksaver]

I'll check it out, thanks for letting me know.

[Quicksaver]

Apparently that's only one of many incompatibilities with the add-on and the theme. Please try contacting the theme's developer and ask him to add support for the add-on. You can also point him to #24 for easy to follow guidelines on how to do this; and you're welcome to read the first part as well, as it explains why this is better done on the theme side.

Please let me know of the developer's decision on this, or if you can't reach him for some reason, and I'll see what I can do.

[floriath]

Thanks mate :-)

[mcdavis941]

Quicksaver, I'm just saying hi. I'm the developer of NNL. A user contacted me about this and I'm taking a look, just FYI. Thanks for the great info in #24. BTW this is the first time I'm seeing your add-on but this looks really well done and well thought out. Bye.

[Quicksaver]

You're welcome, I'm the one who has to thank you for looking into adding compatibility for the add-on in your theme! BTW, please use the beta version (latest is 1.4b4) in the development channel at https://addons.mozilla.org/firefox/addon/the-puzzle-piece/ for testing. I've changed a few things in it for compatibility with the latest versions of firefox, I don't think I've changed anything in the stylesheets or any of the layout code, but better be safe than sorry. :)

Let me know if you need any help or extra info.

[mcdavis941]

Actually I do have a question (because I might learn something about writing add-ons) and a couple simple requests. I can email you or do it here, whatever you prefer. Thank you.

[Quicksaver]

It's fine by me either way.

[mcdavis941]

OK, the question first. I see you're using this in a selector. Why test the UUID? Why are you using the UUID in the attribute which you add?

window[theFoxOnlyBetter_UUID="1410942185775"]

[Quicksaver]

It is to differentiate between windows. For example, say you have two firefox windows open and sized differently. Mostly, that correctly handles widths and positions and anything else that can, in theory, be different in each window, so that the same script doesn't influence the wrong window.

There may be a couple of declarations that probably don't need the UUID selector, but since the script that creates those runs independently in each window, rather than having a CSS sheet from a window's script override others (even with the same values) from other windows, I just use the UUID selector in every sheet created dynamically by the script in window A so that it only affects window A and not B or C.

Since I assume that most of the customization in the theme will be colors, background and shadows and etc (basically properties that should have the same value in all windows), you shouldn't need to worry about the UUID selectors.

[Quicksaver]

Little example, dimensioning the toolbars correctly with each window's size: https://github.com/Quicksaver/The-Fox--Only-Better/blob/master/resource/modules/slimChrome.jsm#L108

[mcdavis941]

The first request.

1. Could you on the .skylight elements add state information so I can style it appropriately.

I need to change the bottom border color (which you're setting based on desktop colors) to something NNLish, and I need to do it differently based on the color of the skylight itself. That is, when the skylight is whitish I need to do it one way, when it's green for EV sites I need to do it differently.

So my request is, could you add attributes or classes (either works for me) on .skylight to indicate its state, being EV or not EV or whatever states cause you to change its color.

For example, you could use the same classes as Firefox does on #identity-box (.verifiedDomain, .verifiedIdentity), or as attribute do something like .skylight[ssl] or .skylight[ev], or whatever you need for your states.

That would let me to say things like .skylight.verifiedIdentity { border-bottom-color: #004400; }

[mcdavis941]

The second request.

2. Could you, on some element high in the document, such as on window itself or on some container which is above all the elements added for TheFOB, add an attribute indicating the add-on version.

The reason this is valuable is because I don't just need to support the current released version of an add-on, I also need to have rules for the previous version (not everyone's upgraded yet), and for the next one (so I'm ready for it when it comes out). If I have an attribute indicating version, then I can write rules specific to each version and support all in parallel.

Sometimes I can get away without this by testing for changes in DOM, like if an element id changes from one add-on version to the next, but that's always kind of iffy.

[mcdavis941]

And another question actually. :) What are the .skylight states which have their own distinct styling? So far I've only seen green and whitish, are there others?

Thanks so much.

[mcdavis941]

... (basically properties that should have the same value in all windows), you shouldn't need to worry about the UUID selectors.

Aight, got it, thank you.

[Quicksaver]

Could you on the .skylight elements add state information so I can style it appropriately.

Already doing this for the identity-box sky light. .skyList[state="verifiedIdentity"] should work just fine, as well as any other state that can be a class in the identity box.

I say I'm doing this for the identity-box sky light because that's the only light that comes available by default. But other add-ons have the ability to add their own lights if they want, with their own states and colors (#52). So I want to make sure that you understand that each (possible future) light is completely independent from the others.

Could you, on some element high in the document, such as on window itself or on some container which is above all the elements added for The FOB, add an attribute indicating the add-on version.

I can do this of course. I'll add it in the next version (re-opening the issue so I don't forget).

What are the .skylight states which you style differently? So far I've only seen green and whitish, are there others?

There are as many as identity-box states (classes):
https://github.com/Quicksaver/The-Fox--Only-Better/blob/master/resource/modules/compatibilityFix/identityBox.jsm#L19
http://mxr.mozilla.org/mozilla-central/source/browser/base/content/browser.js#6252

[Quicksaver]

(Didn't mean to comment just yet).

Blue: verified domain (i.e. google)
Yellow: mixed content (blocked/unblocked), as in https://ie.microsoft.com/testdrive/browser/mixedcontent/assets/woodgrove.htm

I also want to add a red one for reported fake and web forgery sites, but I haven't managed to do that yet; just a heads-up.

[mcdavis941]

Actually, now that I think about this a little more .. I wonder if maybe you would be better off not using desktop colors to style the sky lights. The rules I'm talking about are these two:

#theFoxOnlyBetter-skyLights-container .skyLight {
    border: 1px solid hsla(209,67%,12%,0.35);
    border-bottom-color: ThreeDShadow;
}

#theFoxOnlyBetter-skyLights-container .skyLight[transparent]:-moz-any(:hover,[active],[alert="on"]):-moz-lwtheme {
    border-bottom-color: ThreeDDarkShadow;
}

Using desktop colors means if the user sets those to something crazy then you get a crazy color as the shadow. If you used a literal state-specific color there, that would be better for me because then I wouldn't have to touch those colors at all, and I could just leave that to you and whatever other add-ons are defining their own sky lights (a cool idea BTW).

[Quicksaver]

Hmm I think I understand what you mean, but that would be the same I believe. As far as the identity-box light goes at least, that just means that the border's colors are the same in all states. If I were to set a border color that depends on each state, in the default theme I'd keep the current colors in all states otherwise I don't think it would fit with the theme at all.

The point of those borders is to make it seem like the light "goes along" the area where it's in, kind of embedded in it when it's off. Then when hovered it turns on and you can clearly see its sort of bulb-shape, from the light "reflecting off the glass". When the user sets those values to any other colors, the lights go along with the toolbars borders already, whereas if I set specific colors directly they wouldn't.

So you'd still need to tackle them individually in case you wanted different borders for different states in your theme. Even if I set a state-specific border color (which I don't think it would fit well with the default theme) there's no guarantee it would fit well with any theme either and you'd probably still need to change them; same thing for users setting different colors on their own. I really don't see where you (or I) would be gaining anything with setting a state-specific border.

Also, sorry, I just noticed I gave you the wrong selector for the identity-box light before (skyList was an obvious mistake of course). #theFoxOnlyBetter-skyLights-identityBox is specific for the identity-box light, .skyLight would be a common selector for all lights.

[mcdavis941]

OK, I see what you mean (about border-color) and I can work with that, that'll be fine for me.

Your help has been really super-great, really exceptional, thanks for all this.

[Quicksaver]

No problem, I'll let you know when I add the version to the DOM tree.

[Quicksaver]

@mcdavis941, a couple of things.

First, a little heads up. To try and fix issue #53, I had to change a bit the way the Australis style round borders are shown. In short, you'll also have to style their background to the same color as the toolbars. I added this info to #24, at the bottom of the first post, should be pretty straightforward to do. You can use the latest beta 1.1.4b4 at https://addons.mozilla.org/firefox/addon/the-fox-only-better/versions/ to test this.

Most importantly, in that beta I've added the version information as attribute theFoxOnlyBetter-Version on the main window element. Hope it helps. :)