Closed Bug 1699889 Opened 3 years ago Closed 3 years ago

Update shared toolkit icons

Categories

(Toolkit :: Themes, enhancement, P1)

Product:
Toolkit
Component:
Themes
Type:
enhancement

Tracking

()

Status:
VERIFIED FIXED
Milestone:
89 Branch
Tracking Flags:
Tracking Status
firefox89 --- verified

People

(Reporter: sfoster, Assigned: mconley)

References

(Blocks 1 open bug)

Details

(Whiteboard: [proton-icons])

Attachments

(2 files)

Bug 1699889 - Update toolkit/themes/shared/icons icons. r?sfoster!
48 bytes, text/x-phabricator-request
Details | Review
clearNow.png
51.69 KB, image/png
Details

We have newly drawn svgs for many of the standard-sized icons in toolkit/themes/shared/icons

Priority: -- → P2
Type: task → enhancement
Priority: P2 → P1

This is a catch-all for icons not explicitly addressed or clearly owned by another component. It would be better to split this out into more specific bugs where possible.

Most of the toolkit/themes/shared/icons appear to be ready. The exceptions are:

  • toolkit/themes/shared/icons/print.svg (print.svg)
  • toolkit/themes/shared/icons/delete.svg (delete.svg)
  • toolkit/themes/shared/icons/blocked.svg (error-fill.svg)
  • toolkit/themes/shared/icons/edit.svg (edit.svg)
  • toolkit/themes/shared/icons/document.svg (page-portrait.svg)

What might be fastest is to land the rest in this bug, and file a follow-up bug for those 5 for when they're available.

So this bug will be for the following icons:

  • toolkit/themes/shared/icons/help.svg (help.svg)
  • toolkit/themes/shared/icons/check.svg (checkmark.svg)
  • toolkit/themes/shared/icons/spinner-arrow-up.svg (chevron-up.svg)
  • toolkit/themes/shared/icons/folder.svg (folder.svg)
  • toolkit/themes/shared/icons/menu-arrow-left.svg (chevron-left-12.svg)
  • toolkit/themes/shared/icons/open-in-new.svg (external-link.svg)
  • toolkit/themes/shared/icons/spinner-arrow-down.svg (chevron-down.svg)
  • toolkit/themes/shared/icons/twisty-collapsed.svg (chevron-right.svg)
  • toolkit/themes/shared/icons/check-partial.svg (subtract.svg)
  • toolkit/themes/shared/icons/error.svg (critical-fill.svg)
  • toolkit/themes/shared/icons/find-next-arrow.svg (chevron-down.svg)
  • toolkit/themes/shared/icons/find-previous-arrow.svg (chevron-up.svg)
  • toolkit/themes/shared/icons/icon-refresh.svg (reload.svg)
  • toolkit/themes/shared/icons/info-filled.svg (information-fill.svg)
  • toolkit/themes/shared/icons/info.svg (information.svg)
  • toolkit/themes/shared/icons/menu-arrow.svg (chevron-right.svg)
  • toolkit/themes/shared/icons/more.svg (page-actions.svg)
  • toolkit/themes/shared/icons/success.svg (checkmark.svg)
  • toolkit/themes/shared/icons/twisty-collapsed-rtl.svg (chevron-left-12.svg)
  • toolkit/themes/shared/icons/twisty-expanded.svg (chevron-down-12.svg)
  • toolkit/themes/shared/icons/update-icon.svg (update-circle-fill.svg)

And the following are being done in separate bugs:

  • toolkit/themes/shared/icons/plugin-blocked.svg (plugin-blocked.svg) (done in bug 1702837)
  • toolkit/themes/shared/icons/plugin.svg (plugin.svg) (done in bug 1702837)
  • toolkit/themes/shared/icons/pocket.svg (pocket-fill.svg) (done in bug 1686527)
  • toolkit/themes/shared/icons/chevron.svg (chevron-double-right.svg) (done in bug 1686527)
  • toolkit/themes/shared/icons/search-glass.svg (search.svg) (done in bug 1702289)
  • toolkit/themes/shared/icons/security-broken.svg (lock-insecure-red.svg) (done in bug 1702289)
  • toolkit/themes/shared/icons/security-warning.svg (lock-warning.svg) (done in bug 1702289)
  • toolkit/themes/shared/icons/security.svg (lock.svg) (done in bug 1702289)
  • toolkit/themes/shared/icons/defaultFavicon.svg (defaultFavicon.svg) (done in bug 1702986)
  • toolkit/themes/shared/icons/add.svg (add.svg) (done in bug 1702285)
  • toolkit/themes/shared/icons/arrow-dropdown-12.svg (chevron-down-12.svg) (done in bug 1702285)
  • toolkit/themes/shared/icons/arrow-dropdown-16.svg (chevron-down.svg) (done in bug 1702285)
  • toolkit/themes/shared/icons/arrow-left.svg (chevron-left.svg) (done in bug 1702285)
  • toolkit/themes/shared/icons/arrow-up-12.svg (chevron-up-12.svg) (done in bug 1702285)
  • toolkit/themes/shared/icons/close.svg (close.svg) (done in bug 1702285)
  • toolkit/themes/shared/icons/settings.svg (settings.svg) (done in bug 1702285)
  • toolkit/themes/shared/icons/warning.svg (warning-fill.svg) (done in bug 1704945)
