Bug 1408154 - Use SVG icons for the AppMenu. r=aceman
authorRichard Marti <richard.marti@gmail.com>
Thu, 12 Oct 2017 22:27:07 +0200
changeset 29272 d25546081788fa16c88358ddbb607405ca09ae68
parent 29271 103523d052a8ea9ea3b800d3d4328e48d113502f
child 29273 6982e252d9b925a3db5d1fd6e64ba8ba52723fbb
push id2068
push userclokep@gmail.com
push dateMon, 13 Nov 2017 19:02:14 +0000
treeherdercomm-beta@9c7e7ce8672b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersaceman
bugs1408154
Bug 1408154 - Use SVG icons for the AppMenu. r=aceman
mail/themes/linux/mail/messenger.css
mail/themes/linux/mail/primaryToolbar.css
mail/themes/osx/jar.mn
mail/themes/osx/mail/icons/appmenu-icons-active.png
mail/themes/osx/mail/icons/appmenu-icons-active@2x.png
mail/themes/osx/mail/icons/appmenu-icons.png
mail/themes/osx/mail/icons/appmenu-icons@2x.png
mail/themes/osx/mail/primaryToolbar.css
mail/themes/shared/jar.inc.mn
mail/themes/shared/mail/icons/quit.svg
mail/themes/shared/mail/icons/search-glass.svg
mail/themes/windows/jar.mn
mail/themes/windows/mail/icons/appmenu-icons.png
mail/themes/windows/mail/primaryToolbar.css
--- a/mail/themes/linux/mail/messenger.css
+++ b/mail/themes/linux/mail/messenger.css
@@ -288,236 +288,204 @@ menuitem:not([type]) {
   -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic");
 }
 
 #menu_New {
   -moz-binding: url("chrome://global/content/bindings/menu.xml#menu-iconic");
   list-style-image: url("moz-icon://stock/gtk-new?size=menu");
 }
 
-menuitem[command="cmd_newMessage"],
-splitmenu[command="cmd_newMessage"] {
-  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar-small.png");
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-#menu_newFolder,
-#appmenu_newFolder {
+#menu_newFolder {
   list-style-image: url("moz-icon://stock/gtk-directory?size=menu");
 }
 
-#menu_newVirtualFolder,
-#appmenu_newVirtualFolder {
+#menu_newVirtualFolder {
   list-style-image: url("chrome://messenger/skin/icons/folder-pane.png");
   -moz-image-region: rect(128px 16px 144px 0px);
 }
 
-#menu_newCard,
-#appmenu_newCard {
-  list-style-image: url("chrome://messenger/skin/addressbook/icons/addressbook-toolbar.png");
-  -moz-image-region: rect(44px 22px 66px 0px); /* contact-add.png */
-}
-
-#openMessageFileMenuitem,
-#appmenu_openMessageFileMenuitem {
+#openMessageFileMenuitem {
   list-style-image: url("moz-icon://stock/gtk-open?size=menu");
 }
 
-#menu_close,
-#appmenu_close {
+#menu_close {
   list-style-image: url("moz-icon://stock/gtk-close?size=menu");
 }
 
-#menu_saveAs,
-#appmenu_saveAs {
+#menu_saveAs {
   -moz-binding: url("chrome://global/content/bindings/menu.xml#menu-iconic");
   list-style-image: url("moz-icon://stock/gtk-save-as?size=menu");
 }
 
 #mailContext-saveAs,
 #mailContext-savelink,
 #mailContext-saveimage {
   list-style-image: url("moz-icon://stock/gtk-save-as?size=menu");
 }
 
-menuitem[command="cmd_print"],
+#printMenuItem,
 #mailContext-print,
 #mailContext-print {
   list-style-image: url("moz-icon://stock/gtk-print?size=menu");
 }
 
-menuitem[command="cmd_printpreview"],
+#printPreviewMenuItem,
 #mailContext-printpreview,
 #mailContext-printpreview {
   list-style-image: url("moz-icon://stock/gtk-print-preview?size=menu");
 }
 
