684450 - Remove stop/go/reload button affordance and streamline other location bar icons

Status: RESOLVED FIXED

(Firefox :: Theme, enhancement)

Description

[Stephen Horlander [:shorlander]]

Attachment: Screenshot (Pinstripe) - 01

Bug 673481 removed the separator from the at rest stop/go/reload button. This bug is for cleaning up that area by:

- Updating icons with a consistent style
- Adding a subtle history dropdown icon
- Adjusting for consistent spacing between icons
- Removing button affordance on hover and pressed states
- De-emphasize the history dropdown
- Change starred icon to have filled appearance instead of pressed appearance

Comment 1

[Stephen Horlander [:shorlander]]

Attachment: WIP Patch - 01

WIP patch. Only has Pinstripe.

Comment 2

[Stephen Horlander [:shorlander]]

Attachment: Patch - 02

Comment 3

[Stephen Horlander [:shorlander]]

Attachment: Screenshot - 02

Comment 4

[Stephen Horlander [:shorlander]]

Landed on UX for testing: https://hg.mozilla.org/projects/ux/rev/867b27eb486c

Comment 5

[Stephen Horlander [:shorlander]]

Comment on attachment 558718 [details] [diff] [review]
Patch - 02

I was having some trouble getting the icons to have full height in Winstripe so I removed the padding on the #urlbar and negative margins on the #identity-box and the go/reload/stop toolbarbutton. It retains the same height and didn't seem to have any drawbacks.

Comment 6

[:Margaret Leibovic]

(In reply to Stephen Horlander from comment #5) 
> I was having some trouble getting the icons to have full height in Winstripe
> so I removed the padding on the #urlbar and negative margins on the
> #identity-box and the go/reload/stop toolbarbutton. It retains the same
> height and didn't seem to have any drawbacks.

I remember trying to remove the padding and negative margins in bug 634065, and I think we need to also remove the padding from the search box if we do that. See 634065 comment 56.

Comment 7

[Dão Gottwald [:dao]]

Comment on attachment 558718 [details] [diff] [review]
Patch - 02

what Margaret said

Comment 8

[Stephen Horlander [:shorlander]]

Attachment: Patch - 03

Comment 9

[Stephen Horlander [:shorlander]]

Attachment: Patch - 04

Comment 10

[Dão Gottwald [:dao]]

Comment on attachment 561271 [details] [diff] [review]
Patch - 04

>--- a/browser/themes/gnomestripe/browser/browser.css
>+++ b/browser/themes/gnomestripe/browser/browser.css

> .urlbar-icon {
>   cursor: pointer;
>+  padding: 0 2px;
> }

>-#go-button {
>+#go-button,
>+#urlbar > toolbarbutton {
>+  -moz-appearance: none;
>+  border: none;
>+  padding: 0 3px;
>+}
>+
>+#go-button,
>+#urlbar-go-button {
>   padding: 3px 2px 2px 2px;
>   list-style-image: url("chrome://browser/skin/Go-arrow.png");
> }

The Go arrow consumes a smaller horizontal space than the other icons, it needs more padding.

The lack of hover feedback feels strange, I think we should add cursor:pointer like we do for .urlbar-icon.

Comment 11

[Dão Gottwald [:dao]]

(In reply to Dão Gottwald [:dao] from comment #10)
> Comment on attachment 561271 [details] [diff] [review]
> Patch - 04
> 
> >--- a/browser/themes/gnomestripe/browser/browser.css
> >+++ b/browser/themes/gnomestripe/browser/browser.css
> 
> > .urlbar-icon {
> >   cursor: pointer;
> >+  padding: 0 2px;
> > }
> 
> >-#go-button {
> >+#go-button,
> >+#urlbar > toolbarbutton {
> >+  -moz-appearance: none;
> >+  border: none;
> >+  padding: 0 3px;
> >+}
> >+
> >+#go-button,
> >+#urlbar-go-button {
> >   padding: 3px 2px 2px 2px;
> >   list-style-image: url("chrome://browser/skin/Go-arrow.png");
> > }
> 
> The Go arrow consumes a smaller horizontal space than the other icons, it
> needs more padding.

It's probably simpler if you drop the padding and set width:22px on all buttons.

Comment 12

[bogas04]

Addon Installation notification is messed up 
https://bug674744.bugzilla.mozilla.org/attachment.cgi?id=561643

Comment 13

[Stephen Horlander [:shorlander]]

