Australis Ico/Text, Text Only and more...

[Frank Lion]

As you all know, these options were removed from Australis not to reduce the customabilty options for users, but to reduce the enormous code bloat that they caused and to bring Firefox into the 21st c by reducing the huge code maintenance burden by having such little used features (I haven't checked but I presume Chrome doesn't have these options?) around.

Obviously, it is going to require a very complex extension to ever restore such features to Firefox!

Yeah? Try this -

Code: Select all

/*Frank Icon and Text Mode....*/
.toolbarbutton-text {
   display: -moz-box !important;
}   

Next time, don't believe the hype, wherever it comes from.

I'll let Patrick spend 30 seconds of his life to show you the Text Only mode.

[Aris]

Its a bit more than that to have a 'clean' text/icons+text mode.

[Frank Lion]

Its a bit more than that to have a 'clean' text/icons+text mode.

Well, the toolbars still think they are toolbar[mode="icons"] for one thing.

But I don't think the guy I wrote this for is too bothered about how clean the fix was. He can see the buttons text again.

Code: Select all

/*Frank Text Only Mode....*/
.toolbarbutton-text {
   display: -moz-box !important;
}   
.toolbarbutton-icon {
   display : none !important;}

[Frank Lion]

These are just random bits of .css that you may find useful on default -

Back button not round -

Code: Select all

/*Frank Back button not round...*/
#back-button > .toolbarbutton-icon {
  border-radius: 0px !important;}

(...a border radius of 6px will make it blend it better with the forward/urlbar)


Small Back button -

Code: Select all

/*Frank Small Back button...*/
#back-button > .toolbarbutton-icon {
  -moz-image-region: rect(0, 54px, 18px, 36px) !important;}

Back border matches Forward -

Code: Select all

/*Frank Back border matches Forward...*/
#back-button > .toolbarbutton-icon {
  padding-top: 2px !important;
  padding-bottom: 2px !important;}

The whole lot together -

Code: Select all

/*Frank Back button changes...*/
#back-button > .toolbarbutton-icon {
  border-radius: 0px !important;
  -moz-image-region: rect(0, 54px, 18px, 36px) !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;}

Finally, here's a couple from here - viewtopic.php?p=13195811#p13195811

Code: Select all

/*Frank Reduce Tab Height....*/
    .tabbrowser-tabs {
       height: 25px !important;
      min-height: 0px !important; }

(...not a 'pretty fix', but they didn't look that great to start with. Mind you, it was even worse before I edited it!)

Code: Select all

/*Frank Reduce Toolbar Height...*/
toolbarbutton {
  padding-top: 0px !important;
  padding-bottom: 0px !important;} 

....I seem to remember that Firefox default hasn't actually had a true 'Small Icons' mode for ages now, i.e. they are the same small icons, but with excess padding * removed. So, if that is the case, you should be able to get back to a small icon mode (I added the back button stuff as the original will stretch the toolbar height and also added the tabs toolbar stuff as I figure anyone using 'small icons' mode is actually trying to make the whole thing smaller and tighter) So...

Code: Select all

/*Frank Small Icon Mode...*/
#back-button > .toolbarbutton-icon {
  border-radius: 0px !important;
  -moz-image-region: rect(0, 54px, 18px, 36px) !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.tabbrowser-tabs {
       height: 25px !important;
      min-height: 0px !important; }
  
toolbarbutton {
  padding: 0px !important;} 

I've only done this stuff very quickly and only tested it on XP, but theme code-wise the differences between OS's or between various Win versions is not as great as people make out, so this should be OK for everyone. If it's not, then just tweak it a bit.


* seriously, when you code .css don't use padding unless hell freezes over first - use margin instead. You wouldn't believe the number of themers I've seen (and, er, 'assisted') who have had invisible positioning bugs on their stuff that were caused by them using padding all over the place.

[Steve196]

Thumbs up! Nice work, sir.

[joeg]

Wow, thanks Frank!

As - from what I've come to understand - the only person in the world who actually uses the "text only" setting, this is about as nice a Christmas present as I've ever received. When I have some time, I'm definitely going to download an Australis build and start to fool around with it.

Aris kindly put the text-only feature into his wonderful extension, too, but having Holly, in combination with having more students in my classes than ever before, have kept me from really looking at what can be done with Australis. I guess the concept is "if I close my eyes it'll go away."

Anyway, thanks again very much.

[Frank Lion]

I think this is a very clever .css code snippet (mainly because I didn't think of it ) -

Code: Select all

#addon-bar {
  -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar") !important;
  height: 22px !important;}

...instant additional toolbar. Useful for people who like to display a lot of bookmarks or extension buttons, I would think.

viewtopic.php?p=13227671#p13227671

Wow, thanks Frank! ...

...Anyway, thanks again very much.

No problem.

[Aris]

Hi Frank,

this add-on bar code won't last forever. Mozilla is going to remove it soon. Thats at least what they write inside browser.xul.

Anyway, this is minimally modified not to squeeze buttons and to remove status bars background color.
You see it, if you have QuickLocaleSwitcher or other status bar depending add-ons installed.

Code: Select all

#addon-bar {
  -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar") !important;
  height: 26px !important;}

#addon-bar #status-bar{
  -moz-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
}

[Frank Lion]

Hi Frank,

this add-on bar code won't last forever. Mozilla is going to remove it soon. Thats at least what they write inside browser.xul.

Hi,

Yep, I did know it was transitional, even I read the default theme coding sometimes. But I figured it would be useful to people until a single purpose custom toolbar extension comes along.

Thanks for the extra code, I only looked quickly at this one.

[Frank Lion]

To liven up this slightly dead spot between Christmas and New Year, I thought I would broaden the scope of this thread.

What we'll do is start with some basic .css code, evolve it, explain it and finally end up with an installable extension. Along the way, I'll cover briefly how css coding choices are made and what commands to use to achieve what you want and how to find IDs in the DOM Inspector. I'll probably also mention the design side and related matters.

More importantly, at the end of this inexperienced css coders should have a better idea of how to do their own stuff and also have a template extension that they can add any of their own userChrome.css snippets to and send direct to their friends and relatives (a LOT easier than explaining over the phone or Email to Granny how to create a chrome folder or even use Stylish, trust me) or even upload to the Addons site.

So, let's get started -

#1. Problem - When there is an active or paused download, the Download button shows a thin, mean line that is supposed to show the progress of that download, so how do you improve the visibility of that?

Mozilla devs tried, at one time, to widen that line and then realised that you either have a wide space showing all the time, even when nothing was being downloaded, or have the toolbars flexing back and forth, like a fiddler's elbow, every time the Download Button changed to that wider progress state. In the end, they gave up and had the progress the same width as the button and that's what we see today.

So, how should it have been done? Well, just by rotating the download progress container by 90*. The result follows and I've also added some download animation effects that amused me. None of this here was any great effort for me as it is only stuff I had already coded into my own theme stuff.

Do remember that in addition to installing, you'll need to right click 'Save Link As' the extension, as that will be the basis of your own extension (i.e. you throw my code away and replace it with your own)

Enough talking - https://addons.mozilla.org/en-US/firefo ... d-improve/

...have a play around with it and I'll be back later on and we'll run through all the code for it.

[patrickjdempsey]

This is a bit of code I came up with quite awhile ago which turns the download progress bar into the background for the entire downloads button. Personally I've always thought the times for downloads are complete BS, so I always hide them. This was readjusted for Firefox 26, not sure what it looks like in Australis as I haven't tested there:

Code: Select all

#downloads-indicator-counter { display:none; }
#downloads-indicator-anchor {padding:0px!important;}
#downloads-indicator-progress {
width:30px!important;
height:22px!important;
}

[Caspid]

This topic seems educational.
I have a question: how do I use the DOM Inspector to find selectors with pseudo-classes (e.g. #downloads-button:attention)?
Reason I ask: I'm trying to get the Downloads button to hide when it's not being used (there's no active download). So far I have this:

Code: Select all

#downloads-button:not([attention]) {
 display:none !important;
}

...but I can't find the selector for completed downloads, and I'd like to learn how.

Thanks in advance!

[Frank Lion]

This topic seems educational.
I have a question: how do I use the DOM Inspector to find selectors with pseudo-classes

In theory, you can't - https://bugzilla.mozilla.org/show_bug.cgi?id=185431 But, in practice, I do and I'll explain (in detail) how.

Reason I ask: I'm trying to get the Downloads button to hide when it's not being used (there's no active download). So far I have this:

Code: Select all

#downloads-button:not([attention]) {
 display:none !important;
}

...but I can't find the selector for completed downloads, and I'd like to learn how.

First, let's take a step back. This is a toolbarbutton, right? So, if this was, say, the #new-tab-button how would we hide that? Well, we wouldn't care about the hover/active/disabled states, we'd just hide #new-tab-button without anything fancy. Same here, so this gives us our first line -

Code: Select all

#downloads-button { 
   display: none !important;}

So, we code that line in, but comment it out for now, and find out all the states (p/cs) associated with it. -

Open the DOMi up and set it to 'Always on Top' (people either have this by default or use Power Menu, etc) and select #downloads-button so it's showing on the left and have the DOM Node view showing on the right.

Now click the actual Download button, what changes in DOM Node? Well, indicator - true and open -true suddenly appear, so there's 2 states we didn't know about. Any help to us for this? Nope. So, you now find something to download.....progress and counter appear in the DOM Node. I'm reckoning that seeing as how both came true together, then it doesn't matter which one we pick, the other will follow.

So, we code it up and test it by pausing (another selector) and cancelling -

Code: Select all

#downloads-button { 
   display: none ;
}

#downloads-button[progress] { 
   display: -moz-box !important;}   

It works and the job is done.

How you want this will look OK and not, as people would first think, be breaking the 'Fiddler's Elbow' rule. That only applies to unexpected flexing, when you expect it (like when you open the sidebar, etc) then it's fine.

Hopefully, this will give you the way to not only of how to find selectors, but also generally how to approach this type of stuff, i.e. your mindset.

[Frank Lion]

By now, some of you will be wondering what on Earth we were discussing, it was about this - https://addons.mozilla.org/en-US/firefo ... ctor-6622/

Forget those absolute crap 'Web Dev Tools', that is what gets the job done, both in UI (chrome) and webpage (content) .css and .js

Here's a lightning 'how to' from ages back - viewtopic.php?p=2547823#p2547823 and our KB does one and so does Mozilla (neither of which I've ever made it to the end of without nodding off.)

.css on webages and UI (content and chrome) works the same way - Russian dolls. There is a large box and inside that another and another and so on. The user sees, say, one button, I don't. Like the guy in the Matrix, I see a whole series of invisible nested boxes that lead to the box I want to get at and change...and that's what the DOMi does...it tells me the 'code name' of that box and, er, that's it. Well, that and all the other existing coding already associated with it...and other stuff.

However, in the same way that there might be 6 Russian dolls with red ribbon in a nest of a 1000, there might also might also be a few .progress-remainder scattered around (there are) in a UI. That's why coders often need to be very specific about which one they want to change....and now you know why you see lines of code like this -

#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder

See?

[Caspid]

"You're a wizard, Frank." -Gandalf

Thanks for teaching me to fish.

I'll bother you again when something comes up