1326527 - Use Firebug-like versions for search and filter icons

Status: RESOLVED WONTFIX

(DevTools :: General, enhancement, P3)

Description

[Sebastian Zartner [:sebo]]

The search and filter icons used in the DevTools don't look like other icons in the Firebug theme. They should be replaced by Firebug-like ones.

A search icon is available at https://github.com/firebug/firebug/blob/master/extension/skin/classic/search.svg.

Sebastian

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Thanks for the report Sebastian.

Honza

Comment 2

[Jan Honza Odvarko [:Honza] (always need-info? me)]

@Towkir: are you interested in this one?

Honza

Comment 3

[[:Towkir] Ahmed]

Sure, but first I will need to be more clear about the issue here :) 
The icon provided in comment 0 , where do we want it to added ? In firebug addon ? or in core devtools ?

Comment 4

[Jan Honza Odvarko [:Honza] (always need-info? me)]

@Sebastian: please see comment #3

Honza

Comment 5

[Sebastian Zartner [:sebo]]

(In reply to [:Towkir] Ahmed from comment #3)
> Sure, but first I will need to be more clear about the issue here :) 
> The icon provided in comment 0 , where do we want it to added ? In firebug
> addon ? or in core devtools ?

The core DevTools. The Firebug add-on is discontinued.

Note that there is no filter icon yet. I can create one if you want me to.

Sebastian

Comment 6

[[:Towkir] Ahmed]

There are lot more icons missing for firebug theme.
Console : 'Clear the web console output' icon
Style Editor: (i) 'Create and append a new style sheet to the document' icon
              (ii) 'Import and append an existing style sheet to the document' icon
              (iii) 'Toggle style sheet visibility' icon
Performance: (i) 'Clear' icon
             (ii) 'Toggle the recording...' icon
             (iii) 'Import' icon
             (iv) 'Select what data to display...' icon

And more on other tabs, 
I think there should be a meta bug something like 'Icons of firebug theme should look like firebug theme icons'

What do you think Honza ? Should I file a meta bug and fix each icons in separate bug, or one bug and all the icons in one patch ?

Comment 7

[Sebastian Zartner [:sebo]]

(In reply to [:Towkir] Ahmed from comment #6)
> What do you think Honza ? Should I file a meta bug and fix each icons in
> separate bug, or one bug and all the icons in one patch ?

Let's create one bug per panel or feature and let them block bug 1263889. It's better to make smaller steps. Alternatively, you may create a new meta-bug for all icon-related changes, though I'm not sure it's worth the effort. Also, there are already a few bugs blocking 1263889, which include icon changes besides other things, like bug 1269730.

(I am answering this instead of Honza, because I will probably be the one creating the icons.)

Sebastian

Comment 8

[Tim Nguyen :ntim]

Ruturaj is suggesting we should use the default theme icons for the Firebug theme as well in bug 1321986, the argument here is consistency. I'm fine either way as long as it's consistent, so I'll let UX decide on whether we want firebug style icons or default theme icons.

Comment 9

[Sebastian Zartner [:sebo]]

For clarification, the consistency is either with the other DevTools themes or with Firebug (the extension).
As the Firebug theme is rather used by former Firebug users, it makes more sense, in my opinion, to keep the style of the icons consistent with the ones in Firebug.

Sebastian

Comment 10

[Key]

Hi, I'd like to be assigned this bug, it would be my first.

Comment 11

[Key]

Would solving this bug be as simple as replacing the old icon with the new icon located at devtools/skin/images/search.svg?

Comment 12

[Tim Nguyen :ntim]

(In reply to Key from comment #11)
> Would solving this bug be as simple as replacing the old icon with the new
> icon located at devtools/skin/images/search.svg?

You need to
- save the file linked in comment 0 to devtools/client/themes/images/firebug/search.svg
- register the file in devtools/client/jar.mn
- change this line [0] to link to the new file

You'd want to repeat the same steps for filter.svg:
- save [1] to devtools/client/themes/images/firebug/filter.svg
- register the file in devtools/client/jar.mn
- add a line after [0] containing:"  --filter-image: url(chrome://devtools/skin/images/filter.svg);"

[0]: https://dxr.mozilla.org/mozilla-central/source/devtools/client/themes/toolbars.css#32
[1]: https://hg.mozilla.org/integration/fx-team/raw-file/0361b7030d36/devtools/client/themes/images/firebug/filter.svg

Comment 13

[Tim Nguyen :ntim]

(In reply to Tim Nguyen :ntim from comment #12)
> - add a line after [0] containing:"  --filter-image:
> url(chrome://devtools/skin/images/filter.svg);"

meant "  --filter-image: url(chrome://devtools/skin/images/firebug/filter.svg);"

Comment 14

[Key]

I added search.svg and filter.svg to devtools/client/themes/images/firebug/search.svg, then I added the following two lines to the end of jar.mn:
"
    skin/images/firebug/search.svg (themes/images/firebug/search.svg)
    skin/images/firebug/filter.svg (themes/images/firebug/filter.svg)
"
And .theme-firebug in toolbars.css has
"
  --magnifying-glass-image: url(chrome://devtools/skin/images/firebug/search.svg);
  --filter-image: url(chrome://devtools/skin/images/firebug/filter.svg);
"
However, only the search icon has successfully changed.

The build version I have is from about a month ago, I'm guessing this is the issue. I notice toolbars.css (at least) has seen some changes since (though nothing regarding filter.svg as far as far I can tell).
What's the quickest way to update the build version I have? I will do that and retry the aforementioned steps.

Comment 15

[Sebastian Zartner [:sebo]]

Hi Key, it looks like your last changes got missed. Are you still willing to finish your patch?

Sebastian

Comment 16

[Key]

Sorry, I don't have the environment set up to work on this bug anymore :( May this bug find a better home.

Comment 17

[Vedant Chakravadhanula(:vedantc98)]

I'd be willing to work on this bug, can I take it up?

Comment 18

[Sebastian Zartner [:sebo]]

Sure, I've assigned it to you.

Sebastian

Comment 19

[Vedant Chakravadhanula(:vedantc98)]

Attachment: bug_1326527.patch

Made the required changes.
Thanks.

Comment 20

[Sebastian Zartner [:sebo]]

Comment on attachment 8908304 [details] [diff] [review]
bug_1326527.patch

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

Thank you for the patch, Vedant! The search field within the Inspector now has the search icon and the filter button within the console has the right filter icon. Though there are many other places where the filter and search icons are used.

Here's a detailed description of what needs to be changed in order to get this patch landed:
The size of the icons should be 16px x 16px like in Firebug. I realized that the filter icon I linked to earlier is a bit big and the search icon is missing the Mozilla license information. I'll update them accordingly.
The filter icon within the Performance, Memory, Network, Storage, Canvas, and DOM panels and the Inspector's Rules and Computed side panels and the  needs to be replaced by the Firebug one.
The search icon within the Debugger panel needs to be replaced by the Firebug one.

Sebastian

Comment 21

[Sebastian Zartner [:sebo]]

Attachment: filter.svg

Here's the filter icon that should be used.

Comment 22

[Sebastian Zartner [:sebo]]

Attachment: search.svg

And here the search icon that should be used.

Sebastian

Comment 23

[Vedant Chakravadhanula(:vedantc98)]

Thanks for the feedback, Sebastian.

I'll add the changes and push another patch.

Comment 24

[Jan Honza Odvarko [:Honza] (always need-info? me)]

The Firebug theme was removed in Bug 1378108, so I am marking this report as WONTFIX.

Honza