[Linux] New toolbar button style

RESOLVED WONTFIX

Status

()

Firefox
Theme
--
enhancement
RESOLVED WONTFIX
8 years ago
5 months ago

People

(Reporter: shorlander, Assigned: tymerkaev)

Tracking

Trunk
All
Linux
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(2 attachments, 18 obsolete attachments)

29.04 KB, image/png
Details
15.99 KB, application/xhtml+xml
Details
(Reporter)

Description

8 years ago
Created attachment 451658 [details]
Linux Toolbar Button Style

Implement new toolbar style for Linux. Using gradients and system color to mesh with the system theme.
(Reporter)

Comment 1

8 years ago
Created attachment 451661 [details]
CSS/SVG Example

This is sort of what I had in mind. If you are on Linux and change the theme this changes color to adapt. The glyphs aren't centered and it has some issues with dark themes.
(Reporter)

Updated

8 years ago
Depends on: 572485
(Reporter)

Updated

8 years ago
Blocks: 572482
Just tested this and mostly got great results. I also like this concept for other toolbar icons (bookmarks icon, as seen on the first attachment).

The only themes were it seems to cause problems are the a11y ones (LargePrint) but maybe those should have special handling anyway (toolbars should be larger etc)
(Reporter)

Updated

8 years ago
Assignee: nobody → tymerkaev
(Assignee)

Updated

8 years ago
Status: NEW → ASSIGNED
(Assignee)

Comment 3

8 years ago
Created attachment 472358 [details] [diff] [review]
patch (draft)

Things in this patch:

1. I've removed both toolbar.png and toolbar-small.png and used gtk-save, tab-new and window-new instead. Remaining items (bookmarks and history) were moved to their right place (/places).

2. New toolbar button style won't apply to mode Icons + Text.

3. Icons scaled to 16x16 px for now.

4. I haven't tested it, and it may looks wrong somewhere.
Attachment #472358 - Flags: ui-review?(shorlander)
Attachment #472358 - Flags: review?(dao)
I have yet to test the patch but:

>> 1. I've removed both toolbar.png and toolbar-small.png and 
>> used gtk-save, tab-new and window-new instead.

You don't want to do this
gtk-save: you want to use this for the downloads button, right? It is not meant for this.
tab-new and window-new: these only exist in freedesktop themes. Firefox does not depend on a freedesktop theme, so it can only use GTK stock icons
BTW the patch didn't apply cleanly when I tried it. I think you should drop the part listed as "1"... if my information is correct we will have new SVG based icons for all the toolbar stuff anyway.

Thanks for working on this btw, I'll be happy to test new versions of the patch as they become available.
(Assignee)

Updated

8 years ago
Attachment #472358 - Attachment is obsolete: true
Attachment #472358 - Flags: ui-review?(shorlander)
Attachment #472358 - Flags: review?(dao)
(Assignee)

Comment 6

8 years ago
Created attachment 472593 [details] [diff] [review]
patch
Attachment #472593 - Flags: ui-review?(michael.monreal+moz)
Attachment #472593 - Flags: review?(dao)
Created attachment 472606 [details]
Screenshot with patch 472593

Ok here's a screenshot of the current patch applied.

- hover states looks a bit weird
- buttons are too high (they should have the same high as awesome/search bars)
- alltabs and tabcandy buttons are not supposed to have button look I think?
- a lot of the "good look" depends on the adaptive color glyphs used instead of real icons

Big toolbar mode:
- forward button too big and not attached to back
(Assignee)

Comment 8