-menuitem[command="cmd_quit"] {
+#menu_FileQuitItem {
   list-style-image: url("moz-icon://stock/gtk-quit?size=menu");
 }
 
-menuitem[command="cmd_undo"] {
+#menu_undo {
   list-style-image: url("moz-icon://stock/gtk-undo?size=menu");
 }
 
-menuitem[command="cmd_undo"][disabled] {
+#menu_undo[disabled] {
   list-style-image: url("moz-icon://stock/gtk-undo?size=menu&state=disabled");
 }
 
-menuitem[command="cmd_redo"] {
+#menu_redo {
   list-style-image: url("moz-icon://stock/gtk-redo?size=menu");
 }
 
-menuitem[command="cmd_redo"][disabled] {
+#menu_redo[disabled] {
   list-style-image: url("moz-icon://stock/gtk-redo?size=menu&state=disabled");
 }
 
-menuitem[command="cmd_cut"] {
+#menu_cut {
   list-style-image: url("moz-icon://stock/gtk-cut?size=menu");
 }
 
-menuitem[command="cmd_cut"][disabled] {
+#menu_cut[disabled] {
   list-style-image: url("moz-icon://stock/gtk-cut?size=menu&state=disabled");
 }
 
-menuitem[command="cmd_copy"],
+#menu_copy,
 #mailContext-copy,
 #mailContext-copyimage,
 #mailContext-copylink,
 #mailContext-copyemail {
   list-style-image: url("moz-icon://stock/gtk-copy?size=menu");
 }
 
-menuitem[command="cmd_copy"][disabled],
+#menu_copy[disabled],
 #mailContext-copy[disabled] {
   list-style-image: url("moz-icon://stock/gtk-copy?size=menu&state=disabled");
 }
 
-menuitem[command="cmd_paste"]{
+#menu_paste {
   list-style-image: url("moz-icon://stock/gtk-paste?size=menu");
 }
 
-menuitem[command="cmd_paste"][disabled] {
+#menu_paste[disabled] {
   list-style-image: url("moz-icon://stock/gtk-paste?size=menu&state=disabled");
 }
 
-menuitem[command="cmd_delete"],
+#menu_delete,
 #mailContext-delete,
 #folderPaneContext-remove {
   list-style-image: url("moz-icon://stock/gtk-delete?size=menu");
 }
 
-menuitem[command="cmd_delete"][disabled],
+#menu_delete[disabled],
 #mailContext-delete[disabled] {
   list-style-image: url("moz-icon://stock/gtk-delete?size=menu&state=disabled");
 }
 
-menuitem[command="cmd_selectAll"] {
+#menu_SelectAll {
   list-style-image: url("moz-icon://stock/gtk-select-all?size=menu");
 }
 
 #menu_find {
   -moz-binding: url("chrome://global/content/bindings/menu.xml#menu-iconic");
 }
 
-#appmenu_find > .splitmenu-menuitem,
-#appmenu_customize > .splitmenu-menuitem {
-  -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic");
-}
-
-#menu_find,
-#appmenu_find {
+#menu_find {
   list-style-image: url("moz-icon://stock/gtk-find?size=menu");
 }
 
 #folderPaneContext-searchMessages {
   list-style-image: url("moz-icon://stock/gtk-find?size=menu");
 }
 
 #folderPaneContext-searchMessages[disabled] {
   list-style-image: url("moz-icon://stock/gtk-find?size=menu&state=disabled");
 }
 
 #folderPaneContext-properties {
   list-style-image: url("moz-icon://stock/gtk-properties?size=menu");
 }
 
-#menu_preferences,
-#appmenu_customize {
+#menu_preferences {
   list-style-image: url("moz-icon://stock/gtk-preferences?size=menu");
 }
 
-menuitem[command="cmd_fullZoomEnlarge"] {
+#menu_fullZoomEnlarge {
   list-style-image: url("moz-icon://stock/gtk-zoom-in?size=menu");
 }
 
-menuitem[command="cmd_fullZoomReduce"] {
+#menu_fullZoomReduce {
   list-style-image: url("moz-icon://stock/gtk-zoom-out?size=menu");
 }
 
