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

RESOLVED FIXED in Firefox 9

Status

()

Firefox
Theme
--
enhancement
RESOLVED FIXED
6 years ago
9 months ago

People

(Reporter: shorlander, Assigned: shorlander)

Tracking

(Depends on: 3 bugs)

Trunk
Firefox 9
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments, 5 obsolete attachments)

(Assignee)

Description

6 years ago
Created attachment 558040 [details]
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
(Assignee)

Comment 1

6 years ago
Created attachment 558041 [details] [diff] [review]
WIP Patch - 01

WIP patch. Only has Pinstripe.
(Assignee)

Updated

6 years ago
Assignee: nobody → shorlander
(Assignee)

Comment 2

6 years ago
Created attachment 558718 [details] [diff] [review]
Patch - 02
Attachment #558041 - Attachment is obsolete: true
(Assignee)

Comment 3

6 years ago
Created attachment 558725 [details]
Screenshot - 02
Attachment #558040 - Attachment is obsolete: true
(Assignee)

Comment 4

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

Updated

6 years ago
Blocks: 686428
(Assignee)

Comment 5

6 years ago
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.
Attachment #558718 - Flags: review?(dao)
(Assignee)

Updated

6 years ago
Attachment #558718 - Attachment description: WIP Patch - 02 → Patch - 02

Comment 6

6 years ago
(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 on attachment 558718 [details] [diff] [review]
Patch - 02

what Margaret said
Attachment #558718 - Flags: review?(dao)

Updated

6 years ago
Severity: normal → enhancement
Version: unspecified → Trunk
(Assignee)

Comment 8

6 years ago
Created attachment 561258 [details] [diff] [review]
Patch - 03
Attachment #558718 - Attachment is obsolete: true
(Assignee)

Comment 9

6 years ago
Created attachment 561271 [details] [diff] [review]
Patch - 04
Attachment #561258 - Attachment is obsolete: true
Attachment #561271 - Flags: review?(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.
Attachment #561271 - Flags: review?(dao) → review-
(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

6 years ago
Addon Installation notification is messed up 
https://bug674744.bugzilla.mozilla.org/attachment.cgi?id=561643
(Assignee)

Comment 13

6 years ago
(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.
(Assignee)

Comment 14

6 years ago
Created attachment 562162 [details] [diff] [review]
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.
Attachment #561271 - Attachment is obsolete: true
Attachment #562162 - Flags: review?(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.
Attachment #562162 - Flags: review?(dao) → review-
Comment on attachment 562162 [details] [diff] [review]
Patch - 05

I'll just quickly address my previous comment myself.
Attachment #562162 - Flags: review- → review+
https://hg.mozilla.org/integration/mozilla-inbound/rev/9cd6b77fad86
https://hg.mozilla.org/integration/mozilla-inbound/rev/8d288ef8e9d3
Target Milestone: --- → Firefox 9
https://hg.mozilla.org/mozilla-central/rev/8d288ef8e9d3
https://hg.mozilla.org/mozilla-central/rev/9cd6b77fad86
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
Can close Bug 593684

Updated

6 years ago
Blocks: 593684
(Assignee)

Comment 20

6 years ago
(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!
Depends on: 689079
(Assignee)

Updated

6 years ago
Keywords: addon-compat
For the addon-compat keyword to be useful, you need to explain what kind of extensions are effected here...
(Assignee)

Comment 22

6 years ago
(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

6 years ago
I have noticed that the dropdown arrow has no tooltipp text.
(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.
Depends on: 691100

Updated

6 years ago
Keywords: addon-compat

Updated

6 years ago
Blocks: 691701

Updated

6 years ago
Blocks: 593350

Updated

6 years ago
Duplicate of this bug: 593293

Updated

6 years ago
Blocks: 593392
Depends on: 690910

Comment 26

6 years ago
(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

5 years ago
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

5 years ago
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?
(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

5 years ago
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?

Updated

9 months ago
Depends on: 1292877
You need to log in before you can comment on or make changes to this bug.