Closed Bug 1430165 Opened 2 years ago Closed 1 year ago

Input clear icons does not match the design system

Categories

(Toolkit :: Themes, defect, P3)

defect

Tracking

()

RESOLVED FIXED
mozilla68
Tracking Status
firefox68 --- fixed

People

(Reporter: andreio, Assigned: MonikaMaheshwari, Mentored)

References

Details

Attachments

(4 files)

Attached image clearinput.png
On Windows the clear search input icon on about:preferences should be the same as on https://design.firefox.com/photon/components/input-fields.html
There are 2: the search input and "Applications" search field that need to be updated.
Attached image linux.png
Hm, I get that icon on OSX, so I guess that might be platform-specific, though I wonder if it has to be, since we moved most of our icons away from being platform-specific with Photon. Is the icon we're using for OSX the one we want on all platforms? Maybe Amin knows?
Flags: needinfo?(aalhazwani)
Yes, that is correct! With Photon, icons are (when possible) cross-platform. I just pushed online two versions for a clear text field icon, one for default text fields and one for smaller text fields. I also built a demo with a possible whimsical improvement http://aminalhazwani.com/demos/firefox-clear-text-field/v2/index.html. Let me know if anything else is necessary!

p.s. These two new icon are still not visible on the https://design.firefox.com/icons website even if the Travis build succeeded, dunno why.
Flags: needinfo?(aalhazwani)
Here the links for the clear text field icons (the website has finally been deployed): 
- for default/standard text fields use the 16x16px icon https://design.firefox.com/icons/viewer/#clear%20text%20field%2016
- for small text fields use the 12x12px icon https://design.firefox.com/icons/viewer/#clear%20text%20field%2012

In the linked demo in the prev comment you can find also the CSS with all the text field specs.
Mentor: jhofmann
Priority: -- → P3
Mentor: andrei.br92

Hi,
If this hasn't been assigned yet, I'd really like to work on it.

(In reply to Paarmita Bhargava from comment #5)

Hi,
If this hasn't been assigned yet, I'd really like to work on it.

That's great. I just assigned you.
What's required for this is to find the platform specific CSS used to style the clear button replace it to all point to the same image.
In this case the correct asset is that OSX uses

list-style-image: url(chrome://global/skin/icons/searchfield-cancel.svg);

This is found in
https://searchfox.org/mozilla-central/source/toolkit/themes/osx/global/icons/searchfield-cancel.svg

And you would need to move it to
https://searchfox.org/mozilla-central/source/toolkit/themes/shared/icons

And make all the other platforms point to the same icon. Right now they have platform specific styles like Windows:
https://searchfox.org/mozilla-central/source/toolkit/themes/windows/global/textbox.css#102

And you also need to update these build specific files that tell the browser how to resolve the paths to the images
So:
https://searchfox.org/mozilla-central/source/toolkit/themes/windows/global/jar.mn#49
Should not be used anymore and it should be migrated to the "shared" file
https://searchfox.org/mozilla-central/source/toolkit/themes/shared/jar.inc.mn

Johann anything else I missed?

Assignee: nobody → paarmita1998
Flags: needinfo?(jhofmann)

Johann anything else I missed?

I think that's it. :)

Flags: needinfo?(jhofmann)
Status: NEW → ASSIGNED

Paarmita, are you still working this or should we unassign you?

Thanks!

Flags: needinfo?(paarmita1998)
Assignee: paarmita1998 → nobody
Status: ASSIGNED → NEW
Flags: needinfo?(paarmita1998)

Monika, would you be interested in taking this over? :)

Thanks!

Flags: needinfo?(monikamaheshwari1996)

Yeah sure :)

Flags: needinfo?(monikamaheshwari1996)

Hey, do I need to create new revision or update on same revision.

Flags: needinfo?(jhofmann)

I think that's mostly up to you, I would suggest creating a new revision so that you're in full control :)

Flags: needinfo?(jhofmann)

Thank you for your submission. The PR looks great I only had 1 request to remove the windows image file which now remains unused.

Assignee: nobody → monikamaheshwari1996
Pushed by aoprea@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/a9deeecc3899
Input clear icons does not match the design system r=andreio
Status: NEW → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
Regressions: 1552768

This should have been reviewed by a Firefox reviewer.

Component: Preferences → Themes
Product: Firefox → Toolkit
Target Milestone: Firefox 68 → ---
Target Milestone: --- → mozilla69
Target Milestone: mozilla69 → mozilla68
Regressions: 1554382
QA Whiteboard: [qa-68b-p2]
You need to log in before you can comment on or make changes to this bug.