See Also: → 1702986
Assignee: nobody → mconley
Attachment #9215211 - Attachment description: WIP: Bug 1699889 - Update some toolkit icons, batch 1. r?sfoster! → Bug 1699889 - Update some toolkit icons, batch 1. r?sfoster!

We've received a new icon drop. I'm going to create a second patch for the new shared toolkit icons.

Actually, looking at the list, there's only one new icon in the shared icon set - for toolkit/themes/shared/icons/print.svg. That, plus the fact that I missed toolkit/themes/shared/icons/arrow-left.svg in the first set, I think what I'm going to do is just add both to the first set.

Attachment #9215211 - Attachment description: Bug 1699889 - Update some toolkit icons, batch 1. r?sfoster! → Bug 1699889 - Update toolkit/themes/shared/icons icons. r?sfoster!

Updated comment 3, since the following icons are being taken care of in bug 1702285:

  • toolkit/themes/shared/icons/add.svg (add.svg) (done in bug 1702285)
  • toolkit/themes/shared/icons/arrow-dropdown-12.svg (chevron-down-12.svg) (done in bug 1702285)
  • toolkit/themes/shared/icons/arrow-dropdown-16.svg (chevron-down.svg) (done in bug 1702285)
  • toolkit/themes/shared/icons/arrow-left.svg (chevron-left.svg) (done in bug 1702285)
  • toolkit/themes/shared/icons/arrow-up-12.svg (chevron-up-12.svg) (done in bug 1702285)
  • toolkit/themes/shared/icons/close.svg (close.svg) (done in bug 1702285)
  • toolkit/themes/shared/icons/settings.svg (settings.svg) (done in bug 1702285)
See Also: → 1704945

Per sfoster's recommendation, I'm also going to split out warning.svg into it's own separate bug (bug 1704945)

Pushed by mconley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/33a3238f427b
Update toolkit/themes/shared/icons icons. r=sfoster,desktop-theme-reviewers,preferences-reviewers

https://hg.mozilla.org/mozilla-central/rev/33a3238f427b

Status: NEW → RESOLVED
Closed: 3 years ago
status-firefox89: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → 89 Branch

ni'ing myself to write an epic comment to help QA find all of the (many) places where these icons are used.

Flags: needinfo?(mconley)
Regressions: 1706085

Many icons in this bug were updated. What's more, these icons are shared and used in many different places. This makes this bug, I think, a unique challenge amongst the Proton icons bugs, in that the sheer surface area of things to check is so much broader than the other bugs.

But this is an attempt to document where the updates icons will show up. I'm going to do this in several batches / comments, to reduce wall-of-text.

toolkit/themes/shared/icons/help.svg

  • The "refresh profile" offer infobar
  • about:logins (in the meatball menu)
  • The URL bar, if the user has put special queries into the URL bar in en-US builds, such as "refresh firefox"
  • In about:debugging, towards the bottom left
  • In about:addons, towards the bottom left
  • In about:preferences, towards the bottom left
  • Also in about:preferences, in the Site Data removal dialog
  • All "info" type Infobars

toolkit/themes/shared/icons/check.svg

  • The About Firefox dialog (after determining that the browser is up to date)
  • Any checkboxes in the browser UI or in-content pages
  • The Web Developer panel, if the DevTools are open
  • The Character Encoding menu
  • about:preferences, in the search engines list
  • Windows 10 Proton context menus

toolkit/themes/shared/icons/folder.svg

  • The Downloads panel on Windows and Linux
  • The Downloads view in the Library on Windows and Linux
  • about:downloads in Private Browsing mode on Windows and Linux