-menuitem[command="cmd_fullZoomReset"] {
+#menu_fullZoomReset {
   list-style-image: url("moz-icon://stock/gtk-zoom-100?size=menu");
 }
 
-menuitem[command="cmd_goBack"] {
+#menu_goBack {
   list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=menu");
 }
 
-menuitem[key="cmd_goBack"][disabled] {
+#menu_goBack[disabled] {
   list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=menu&state=disabled");
 }
 
-menuitem[command="cmd_goBack"]:-moz-locale-dir(rtl) {
+#menu_goBack:-moz-locale-dir(rtl) {
   list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=menu");
 }
 
-menuitem[command="cmd_goBack"][disabled]:-moz-locale-dir(rtl) {
+#menu_goBack[disabled]:-moz-locale-dir(rtl) {
   list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=menu&state=disabled");
 }
 
-menuitem[command="cmd_goForward"] {
+#menu_goForward {
   list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=menu");
 }
 
-menuitem[command="cmd_goForward"][disabled] {
+#menu_goForward[disabled] {
   list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=menu&state=disabled");
 }
 
-menuitem[command="cmd_goForward"]:-moz-locale-dir(rtl) {
+#menu_goForward:-moz-locale-dir(rtl) {
   list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=menu");
 }
 
-menuitem[command="cmd_goForward"][disabled]:-moz-locale-dir(rtl) {
+#menu_goForward[disabled]:-moz-locale-dir(rtl) {
   list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=menu&state=disabled");
 }
 
-#goStartPage,
-#appmenu_goStartPage {
+#goStartPage {
   list-style-image: url("moz-icon://stock/gtk-home?size=menu");
 }
 
-#menu_openHelp,
-#appmenu_openHelp {
+#menu_openHelp {
   list-style-image: url("moz-icon://stock/gtk-help?size=menu");
 }
 
-#aboutName,
-#appmenu_about {
+#aboutName {
   list-style-image: url("moz-icon://stock/gtk-about?size=menu");
 }
 
-#addressBook,
-#appmenu_addressBook {
+#addressBook {
   list-style-image: url("chrome://messenger/skin/addressbook/icons/addrbook.png");
 }
 
-#javascriptConsole {
-  list-style-image: url("chrome://global/skin/console/console.png");
-}
-
 statusbarpanel {
   -moz-appearance: none !important;
 }
 
 treechildren::-moz-tree-cell-text {
   padding-inline-start: 5px;
 }
 
--- a/mail/themes/linux/mail/primaryToolbar.css
+++ b/mail/themes/linux/mail/primaryToolbar.css
@@ -243,37 +243,70 @@ toolbar[mode="text"] .button-appmenu .to
 .appmenuPane-spacer {
   min-height: 1em;
 }
 
 .appmenu-edit-button {
   -moz-image-region: auto;
 }
 
+#appmenu_find,
+#appmenu_openHelp,
+#appmenu_addressBook,
+#appmenu_print_popup,
+.appmenu-edit-button,
+#appmenu-editmenu-cut,
+#appmenu-editmenu-copy,
+#appmenu-editmenu-paste,
+#appmenu_addons,
+#appmenu-quit {
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
 .appmenu-edit-button[disabled="true"] {
-  opacity: .3;
+  fill-opacity: .3;
 }
 
 #appmenu-cut,
 #appmenu-editmenu-cut {
-  list-style-image: url("moz-icon://stock/gtk-cut?size=menu");
+  list-style-image: url("chrome://messenger/skin/icons/cut.svg");
 }
 
 #appmenu-copy,
 #appmenu-editmenu-copy {
-  list-style-image: url("moz-icon://stock/gtk-copy?size=menu");
+  list-style-image: url("chrome://messenger/skin/icons/copy.svg");
 }
 
 #appmenu-paste,
 #appmenu-editmenu-paste {
-  list-style-image: url("moz-icon://stock/gtk-paste?size=menu");
+  list-style-image: url("chrome://messenger/skin/icons/paste.svg");
 }
 
 #appmenu_print,
 #appmenu_print_popup {
