957291 - Tab bar icon issues - Docking icon brightness does not match command icon brightness, and certain icons appear blurry

Status: RESOLVED FIXED

(DevTools :: General, defect)

Description

[Tim Nguyen :ntim]

Attachment: Screenshot of blurry icons after bug 947309

Some devtools tabbar icons look blurry and some icons also don't have the correct opacity.

See screenshot.

Comment 1

[Tim Nguyen :ntim]

Attachment: Before bug 947309 (very old)

Comment 2

[Tim Nguyen :ntim]

Note that the problem shown on the second screenshot is already fixed :)

Comment 3

[Brian Grinstead [:bgrins]]

Which ones look blurry, and which ones don't have the correct opacity? 
 
> Created attachment 8356753 [details]
> Before bug 951726 (very old, but icon results were the same)

Are you saying that you were seeing these issues before bug 951726 landed?

Comment 4

[Brian Grinstead [:bgrins]]

needinfo? for Comment 3

Comment 5

[Tim Nguyen :ntim]

(In reply to Brian Grinstead [:bgrins] from comment #3)
> Which ones look blurry, and which ones don't have the correct opacity? 
>  
> > Created attachment 8356753 [details]
> > Before bug 951726 (very old, but icon results were the same)
> 
> Are you saying that you were seeing these issues before bug 951726 landed?

No, I'm saying that the old results were the same as the build just before bug 951726. Sorry, I wasn't clear here.
Just to clarify, the issue only happened after the bug.

Comment 6

[Brian Grinstead [:bgrins]]

Can you say specifically which icons on the tab bar are blurry, and which do not have correct opacity?

Comment 7

[Tim Nguyen :ntim]

(In reply to Brian Grinstead [:bgrins] from comment #6)
> Can you say specifically which icons on the tab bar are blurry, and which do
> not have correct opacity?

This seems quite obvious in attachment 8356751 [details] :
Blurry :
- All default tabbar icons (aka non-addons), you can notice this better when selecting a tab.
- All command buttons


Opacity :
Close/sidebar/dock to bottom buttons

Comment 8

[Tim Nguyen :ntim]

The debugger, options and profiler icons are not too much blurry actually. Inspector, Console, Network and Style Editor icons are the most visible. (Again, command buttons are blurry too).

Comment 9

[Tim Nguyen :ntim]

This might actually be a regression of bug 947309.

Comment 10

[Tim Nguyen :ntim]

Updated the problematic bug. It was actually landed on the same day, that's why I thought it was the other bug.

Comment 11

[Brian Grinstead [:bgrins]]

> Opacity :
> Close/sidebar/dock to bottom buttons

The brightness on the docking and close icons isn't quite the same as the others (you can see this in https://bugzilla.mozilla.org/attachment.cgi?id=8356751).

needinfoing Darrin to see if we should replace dock-side, dock-bottom, close, and undock images.

As far as blurriness, I'm not sure that I'm seeing all the same issues you are.  Assuming I'm just not seeing the problem, it is possible that we should just use 1x icons, but if it is possible to tweak the 2x so that they downsample better (especially for the tab icons, which are a bigger deal to provide alternates on), I think this would be ideal.

Comment 12

[Brian Grinstead [:bgrins]]

(In reply to Brian Grinstead [:bgrins] from comment #11)
> > Opacity :
> > Close/sidebar/dock to bottom buttons
> 
> The brightness on the docking and close icons isn't quite the same as the
> others (you can see this in
> https://bugzilla.mozilla.org/attachment.cgi?id=8356751).
> 
> needinfoing Darrin to see if we should replace dock-side, dock-bottom,
> close, and undock images.

By the way, the images currently in use are from 'DevTools - Icons @2x - 01' in Bug 837188.

Comment 13

[Tim Nguyen :ntim]

(In reply to Brian Grinstead [:bgrins] from comment #11)
> As far as blurriness, I'm not sure that I'm seeing all the same issues you
> are.  Assuming I'm just not seeing the problem, it is possible that we
> should just use 1x icons, but if it is possible to tweak the 2x so that they
> downsample better (especially for the tab icons, which are a bigger deal to
> provide alternates on), I think this would be ideal.

I guess you could provide both, pretty much like Firefox's UI does.
Then use media queries to target hdpi.

Comment 14

[Tim Nguyen :ntim]

As shown in the screenshot, the command icons are a bit too bright too.

Comment 15

[Darrin Henein [:darrin]]

To my eye the dock, undock and close icons all share the same (less bright) appearance. The command icons (responsive, etc.) are brighter by design. Is this what you were referring to?

Comment 16

[Darrin Henein [:darrin]]

(In reply to Tim Nguyen [:ntim] from comment #14)
> As shown in the screenshot, the command icons are a bit too bright too.

Sorry, to clarify: "too bright" in comparison to what?

Comment 17

[Brian Grinstead [:bgrins]]

(In reply to Darrin Henein [:darrin] from comment #15)
> To my eye the dock, undock and close icons all share the same (less bright)
> appearance. The command icons (responsive, etc.) are brighter by design. Is
> this what you were referring to?

(In reply to Darrin Henein [:darrin] from comment #15)
> To my eye the dock, undock and close icons all share the same (less bright)
> appearance. The command icons (responsive, etc.) are brighter by design. Is
> this what you were referring to?

I see the same thing you do.  I just realized that we don't need a new image though - they are less bright because of opacity after all.  Should I go ahead and remove that opacity to bring the brightness up to the level of the command buttons, or add opacity to the command buttons to bring them down to the others?

Comment 18

[Brian Grinstead [:bgrins]]

needinfo? for comment 17

Comment 19

[Tim Nguyen :ntim]

(In reply to Darrin Henein [:darrin] from comment #16)
> (In reply to Tim Nguyen [:ntim] from comment #14)
> > As shown in the screenshot, the command icons are a bit too bright too.
> 
> Sorry, to clarify: "too bright" in comparison to what?

Compared to the tab icons ? But that might just because 2x icons were scaled down.

Comment 20

[Brian Grinstead [:bgrins]]

Attachment: tabbar-opacity.png

In reference to Comment 17, here is what it looks like when bringing opacity up or down uniformly.

Comment 21

[Tim Nguyen :ntim]

(In reply to Brian Grinstead [:bgrins] from comment #20)
> Created attachment 8356812 [details]
> tabbar-opacity.png
> 
> In reference to Comment 17, here is what it looks like when bringing opacity
> up or down uniformly.

I think this is too bright, maybe you could just bring up the opacity of the close/dock buttons

Comment 22

[Alfred Kayser]

Regarding the blurriness:
Instead of pushing 2x icons, and then force scaling them back to 16x16, and hardcoding image paths in .js, one could also just set class names and let the theme assign the correct icons (including 1x/2x selection.

Comment 23

[Tim Nguyen :ntim]

(In reply to Alfred Kayser from comment #22)
> Regarding the blurriness:
> Instead of pushing 2x icons, and then force scaling them back to 16x16, and
> hardcoding image paths in .js, one could also just set class names and let
> the theme assign the correct icons (including 1x/2x selection.

I don't think you'll need JS to add specific HDPI images, you can do that with CSS.

Comment 24

[Brian Grinstead [:bgrins]]

(In reply to Alfred Kayser from comment #22)
> Regarding the blurriness:
> Instead of pushing 2x icons, and then force scaling them back to 16x16, and
> hardcoding image paths in .js, one could also just set class names and let
> the theme assign the correct icons (including 1x/2x selection.

I should be clear - the tabs are special.  Since extension developers can add their own tabs, the icon URL is part of the panel definition (specified in JS and used in an <image> tag in the markup).  There isn't really a great way to move this logic to CSS, and we would prefer to not have to specify more than one image here to keep the API as simple as possible.

Comment 25

[Darrin Henein [:darrin]]

(In reply to Brian Grinstead [:bgrins] from comment #20)
> Created attachment 8356812 [details]
> tabbar-opacity.png
> 
> In reference to Comment 17, here is what it looks like when bringing opacity
> up or down uniformly.

To be honest, I never really thought the dock/close icons being less bright was an issue. I personally think their current appearance relative to the command icons looks best, but would be open to hearing an argument otherwise (vs. "just too bright").

Comment 26

[Brian Grinstead [:bgrins]]

(In reply to Darrin Henein [:darrin] from comment #25)
> (In reply to Brian Grinstead [:bgrins] from comment #20)
> > Created attachment 8356812 [details]
> > tabbar-opacity.png
> > 
> > In reference to Comment 17, here is what it looks like when bringing opacity
> > up or down uniformly.
> 
> To be honest, I never really thought the dock/close icons being less bright
> was an issue. I personally think their current appearance relative to the
> command icons looks best, but would be open to hearing an argument otherwise
> (vs. "just too bright").

This is fine with me.

Comment 27

[Tim Nguyen :ntim]

I think the brightness should be consistent, but not too bright. A bit like attachment 8356753 [details] shows.

Comment 28

[Darrin Henein [:darrin]]

Attachment: inspect icon (svg)

Brian, do you want to try this svg icon?

Comment 29

[Darrin Henein [:darrin]]

Attachment: Inspector Icon SVG

Here is the inspector icon. Original at 16px snapped, so it's off center (may need to nudge it 1px right). Let's see how it looks.

Comment 30

[Brian Grinstead [:bgrins]]

Attachment: svg-vs-png-tabs.png

Darrin, here is the screenshot comparing SVG vs png (left vs right).  I think it is a lot clearer, and worth trying out all the tab icons as SVG like you've done with the inspector icon here.  Can you send them over when you get a chance to convert them?

Comment 31

[Brian Grinstead [:bgrins]]

(In reply to Brian Grinstead [:bgrins] from comment #30)
> Created attachment 8357397 [details]
> svg-vs-png-tabs.png
> 
> Darrin, here is the screenshot comparing SVG vs png (left vs right).  I
> think it is a lot clearer, and worth trying out all the tab icons as SVG
> like you've done with the inspector icon here.  Can you send them over when
> you get a chance to convert them?

And one more thing - can you send over new 1x and 2x dark theme icons for the command buttons that currently have a drop shadow?

Comment 32

[Tim Nguyen :ntim]

(In reply to Brian Grinstead [:bgrins] from comment #31)
> (In reply to Brian Grinstead [:bgrins] from comment #30)
> > Created attachment 8357397 [details]
> > svg-vs-png-tabs.png
> > 
> > Darrin, here is the screenshot comparing SVG vs png (left vs right).  I
> > think it is a lot clearer, and worth trying out all the tab icons as SVG
> > like you've done with the inspector icon here.  Can you send them over when
> > you get a chance to convert them?
> 
> And one more thing - can you send over new 1x and 2x dark theme icons for
> the command buttons that currently have a drop shadow?

Not sure what you need here, Stephen Horlander attached them in the main bug.

Comment 33

[Darrin Henein [:darrin]]

> > And one more thing - can you send over new 1x and 2x dark theme icons for
> > the command buttons that currently have a drop shadow?
> 
> Not sure what you need here, Stephen Horlander attached them in the main bug.

I know what you are referring to Brian, I will attach them when I get to the assets for this bug :)

Comment 34

[Darrin Henein [:darrin]]

Attachment: tab-icons-svg.zip

Here are the 6 tab icons as svg.

Comment 35

[Darrin Henein [:darrin]]

Attachment: command-icons.zip

All command icons without drop shadows (dark theme).

Comment 36

[Brian Grinstead [:bgrins]]

(In reply to Darrin Henein [:darrin] from comment #34)
> Created attachment 8365101 [details]
> tab-icons-svg.zip
> 
> Here are the 6 tab icons as svg.

Can you add the SVG icon for debugger-paused?  It is the debugger icon with a green outline, you can see the current version over at Bug 837188.

Comment 37

[Brian Grinstead [:bgrins]]

(In reply to Brian Grinstead [:bgrins] from comment #36)
> (In reply to Darrin Henein [:darrin] from comment #34)
> > Created attachment 8365101 [details]
> > tab-icons-svg.zip
> > 
> > Here are the 6 tab icons as svg.
> 
> Can you add the SVG icon for debugger-paused?  It is the debugger icon with
> a green outline, you can see the current version over at Bug 837188.

And also the icon for the options panel (currently tool-options.png).

Comment 38

[Brian Grinstead [:bgrins]]

(In reply to Brian Grinstead [:bgrins] from comment #37)
> (In reply to Brian Grinstead [:bgrins] from comment #36)
> > (In reply to Darrin Henein [:darrin] from comment #34)
> > > Created attachment 8365101 [details]
> > > tab-icons-svg.zip
> > > 
> > > Here are the 6 tab icons as svg.
> > 
> > Can you add the SVG icon for debugger-paused?  It is the debugger icon with
> > a green outline, you can see the current version over at Bug 837188.
> 
> And also the icon for the options panel (currently tool-options.png).

Ah, I keep finding them one by one.. I also need tool-scratchpad.png.  I think those three are the only ones I need.  So:

* tool-debugger-paused.png
* tool-scratchpad.png
* tool-options.png

Comment 39

[Brian Grinstead [:bgrins]]

Attachment: toolbar-updated-icons.png

Darrin, here is a screenshot at 1x and 2x with the new tool and command icons.  Note that I'm reusing the inspector icon for the option icon until I get the latest.  This is also increased to 28px from 26px.

Comment 40

[Darrin Henein [:darrin]]

Attachment: tab-icons-svg.zip

Here are the tool icons as svg :)

Comment 41

[Darrin Henein [:darrin]]

Attachment: tool-icons-svg.zip

Well that was embarrassing ;)

Comment 42

[Brian Grinstead [:bgrins]]

Attachment: toolbar-updated-icons2.png

Using new icon for option panel, and showing paused debugger

Comment 43

[Brian Grinstead [:bgrins]]

Attachment: theme-tabbar-ui.patch

Patrick,
Can you have a look at the CSS and jar changes I've made here?  Basically, I've just replaced some pngs with SVGs, and added / updated the command 1x and 2x icons.  Pushed to try: https://tbpl.mozilla.org/?tree=Try&rev=3b98eccddd9b

Comment 44

[Darrin Henein [:darrin]]

Comment on attachment 8365209 [details]
toolbar-updated-icons2.png

Looks good to me :) Thanks!

Comment 45

[Tim Nguyen :ntim]

Much better ! Though, the style editor icon is still a bit blurry, and the brightness issue is still there.

Comment 46

[Patrick Brosset <:pbro>]

Comment on attachment 8365225 [details] [diff] [review]
theme-tabbar-ui.patch

Review of attachment 8365225 [details] [diff] [review]:
-----------------------------------------------------------------

Looks better indeed.

Comment 47

[Brian Grinstead [:bgrins]]

https://hg.mozilla.org/integration/fx-team/rev/1b9a22ae7cfd
https://tbpl.mozilla.org/?tree=Fx-Team&rev=1b9a22ae7cfd

Comment 48

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/1b9a22ae7cfd