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

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

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?

needinfo? for Comment 3

(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.

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

(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

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).

This might actually be a regression of bug 947309.

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

> 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.

(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.

(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.

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

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 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?

(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?

needinfo? for comment 17

(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.

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

(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

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.

(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.

(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.

(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").

(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.

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

Brian, do you want to try this svg icon?

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.

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?

(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?

(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.

> > 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 :)

Here are the 6 tab icons as svg.

All command icons without drop shadows (dark theme).

(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.

(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).

(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

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.

Here are the tool icons as svg :)

Well that was embarrassing ;)

Using new icon for option panel, and showing paused debugger

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 on attachment 8365209 [details] toolbar-updated-icons2.png Looks good to me :) Thanks!

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

Comment on attachment 8365225 [details] [diff] [review] theme-tabbar-ui.patch Review of attachment 8365225 [details] [diff] [review]: ----------------------------------------------------------------- Looks better indeed.

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