-  list-style-image: url("moz-icon://stock/gtk-print?size=menu");
+  list-style-image: url("chrome://messenger/skin/icons/print.svg");
+}
+
+#appmenu-quit {
+  list-style-image: url("chrome://messenger/skin/icons/quit.svg");
+}
+
+#appmenu_find {
+  list-style-image: url("chrome://messenger/skin/icons/search-glass.svg");
+}
+
+#appmenu_find > .splitmenu-menuitem {
+  -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic");
 }
 
 #appmenu_addons {
   list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.svg");
-  -moz-context-properties: fill;
-  fill: currentColor;
+}
+
+#appmenu_openHelp {
+  list-style-image: url(chrome://global/skin/icons/help.svg);
 }
+
+#appmenu_addressBook {
+  list-style-image: url("chrome://messenger/skin/icons/address.svg");
+}
--- a/mail/themes/osx/jar.mn
+++ b/mail/themes/osx/jar.mn
@@ -135,20 +135,16 @@ classic.jar:
   skin/classic/messenger/smime/icons/sbCryptoOk.png              (mail/smime/sbCryptoOk.png)
   skin/classic/messenger/smime/icons/sbCryptoNotOk.png           (mail/smime/sbCryptoNotOk.png)
   skin/classic/messenger/smime/icons/hdrSignOk.png               (mail/smime/hdrSignOk.png)
   skin/classic/messenger/smime/icons/hdrSignUnknown.png          (mail/smime/hdrSignUnknown.png)
   skin/classic/messenger/smime/icons/hdrSignNotOk.png            (mail/smime/hdrSignNotOk.png)
   skin/classic/messenger/smime/icons/hdrCryptoOk.png             (mail/smime/hdrCryptoOk.png)
   skin/classic/messenger/smime/icons/hdrCryptoNotOk.png          (mail/smime/hdrCryptoNotOk.png)
   skin/classic/messenger/icons/twisty-open.gif                   (mail/icons/twisty-open.gif)
-  skin/classic/messenger/icons/appmenu-icons.png                 (mail/icons/appmenu-icons.png)
-  skin/classic/messenger/icons/appmenu-icons-active.png          (mail/icons/appmenu-icons-active.png)
-  skin/classic/messenger/icons/appmenu-icons@2x.png              (mail/icons/appmenu-icons@2x.png)
-  skin/classic/messenger/icons/appmenu-icons-active@2x.png       (mail/icons/appmenu-icons-active@2x.png)
   skin/classic/messenger/icons/attachment-deleted.png            (mail/icons/attachment-deleted.png)
   skin/classic/messenger/icons/attachment-deleted-large.png      (mail/icons/attachment-deleted-large.png)
   skin/classic/messenger/icons/attachment-selected.svg           (mail/icons/attachment-selected.svg)
   skin/classic/messenger/icons/check.png                         (mail/icons/check.png)
   skin/classic/messenger/icons/close-inverted.png                (mail/icons/close-inverted.png)
   skin/classic/messenger/icons/close-inverted@2x.png             (mail/icons/close-inverted@2x.png)
   skin/classic/messenger/icons/dot.png                           (mail/icons/dot.png)
   skin/classic/messenger/icons/column-headers.png                (mail/icons/column-headers.png)
deleted file mode 100644
index fb7a6a67523b08b2a630a8d97572e01209ae5d69..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 0a812c96028920898efa5d8677c21ee25b250a08..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 5ac8b0aa5e6e395145f8a00b9484f410895b8642..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 19ca6b8da66be4a6ade5750cd7c01f0633badfe5..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/mail/themes/osx/mail/primaryToolbar.css
+++ b/mail/themes/osx/mail/primaryToolbar.css
@@ -365,64 +365,43 @@ toolbar[mode="text"] .button-appmenu .to
 .splitmenu-menuitem > .menu-iconic-left,
 #appmenu-popup
   menuitem:not([type="radio"]):not([type="checkbox"]):not(.folderMenuItem) >
   .menu-iconic-left {
   display: none;
 }
 
 .appmenu-edit-button {
-  list-style-image: url("icons/appmenu-icons.png");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
 .appmenu-edit-button:not([disabled="true"]):hover,
 .appmenu-edit-button:not([disabled="true"]):hover:active {
-  list-style-image: url("icons/appmenu-icons-active.png");
+  fill: HighlightText;
   background-color: Highlight;
 }
 
 .appmenu-edit-button > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
   margin: 1px;
 }
 
 #appmenu-cut {
