Closed
Bug 1209581
Opened 9 years ago
Closed 9 years ago
Need great icons for about:debugging.
Categories
(DevTools :: about:debugging, defect)
DevTools
about:debugging
Tracking
(firefox45 fixed)
RESOLVED
FIXED
Firefox 45
Tracking | Status | |
---|---|---|
firefox45 | --- | fixed |
People
(Reporter: janx, Unassigned)
References
Details
(Whiteboard: [devtools-ux])
Attachments
(3 files, 8 obsolete files)
(deleted),
image/png
|
Details | |
(deleted),
patch
|
janx
:
review+
|
Details | Diff | Splinter Review |
(deleted),
patch
|
janx
:
review+
|
Details | Diff | Splinter Review |
In the new "about:debugging" page, there are different Target categories, which all need specific, intuitive and cool-looking icons.
Icons needed:
- Tab (Tabs that don't have a favicon (yet), "Tabs" category)
- Worker (Service Worker, Shared Worker, Other Worker, "Workers" category).
- Device ("Devices" category)
Not needed:
- Add-ons / Extensions (we already have the green puzzle-piece icon).
- Wi-Fi Device / USB Device / Simulator (current plan is to only show the name of a device with no icon).
Reporter | ||
Updated•9 years ago
|
Summary: Find icons for the "about:debugging" categories. → Need great icons for the "about:debugging" categories.
Reporter | ||
Updated•9 years ago
|
Summary: Need great icons for the "about:debugging" categories. → Need great icons for about:debugging.
Whiteboard: [devtools-ux]
Reporter | ||
Comment 1•9 years ago
|
||
Ryan or Brian, do you have any idea who I should ping about this? I've never done this before.
Flags: needinfo?(jryans)
Flags: needinfo?(bgrinstead)
Comment 2•9 years ago
|
||
(In reply to Jan Keromnes [:janx] from comment #1)
> Ryan or Brian, do you have any idea who I should ping about this? I've never
> done this before.
I think Helen could help sort this out. Jan, when I open about:debugging I only see Add-ons and workers. How do you I see the Tabs and Devices sections?
Flags: needinfo?(jryans)
Flags: needinfo?(janx)
Flags: needinfo?(hholmes)
Flags: needinfo?(bgrinstead)
Comment 3•9 years ago
|
||
Happy to help! Same question as Brian above, though.
Flags: needinfo?(hholmes)
(In reply to Brian Grinstead [:bgrins] from comment #2)
> (In reply to Jan Keromnes [:janx] from comment #1)
> > Ryan or Brian, do you have any idea who I should ping about this? I've never
> > done this before.
>
> I think Helen could help sort this out. Jan, when I open about:debugging I
> only see Add-ons and workers. How do you I see the Tabs and Devices
> sections?
I believe these features haven't landed yet, so there are only add-ons and workers categories so far.
Reporter | ||
Comment 5•9 years ago
|
||
Ryan is correct, only Add-ons and Workers are available today in about:debugging, but Devices are coming up soon (bug 1212802).
While we'll not necessarily add a Tabs category at first (because it's already easy enough to switch to a particular tab and open a toolbox), the Tab icon is still needed for remote-device tabs where a favicon isn't available.
Flags: needinfo?(janx)
Reporter | ||
Comment 6•9 years ago
|
||
Thanks for your offer Helen! Please needinfo/ping me if you have any more questions.
Reporter | ||
Updated•9 years ago
|
Component: Developer Tools → Developer Tools: about:debugging
Comment 7•9 years ago
|
||
I formatted the icons the same way as the panel icons so they might need to be sized up for your needs, janx --> sorry about that! (Same goes for color.)
Attachment #8680866 -
Flags: review?(janx)
Reporter | ||
Comment 8•9 years ago
|
||
Great icons! Here is a screenshot of about:debugging using the new SVG icons.
Reporter | ||
Comment 9•9 years ago
|
||
Comment on attachment 8680866 [details] [diff] [review]
about-debugging-icons.patch
Thanks Helen! The icons look great.
A few nits:
- As discussed on IRC, please shift the workers icon flush to the left.
- Again on IRC, :ntim suggested we should use another icon for tabs, do you agree?
- Also, I'm not sure how to properly position and size the devices icon. Should it be vertically centered?
Attachment #8680866 -
Flags: review?(janx) → review+
Comment 10•9 years ago
|
||
I made these slightly larger than the icons in the patch because they looked less weighty than :shorlander's puzzle piece.
Attachment #8681417 -
Flags: review?(janx)
Comment 11•9 years ago
|
||
(In reply to Jan Keromnes [:janx] from comment #9)
> Comment on attachment 8680866 [details] [diff] [review]
> about-debugging-icons.patch
>
> - Again on IRC, :ntim suggested we should use another icon for tabs, do you
> agree?
I agree that we should just use the one that's being used elsewhere: https://github.com/nt1m/firefox-svg-icons/blob/master/navigation/tab.svg
Comment 12•9 years ago
|
||
Comment on attachment 8681417 [details]
slightly-larger-icons.zip
Are you sure these are the right icons ? They show up really tiny for me. I also tried viewing the SVGs on Safari to make sure Firefox wasn't playing tricks, but I get the same result.
Comment 13•9 years ago
|
||
(In reply to Tim Nguyen [:ntim] from comment #12)
> Comment on attachment 8681417 [details]
> slightly-larger-icons.zip
>
> Are you sure these are the right icons ? They show up really tiny for me. I
> also tried viewing the SVGs on Safari to make sure Firefox wasn't playing
> tricks, but I get the same result.
Ah, by larger I meant larger within their viewport. The width and height can be messed with in the first <svg> line of the file.
Reporter | ||
Comment 14•9 years ago
|
||
Comment on attachment 8680866 [details] [diff] [review]
about-debugging-icons.patch
(Marking previous icons patch as obsolete.)
Attachment #8680866 -
Attachment is obsolete: true
Reporter | ||
Comment 15•9 years ago
|
||
Comment on attachment 8681413 [details]
aboutdebuggingicons.png
(Marking previous screenshot as obsolete.)
Attachment #8681413 -
Attachment is obsolete: true
Reporter | ||
Comment 16•9 years ago
|
||
Comment on attachment 8681417 [details]
slightly-larger-icons.zip
Thanks Helen, the new icons look great!
- They did look "small" because of a viewbox problem (I fixed that by editing the SVG files to change their viewbox from "0 0 40 40" to "0 0 16 16", so no need to change anything).
- The list-item icons (e.g. the icons in front of each worker in the Workers panel) are hard to see in whitesmoke-over-white-background, but I can use a CSS filter to fix that (we probably don't want a light and dark version of each icon, right?)
- The green addon icon looks weird as a category icon. Tim, do you think we should create a separate white version of it? If I cheat with a CSS filter ("grayscale(100%) contrast(300%)") the result isn't great.
Flags: needinfo?(ntim.bugs)
Flags: needinfo?(hholmes)
Attachment #8681417 -
Flags: review?(janx) → review+
Comment 17•9 years ago
|
||
(In reply to Jan Keromnes [:janx] from comment #16)
> Comment on attachment 8681417 [details]
> slightly-larger-icons.zip
> - The list-item icons (e.g. the icons in front of each worker in the Workers
> panel) are hard to see in whitesmoke-over-white-background, but I can use a
> CSS filter to fix that (we probably don't want a light and dark version of
> each icon, right?)
I agree that we probably don't want two separate icons just for simplicity sake, but let me know if you decide you'd like more icons anyway!
> - The green addon icon looks weird as a category icon. Tim, do you think we
> should create a separate white version of it? If I cheat with a CSS filter
> ("grayscale(100%) contrast(300%)") the result isn't great.
I attached a new zip with the add-on icon as white (I also switched all of the icons' fill to white --> I think ntim mentioned in #devtools that most of the icons elsewhere are fill="white", not fill="whitesmoke"). Hopefully that looks better janx!
I think this clears ntim.
Attachment #8681417 -
Attachment is obsolete: true
Flags: needinfo?(ntim.bugs)
Flags: needinfo?(hholmes)
Comment 18•9 years ago
|
||
(In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #17)
> Created attachment 8684900 [details]
> edit-addon-svg.zip
>
> (In reply to Jan Keromnes [:janx] from comment #16)
> > Comment on attachment 8681417 [details]
> > slightly-larger-icons.zip
> > - The list-item icons (e.g. the icons in front of each worker in the Workers
> > panel) are hard to see in whitesmoke-over-white-background, but I can use a
> > CSS filter to fix that (we probably don't want a light and dark version of
> > each icon, right?)
Yeah, an invert(1) filter and possibly an opacity filter should be enough.
> > - The green addon icon looks weird as a category icon. Tim, do you think we
> > should create a separate white version of it? If I cheat with a CSS filter
> > ("grayscale(100%) contrast(300%)") the result isn't great.
> I attached a new zip with the add-on icon as white (I also switched all of
> the icons' fill to white --> I think ntim mentioned in #devtools that most
> of the icons elsewhere are fill="white", not fill="whitesmoke").
It's more precisely #fbfbfb (see our in-content prefs icons), so yeah, nearly white.
Reporter | ||
Comment 19•9 years ago
|
||
Thanks Helen! Here is a screenshot with the new icons.
The white add-on icon looks a little bit stretched towards the right, not sure if I'm doing something wrong here.
As you can see in the Workers tab, the white icons can be made grey with the CSS filter "invert(30%)", so we don't need sprites or multiple icons for now! \o/
Flags: needinfo?(hholmes)
Reporter | ||
Comment 20•9 years ago
|
||
(In reply to Tim Nguyen [:ntim] from comment #18)
> Yeah, an invert(1) filter and possibly an opacity filter should be enough.
Good suggestion! In my screenshot, I use invert(30%), but I might add an additional filter like opacity or grayscale.
> It's more precisely #fbfbfb (see our in-content prefs icons), so yeah,
> nearly white.
Ah, then we should use #fbfbfb I guess.
(In reply to Jan Keromnes [:janx] from comment #19)
> The white add-on icon looks a little bit stretched towards the right, not
> sure if I'm doing something wrong here.
This is easier to see when you visually compare the white and green addon icons. Maybe another viewbox problem? I was able to mitigate it by changing the viewbox from "0 0 16 16" to "0 0 18 16", maybe the original icon isn't completely square.
Comment 21•9 years ago
|
||
(In reply to Jan Keromnes [:janx] from comment #20)
> This is easier to see when you visually compare the white and green addon
> icons. Maybe another viewbox problem? I was able to mitigate it by changing
> the viewbox from "0 0 16 16" to "0 0 18 16", maybe the original icon isn't
> completely square.
Seems like the right viewBox is "0 0 18 18".
Comment 22•9 years ago
|
||
(In reply to Tim Nguyen [:ntim] from comment #21)
> Seems like the right viewBox is "0 0 18 18".
Janx, does this fix the skewing problem?
Thanks for being so patient :)
Flags: needinfo?(hholmes) → needinfo?(janx)
Reporter | ||
Comment 23•9 years ago
|
||
Helen, thanks again for the new icons!
It looks like "0 0 18 18" does fix the skewing problem (not sure why but hey, it works!)
I took the liberty of editing your original patch to include the final icons.
Attachment #8686605 -
Flags: review+
Reporter | ||
Updated•9 years ago
|
Flags: needinfo?(janx)
Reporter | ||
Updated•9 years ago
|
Attachment #8684900 -
Attachment is obsolete: true
Reporter | ||
Updated•9 years ago
|
Attachment #8685277 -
Attachment is obsolete: true
Reporter | ||
Comment 24•9 years ago
|
||
Ryan, this patch makes about:debugging use Helen's new icons.
Please have a look.
https://treeherder.mozilla.org/#/jobs?repo=try&revision=2e8ded280ca7
Attachment #8686606 -
Flags: review?(jryans)
Reporter | ||
Comment 25•9 years ago
|
||
Also, thanks a lot for your help Tim! :)
Comment 26•9 years ago
|
||
Comment on attachment 8686605 [details] [diff] [review]
Add in new about:debugging icons namespaced with debugging-.
Review of attachment 8686605 [details] [diff] [review]:
-----------------------------------------------------------------
nit: the SVG fills should be #fbfbfb
Reporter | ||
Comment 27•9 years ago
|
||
(In reply to Tim Nguyen [:ntim] from comment #26)
> nit: the SVG fills should be #fbfbfb
Whoops, forgot about that. Thanks!
Attachment #8686660 -
Flags: review+
Reporter | ||
Updated•9 years ago
|
Attachment #8686605 -
Attachment is obsolete: true
Reporter | ||
Comment 28•9 years ago
|
||
Comment on attachment 8686606 [details] [diff] [review]
Use the cool new about:debugging icons.
Review of attachment 8686606 [details] [diff] [review]:
-----------------------------------------------------------------
Yay, icons!
Attachment #8686606 -
Flags: review?(jryans) → review+
Reporter | ||
Updated•9 years ago
|
Keywords: checkin-needed
Comment 30•9 years ago
|
||
Hi, the first patch failed to apply:
renamed 1209581 -> Bug-1209581---Use-the-cool-new-aboutdebugging-icon.patch
applying Bug-1209581---Use-the-cool-new-aboutdebugging-icon.patch
patching file devtools/client/jar.mn
Hunk #1 FAILED at 288
1 out of 1 hunks FAILED -- saving rejects to file devtools/client/jar.mn.rej
jan, could you take a look? Thanks !
Flags: needinfo?(janx)
Keywords: checkin-needed
Reporter | ||
Updated•9 years ago
|
Attachment #8686660 -
Attachment is obsolete: true
Reporter | ||
Updated•9 years ago
|
Attachment #8686606 -
Attachment is obsolete: true
Reporter | ||
Comment 33•9 years ago
|
||
Rebased both patches, should apply properly now.
Flags: needinfo?(janx)
Keywords: checkin-needed
Comment 34•9 years ago
|
||
https://hg.mozilla.org/integration/fx-team/rev/ddf603effb9f
https://hg.mozilla.org/integration/fx-team/rev/f92dce8d388c
Keywords: checkin-needed
Comment 35•9 years ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/ddf603effb9f
https://hg.mozilla.org/mozilla-central/rev/f92dce8d388c
Status: NEW → RESOLVED
Closed: 9 years ago
status-firefox45:
--- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 45
Updated•6 years ago
|
Product: Firefox → DevTools
You need to log in
before you can comment on or make changes to this bug.
Description
•