Closed Bug 1205046 Opened 4 years ago Closed 4 years ago

Unify height for devtools tool icons

Categories

(DevTools :: Framework, defect, P1)

defect

Tracking

(firefox43 affected, firefox44 fixed)

RESOLVED FIXED
Firefox 44
Tracking Status
firefox43 --- affected
firefox44 --- fixed

People

(Reporter: bgrins, Assigned: hholmes)

References

Details

(Whiteboard: [devtools-ux])

Attachments

(2 files, 4 obsolete files)

The Console and Style Editor seem to be a little bit taller than the others.  It'd be nice to trim these icons and make it more consistent.  Icons are here: https://dxr.mozilla.org/mozilla-central/source/browser/themes/shared/devtools/images?offset=1700
Adding some priority to a first set of bugs. :)
Priority: -- → P1
The awesome :shorlander recently mocked up some new icons which are worth checking out: http://people.mozilla.org/~shorlander/mockups/DevTools-Icons/DevTools-Icons-01.html
(In reply to Tim Nguyen [:ntim] from comment #2)
> The awesome :shorlander recently mocked up some new icons which are worth
> checking out:
> http://people.mozilla.org/~shorlander/mockups/DevTools-Icons/DevTools-Icons-
> 01.html

This is really helpful, thanks!

:shorlander, was there any consensus on those icons (some won out over others?), or was that as far as the work got? (Also, would be you all right with me checking out your source files for the icon work?)
Flags: needinfo?(shorlander)
(In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #3)
> (In reply to Tim Nguyen [:ntim] from comment #2)
> > The awesome :shorlander recently mocked up some new icons which are worth
> > checking out:
> > http://people.mozilla.org/~shorlander/mockups/DevTools-Icons/DevTools-Icons-
> > 01.html
> 
> This is really helpful, thanks!
> 
> :shorlander, was there any consensus on those icons (some won out over
> others?), or was that as far as the work got? (Also, would be you all right
> with me checking out your source files for the icon work?)

We were leaning towards using the Canvas icon from the first mockup. We have several "editor" like tools with similar concepts so the rest of the mockups were exploring how to make them more distinct.

All of the icons could probably use a re-evaluation pass. They were done at various times over the years and the tools have evolved and changed since then.

I can send you a bunch of source files. Maybe we should meet sometime next week?
Flags: needinfo?(shorlander)
(In reply to Stephen Horlander [:shorlander] from comment #4) 
> All of the icons could probably use a re-evaluation pass. They were done at
> various times over the years and the tools have evolved and changed since
> then.
My thought here is that first pass will be about just making things look visually the same size (right now sizing is all over the place) and then I'll file a second bug for icons that could use the re-evaluation, like you said. (Although admittedly I haven't been able to help myself and I have been making some tweaks here too.)

> I can send you a bunch of source files. Maybe we should meet sometime next
> week?

That would be very helpful! I'll send a calendar invite, let's find something that works.
Attachment #8667561 - Flags: review?(bgrinstead)
Comment on attachment 8667561 [details] [diff] [review]
Bug-1205046-Replaced-tool-icons.patch

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

Some global comments:
- Please keep the SVGs readable and indented
- The SVGs need a license header (see https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/SVG_Guidelines )
- You might want to split up your patch down to multiple parts
- I'm seeing a mix of "whitesmoke", "#EDF0F1", "white", "ghostwhite", maybe this intentional, but consistency is probably better, so add-ons know which color to follow

Some bugs I've encountered:
- The options icon looks very dark compared to other icons with the dark theme enabled
- The new webconsole output icons are invisible with the dark theme
- The new picker icon for the animation inspector is cut off, and only a small region of it is visible inside the button
- The stopwatch icon next to the import button in the performance tool is invisible

My opinion design-wise:
- The inspector icon looks bigger than other icons
- The removal of color in the webconsole output icons makes different types of output less distinguishable.
- It seems like the web audio icon is a bit thicker/heavier than the other icons
- While I have nothing against using smaller icons, these new tool icons will make add-on icons (React DevTools, Ember inspector, Devtools Prototyper, DOM Profiler, ...) look bigger than the native icons.

::: devtools/client/themes/images/profiler-stopwatch-checked.svg
@@ +1,1 @@
> +<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="-453 246.8 51.3 69.2"><style>.st0{fill:#C321CC;} .st1{fill:#C321CC;fill-opacity:0.65;}</style><path class="st0" d="M-439.3 260.3c-.5.2-1 .7-1.1 1.3-.2.9.4 1.7 1.3 1.9.6.1 1.2-.1 1.5-.5l4.5-5.3-6.2 2.6z"/><path class="st1" d="M-442.5 263.9c1 1.8 3 3 5.1 3 2.2 0 4-1.2 5.1-3h-10.2z"/><path class="st0" d="M-437.5 250.5c-5.8 0-10.4 4.6-10.4 10.4 0 5.8 4.6 10.4 10.4 10.4s10.4-4.6 10.4-10.4c0-5.8-4.6-10.4-10.4-10.4zm-.1 17.9c-3.9 0-7-2.9-7.4-6.7h1.8c.9 0 1.5-.6 1.5-1.5s-.6-1.5-1.5-1.5h-1.5c.4-1.4 1.2-2.6 2.3-3.5l.6 1c.4.8 1.2 1 2 .6s1-1.2.6-2l-.6-1c.7-.2 1.4-.3 2.2-.3.9 0 1.7.1 2.4.4l-.5 1c-.4.8-.2 1.6.6 2 .8.4 1.6.2 2-.6l.5-.9c1 .9 1.7 2 2.1 3.3h-1.3c-.9 0-1.5.6-1.5 1.5s.6 1.5 1.5 1.5h1.7c-.5 3.8-3.6 6.7-7.5 6.7z"/></svg>
\ No newline at end of file

The new purple color needs to be applied on all current blue icons, rather than just the stopwatch checked icons.

Also, I'm not sure if the purple color is visible with the dark theme enabled.

::: devtools/client/themes/images/tool-options.svg
@@ +1,1 @@
> +<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="16" height="16"><style>.st0{fill:#EDF0F1;} .st1{fill:#EDF0F1;fill-opacity:0.35;} .st2{fill:#EDF0F1;fill-opacity:0.65;} .st3{fill:#71C054;} .st4{fill:#EEF0F2;} .st5{fill:#BABEC3;} .st6{fill:#F5F7FA;fill-opacity:0.6;} .st7{fill:#7D7E80;fill-opacity:0.8;} .st8{fill:#4CB0E1;} .st9{fill:#B6BABF;} .st10{fill:#FFFFFF;} .st11{fill:#FFFFFF;filter:url(#Adobe_OpacityMaskFilter);} .st12{mask:url(#mask_1_);fill:#AEB0B1;} .st13{fill:#181D20;} .st14{fill:#F7F7F7;} .st15{fill:#ABABAB;} .st16{filter:url(#Adobe_OpacityMaskFilter_1_);} .st17{fill:#BABEC3;fill-opacity:0.4;} .st18{mask:url(#pseudo-class-shape_2_);} .st19{filter:url(#Adobe_OpacityMaskFilter_2_);} .st20{mask:url(#mask-block-solid_1_);fill:none;stroke:#BABEC3;} .st21{filter:url(#Adobe_OpacityMaskFilter_3_);} .st22{fill:#3089C9;fill-opacity:0.4;} .st23{fill:#3089C9;} .st24{mask:url(#pseudo-class-shape_3_);} .st25{filter:url(#Adobe_OpacityMaskFilter_4_);} .st26{fill:#BABEC3;fill-opacity:0.2;} .st27{fill:none;stroke:#3089C9;} .st28{fill:#3089C9;fill-opacity:0.2;} .st29{opacity:0.4;fill:#EDF0F1;enable-background:new ;} .st30{opacity:0.3;} .st31{opacity:0.3;fill:#EDF0F1;enable-background:new ;} .st32{fill:#EDF0F1;fill-opacity:0.1;} .st33{fill:none;stroke:#EDF0F1;} .st34{fill:none;stroke:#EDF0F1;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;} .st35{opacity:0.1;fill:#EDF0F1;enable-background:new ;} .st36{opacity:0.7;} .st37{opacity:0.75;} .st38{opacity:0.85;} .st39{opacity:5.000000e-02;} .st40{opacity:0.8;} .st41{opacity:0.8;fill:#EEF0F2;enable-background:new ;} .st42{opacity:0.5;fill:#EDF0F1;} .st43{fill:#FFFFFF;fill-opacity:0.35;} .st44{fill:#0E7EDB;} .st45{fill:none;} .st46{fill:#989CA1;} .st47{fill:#E9E9E9;fill-opacity:0.35;} .st48{fill:#B5B8BB;fill-opacity:0.65;}</style><path class="st46" d="M33.7 23.4l-2.9-1.1c.1-.7.2-1.4.2-2.2s-.1-1.5-.2-2.2l2.9-1.1c.6-.2.8-.8.6-1.5l-.8-2.1c-.2-.6-.8-.8-1.5-.6l-3 1.2c-.8-1.1-1.7-2-2.8-2.8l1.2-3c.2-.6 0-1.3-.6-1.5l-1.9-.8c-.6-.2-1.3 0-1.5.6l-1.2 3c-.7-.3-1.4-.4-2.2-.4-.7 0-1.4.1-2.1.2l-1.2-2.9c-.2-.6-.8-.8-1.5-.6l-2.1.8c-.4.2-.6.8-.4 1.3l1.2 3.1c-1.3.8-2.3 1.9-3.2 3.1L8 12.5c-.6-.2-1.3 0-1.5.6L5.7 15c-.2.6 0 1.3.6 1.5l2.9 1.3c-.2.7-.3 1.4-.3 2.2 0 .7.1 1.4.2 2l-2.8 1.1c-.6.2-.8.8-.6 1.5l.8 2.1c.2.6.8.8 1.5.6l2.9-1.1c.8 1.2 1.8 2.2 2.9 3l-1.2 3c-.2.6 0 1.3.6 1.5l2.1.8c.6.2 1.3 0 1.5-.6L18 31c.7.1 1.4.2 2.1.2.8 0 1.5-.1 2.3-.2l1.2 3c.2.6.8.8 1.5.6l2.1-.8c.2-.2.6-.8.2-1.5l-1.2-2.9c1.2-.8 2.2-1.8 3-2.9l3 1.2c.6.2 1.3 0 1.5-.6l.8-2.1c.1-.8-.2-1.4-.8-1.6zm-10.2 0c-1.9 1.9-5 1.9-6.9 0-1.9-1.9-1.9-5 0-6.9 1.9-1.9 5-1.9 6.9 0 1.8 1.8 1.8 5 0 6.9z"/></svg>
\ No newline at end of file

There are a bunch of unused styles here, please remove them.

::: devtools/client/themes/images/tool-profiler.svg
@@ +1,1 @@
> +<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="16" height="16" fill="whitesmoke"><style>.fifty{opacity:0.75;}</style><path d="M17.6 18.2c-.7.2-1.3.8-1.4 1.6-.2 1.1.6 2.3 1.7 2.5.8.1 1.5-.2 2-.7l5.9-6.8-8.2 3.4z"/><path class="fifty" d="M12.4 24.2c1.6 2.7 4.5 4.4 7.6 4.4 3.4 0 6-1.8 7.6-4.4H12.4z"/><path d="M20 4.2c-8.7 0-15.7 6.9-15.7 15.5 0 8.7 6.9 15.5 15.7 15.5 8.7 0 15.7-6.9 15.7-15.5S28.7 4.2 20 4.2zm-.2 26.7c-5.9 0-10.6-4.3-11.1-10H10c1.3 0 2.2-.9 2.2-2.2 0-1.3-.9-2.2-2.2-2.2h-.9c.6-2.1 1.9-3.9 3.5-5.2l.4.8c.6 1.2 1.8 1.5 3 .9s1.6-1.8.9-3l-.5-.8c1-.3 2.1-.5 3.3-.5 1.3 0 2.5.2 3.6.6l-.3.8c-.6 1.2-.3 2.4.9 3 1.2.6 2.4.3 3-.9l.4-.7c1.5 1.3 2.6 3 3.2 4.9h-.9c-1.3 0-2.2.9-2.2 2.2 0 1.3.9 2.2 2.2 2.2H31c-.6 5.8-5.3 10.1-11.2 10.1z"/></svg>
\ No newline at end of file

You can remove the id from the svg tag.
Attached patch Bug-1205046-code-review.patch (obsolete) — Splinter Review
Attachment #8668059 - Flags: review?(ntim.bugs)
Attachment #8667561 - Attachment is obsolete: true
Attachment #8667561 - Flags: review?(bgrinstead)
(In reply to Tim Nguyen [:ntim] from comment #7)
> Comment on attachment 8667561 [details] [diff] [review]
> Bug-1205046-Replaced-tool-icons.patch
> - You might want to split up your patch down to multiple parts
So it looks like a few files I didn't mean to change for this patch ended up in the patch anyway—I've hopefully grabbed them all in the new patch, thanks for catching that! This new patch I meant to _only_ be the tool panels. That said, how would you recommend splitting it up? 

> - I'm seeing a mix of "whitesmoke", "#EDF0F1", "white", "ghostwhite", maybe
> this intentional, but consistency is probably better, so add-ons know which
> color to follow
I've switched them all to "whitesmoke".

> Some bugs I've encountered:
> - The options icon looks very dark compared to other icons with the dark
> theme enabled
> - The new webconsole output icons are invisible with the dark theme
> - The new picker icon for the animation inspector is cut off, and only a
> small region of it is visible inside the button
> - The stopwatch icon next to the import button in the performance tool is
> invisible
I'm hoping that these were all resolved by either rolling back changes or by updates to the icons, but I was unsure about the new picker icon for the animation inspector—is this in the css rules panel?

> My opinion design-wise:
> - The removal of color in the webconsole output icons makes different types
> of output less distinguishable.
Could add a screenshot of what you're referring to? I think affecting this on my part might have been an accident.

> - It seems like the web audio icon is a bit thicker/heavier than the other
> icons
I've experimented with making it smaller and it very quickly starts to look strange. Maybe this would be a good candidate for me to show in UX review next week so it's not just the two of us squinting at very tiny icons on our screen, haha.

> - While I have nothing against using smaller icons, these new tool icons
> will make add-on icons (React DevTools, Ember inspector, Devtools
> Prototyper, DOM Profiler, ...) look bigger than the native icons.
I've resized things with the Ember and React add-ons; let me know if they still seem small to you?
(In reply to Tim Nguyen [:ntim] from comment #7)
> - While I have nothing against using smaller icons, these new tool icons
> will make add-on icons (React DevTools, Ember inspector, Devtools
> Prototyper, DOM Profiler, ...) look bigger than the native icons.

Most likely I am missing some context here, so please enlighten me if so...

If we're using SVGs, why does the size matter?  Shouldn't things just scale to whatever size is used?  Or the add-ons are using PNGs, and that's the issue?
(In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #9)
> (In reply to Tim Nguyen [:ntim] from comment #7)
> > Comment on attachment 8667561 [details] [diff] [review]
> > Bug-1205046-Replaced-tool-icons.patch
> > - You might want to split up your patch down to multiple parts
> So it looks like a few files I didn't mean to change for this patch ended up
> in the patch anyway—I've hopefully grabbed them all in the new patch, thanks
> for catching that! This new patch I meant to _only_ be the tool panels. That
> said, how would you recommend splitting it up? 

I'd say let's keep this for only the tool panels and then file a follow up for the other icons, since they will take some extra work and the tool icon updates will be a great standalone bug.

> > Some bugs I've encountered:
> > - The options icon looks very dark compared to other icons with the dark
> > theme enabled
> > - The new webconsole output icons are invisible with the dark theme
> > - The new picker icon for the animation inspector is cut off, and only a
> > small region of it is visible inside the button
> > - The stopwatch icon next to the import button in the performance tool is
> > invisible
> I'm hoping that these were all resolved by either rolling back changes or by
> updates to the icons, but I was unsure about the new picker icon for the
> animation inspector—is this in the css rules panel?

I believe this stuff will be fixed by rolling back the other changes.  I'll take a look at it locally.
(In reply to J. Ryan Stinnett [:jryans] (use ni?) from comment #10)
> (In reply to Tim Nguyen [:ntim] from comment #7)
> > - While I have nothing against using smaller icons, these new tool icons
> > will make add-on icons (React DevTools, Ember inspector, Devtools
> > Prototyper, DOM Profiler, ...) look bigger than the native icons.
> 
> Most likely I am missing some context here, so please enlighten me if so...
> 
> If we're using SVGs, why does the size matter?  Shouldn't things just scale
> to whatever size is used?  Or the add-ons are using PNGs, and that's the
> issue?

It's a visuals thing. Even though they're currently all SVGs, the way the icons were designed makes them look hodge-podge height-wise even though they're all 16x16.
Attachment #8668059 - Attachment is obsolete: true
Attachment #8668059 - Flags: review?(ntim.bugs)
Attachment #8668071 - Flags: review?(ntim.bugs)
Comment on attachment 8668071 [details] [diff] [review]
Bug-1205046-Replaced-all-tool-panel-icons-with-new-ones.patch

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

::: devtools/client/jar.mn
@@ +303,4 @@
>      skin/themes/images/tool-inspector.svg (themes/images/tool-inspector.svg)
>      skin/themes/images/tool-shadereditor.svg (themes/images/tool-shadereditor.svg)
>      skin/themes/images/tool-styleeditor.svg (themes/images/tool-styleeditor.svg)
> +    skin/themes/images/command-pick.svg (themes/images/command-pick.svg)

This line can be removed now

::: devtools/client/themes/animationinspector.css
@@ +116,4 @@
>  }
>  
>  #element-picker::before {
> +  background-image: url("chrome://devtools/skin/themes/images/command-pick.svg");

I think the changes to this file can be reverted (for now)

::: devtools/client/themes/toolbars.inc.css
@@ +714,4 @@
>    background-position: 0 center;
>    background-repeat: no-repeat;
>  }
> +/*.command-button:hover > image {

The changes to this file can be removed
Attachment #8668071 - Attachment is obsolete: true
Attachment #8668071 - Flags: review?(ntim.bugs)
Attachment #8668090 - Flags: review?(bgrinstead)
Comment on attachment 8668090 [details] [diff] [review]
Bug-1205046-Replaced-all-tool-panel-icons.patch

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

Code changes look good to me.  Can you upload a new version with the commit message as a one-liner with ;r=bgrins at the end?

::: devtools/client/themes/images/tool-scratchpad.svg
@@ +1,1 @@
> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="16" height="16" fill="whitesmoke"><path d="M33.9 7.3h-1.2v2.2c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2v-.1c0 .6.6 1.1 1.2 1.1.7 0 1.2-.5 1.2-1.1v-5c0-.6-.6-1.1-1.2-1.1-.7 0-1.2.5-1.2 1.1v2.9h-5.4v2.2c0 1.2-1 2.2-2.2 2.2-1.4.2-2.4-.8-2.4-2.2v-.1c0 .6.6 1.1 1.2 1.1.7 0 1.2-.5 1.2-1.1v-5c0-.6-.6-1.1-1.2-1.1-.7 0-1.2.5-1.2 1.1v2.9H13v2.2c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.1.1.5.6.9 1.2.9.7 0 1.2-.5 1.2-1.1v-5c0-.6-.6-1.1-1.2-1.1s-1.3.5-1.3 1.1v2.9H6.1c-.6 0-1.2.4-1.2 1.2v25.6c0 .4.6 1 1.2 1H34c.6 0 1.2-.6 1.2-1.2V8.5c0-.8-.7-1.2-1.3-1.2zm-25 8.8h15.2c.7 0 1.2.6 1.2 1.2 0 .7-.6 1.2-1.2 1.2H8.9c-.7 0-1.2-.6-1.2-1.2s.5-1.2 1.2-1.2zm16.6 14.6H9.1c-.7 0-1.2-.6-1.2-1.2 0-.7.6-1.2 1.2-1.2h16.4c.7 0 1.2.6 1.2 1.2 0 .7-.5 1.2-1.2 1.2zm5.6-6H11.5c-.7 0-1.2-.6-1.2-1.2 0-.7.6-1.2 1.2-1.2h19.6c.7 0 1.2.6 1.2 1.2s-.5 1.2-1.2 1.2z"/></svg>
\ No newline at end of file

\ No newline at end of file

This one needs the license header

::: devtools/client/themes/images/tool-shadereditor.svg
@@ +1,1 @@
> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="16" height="16" fill="#f5f5f5">

This one needs the license header
Attachment #8668090 - Flags: review?(bgrinstead)
Assignee: nobody → hholmes
Status: NEW → ASSIGNED
Comment on attachment 8668090 [details] [diff] [review]
Bug-1205046-Replaced-all-tool-panel-icons.patch

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

Nice.

Here's one issue I've found: the debugger paused icon [0] (it's shown in place of the debugger icon when the debugger is paused and unfocused) hasn't been updated with the new icon size/style. Maybe this was intentionally left out ?


[0]: https://dxr.mozilla.org/mozilla-central/source/devtools/client/themes/images/tool-debugger-paused.svg

::: devtools/client/themes/images/tool-shadereditor.svg
@@ +1,1 @@
> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="16" height="16" fill="#f5f5f5">

This has #f5f5f5 while the others have whitesmoke, while this is the same color, it'd be better to follow the same format everywhere.
(In reply to Tim Nguyen [:ntim] from comment #17)
> Comment on attachment 8668090 [details] [diff] [review]
> Bug-1205046-Replaced-all-tool-panel-icons.patch
> 
> Review of attachment 8668090 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> Nice.
> 
> Here's one issue I've found: the debugger paused icon [0] (it's shown in
> place of the debugger icon when the debugger is paused and unfocused) hasn't
> been updated with the new icon size/style. Maybe this was intentionally left
> out ?
> 

Great catch, forgot to look at that.  Helen, if you open the debugger on this page: http://bgrins.github.io/devtools-demos/debugger/debugger.html, then click the button, then switch to a different tool, you can see that the debugger icon gets swapped out with a 'resume' icon.  Not sure if we need to change it, but can you take a look at the icon and see if it needs any work?
Flags: needinfo?(hholmes)
(In reply to J. Ryan Stinnett [:jryans] (use ni?) from comment #10)
> (In reply to Tim Nguyen [:ntim] from comment #7)
> > - While I have nothing against using smaller icons, these new tool icons
> > will make add-on icons (React DevTools, Ember inspector, Devtools
> > Prototyper, DOM Profiler, ...) look bigger than the native icons.
> 
> Most likely I am missing some context here, so please enlighten me if so...
> 
> If we're using SVGs, why does the size matter?  Shouldn't things just scale
> to whatever size is used?  Or the add-ons are using PNGs, and that's the
> issue?
While the new icons are still 16x16, the padding that is between the icon edges and the shape itself is bigger, which causes the shape to be smaller.
(In reply to Brian Grinstead [:bgrins] from comment #18)
> Great catch, forgot to look at that.  Helen, if you open the debugger on
> this page: http://bgrins.github.io/devtools-demos/debugger/debugger.html,
> then click the button, then switch to a different tool, you can see that the
> debugger icon gets swapped out with a 'resume' icon.  Not sure if we need to
> change it, but can you take a look at the icon and see if it needs any work?
Sure thing! I had seen that icon in the images/ folder but had no idea where/when it was triggered...
Flags: needinfo?(hholmes)
Added missing licenses + matching debugger-paused icon
Attachment #8668090 - Attachment is obsolete: true
Attachment #8668466 - Flags: review?(bgrinstead)
Attached image new-icon-issues.png
Here are a couple of issues I've found:
- The inspector icon looks bigger than other icons
This bug is about unifying the height, and making the inspector icon bigger than other icons is against that.
- The green color isn't consistent with the perf green icon.
My personal preference is the perf green color, since it's more visible, but it's up to you to choose.
- The canvas icon doesn't have rounded corners
It looks a bit odd now that all icons have rounded corners.
Comment on attachment 8668466 [details] [diff] [review]
Bug-1205046-panel-icons.patch

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

Looks good to me
Attachment #8668466 - Flags: review?(bgrinstead) → review+
(In reply to Tim Nguyen [:ntim] from comment #22)
> Created attachment 8668639 [details]
> new-icon-issues.png
> 
> Here are a couple of issues I've found:
> - The inspector icon looks bigger than other icons
> This bug is about unifying the height, and making the inspector icon bigger
> than other icons is against that.
> - The green color isn't consistent with the perf green icon.
> My personal preference is the perf green color, since it's more visible, but
> it's up to you to choose.
> - The canvas icon doesn't have rounded corners
> It looks a bit odd now that all icons have rounded corners.

Pushed the current patch - let's do any updates in a follow up bug
https://hg.mozilla.org/mozilla-central/rev/152c9db8a370
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 44
Depends on: 1210752
Depends on: 1211156
Depends on: 1211157
Reproduced this bug with Firefox Nightly 43.0a1 (2015-09-15);(Build ID: 20150915030232) on Linux, 64 Bit 	

This Bug is now verified as fixed on Latest Firefox Dev Edition 44.0a2 (2015-12-02)

Build ID: 20151202004004
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:44.0) Gecko/20100101 Firefox/44.0
QA Whiteboard: [bugday-20151202]
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.