-  -moz-image-region: rect(0 16px 16px 0);
+  list-style-image: url("chrome://messenger/skin/icons/cut.svg");
 }
 
 #appmenu-copy {
-  -moz-image-region: rect(0 32px 16px 16px);
+  list-style-image: url("chrome://messenger/skin/icons/copy.svg");
 }
 
 #appmenu-paste {
-  -moz-image-region: rect(0 48px 16px 32px);
-}
-
-@media (min-resolution: 2dppx) {
-  .appmenu-edit-button {
-    list-style-image: url("icons/appmenu-icons@2x.png");
-  }
-
-  .appmenu-edit-button:not([disabled="true"]):hover,
-  .appmenu-edit-button:not([disabled="true"]):hover:active {
-    list-style-image: url("icons/appmenu-icons-active@2x.png");
-  }
-
-  #appmenu-cut {
-    -moz-image-region: rect(0 32px 32px 0);
-  }
-
-  #appmenu-copy {
-    -moz-image-region: rect(0 64px 32px 32px);
-  }
-
-  #appmenu-paste {
-    -moz-image-region: rect(0 96px 32px 64px);
-  }
+  list-style-image: url("chrome://messenger/skin/icons/paste.svg");
 }
 
 #appmenu-edit-label {
   background: transparent;
   font-style: italic;
   padding-inline-start: 10px;
   padding-inline-end: 0;
 }
--- a/mail/themes/shared/jar.inc.mn
+++ b/mail/themes/shared/jar.inc.mn
@@ -79,9 +79,10 @@
   skin/classic/messenger/shared/in-content/privacy.svg        (../shared/mail/incontentprefs/privacy.svg)
   skin/classic/messenger/shared/in-content/security.svg       (../shared/mail/incontentprefs/security.svg)
   skin/classic/messenger/shared/mailWindow1.css               (../shared/mail/mailWindow1.css)
   skin/classic/messenger/shared/messageHeader.css             (../shared/mail/messageHeader.css)
   skin/classic/messenger/shared/messenger.css                 (../shared/mail/messenger.css)
   skin/classic/messenger/shared/tabmail.css                   (../shared/mail/tabmail.css)
 #ifndef XP_MACOSX
   skin/classic/messenger/icons/search-close.svg               (../shared/mail/icons/search-close.svg)
+  skin/classic/messenger/icons/quit.svg                       (../shared/mail/icons/quit.svg)
 #endif
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/quit.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 6a1 1 0 0 0 1-1V1a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1zm3.5-4.032a1 1 0 0 0-1 1.732A4.95 4.95 0 0 1 13 8 5 5 0 0 1 3 8a4.95 4.95 0 0 1 2.5-4.3 1 1 0 0 0-1-1.73 7 7 0 1 0 7 0z"/>
+</svg>
--- a/mail/themes/shared/mail/icons/search-glass.svg
+++ b/mail/themes/shared/mail/icons/search-glass.svg
@@ -1,6 +1,6 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="context-fill" d="M 0.9,14.13 1.77,15 6,10.85 A 5.55,5.5 0 1 0 3.9,6.55 5.5,5.5 0 0 0 5.05,9.9 M 9.4,2.2 A 4.3,4.3 0 1 1 5.05,6.55 4.3,4.3 0 0 1 9.4,2.2 Z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M15.707 14.293l-4.822-4.822a6.019 6.019 0 1 0-1.414 1.414l4.822 4.822a1 1 0 0 0 1.414-1.414zM6 10a4 4 0 1 1 4-4 4 4 0 0 1-4 4z"/>
 </svg>