(In reply to bogas04 from comment #12)
> Addon Installation notification is messed up 
> https://bug674744.bugzilla.mozilla.org/attachment.cgi?id=561643

Thanks! Fixed in latest patch.

Comment 14

[Stephen Horlander [:shorlander]]

Attachment: Patch - 05

(In reply to Dão Gottwald [:dao] from comment #10)
> The Go arrow consumes a smaller horizontal space than the other icons, it
> needs more padding.
> 
> The lack of hover feedback feels strange, I think we should add
> cursor:pointer like we do for .urlbar-icon.

The lack of hover is strange. Although switching to the pointer also seems kind of strange/inconsistent.


(In reply to Dão Gottwald [:dao] from comment #11)
> It's probably simpler if you drop the padding and set width:22px on all
> buttons.

Done.

Comment 15

[Dão Gottwald [:dao]]

Comment on attachment 562162 [details] [diff] [review]
Patch - 05

>--- a/browser/themes/gnomestripe/browser/browser.css
>+++ b/browser/themes/gnomestripe/browser/browser.css

> #urlbar-icons {
>   -moz-box-align: center;
>-  -moz-padding-end: 2px;
> }
> 
> .urlbar-icon {
>   cursor: pointer;
>+  padding: 0 3px;
> }

>-#go-button {
>-  padding: 3px 2px 2px 2px;
>+#go-button,
>+#urlbar > toolbarbutton {
>+  -moz-appearance: none;
>+  padding: 0;
>+  border: none;
>+  cursor: pointer;
>+}

#go-button is an <image> and an .urlbar-icon, which means -moz-appearance:none, border:none and cursor:pointer are redundant for it. The only affect here is that you're removing the padding, which I think you don't actually want. I think you either want to let it keep the original .urlbar-icon padding or add padding-top/bottom in order to enlarge the hit region.

Comment 16

[Dão Gottwald [:dao]]

Comment on attachment 562162 [details] [diff] [review]
Patch - 05

I'll just quickly address my previous comment myself.

Comment 17

[Dão Gottwald [:dao]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/9cd6b77fad86
https://hg.mozilla.org/integration/mozilla-inbound/rev/8d288ef8e9d3

Comment 18

[Matt Brubeck (:mbrubeck)]

https://hg.mozilla.org/mozilla-central/rev/8d288ef8e9d3
https://hg.mozilla.org/mozilla-central/rev/9cd6b77fad86

Comment 19

[Siddhartha Dugar [:sdrocking]]

Can close Bug 593684

Comment 20

[Stephen Horlander [:shorlander]]

(In reply to Dão Gottwald [:dao] from comment #16)
> Comment on attachment 562162 [details] [diff] [review] [diff] [details] [review]
> Patch - 05
> 
> I'll just quickly address my previous comment myself.

Thank you!

Comment 21

[Dão Gottwald [:dao]]

For the addon-compat keyword to be useful, you need to explain what kind of extensions are effected here...

Comment 22

[Stephen Horlander [:shorlander]]

(In reply to Dão Gottwald [:dao] from comment #21)
> For the addon-compat keyword to be useful, you need to explain what kind of
> extensions are effected here...

Sorry, I was still investigating :)

It looks like extensions that add items to the #urlbar-icon hbox are affected by this. So far I have only found Omnibar and Read It Later.

Both of them are adding their own padding, which should be fine, but for some reason both of them are adding the .urlbar-icons class to the #urlbar-icon hbox.

Comment 23

[u420019]

I have noticed that the dropdown arrow has no tooltipp text.

Comment 24

[Siddhartha Dugar [:sdrocking]]

(In reply to Jukens from comment #23)
> I have noticed that the dropdown arrow has no tooltipp text.

It doesn't have the tool tip on Firefox 6 also. So nothing related to this bug.

Comment 26

[u420019]

(In reply to sdrocking from comment #24)
> (In reply to Jukens from comment #23)
> > I have noticed that the dropdown arrow has no tooltipp text.
> 
> It doesn't have the tool tip on Firefox 6 also. So nothing related to this
> bug.

I know that it doesn't have tool tip on Firefox 6 also. Is there a bug related to this topic? When not, this should be implemented IMHO. All the other buttons have tooltips. Only this button has no tool tip. Just to say.

Comment 27

[Vova Olar]

If star icon not shown (new tab) and present other extension icons (like Read It Later) - hovering them produces background light at place where star icon should be.

Comment 28

[Vova Olar]

Update. Even when star icon is shown hovering any other icon in location bar will produce star icon highlight.
Is there any bug to carry this issue or I should create?

Comment 29

[Dão Gottwald [:dao]]

(In reply to Vova Olar from comment #28)
> Update. Even when star icon is shown hovering any other icon in location bar
> will produce star icon highlight.
> Is there any bug to carry this issue or I should create?

Bug 691100. Please report this to the author of Read It Later.

Comment 30

[Vova Olar]

I say about blue hover background. And not only with Read It Later. It can be reproduced with any other extension that put it icon to location bar, for example XClear. When I hover any icon in location bar - blue background appears at place where bookmark star icon should be (on blank page). Can anyone confirm?