462640 - Merge stop and reload controls into one visual form

Status: RESOLVED WONTFIX

(Firefox :: Theme, defect)

Description

[Alex Faaborg [:faaborg] (Firefox UX)]

In the OS X Firelight theme we should merge the stop and reload controls into a single visual form to make the theme visually simpler and a little more streamlined.  The artwork landed as part of Firefox 3:

http://mxr.mozilla.org/seamonkey/source/browser/themes/pinstripe/browser/Toolbar.png

This bug just requires css changes, relying on adjacent selectors to make sure the buttons are next to each other in the user's toolbar configuration.

Comment 1

[Dão Gottwald [:dao]]

I would prefer bug 343396.

Comment 2

[Dão Gottwald [:dao]]

(In reply to comment #1)
> I would prefer bug 343396.

Because it's visually even simpler and fixes it for all themes.

Comment 3

[Alex Faaborg [:faaborg] (Firefox UX)]

Yeah, I think I would prefer that as well, although recently I've been liking
the stop/go merging in Chrome even more, since the flashing control is way out
in your distant peripheral vision and the interface doesn't feel so spastic.

Under the assumption that we still can't integrate or move controls (which I am
pretty sure is the case for this release), I think this bug still represents a
visual win, even if it doesn't represent the ideal solution.

Comment 4

[Alex Faaborg [:faaborg] (Firefox UX)]

Attachment: Example

It would look like this

Comment 5

[Shawn Wilsher :sdwilsh]

The problem here is that there is no "comes before" selector in CSS (there is "comes after").  We'd have to use JS to get the desired effect, and that will impact perf.  Now, we can do some tricks with the images.  I wrote a little css with stylish to get an effect, while not good, shows that with different images we could possibly make this work:

#reload-button + #stop-button {
  /** starts at 664, goes to 731 */
  -moz-image-region: rect(0px, 731px, 23px, 697px) !important;
  margin-left:-16px !important;
  padding-left:0px !important; /** cannot be negative? */
}

Comment 6

[Markus Stange [:mstange]]

I made similar experiments a while ago and it turned out rather ugly. :(

Even with your negative-margin trick, problems arise:
 1. Is the reload button still clickable if it's hidden by the stop button?
 2. We'd need lots of images for all combination of states (enabled, disabled,
    pressed) of the two buttons.

I'll update the patch that I have and attach it here, but it's not really pretty and not ready for review.

Comment 7

[Markus Stange [:mstange]]

Attachment: ugly patch v1

This patch basically reorganizes the whole toolbar stuff. I made a new Toolbar.png where I separated buttons and icons and wrote a script that generates the necessary CSS automatically.
This patch also merges the history/bookmarks and the cut/copy/paste buttons, in all possible combinations. The resulting selectors are very long, so this will probably impact perf...
Moreover, it makes the clickable region of the buttons smaller in order to extend the space where the window is draggable. And the toolbar buttons get a proper "inactive window" appearance.

Comment 8

[Dão Gottwald [:dao]]

Obviously this isn't going to happen, now that bug 343396 is fixed.