--- a/mail/themes/windows/jar.mn
+++ b/mail/themes/windows/jar.mn
@@ -123,17 +123,16 @@ classic.jar:
   skin/classic/messenger/smime/icons/sbSignUnknown.png     (mail/smime/sbSignUnknown.png)
   skin/classic/messenger/icons/zoomout.png                    (mail/icons/zoomout.png)
   skin/classic/messenger/icons/zoomout-hover.png              (mail/icons/zoomout-hover.png)
   skin/classic/messenger/icons/readmail.png                   (mail/icons/readmail.png)
   skin/classic/messenger/icons/folder.png                     (mail/icons/folder.png)
   skin/classic/messenger/icons/message.png                    (mail/icons/message.png)
   skin/classic/messenger/icons/multicolor.png                 (mail/icons/multicolor.png)
   skin/classic/messenger/icons/license.txt                    (mail/icons/license.txt)
-  skin/classic/messenger/icons/appmenu-icons.png              (mail/icons/appmenu-icons.png)
   skin/classic/messenger/icons/arrow-dn-inverted.png          (mail/icons/arrow-dn-inverted.png)
   skin/classic/messenger/icons/attachment-deleted.png         (mail/icons/attachment-deleted.png)
   skin/classic/messenger/icons/attachment-deleted-large.png   (mail/icons/attachment-deleted-large.png)
   skin/classic/messenger/icons/columnpicker.svg               (mail/icons/columnpicker.svg)
   skin/classic/messenger/icons/dropmarker.svg                 (mail/icons/dropmarker.svg)
   skin/classic/messenger/icons/junk-col.svg                   (mail/icons/junk-col.svg)
   skin/classic/messenger/icons/thread-col.svg                 (mail/icons/thread-col.svg)
   skin/classic/messenger/icons/thread.png                     (mail/icons/thread.png)
deleted file mode 100644
index 13ff83e95f87f2d70b6033f15666a0d68457e233..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/mail/themes/windows/mail/primaryToolbar.css
+++ b/mail/themes/windows/mail/primaryToolbar.css
@@ -316,60 +316,64 @@ toolbar[mode="text"] .button-appmenu .to
 .appmenuPane-spacer {
   min-height: 1em;
 }
 
 #appmenu-editmenu {
   -moz-box-pack: end;
 }
 
-#appmenu_print,
+#appmenu_openHelp,
 #appmenu_print_popup,
 .appmenu-edit-button,
 #appmenu-editmenu-cut,
 #appmenu-editmenu-copy,
 #appmenu-editmenu-paste,
+#appmenu_addons,
 #appmenu-quit {
-  list-style-image: url("icons/appmenu-icons.png");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
 #appmenu-cut,
 #appmenu-editmenu-cut {
-  -moz-image-region: rect(0 16px 16px 0);
+  list-style-image: url("chrome://messenger/skin/icons/cut.svg");
 }
 
 #appmenu-copy,
 #appmenu-editmenu-copy {
-  -moz-image-region: rect(0 32px 16px 16px);
+  list-style-image: url("chrome://messenger/skin/icons/copy.svg");
 }
 
 #appmenu-paste,
 #appmenu-editmenu-paste {
-  -moz-image-region: rect(0 48px 16px 32px);
+  list-style-image: url("chrome://messenger/skin/icons/paste.svg");
 }
 
-#appmenu_print,
 #appmenu_print_popup {
-  -moz-image-region: rect(0 64px 16px 48px);
+  list-style-image: url("chrome://messenger/skin/icons/print.svg");
 }
 
 #appmenu-quit {
-  -moz-image-region: rect(0 80px 16px 64px);
+  list-style-image: url("chrome://messenger/skin/icons/quit.svg");
+}
+
+#appmenu_openHelp {
+  list-style-image: url(chrome://global/skin/icons/help.svg);
 }
 
 #appmenu-edit-label {
   -moz-appearance: none;
   background: transparent;
   font-style: italic;
 }
 
 #appmenu_addons {
   list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.svg");
-  -moz-context-properties: fill;
-  fill: currentColor;
 }
 
 .mail-toolbox > toolbar {
   margin-inline-start: 0;
   /* force iconsize="small" on these toolbars */
   counter-reset: smallicons;
 }