8 years ago
(In reply to comment #7)
> - hover states looks a bit weird

Screenshot?
> - buttons are too high (they should have the same high as awesome/search bars)

Will be fixed.
> - alltabs and tabcandy buttons are not supposed to have button look I think?

yes
> - a lot of the "good look" depends on the adaptive color glyphs used instead of real icons

It's bug 572485.
> Big toolbar mode:
> - forward button too big and not attached to back

Will be fixed.
Created attachment 472612 [details]
Button states with patch 472593

Here's a screenshot of the normal/hover/pressed states of the large and small nav buttons. Is there a mockup on how this is supposed to look like? Right now it looks like as if the button comes out a bit on hover. Maybe it only looks weird because the current icons don't reflect this and stay in place (should be better with the glyps).

Take a look at the large back button in pressed state, you can see a white half-circle there which doesn't look nice.

Additionally there seems to be a bug with the pressed state (which could be a toolkit bug): press a button, keep it pressed and move the mouse away, then release (so the button is not actually pressed). Move the mouse back to a button: the hover state now looks like pressed state.
Created attachment 472613 [details]
Line between small back/forward

I think there should be only a single line between the back/forward buttons in small size. Right now the right button is drawn with corners which looks weird (screenshot).
(Assignee)

Comment 11

8 years ago
Comment on attachment 472593 [details] [diff] [review]
patch

I'll post new version of patch tomorrow.
Attachment #472593 - Attachment is obsolete: true
Attachment #472593 - Flags: ui-review?(michael.monreal+moz)
Attachment #472593 - Flags: review?(dao)
(Assignee)

Comment 12

8 years ago
Created attachment 472666 [details] [diff] [review]
patch v2
Attachment #472666 - Flags: ui-review?(michael.monreal+moz)
Attachment #472666 - Flags: review?(dao)
Attachment #472666 - Flags: feedback?(shorlander)
Created attachment 472729 [details]
Screenshot patch v2

Good work!

general:
- button outline is "fat" now, should be one pixel I think (looks a bit like off-grid vector rendering?)
- buttons are still to high but that may very well be due to the previous problem?
- no hover effect anymore?

large:
- back is no longer a circle and draws out of the toolbar
- forward needs to reach a bit more "below" the back button (could be related to the non-circle thing)

small:
- prev/next separator has strange pixels to the right side of either end
- prev/next separator is darker than the outline (should be same color?)
(Assignee)

Updated

8 years ago
Attachment #472666 - Attachment is obsolete: true
Attachment #472666 - Flags: ui-review?(michael.monreal+moz)
Attachment #472666 - Flags: review?(dao)
Attachment #472666 - Flags: feedback?(shorlander)
(Assignee)

Comment 14

8 years ago
Created attachment 473452 [details] [diff] [review]
patch v3
Attachment #473452 - Flags: ui-review?(michael.monreal+moz)
Attachment #473452 - Flags: review?(dao)
Attachment #473452 - Flags: feedback?(shorlander)
The large back button has the corrent size/shape again but all other comments for patch v2 listed above are still valid.
Created attachment 473471 [details]
Screenshots with and w/o patch v3

Remember the tab sizing issue andreasn and me were talking about the other day? Turns out your patch fixes the issue - kind of.

Please have a look at the collection of screenshots. The left shows current tip without any patch, the right has v3 applied. As you can see, the app tabs look fine on the top right but look bad again when opening the toolbar editor. This seems to be because the buttons on the right get button look and enlarge the tab bar. Normal tabs just grow from 24 to 27 pixels, but app tabs don't do the same for some reason.

Can we make tabs look always good and not have the tab bar resize when opening the editor?
(Assignee)

Updated

8 years ago
Summary: [Linux] New Toolbar Button Style → [Linux] New toolbar button style
(Assignee)

Updated

8 years ago
Attachment #473452 - Attachment is obsolete: true
Attachment #473452 - Flags: ui-review?(michael.monreal+moz)
Attachment #473452 - Flags: review?(dao)
Attachment #473452 - Flags: feedback?(shorlander)
(Assignee)

Comment 17

8 years ago
Created attachment 475085 [details] [diff] [review]
patch v4
Attachment #475085 - Flags: review?(dao)
Attachment #472606 - Attachment is obsolete: true
Attachment #472612 - Attachment is obsolete: true
Attachment #472613 - Attachment is obsolete: true
Attachment #472729 - Attachment is obsolete: true
Attachment #473471 - Attachment is obsolete: true
(Assignee)

Comment 18

8 years ago
Created attachment 475579 [details] [diff] [review]
patch with changed dropmarker

Default dropmarkers on Linux have different size and may broke width and height of toolbar buttons. Own dropmarker will fix this issue.
Attachment #475085 - Attachment is obsolete: true
Attachment #475579 - Flags: ui-review?(shorlander)
Attachment #475579 - Flags: review?(dao)
Attachment #475085 - Flags: review?(dao)
(Assignee)

Comment 19

8 years ago
Comment on attachment 475579 [details] [diff] [review]
patch with changed dropmarker

Sorry, forget about jar.mn changes.
Attachment #475579 - Attachment is obsolete: true
Attachment #475579 - Flags: ui-review?(shorlander)
Attachment #475579 - Flags: review?(dao)
(Assignee)

Comment 20

8 years ago
Created attachment 476236 [details] [diff] [review]
patch v5

Fixed all previous comments.
Attachment #476236 - Flags: ui-review?(shorlander)
Attachment #476236 - Flags: review?(dao)
(Assignee)

Updated

8 years ago
Attachment #476236 - Attachment is obsolete: true
Attachment #476236 - Flags: ui-review?(shorlander)
Attachment #476236 - Flags: review?(dao)
(Assignee)

Comment 21

8 years ago
Created attachment 476237 [details] [diff] [review]
patch v5

Fixed hover state.
Attachment #476237 - Flags: ui-review?(shorlander)
Attachment #476237 - Flags: review?(dao)
No hover and pressed state for me anymore using the latest patch.
Created attachment 476241 [details]
Screenshot v5

Also, back/forward in big toolbar mode is still broken and the arrow inside the url entry (right side) doesn't look right (=> Screenshot v5)
(Assignee)

Updated

8 years ago
Attachment #476237 - Attachment is obsolete: true
Attachment #476237 - Flags: ui-review?(shorlander)
Attachment #476237 - Flags: review?(dao)
This seems to be stalled... where is the problem, what remains to be done?

Comment 25

8 years ago
Will we see the new buttons for firefox 4.0? Or is this bug dead...
(Assignee)

Comment 26

8 years ago
Created attachment 490424 [details] [diff] [review]
patch v6
Attachment #490424 - Flags: review?(dao)
(Assignee)

Updated

8 years ago
Attachment #490424 - Attachment is obsolete: true
Attachment #490424 - Flags: review?(dao)
(Assignee)

Comment 27

8 years ago
Created attachment 492063 [details] [diff] [review]
patch v6

Forgot to update some rules.
Attachment #492063 - Flags: review?(dao)
this patch needs a small fix in jar.nm to say   
skin/classic/browser/dropdown-arrow.svg

instead of
skin/classic/browser/dropdown-arrow.png
(Assignee)

Comment 29

8 years ago
(In reply to comment #28)
> this patch needs a small fix in jar.nm to say   
> skin/classic/browser/dropdown-arrow.svg
> 
> instead of
> skin/classic/browser/dropdown-arrow.png

Ooops! Yes, thanks for checking.
(Assignee)

Updated

8 years ago
Attachment #492063 - Attachment is obsolete: true
Attachment #492063 - Flags: review?(dao)
(Assignee)

Comment 30

8 years ago
Created attachment 492349 [details] [diff] [review]
patch v7
Attachment #492349 - Flags: review?(dao)
Whiteboard: [target-betaN]
(Assignee)

Updated

7 years ago
Attachment #492349 - Attachment is obsolete: true
Attachment #492349 - Flags: review?(dao)
(Assignee)

Comment 31

7 years ago
Created attachment 514785 [details] [diff] [review]
patch v8
Attachment #476241 - Attachment is obsolete: true
Attachment #514785 - Flags: review?(dao)

Updated

7 years ago
Whiteboard: [target-betaN]

Comment 32

7 years ago
These new Toolbar Buttons look great! I'm so happy to see these for Linux.

Hopefully these will also address the size issues that currently exist in the GTK Toolbars on Linux: the Large buttons are way too big; the Small buttons are too small. 

The size of the Toolbar buttons on Microsoft Windows Firefox are perfect. Hopefully these new buttons for Linux will be the same size as the ones on Windows.

Comment 33

7 years ago
How much longer before these new Toolbar Buttons are implemented?

Comment 34

7 years ago
Applying patch v8 produces a failure in some areas.
(Assignee)

Updated

7 years ago
Attachment #514785 - Attachment is obsolete: true
Attachment #514785 - Flags: review?(dao)

Comment 35

6 years ago
Can I get some more details about what this bug is exactly about?
- gradient around the buttons
- using SVG icons that will be provided in bug 572485

Do we have some more specs about what the buttons should look like?
What about :hover/:active/[checked]/[disabled]?

What about the round back button?

Azat, do you still want to work on that? I can try to take over if you want.
Some things to consider:

- Stephen appears to be going back and forth on permanent borders vs. borders on hover in his mockups for Windows. I tend to think that transient borders make the navigation toolbar visually simpler and are preferable for providing larger hit regions. They're also more common on Linux. To justify a switch, I think we'd need a bunch of pretty strong reasons.

- We're currently using stock icons for close OS integration. We can't really get more integrated than that. However, stock icons and the proposed button style don't really work together.

- The round back button lost most of its value since the back button is the only button over there. No need to make it more pronounced.

Based on these points, I don't think this bug should be pushed further at this time.

Comment 37

6 years ago
(In reply to Dão Gottwald [:dao] from comment #36)
> Some things to consider:
> 
> - We're currently using stock icons for close OS integration. We can't
> really get more integrated than that. However, stock icons and the proposed
> button style don't really work together.

Maybe we should be a little less integrated to be a little more pretty?

> - The round back button lost most of its value since the back button is the
> only button over there. No need to make it more pronounced.

The round back button will make Firefox look more like Firefox.

Not sure this is the best place to talk about this. I started a thread on d-a-f:
https://groups.google.com/d/msg/mozilla.dev.apps.firefox/BZEvBh9pxYk/pn7Nmlz1erUJ
Define pretty? Why should pretty and integrated be opposites? On Ubuntu, the most prominent icon, that of the back button, is a straightforward orange arrow that appears to be done by a graphics designer. Looks pretty to me.

Comment 39

6 years ago
(In reply to Dão Gottwald [:dao] from comment #38)
> Define pretty?

I think our designers express what is pretty by creating mockups. In all of the linux mockup I saw so far, we never get the stock icon, but the round icon.

> Why should pretty and integrated be opposites? On Ubuntu, the
> most prominent icon, that of the back button, is a straightforward orange
> arrow that appears to be done by a graphics designer. Looks pretty to me.

Here we are comparing a generic back icon to a button that has been specifically designed for Firefox.

The Ubuntu designers have to create icons that work everywhere in any condition. We have something more specific that has been build especially for Firefox. We have built a recognizable button for Firefox that is designed to work well with the conditional forward button and the URL bar.

Also, you get something decent on Ubuntu with the right theme. Switch to another Window Manager, another GTK theme or another distro, you'll get something different.

With the stock icon, we can't make sure that the user will get something solid and slick.
In the past, Ubuntu designers have in fact optimized the back/forward/stop/reload/home icons with Firefox in mind, as it's obviously an important application for them.

I realize there are many themes out there that any reasonable designer would consider ugly. But then nobody is forced to use those. Tastes differ. If people are happy with their themes, I don't see this as a problem.

Comment 41

6 years ago
(In reply to Dão Gottwald [:dao] from comment #40)
> In the past, Ubuntu designers have in fact optimized the
> back/forward/stop/reload/home icons with Firefox in mind, as it's obviously
> an important application for them.

But they have to make it work for other applications too.
They are limited. We are not.

> I realize there are many themes out there that any reasonable designer would
> consider ugly. But then nobody is forced to use those. Tastes differ. If
> people are happy with their themes, I don't see this as a problem.

How do you know they will be happy with the Firefox back button?

As a Linux user, I don't choose my theme based on the look of the Firefox back button, but on how look my whole system. I am happy with the overall look, but not with some part of Firefox (back button, close button and add-tab button).

From my personal experience (and I'd be happy to gather some more serious data about this): I hear a lot of people complaining about the look of Firefox on Linux compared to Windows and Mac - and I believe that Linux users (and me first!) would prefer to have our Firefox-specific icons rather than the generic ones, whatever their theme is.

I will talk to the Ubuntu folks and see what they think.
They probably know better than me what's good for their users :)
(In reply to Paul Rouget [:paul] from comment #39)
> (In reply to Dão Gottwald [:dao] from comment #38)
> > Define pretty?
> 
> I think our designers express what is pretty by creating mockups. In all of
> the linux mockup I saw so far, we never get the stock icon, but the round
> icon.
> 
> > Why should pretty and integrated be opposites? On Ubuntu, the
> > most prominent icon, that of the back button, is a straightforward orange
> > arrow that appears to be done by a graphics designer. Looks pretty to me.
> 
> Here we are comparing a generic back icon to a button that has been
> specifically designed for Firefox.
> 
> The Ubuntu designers have to create icons that work everywhere in any
> condition. We have something more specific that has been build especially
> for Firefox. We have built a recognizable button for Firefox that is
> designed to work well with the conditional forward button and the URL bar.

After discussions with Ubuntu designer John Lea we decided to go with simple monochrome icons for Thunderbird on Ubuntu (and for the icons in the message header in TB trunk, but that was mainly because I was unable to use -moz-image-region on svg's and would have ended up with a million files, see bug #665871). GNOME is also using more and more symbolic icons, and can provide an icon after being called [gtk-stock-name]-symbolic, that I think will fallback to non-symbolic icon, if the system is unable to provide that. I also think that is a GTK3 thing, so blocking on bug #627699

Comment 43

6 years ago
(In reply to Andreas Nilsson (:andreasn) from comment #42)
> After discussions with Ubuntu designer John Lea we decided to go with simple
> monochrome icons for Thunderbird on Ubuntu (and for the icons in the message
> header in TB trunk, but that was mainly because I was unable to use
> -moz-image-region on svg's and would have ended up with a million files, see
> bug #665871).

Are these monochrome icons built-in? Are they used by other Ubuntu applications?
(In reply to Paul Rouget [:paul] from comment #43)
> Are these monochrome icons built-in? Are they used by other Ubuntu
> applications?

No, they are specific to thunderbird. The symbolic icons that are possible with GTK3 are though (according to jimmac they should work in GTK2 apps too, but will miss out on the recoloring).
http://www.hadess.net/2010/04/symbolic-icons-support-in-gtk.html

Comment 45

6 years ago
(In reply to Paul Rouget [:paul] from comment #41)

> From my personal experience (and I'd be happy to gather some more serious
> data about this): I hear a lot of people complaining about the look of
> Firefox on Linux compared to Windows and Mac[...]

And I'm one of them :D.

Just to add somthing: for KDE we have an extension called "Oxygen KDE" (http://kde-look.org/content/show.php?content=117962&forumpage=62) which not only fairly integrates a bit FF with Oxygen theme, but also lets you define the icons you want for back/forward: FF4 style, native style, etc.

Maybe implementing something similar won't be too difficult. Just a humble suggestion.
Stephen's latest mockups dropped the permanently visible button shapes.

A separate bug should be filed on the back button.
Status: ASSIGNED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → WONTFIX

Updated

4 years ago
No longer depends on: 572485
You need to log in before you can comment on or make changes to this bug.