toolkit/themes/shared/icons/menu-arrow-left.svg

  • The "back" button in slide-y panels, like the AppMenu panel

toolkit/themes/shared/icons/open-in-new.svg

  • Print preview

toolkit/themes/shared/icons/print.svg

  • The Print button (by default, hidden in customize mode)
  • Print preview

toolkit/themes/shared/icons/twisty-collapsed.svg

  • This icon is used everywhere we have a XUL tree that has folding and unfolding rows. Here's a list of those places:
    • Library window
    • Bookmarks / History sidebar
    • about:sessionrestore (when choosing which tabs / windows to restore)
    • about:welcomeback (when choosing which tabs / windows to restore)
    • Bookmarks Panel (folder selector)
    • about:preferences (certificate viewer)
  • about:performance
  • about:processes
  • "Disclosure"-type buttons in dialogs (I'm not 100% certain this type is ever used anywhere)

toolkit/themes/shared/icons/check-partial.svg

  • about:sessionrestore and about:welcomeback when a subset of the tabs of a window are being restored

toolkit/themes/shared/icons/error.svg

  • about:certificate (for broken certificates)
  • "Error" type Infobars

toolkit/themes/shared/icons/find-next-arrow.svg

  • The Findbar

toolkit/themes/shared/icons/find-previous-arrow.svg

  • The Findbar

toolkit/themes/shared/icons/info-filled.svg

  • about:welcomeback (the favicon)
  • The Downloads view in Library, when viewing a download being blocked by SafeBrowsing
  • The Downloads panel, when viewing a download being blocked by SafeBrowsing
  • "Info" type Infobars

toolkit/themes/shared/icons/info.svg

  • The Bookmarks panel (after bookmarking the first bookmark)
  • The Profiler panel
  • The Protections panel
  • The FxA item in the AppMenu when the account is unverified
  • The per-channel profile dialog (chrome://browser/content/newInstall.xhtml)
  • about:preferences when using first-party isolation, and viewing the Privacy pane

toolkit/themes/shared/icons/menu-arrow.svg

  • Panels (subview navigation button icons)
  • Context menus (Windows 10), for submenus

toolkit/themes/shared/icons/more.svg

  • about:logins (meatball icon)
  • about:home/about:newtab (meatball icon when hovering a top site or card)
  • about:addons (meatball icon for viewing more options for an extension or theme)

toolkit/themes/shared/icons/success.svg

  • about:logins (after successfully copying a username or password to the clipboard)
  • about:config (when editing a value)
  • about:addons (verified add-ons)

toolkit/themes/shared/icons/twisty-collapsed-rtl.svg

  • This icon is used everywhere in RTL builds where we have a XUL tree that has folding and unfolding rows. Here's a list of those places:
    • Library window
    • Bookmarks / History sidebar
    • about:sessionrestore (when choosing which tabs / windows to restore)
    • about:welcomeback (when choosing which tabs / windows to restore)
    • Bookmarks Panel (folder selector)
    • about:preferences (certificate viewer)
  • about:performance
  • about:processes
  • "Disclosure"-type buttons in dialogs (I'm not 100% certain this type is ever used anywhere)

toolkit/themes/shared/icons/twisty-expanded.svg

  • This icon is used everywhere where we have a XUL tree that has folding and unfolding rows. Here's a list of those places:
    • Library window
    • Bookmarks / History sidebar
    • about:sessionrestore (when choosing which tabs / windows to restore)
    • about:welcomeback (when choosing which tabs / windows to restore)
    • Bookmarks Panel (folder selector)
    • about:preferences (certificate viewer)
  • about:performance
  • about:processes
  • "Disclosure"-type buttons in dialogs (I'm not 100% certain this type is ever used anywhere)

toolkit/themes/shared/icons/update-icon.svg

  • about:addons (when an add-on requires an update)
Flags: needinfo?(mconley)
Regressions: 1707996
Regressions: 1708209

Hi Mike, I tried to Confirm this Fix and after a bit of exploratory and following each location you mentioned for each icon I came across a few issues, maybe you can clear some of these up for us so we can confirm it as Verified:

toolkit/themes/shared/icons/help.svg

  • The "refresh profile" offer infobar (has the ! icon instead of the ? (help) icon)
  • Also in about:preferences, in the Site Data removal dialog – help icon is different / seems like its the old style "?" mark
  • All "info" type Infobars: - all of these have the "!" icon instead of the "?" help icon.

toolkit/themes/shared/icons/check.svg

  • The Character Encoding menu - always disabled, havent found a single test page where this would enable, maybe you can help us here with a link

toolkit/themes/shared/icons/folder.svg

  • The Downloads panel on Windows and Linux
  • The Downloads view in the Library on Windows and Linux
  • about:downloads in Private Browsing mode on Windows and Linux - Could not find any of these, these icons might not show anywhere else in Firefox, I could find them in the build but I just cannot find them in Firefox.

toolkit/themes/shared/icons/open-in-new.svg

  • Print preview - Cannot see any icons in Print Preview - this may have been removed from firefox

toolkit/themes/shared/icons/print.svg

  • Print preview - Cannot see any Print icon in Print Preview

toolkit/themes/shared/icons/twisty-collapsed.svg

  • about:processes - there are no icons here
  • "Disclosure"-type buttons in dialogs (I'm not 100% certain this type is ever used anywhere) - checked those in about:performance if those are the twisty disclosure type buttons

toolkit/themes/shared/icons/check-partial.svg

  • about:sessionrestore and about:welcomeback when a subset of the tabs of a window are being restored - if its the Check mark or the line when a Check mark is unchecked from the list of tabs than its ok. If its a different check-partial.svg , then I have no idea which one it is, I tried searching the file in Firefox but I couldnt find anything.

toolkit/themes/shared/icons/find-next-arrow.svg
toolkit/themes/shared/icons/find-previous-arrow.svg

  • These two may have been removed and replaced with the Up, Down arrows which take you to the next or previous searches.

toolkit/themes/shared/icons/info.svg

  • The Bookmarks panel (after bookmarking the first bookmark) - not sure where to see this, I know what the icon is but I couldnt see it anywhere after saving any bookmarks.
  • The per-channel profile dialog (chrome://browser/content/newInstall.xhtml) - Not sure which dialog is this, but I havent seen any Info icons in about:profiles when creating a new one or editing one.. I'm not sure where this one is.

toolkit/themes/shared/icons/twisty-collapsed-rtl.svg

  • about:sessionrestore (when choosing which tabs / windows to restore)
  • about:welcomeback (when choosing which tabs / windows to restore) - none of these have that twisty icon, Not in Normal builds or RTL builds. It simply shows the window and the tabs underneat when expanded or collapsed, and the checkmark on the left in order to confirm what to restore. But I do think its Expected behavior.
  • about:preferences (certificate viewer) – MISSING ICONS in RTL BUILDS (This is Actually a bug, please let me know if I should log a new one for these) RTL builds are missing the twisty icons in the certificate viewer.
  • about:processes
  • "Disclosure"-type buttons in dialogs (I'm not 100% certain this type is ever used anywhere) - just like normal builds these dont exist.

toolkit/themes/shared/icons/twisty- expanded.svg

  • about:welcomeback (when choosing which tabs / windows to restore) Missing , I only saw the Up/Down arrow on the about:sessionrestore page, it's missing from the Welcome Back page.

Please let me know where to find these icons or let me know if them missing is intended/expected after the Deduplication and other proton-cleanups.

Flags: needinfo?(mconley)

(In reply to Rares Doghi from comment #15)

Hi Mike, I tried to Confirm this Fix and after a bit of exploratory and following each location you mentioned for each icon I came across a few issues, maybe you can clear some of these up for us so we can confirm it as Verified:

Sure, will do my best.

toolkit/themes/shared/icons/help.svg

  • The "refresh profile" offer infobar (has the ! icon instead of the ? (help) icon)

This appears to be bug 1711222.

  • Also in about:preferences, in the Site Data removal dialog – help icon is different / seems like its the old style "?" mark

I'm actually having a difficult time finding this icon now. Can you show me a screenshot?

  • All "info" type Infobars: - all of these have the "!" icon instead of the "?" help icon.

toolkit/themes/shared/icons/check.svg

I this this is also bug 1711222.

  • The Character Encoding menu - always disabled, havent found a single test page where this would enable, maybe you can help us here with a link

Maybe hsivonen knows? I've ni'd them.

toolkit/themes/shared/icons/folder.svg

  • The Downloads panel on Windows and Linux
  • The Downloads view in the Library on Windows and Linux
  • about:downloads in Private Browsing mode on Windows and Linux - Could not find any of these, these icons might not show anywhere else in Firefox, I could find them in the build but I just cannot find them in Firefox.

These icons show up on Windows and Linux for completed downloads:

toolkit/themes/shared/icons/open-in-new.svg

  • Print preview - Cannot see any icons in Print Preview - this may have been removed from firefox

The icon is to the right of the "Print using system dialog" link:

toolkit/themes/shared/icons/print.svg

  • Print preview - Cannot see any Print icon in Print Preview

This icon is in the printer dropdown:

toolkit/themes/shared/icons/twisty-collapsed.svg

  • about:processes - there are no icons here

It looks like this needs to have toolkit.aboutProcesses.showThreads set to true before the twisty's will show up.

toolkit/themes/shared/icons/check-partial.svg

  • about:sessionrestore and about:welcomeback when a subset of the tabs of a window are being restored - if its the Check mark or the line when a Check mark is unchecked from the list of tabs than its ok. If its a different check-partial.svg , then I have no idea which one it is, I tried searching the file in Firefox but I couldnt find anything.

Yeah, check-partial looks like a straight line when the checkmark is unchecked, but one of the children are checked.

toolkit/themes/shared/icons/find-next-arrow.svg
toolkit/themes/shared/icons/find-previous-arrow.svg

  • These two may have been removed and replaced with the Up, Down arrows which take you to the next or previous searches.

Yes, that appears to be the case. Nothing for you to do here.

toolkit/themes/shared/icons/info.svg

  • The Bookmarks panel (after bookmarking the first bookmark) - not sure where to see this, I know what the icon is but I couldnt see it anywhere after saving any bookmarks.

Digging deeper, I believe this isn't used anymore.

  • The per-channel profile dialog (chrome://browser/content/newInstall.xhtml) - Not sure which dialog is this, but I havent seen any Info icons in about:profiles when creating a new one or editing one.. I'm not sure where this one is.

That dialog appears to have been removed, so nothing to do here.

toolkit/themes/shared/icons/twisty-collapsed-rtl.svg

  • about:sessionrestore (when choosing which tabs / windows to restore)
  • about:welcomeback (when choosing which tabs / windows to restore) - none of these have that twisty icon, Not in Normal builds or RTL builds. It simply shows the window and the tabs underneat when expanded or collapsed, and the checkmark on the left in order to confirm what to restore. But I do think its Expected behavior.

I think you're right.

  • about:preferences (certificate viewer) – MISSING ICONS in RTL BUILDS (This is Actually a bug, please let me know if I should log a new one for these) RTL builds are missing the twisty icons in the certificate viewer.

Let's file a new bug for this.

toolkit/themes/shared/icons/twisty- expanded.svg

  • about:welcomeback (when choosing which tabs / windows to restore) Missing , I only saw the Up/Down arrow on the about:sessionrestore page, it's missing from the Welcome Back page.

If twisty-collapsed isn't being used for about:welcomeback, then it stands to reason that twisty-expanded isn't being used either.

Thanks for your diligence checking all of this, Rares!

Flags: needinfo?(mconley) → needinfo?(hsivonen)

The Character Encoding menu - always disabled, havent found a single test page where this would enable, maybe you can help us here with a link

Maybe hsivonen knows? I've ni'd them.

Here's a demo where it's enabled:
https://hsivonen.com/test/charset/mislabeled-as-utf8/ja-Shift_JIS.html

(Here's the first real-world page that I could locate that demonstrates the same phenomenon in the wild: https://www-imai.is.s.u-tokyo.ac.jp/~yato/ )

Flags: needinfo?(hsivonen)

I was able to verify the remaining icons, for the Repair Text Encode I noticed that there is no menu there at all its just the button that repairs the website and since bug 1711222 is already logged for the remaining issue I think I can confirm this issue Verified as fixed.

Here is the Help menu icon from the Clear Data modal, this one is only displayed after clicking Clear again.

Flags: needinfo?(mconley)
Attached image clearNow.png —

(In reply to Rares Doghi from comment #18)

for the Repair Text Encode I noticed that there is no menu there at all its just the button that repairs the website

(That change was bug 1687635.)

Also Added Bug 1720305 for the RTL issue.

Thanks, Rares! Would it be possible to file a new bug to replace that "Clear all cookies and site data" confirmation modal with a Proton-themed modal? Otherwise, I think we're done here.

Flags: needinfo?(mconley) → needinfo?(rares.doghi)

Added Bug 1721578 for the remaining issue, I can Confirm this issue Verified as Fixed.

Status: RESOLVED → VERIFIED
status-firefox89: fixed → verified
Flags: needinfo?(rares.doghi)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: