609559 - Addon Bar styling and polishing

Status: RESOLVED DUPLICATE of bug 616018

(Firefox :: Theme, defect)

Description

[Paul [pwd]]

User-Agent:       Mozilla/5.0 (Windows NT 6.1; rv:2.0b8pre) Gecko/20101103 Firefox/4.0b8pre
Build Identifier: Mozilla/5.0 (Windows NT 6.1; rv:2.0b8pre) Gecko/20101103 Firefox/4.0b8pre

The proposal can be broken down into three parts

1. Lock the toolbar height at 23px.
2. Tweak the button styles
3. Implement glass for those OS's that support it.

1. Having played with the Addon Toolbar height a bit. I've learned that 18px isn't a reasonable height. By locking at 18px you restrict what can be placed there and make it look squashed. However the current height is certainly too large. At 23px you have a bit of wiggle-room for button styling and placing extraordinary objects like the Awesome Bar in there. It also conforms with the UX teams goals to have it as small as possible while keeping it usable.

The userchrome style I'm using for this is as follows:
@-moz-document url(chrome://browser/content/browser.xul) {
  #addon-bar {
    padding: 0px !important;
    height: 23px !important;
    margin: 1px 0 0 -2px !important;
  }

  #main-window[sizemode="maximized"] #addon-bar {
    margin: 0 1px 0 -1px !important;
  }
}

2. Currently the button styles are too clunky for a smaller space. The exude presence based on size. However, if you lock the toolbar height, they quickly become obtrusive. The goal is to keep the button styling as that allows for greater customisation, usability and innovation. The alternative is to remove the button styling and in doing that you lose the greatest gains of moving to a toolbar from a status bar.

The userchrome style I'm using for this is as follows:
@-moz-document url(chrome://browser/content/browser.xul){
  #addon-bar toolbarbutton {
    margin: 0 0 0 1px !important;
    border-radius: 3px !important;
    padding: 0 1px !important;
    box-shadow: none !important;
    min-height: 18px !important;
  }

  #addon-bar dropmarker,
  #addon-bar #zoom-controls {
    margin: 0 0 0 0 !important;
    border-radius: 3px !important;
    padding: 0 1px !important;
    box-shadow: none !important;
    min-height: 18px !important;
  }
}

3. Lastly is the glass. That is wholeheartedly just an aesthetics thing. It looks good, feels good and makes Firefox feel modern as well as integrated. It also gives the buttons a greater stand-out effect

The userchrome style I'm using for this is as follows:
@-moz-document url(chrome://browser/content/browser.xul){
  #browser-bottombox, #status-bar {
    -moz-appearance: none !important;
    background: transparent !important;
    -moz-border-radius: 0px !important;
    color: #fff !important;
  }
}

I'm pretty sure there are better ways to do all of what I achieve above. But they help to illustrate the point and provide a real demonstration of what I'm proposing.

Reproducible: Always

Comment 1

[Paul [pwd]]

Attachment: Mockup of proposal

Comment 2

[Paul [pwd]]

Added Boriss as she is the UX lead for the Addon Bar I believe?

Comment 3

[Thomas Bertels]

For what it's worth, the inactive state on attachment 479351 [details] looks better to me.

Anyway, by locking the toolbar height at 23px, will its full height be 23px (like the old status bar)?
The current full height (last nightly build) is bigger (around 25px).

Comment 4

[Paul [pwd]]

(In reply to comment #3)
> For what it's worth, the inactive state on attachment 479351 [details] looks better to
> me.
> 
> Anyway, by locking the toolbar height at 23px, will its full height be 23px
> (like the old status bar)?
> The current full height (last nightly build) is bigger (around 25px).

Based on attachment 488154 [details] it would be 23px. But based on attachment 479351 [details] I think you could get it down even smaller (18px) as there's no button styling. Dao seems to be pushing for something akin to that attachment 479351 [details].

Comment 5

[Paul [pwd]]

This seems to have fallen completely under the UX Team radar, thus gonna dupe it to it's nearest fit.