Bug 1361957 - Update new icons for about:preferences to match Photon spec r=dao
authorRicky Chien <ricky060709@gmail.com>
Wed, 09 Aug 2017 09:49:46 +0800
changeset 373524 0d1ee6f3b3f4
parent 373523 2b587b20717b
child 373525 7b7aa4e9ae5a
push id32303
push usercbook@mozilla.com
push date2017-08-09 09:34 +0000
treeherdermozilla-central@c93fa2271ee7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1361957
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1361957 - Update new icons for about:preferences to match Photon spec r=dao
browser/components/preferences/in-content-new/main.xul
browser/themes/linux/preferences/in-content-new/preferences.css
browser/themes/osx/preferences/in-content-new/preferences.css
browser/themes/shared/incontentprefs/face-sad.svg
browser/themes/shared/incontentprefs/face-smile.svg
browser/themes/shared/incontentprefs/fxa-avatar.svg
browser/themes/shared/incontentprefs/general.svg
browser/themes/shared/incontentprefs/help.svg
browser/themes/shared/incontentprefs/icons.svg
browser/themes/shared/incontentprefs/logo-android.svg
browser/themes/shared/incontentprefs/logo-ios.svg
browser/themes/shared/incontentprefs/preferences.inc.css
browser/themes/shared/incontentprefs/privacy-security.svg
browser/themes/shared/incontentprefs/search.svg
browser/themes/shared/incontentprefs/sync.svg
browser/themes/shared/jar.inc.mn
browser/themes/windows/preferences/in-content-new/preferences.css
toolkit/themes/shared/in-content/common.inc.css
--- a/browser/components/preferences/in-content-new/main.xul
+++ b/browser/components/preferences/in-content-new/main.xul
@@ -304,23 +304,25 @@
 #endif
 
 #ifdef HAVE_SHELL_SERVICE
   <vbox id="defaultBrowserBox">
     <checkbox id="alwaysCheckDefault" preference="browser.shell.checkDefaultBrowser"
               label="&alwaysCheckDefault2.label;" accesskey="&alwaysCheckDefault2.accesskey;"/>
     <deck id="setDefaultPane">
       <hbox align="center" class="indent">
+        <image class="face-sad"/>
         <label id="isNotDefaultLabel" flex="1">&isNotDefault.label;</label>
         <button id="setDefaultButton"
                 class="accessory-button"
                 label="&setAsMyDefaultBrowser3.label;" accesskey="&setAsMyDefaultBrowser3.accesskey;"
                 preference="pref.general.disable_button.default_browser"/>
       </hbox>
       <hbox align="center" class="indent">
+        <image class="face-smile"/>
         <label id="isDefaultLabel" flex="1">&isDefault.label;</label>
       </hbox>
     </deck>
     <separator class="thin"/>
   </vbox>
 #endif
 
   <html:table id="startupTable">
@@ -823,30 +825,32 @@
       <hbox id="adminDisabled" align="center">
         <label>&update.adminDisabled;</label>
         <spacer flex="1"/>
         <button label="&update.checkForUpdatesButton.label;"
                 accesskey="&update.checkForUpdatesButton.accesskey;"
                 disabled="true"/>
       </hbox>
       <hbox id="noUpdatesFound" align="center">
+        <image class="face-smile"/>
         <label>&update.noUpdatesFound;</label>
         <spacer flex="1"/>
         <button label="&update.checkForUpdatesButton.label;"
                 accesskey="&update.checkForUpdatesButton.accesskey;"
                 oncommand="gAppUpdater.checkForUpdates();"/>
       </hbox>
       <hbox id="otherInstanceHandlingUpdates" align="center">
         <label>&update.otherInstanceHandlingUpdates;</label>
         <spacer flex="1"/>
         <button label="&update.checkForUpdatesButton.label;"
                 accesskey="&update.checkForUpdatesButton.accesskey;"
                 disabled="true"/>
       </hbox>
       <hbox id="manualUpdate" align="center">
+        <image class="face-sad"/>
         <label>&update.manual.start;</label><label id="manualLink" class="text-link"/><label>&update.manual.end;</label>
         <spacer flex="1"/>
         <button label="&update.checkForUpdatesButton.label;"
                 accesskey="&update.checkForUpdatesButton.accesskey;"
                 disabled="true"/>
       </hbox>
       <hbox id="unsupportedSystem" align="center">
         <description flex="1">
--- a/browser/themes/linux/preferences/in-content-new/preferences.css
+++ b/browser/themes/linux/preferences/in-content-new/preferences.css
@@ -20,29 +20,17 @@
   margin-inline-start: 1px;
   margin-inline-end: 6px;
 }
 
 .actionsMenu > .menulist-label-box > .menulist-label {
   margin-top: 2px !important;
 }
 
-#fxaProfileImage {
-  -moz-user-focus: normal;
-}
-
 menulist.actionsMenu > .menulist-dropmarker {
   margin-top: 11px;
   margin-bottom: 11px;
 }
 
 textbox + button,
 filefield + button {
   margin-inline-start: -4px;
 }
-
-/**
- * Dialog
- */
-
-#dialogTitle {
-  font-size: 1em;
-}
--- a/browser/themes/osx/preferences/in-content-new/preferences.css
+++ b/browser/themes/osx/preferences/in-content-new/preferences.css
@@ -14,40 +14,23 @@ prefpane .groupbox-title {
   margin-inline-start: 2px;
   margin-inline-end: 8px !important;
 }
 
 #downloadFolder > .fileFieldContentBox {
   padding-inline-start: 3px;
 }
 
-#fxaProfileImage {
-  -moz-user-focus: normal;
-}
-
 textbox + button {
   margin-inline-start: -4px;
 }
 
 filefield + button {
   margin-inline-start: -8px;
 }
 
 #popupPolicyRow {
   /* Override styles from
      browser/themes/osx/preferences/preferences.css */
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
   border-bottom: none;
 }
-
-#advancedPrefs {
-  margin-right: 0; /*override margin from normal preferences.css */
-  margin-left: 0;
-}
-
-/**
- * Dialog
- */
-
-#dialogTitle {
-  font-size: 1.1em;
-}
new file mode 100755
--- /dev/null
+++ b/browser/themes/shared/incontentprefs/face-sad.svg
@@ -0,0 +1,9 @@
+<!-- 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" viewBox="0 0 20 20">
+  <path fill="#00D3E7" d="M9.94.8a9.01 9.01 0 0 0-9 9.42 1.07 1.07 0 0 0 .13 2.12h.21A9.01 9.01 0 1 0 9.94.8"/>
+  <path fill="#00A1C1" d="M18.93 10.21v-.4c0-2.4-.93-4.6-2.47-6.2A9.26 9.26 0 0 1 3.72 16.34a9 9 0 0 0 14.85-4l.21-.01c.6 0 1.07-.48 1.07-1.07.01-.54-.4-.99-.92-1.06"/>
+  <path fill="#323B59" d="M5.47 6.55a.99.99 0 0 0-.99.99v2.22a.99.99 0 1 0 1.98 0V7.54a.99.99 0 0 0-1-.99m8.98 0a.99.99 0 0 0-1 .99v2.22a.99.99 0 1 0 1.98 0V7.54a.99.99 0 0 0-.98-.99m-4.5 5.47a2.27 2.27 0 0 0-2.34 2.13c-.02.23.09.45.27.58.19.14.43.17.64.09 0 0 .47-.17 1.34-.17.91 0 1.55.19 1.56.19a.69.69 0 0 0 .61-.11.67.67 0 0 0 .26-.58 2.27 2.27 0 0 0-2.34-2.13"/>
+  <path fill="#00A1C1" d="M4.59 7.02c-.36 0-.72-.11-1.03-.32a.318.318 0 1 1 .35-.53 1.25 1.25 0 0 0 1.8-.47.313.313 0 1 1 .56.28 1.88 1.88 0 0 1-1.68 1.04m10.47 0a1.88 1.88 0 0 1-1.68-1.04.313.313 0 1 1 .56-.28 1.24 1.24 0 0 0 1.8.48.32.32 0 0 1 .35.53c-.3.2-.66.3-1.03.3"/>
+</svg>
new file mode 100755
--- /dev/null
+++ b/browser/themes/shared/incontentprefs/face-smile.svg
@@ -0,0 +1,14 @@
+<!-- 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" viewBox="0 0 20 20">
+  <path fill="#FFBF49" d="M9.95.8A9.03 9.03 0 0 0 .92 9.83l.01.4a1.07 1.07 0 0 0 .14 2.13h.21A9.04 9.04 0 1 0 9.95.8"/>
+  <path fill="#323B59" d="M14.44 6.7c.55 0 1 .44 1 .99V9.9c0 .55-.45.12-1 .12s-.99.42-.99-.12V7.69c0-.55.45-1 1-1"/>
+  <path fill="#FFA500" d="M13.54 10.46a.31.31 0 0 1-.14-.59 2.36 2.36 0 0 1 2.08-.03.3.3 0 0 1 .14.41.3.3 0 0 1-.41.15 1.75 1.75 0 0 0-1.53.02.28.28 0 0 1-.14.04"/>
+  <path fill="#323B59" d="M5.46 6.7c.55 0 .99.44.99.99V9.9c0 .55-.44.12-.99.12s-.99.42-.99-.12V7.69c0-.55.45-1 .99-1"/>
+  <path fill="#FFA500" d="M4.56 10.46a.31.31 0 0 1-.14-.59 2.36 2.36 0 0 1 2.07-.03.3.3 0 0 1 .15.41.3.3 0 0 1-.41.15 1.75 1.75 0 0 0-1.53.02.3.3 0 0 1-.14.04"/>
+  <path fill="#323B59" d="M16.06 12.42l-.62-.05c-.06.02-.21.06-.45.1-.3.04-.73.15-1.25.2-.51.04-1.12.14-1.76.17-.65.04-1.33.05-2.03.06-.68-.01-1.37-.02-2.02-.07-.65-.03-1.25-.12-1.76-.17-.52-.04-.95-.15-1.25-.2l-.45-.09a30.35 30.35 0 0 0-.7.07.17.17 0 0 0-.04.23l.1.17a7.67 7.67 0 0 0 1.54 1.75c.5.45 1.01.78 1.53 1.06l.41.19c.78-.55 1.68.2 2.64.2.97 0 1.87-.74 2.64-.2.14-.05.28-.1.42-.18a8.34 8.34 0 0 0 3.06-2.82l.1-.18c.02-.02.03-.04.03-.07a.16.16 0 0 0-.14-.17"/>
+  <path fill="#FFF" d="M6.17 12.66c.51.05 1.12.14 1.76.17.65.05 1.33.06 2.02.07.7-.01 1.38-.02 2.03-.06.65-.04 1.25-.13 1.76-.17.52-.05.95-.15 1.25-.2.24-.04.4-.08.45-.1l-.9-.05-1.53-.06c-1.02-.03-2.04-.03-3.06-.05-1.02.02-2.04.02-3.05.05l-1.53.06-.9.05c.05.02.21.06.45.1.3.04.73.15 1.25.2"/>
+  <path fill="#FFA500" d="M18.96 10.23v-.4c0-2.42-.94-4.6-2.48-6.22A9.27 9.27 0 0 1 3.72 16.37a9.02 9.02 0 0 0 14.87-4l.22-.01c.6 0 1.08-.48 1.08-1.07 0-.55-.4-1-.93-1.06"/>
+  <path fill="#FF7664" d="M12.58 15.85h.01c-.77-.55-1.68-.37-2.64-.25-.96-.12-1.87-.3-2.64.25.87.39 1.73.57 2.6.58H10c.86 0 1.73-.2 2.6-.58h-.02"/>
+</svg>
new file mode 100755
--- /dev/null
+++ b/browser/themes/shared/incontentprefs/fxa-avatar.svg
@@ -0,0 +1,8 @@
+<!-- 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="80" height="80">
+  <circle r="40" cx="40" cy="40" fill="#E1E1E6"/>
+  <path fill="#F5F5F7" d="M70.5 41.2l.02-1.36A30.5 30.5 0 0 0 39.97 9.41 30.5 30.5 0 0 0 9.41 39.84l.02 1.36a3.62 3.62 0 0 0-3.15 3.58c0 2 1.62 3.6 3.63 3.6h.72a30.46 30.46 0 0 0 8.3 13.51l-.04-.02a30.54 30.54 0 0 0 19.72 8.35l.24.01.43.01.51.01h.86l.41-.02h.27c.16-.02.33-.02.5-.03l.12-.01A30.55 30.55 0 0 0 69.3 48.37h.68a3.61 3.61 0 0 0 .51-7.18"/>
+  <path fill="#C8C8CC" d="M58.53 39.81v-7.18a3.35 3.35 0 1 0-6.7 0v7.27l-.17.08a1.05 1.05 0 0 0 .47 1.98c.17 0 .32-.04.47-.12a5.94 5.94 0 0 1 5.18-.07c.53.25 1.15.03 1.4-.5.25-.52.03-1.14-.5-1.39l-.15-.07zm-30.41 0v-7.18a3.35 3.35 0 1 0-6.7 0v7.27l-.17.08a1.05 1.05 0 0 0 .47 1.98 1 1 0 0 0 .47-.12 5.94 5.94 0 0 1 5.18-.07c.53.25 1.15.03 1.4-.5.25-.52.03-1.14-.5-1.39l-.15-.07zM48.85 60.1l.07.04c.47-.2.93-.38 1.4-.62A28.29 28.29 0 0 0 60.68 50l.37-.58a.58.58 0 0 0 .08-.26.53.53 0 0 0-.47-.57c-.7-.07-1.4-.11-2.1-.15-.2.05-.72.18-1.53.33-1.02.14-2.47.5-4.22.66-1.74.15-3.8.47-5.97.57-2.19.15-4.51.18-6.85.2-2.33-.04-4.67-.07-6.86-.22-2.19-.1-4.22-.41-5.97-.56-1.74-.17-3.21-.51-4.22-.66-.8-.16-1.35-.28-1.53-.33-.72.04-1.42.1-2.14.15a.47.47 0 0 0-.25.1.56.56 0 0 0-.13.75l.38.57a30.15 30.15 0 0 0 5.18 5.91 27.28 27.28 0 0 0 5.18 3.57c.47.25.94.43 1.41.64a3.84 3.84 0 0 1-.01.02l.02.02-.02.01a21.8 21.8 0 0 0 8.79 1.93l.14.02h.03l.13-.02a21.8 21.8 0 0 0 8.8-1.93l-.03-.01c.02 0 .02 0 .03-.02a6.87 6.87 0 0 0-.07-.04z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/incontentprefs/general.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" viewBox="0 0 24 24">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M7 11.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0M21.48 10h-2.65a7.45 7.45 0 0 0-1.1-2.64l1.88-1.87a1.5 1.5 0 1 0-2.12-2.12l-1.87 1.87c-.8-.52-1.69-.9-2.65-1.1l.01-.15V1.5a1.5 1.5 0 1 0-3 0V4l.02.14c-.96.2-1.86.58-2.65 1.1L5.5 3.37a1.5 1.5 0 1 0-2.12 2.12l1.87 1.87c-.52.79-.9 1.68-1.1 2.63H1.5a1.5 1.5 0 1 0 0 3h2.64c.2.96.58 1.85 1.1 2.64L3.37 17.5a1.5 1.5 0 1 0 2.12 2.12l1.87-1.87c.79.52 1.68.9 2.63 1.1v2.64a1.5 1.5 0 1 0 3 0v-2.65c.96-.2 1.85-.57 2.64-1.1l1.87 1.88a1.5 1.5 0 0 0 2.12 0 1.5 1.5 0 0 0 0-2.12l-1.87-1.87c.52-.8.9-1.68 1.1-2.64h2.64a1.5 1.5 0 1 0 0-3"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/incontentprefs/help.svg
@@ -0,0 +1,7 @@
+<!-- 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" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 2a6 6 0 1 0 .01 12.01A6 6 0 0 0 8 2m0 13A7 7 0 0 1 8 1a7 7 0 0 1 0 14"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 10.75a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5m2.82-5.6A2.84 2.84 0 0 0 8 3.13C6.25 3.13 5.12 4.25 5.12 6a.88.88 0 0 0 1.75 0c0-1 .6-1.13 1.13-1.13.64 0 1.03.38 1.13.75.1.39-.08.75-.53 1.01C7.35 7.38 7.09 8.52 7.13 9v.34a.88.88 0 0 0 1.75 0v-.37c0-.05.01-.48.6-.83 1.13-.66 1.65-1.83 1.34-2.98"/>
+</svg>
deleted file mode 100644
--- a/browser/themes/shared/incontentprefs/icons.svg
+++ /dev/null
@@ -1,47 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- 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" viewBox="0 0 24 24">
-  <style>
-    use:not(:target) {
-      display: none;
-    }
-    use {
-      fill: #fbfbfb;
-      stroke: rgba(0,0,0,0.4);
-      stroke-width: .5px;
-    }
-    use[id$="-native"] {
-      fill: ThreeDHighlight;
-    }
-  </style>
-  <defs>
-    <g id="general-shape">
-      <path d="M18.97,3H5.03C3.914,3,3,3.914,3,5.03v13.94C3,20.086,3.914,21,5.03,21H18.97c1.117,0,2.03-0.914,2.03-2.03 V5.03C21,3.914,20.086,3,18.97,3z M5.35,19.326c-0.404,0-0.731-0.327-0.731-0.731c0-0.404,0.327-0.731,0.731-0.731 c0.404,0,0.731,0.327,0.731,0.731C6.081,19,5.754,19.326,5.35,19.326z M5.35,6.168c-0.403,0-0.731-0.328-0.731-0.731 c0-0.404,0.328-0.731,0.731-0.731c0.403,0,0.731,0.327,0.731,0.731C6.081,5.84,5.753,6.168,5.35,6.168z M15.243,14.035 c0,0.229-0.186,0.416-0.414,0.416c-0.229,0-0.415,0.186-0.415,0.414v3.347c0,0.228-0.185,0.384-0.414,0.384l-4.141,0.03 c-0.227,0-0.414-0.186-0.414-0.414v-3.347c0-0.228-0.185-0.414-0.414-0.414c-0.227,0-0.414-0.187-0.414-0.416V6.582 c0-0.229,0.187-0.414,0.414-0.414h5.798c0.228,0,0.414,0.185,0.414,0.414V14.035z M18.509,19.326c-0.404,0-0.731-0.327-0.731-0.731 c0-0.404,0.327-0.731,0.731-0.731c0.404,0,0.731,0.327,0.731,0.731C19.24,19,18.913,19.326,18.509,19.326z M18.509,6.168 c-0.404,0-0.731-0.328-0.731-0.731c0-0.404,0.327-0.731,0.731-0.731c0.404,0,0.731,0.327,0.731,0.731 C19.24,5.84,18.913,6.168,18.509,6.168z"/>
-      <path d="M12.757,7.824h-1.657c-0.456,0-0.828,0.373-0.828,0.828v8.282c0,0.456,0.373,0.828,0.828,0.828h1.657 c0.456,0,0.828-0.373,0.828-0.828V8.652C13.586,8.196,13.213,7.824,12.757,7.824z"/>
-    </g>
-    <g id="security-shape">
-      <path d="M18.909,9.783h-0.863V8.086C18.046,4.725,15.339,2,12,2 C8.661,2,5.954,4.725,5.954,8.086v1.697H5.091c-0.955,0-1.728,0.779-1.728,1.739v8.738c0,0.961,0.773,1.74,1.728,1.74h13.818 c0.954,0,1.728-0.779,1.728-1.74v-8.738C20.637,10.562,19.863,9.783,18.909,9.783z M8.545,8.086c0-1.92,1.547-3.478,3.455-3.478 c1.908,0,3.455,1.557,3.455,3.478v1.697h-6.91V8.086z M5.181,16.092l-0.909-1.2v-2.284l2.728,3.483H5.181z M8.818,16.092 l-2.773-3.657h1.727l2.864,3.657H8.818z M12,16.092l-2.773-3.657h1.727l2.864,3.657H12z M15.637,16.092l-2.773-3.657h1.727 l2.864,3.657H15.637z M19.728,16.092h-0.455l-2.773-3.657h1.727l1.501,1.916V16.092z"/>
-    </g>
-    <g id="sync-shape">
-      <path style="fill:#F1F1F1;" d="M3.2,22h3.3h10.8h3.3c0.5,0,0.9-0.4,0.9-0.9V20c0-1-0.5-1.9-1.2-2.5c-2.3-1.8-4.6-2.9-5.1-3.1
-        c-0.1,0-0.1-0.1-0.1-0.2v-1.6c0.3-0.5,0.4-1,0.5-1.5c0.2,0.1,0.6,0.1,1-1.3c0.3-1.1,0.1-1.5-0.2-1.6c0.9-4.4-1.1-4.5-1.1-4.5
-        S15,3.1,14.1,2.6c-0.5-0.3-1.3-0.6-2.3-0.5c-0.4,0-0.7,0.1-1,0.2c-0.4,0.1-0.7,0.3-1,0.5C9.4,3.1,9.1,3.3,8.7,3.7
-        c-0.5,0.5-1,1.2-1.1,2C7.4,6.4,7.4,7.1,7.7,7.9C7.3,7.8,6.9,8,7.3,9.5c0.3,1.1,0.6,1.4,0.8,1.4c0.1,0.6,0.3,1.3,0.7,1.9v1.4
-        c0,0.1,0,0.1-0.1,0.2c-0.5,0.2-2.8,1.4-5.1,3.1C2.8,18.1,2.3,19,2.3,20v1.1C2.3,21.6,2.7,22,3.2,22"/>
-    </g>
-    <g id="search-shape">
-      <path d="M20.6,19.6l-4.4-4.5c2.4-2.9,2.4-7.1,0.2-10c-2.3-3-6.3-3.9-9.6-2.3c-3.3,1.6-5.1,5.3-4.3,9 c0.8,3.7,4,6.3,7.7,6.3c1.5,0,3-0.4,4.3-1.3l4.5,4.6c0.3,0.3,0.8,0.4,1.2,0.3c0.4-0.1,0.7-0.4,0.9-0.9S20.9,19.9,20.6,19.6z M10.1,16c-3.3,0-6-2.7-6-6.1c0-3.4,2.7-6.1,6-6.1c3.3,0,6,2.7,6,6.1C16.1,13.3,13.4,16,10.1,16z"/>
-      <path d="M10.1,5.3c-2.5,0-4.6,2.1-4.6,4.7c0,1.2,0.5,2.4,1.4,3.3c0.9,0.9,2,1.4,3.3,1.4c2.5,0,4.6-2.1,4.6-4.7 C14.7,7.4,12.7,5.3,10.1,5.3z M10,7.9c-1,0-1.8,0.8-1.8,1.8c0,0.4-0.3,0.8-0.8,0.8s-0.8-0.4-0.8-0.8c0-1.9,1.5-3.4,3.3-3.4h0 c0.4,0,0.8,0.4,0.8,0.8S10.4,7.9,10,7.9z"/>
-    </g>
-  </defs>
-  <use id="general" href="#general-shape"/>
-  <use id="general-native" href="#general-shape"/>
-  <use id="security" href="#security-shape"/>
-  <use id="security-native" href="#security-shape"/>
-  <use id="sync" href="#sync-shape"/>
-  <use id="sync-native" href="#sync-shape"/>
-  <use id="search" href="#search-shape"/>
-  <use id="search-native" href="#search-shape"/>
-</svg>
new file mode 100755
--- /dev/null
+++ b/browser/themes/shared/incontentprefs/logo-android.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" viewBox="0 0 20 20">
+  <path fill="#0C0C0D" d="M9.24 16.03v2.73c0 .7-.56 1.24-1.25 1.24-.7 0-1.26-.55-1.26-1.24v-2.73h-.9c-.75 0-1.35-.59-1.35-1.33v-8h11.2v8c0 .74-.6 1.33-1.36 1.33h-.9v2.73c0 .7-.55 1.24-1.25 1.24s-1.26-.55-1.26-1.24v-2.73H9.24zM2.76 6.5c.7 0 1.25.55 1.25 1.24v5.15c0 .7-.56 1.24-1.25 1.24-.7 0-1.26-.55-1.26-1.24V7.73c0-.69.56-1.24 1.26-1.24zm14.64 0c.7 0 1.25.55 1.25 1.24v5.15c0 .7-.55 1.24-1.25 1.24s-1.26-.55-1.26-1.24V7.73c0-.69.56-1.24 1.26-1.24zM6.6 0c.06 0 .12.03.16.1l.9 1.58a6.04 6.04 0 0 1 4.84 0L13.4.1a.18.18 0 0 1 .24-.07c.09.05.12.15.07.24l-.89 1.58a5.04 5.04 0 0 1 2.86 4.43H4.48c0-1.9 1.15-3.56 2.85-4.43L6.45.26a.17.17 0 0 1 .07-.24A.18.18 0 0 1 6.6 0zm.9 3.33c-.26 0-.47.2-.47.46a.47.47 0 0 0 .93 0 .47.47 0 0 0-.47-.46zm5.16 0c-.25 0-.47.2-.47.46a.47.47 0 0 0 .94 0 .47.47 0 0 0-.47-.46z"/>
+</svg>
new file mode 100755
--- /dev/null
+++ b/browser/themes/shared/incontentprefs/logo-ios.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" viewBox="0 0 20 20">
+  <path fill="#0C0C0D" fill-rule="evenodd" d="M16.84 15.03c-.27.63-.59 1.2-.96 1.74-.51.72-.93 1.23-1.25 1.5-.5.46-1.03.7-1.6.71-.41 0-.9-.12-1.48-.35a4.25 4.25 0 0 0-1.6-.36c-.5 0-1.05.12-1.63.36A4.4 4.4 0 0 1 6.9 19c-.55.02-1.1-.22-1.64-.73-.35-.3-.78-.82-1.3-1.56-.56-.78-1.02-1.7-1.38-2.73A10.03 10.03 0 0 1 2 10.7c0-1.2.26-2.25.78-3.12a4.6 4.6 0 0 1 3.86-2.28c.43 0 1 .13 1.71.4.71.26 1.16.4 1.36.4.15 0 .66-.16 1.51-.47.8-.3 1.5-.41 2.05-.37 1.51.13 2.65.72 3.4 1.8a3.8 3.8 0 0 0-2 3.44 4.1 4.1 0 0 0 2.5 3.68c-.1.3-.21.57-.33.84zM13.37 1.36c0 .9-.33 1.74-.98 2.52-.8.92-1.75 1.46-2.79 1.37a3.95 3.95 0 0 1 1.02-2.89c.34-.38.76-.7 1.28-.95.51-.25 1-.39 1.45-.41.02.12.02.24.02.36z"/>
+</svg>
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -14,17 +14,17 @@
   display: block;
   max-width: 800px;
 }
 
 #mainPrefPane {
   width: 100%;
   padding: 0;
   font: message-box;
-  color: #0c0c0d;
+  color: currentColor;
 }
 
 #mainPrefPane groupbox,
 #mainPrefPane deck,
 #mainPrefPane description {
   font-size: 1.36rem;
 }
 
@@ -119,55 +119,50 @@ caption > label {
 }
 
 #categories > scrollbox {
   overflow-x: hidden !important;
 }
 
 .category-name {
   font-size: 1.45rem;
-  color: #0c0c0d;
 }
 
 .category,
 .category:hover,
 .category[selected] {
   background-color: transparent;
   border-inline-start: initial;
   padding-inline-start: 44px;
 }
 
-richlistitem[selected='true'] .category-name {
-  color: #0a84ff;
-}
-
 /**
  * We want the last category to always have non-0 getBoundingClientRect().bottom
  * so we can use the value to figure out the max-height of the list in
  * preferences.js, so use collapse instead of display: none; if it's hidden
  */
 #categories > .category[hidden="true"] {
   display: -moz-box;
   visibility: collapse;
 }
 
 #category-general > .category-icon {
-  list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#general");
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/general.svg");
 }
 
 #category-search > .category-icon {
-  list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#search");
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/search.svg");
 }
 
 #category-privacy > .category-icon {
-  list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#security");
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/privacy-security.svg");
 }
 
 #category-sync > .category-icon {
-  list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#sync");
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/sync.svg");
 }
 
 @media (max-width: 800px) {
   .category-name {
     display: none;
   }
   .help-button {
     font-size: 0 !important;
@@ -447,20 +442,21 @@ groupbox {
 /**
  * Sync
  */
 
 #fxaProfileImage {
   width: 60px;
   height: 60px;
   border-radius: 50%;
-  list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/fxa-avatar.svg");
   margin-inline-end: 15px;
   image-rendering: auto;
   border: 1px solid transparent;
+  -moz-user-focus: normal;
 }
 
 #fxaLoginStatus[hasName] #fxaProfileImage {
   width: 80px;
   height: 80px;
 }
 
 #fxaProfileImage.actionable {
@@ -576,17 +572,17 @@ groupbox {
 
 #fxaEmailAddress1,
 #fxaEmailAddress2,
 #fxaEmailAddress3 {
   word-break: break-all;
 }
 
 .fxaFirefoxLogo {
-  list-style-image: url(chrome://browser/skin/fxa/logo.png);
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/fxa-avatar.svg");
   width: 64px;
   height: 64px;
   margin-inline-end: 14px;
 }
 
 .fxaMobilePromo {
   line-height: 28px;
   margin-bottom: 20px;
@@ -599,47 +595,35 @@ groupbox {
   margin: 4px 8px 0px 0px;
 }
 
 #syncOptions {
   margin-bottom: 27.5px;
 }
 
 .androidLink {
-  list-style-image: url("chrome://browser/skin/fxa/android.png");
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/logo-android.svg");
 }
 
 .iOSLink {
-  list-style-image: url("chrome://browser/skin/fxa/ios.png");
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/logo-ios.svg");
 }
 
 .androidLink,
 .iOSLink {
-  vertical-align: bottom;
-  padding: 0 5px;
-  height: 28px;
+  width: 20px;
+  height: 20px;
+  vertical-align: text-bottom;
 }
 
 #tosPP-small {
   margin-top: 20px;
   margin-bottom: 20px;
 }
 
-@media (min-resolution: 1.1dppx) {
-  .androidLink {
-    list-style-image: url("chrome://browser/skin/fxa/android@2x.png");
-  }
-  .iOSLink {
-    list-style-image: url("chrome://browser/skin/fxa/ios@2x.png");
-  }
-  .fxaFirefoxLogo {
-    list-style-image: url(chrome://browser/skin/fxa/logo@2x.png);
-  }
-}
-
 #updateDeck > hbox > label {
   margin-inline-end: 5px ! important;
 }
 
 .update-throbber {
   width: 16px;
   min-height: 16px;
   margin-inline-end: 3px;
@@ -653,45 +637,56 @@ groupbox {
 }
 
 .help-button {
   position: fixed;
   left: 0;
   /* Needs to have enough gap from the bottom to not
      get behind the status panel (bug 1357841). */
   bottom: 2rem;
+  background-image: url("chrome://browser/skin/preferences/in-content-new/help.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.8;
   font-size: 13px;
-  line-height: 13px;
-  height: 14px;
+  line-height: 16px;
   background-position: 15px;
   padding-inline-start: 35px;
   white-space: nowrap;
-  fill: #0c0c0d;
-  stroke: #0c0c0d;
 }
 
 .help-button:-moz-locale-dir(rtl) {
   left: auto;
   right: 0;
   background-position: right 15px top 0;
 }
 
+.help-button:hover {
+  fill: currentColor;
+  fill-opacity: 0.9;
+}
+
 .help-button:link,
 .help-button:visited {
-  color: #0c0c0d !important;
-  opacity: 0.8;
+  color: var(--in-content-category-text);
   text-decoration: none;
 }
 
-.help-button:hover {
-  color: #0c0c0d !important;
-  fill: #0c0c0d !important;
-  stroke: #0c0c0d !important;
-  stroke-opacity: 0!important;
-  opacity: 0.9;
+.face-sad {
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/face-sad.svg");
+  width: 20px;
+  height: 20px;
+  margin-inline-end: 8px;
+}
+
+.face-smile {
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/face-smile.svg");
+  width: 20px;
+  height: 20px;
+  margin-inline-end: 8px;
 }
 
 .search-container {
   position: sticky;
   background-color: var(--in-content-page-background);
   width: 100%;
   top: 0;
   z-index: 1;
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/incontentprefs/privacy-security.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" viewBox="0 0 24 24">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 6a3 3 0 0 1 6 0v4H8V6zm9 4V6A6 6 0 0 0 5 6v4h-.75C3.01 10 2 11 2 12.25v7.52c0 1.24 1 2.25 2.25 2.25h13.5c1.24 0 2.25-1 2.25-2.25v-7.52C20 11 19 10 17.75 10H17z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/incontentprefs/search.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" viewBox="0 0 24 24">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M10,15.1c-3.3,0-6-2.7-6-6c0-3.3,2.7-6,6-6c3.3,0,6,2.7,6,6S13.3,15.1,10,15.1L10,15.1 M17.3,14.3 c2.9-4,2-9.7-2.1-12.6s-9.7-2-12.6,2.1C1.6,5.3,1,7.2,1,9.1c0,5,4.1,9,9,9c1.8,0,3.6-0.6,5.2-1.6l6.2,6.2c0.6,0.6,1.5,0.6,2.1,0	c0.6-0.6,0.6-1.5,0-2.1L17.3,14.3L17.3,14.3z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/incontentprefs/sync.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" viewBox="0 0 24 24">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M20.5 0c-.83 0-1.5.67-1.5 1.5v1.72A10.47 10.47 0 0 0 11.5 0C6.69 0 2.51 3.27 1.34 7.96a1.5 1.5 0 1 0 2.91.73A7.47 7.47 0 0 1 11.5 3c2.37 0 4.54 1.1 5.95 3H14.5a1.5 1.5 0 1 0 0 3h6c.83 0 1.5-.67 1.5-1.5v-6c0-.83-.67-1.5-1.5-1.5m.07 11.22a1.5 1.5 0 0 0-1.82 1.1A7.48 7.48 0 0 1 11.5 18a7.38 7.38 0 0 1-5.95-3H8.5a1.5 1.5 0 1 0 0-3h-6c-.83 0-1.5.67-1.5 1.5v6a1.5 1.5 0 0 0 3 0v-1.72A10.47 10.47 0 0 0 11.5 21c4.81 0 8.99-3.27 10.16-7.96a1.5 1.5 0 0 0-1.1-1.82"/>
+</svg>
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -67,21 +67,30 @@
   skin/classic/browser/panel-icon-arrow-right.svg              (../shared/panel-icon-arrow-right.svg)
   skin/classic/browser/panel-icon-cancel.svg                   (../shared/panel-icon-cancel.svg)
 #ifndef XP_MACOSX
   skin/classic/browser/panel-icon-folder.svg                   (../shared/panel-icon-folder.svg)
 #else
   skin/classic/browser/panel-icon-magnifier.svg                (../shared/panel-icon-magnifier.svg)
 #endif
   skin/classic/browser/panel-icon-retry.svg                    (../shared/panel-icon-retry.svg)
-  skin/classic/browser/preferences/in-content-new/icons.svg        (../shared/incontentprefs/icons.svg)
-  skin/classic/browser/preferences/in-content-new/no-search-results.svg     (../shared/incontentprefs/no-search-results.svg)
+  skin/classic/browser/preferences/in-content-new/face-sad.svg     (../shared/incontentprefs/face-sad.svg)
+  skin/classic/browser/preferences/in-content-new/face-smile.svg   (../shared/incontentprefs/face-smile.svg)
+  skin/classic/browser/preferences/in-content-new/fxa-avatar.svg   (../shared/incontentprefs/fxa-avatar.svg)
+  skin/classic/browser/preferences/in-content-new/general.svg      (../shared/incontentprefs/general.svg)
+  skin/classic/browser/preferences/in-content-new/help.svg         (../shared/incontentprefs/help.svg)
+  skin/classic/browser/preferences/in-content-new/logo-android.svg (../shared/incontentprefs/logo-android.svg)
+  skin/classic/browser/preferences/in-content-new/logo-ios.svg     (../shared/incontentprefs/logo-ios.svg)
+  skin/classic/browser/preferences/in-content-new/no-search-results.svg       (../shared/incontentprefs/no-search-results.svg)
+  skin/classic/browser/preferences/in-content-new/privacy-security.svg        (../shared/incontentprefs/privacy-security.svg)
   skin/classic/browser/preferences/in-content-new/search-arrow-indicator.svg  (../shared/incontentprefs/search-arrow-indicator.svg)
   skin/classic/browser/preferences/in-content-new/search.css       (../shared/incontentprefs/search.css)
+  skin/classic/browser/preferences/in-content-new/search.svg       (../shared/incontentprefs/search.svg)
   skin/classic/browser/preferences/in-content-new/siteDataSettings.css (../shared/incontentprefs/siteDataSettings.css)
+  skin/classic/browser/preferences/in-content-new/sync.svg         (../shared/incontentprefs/sync.svg)
 * skin/classic/browser/preferences/in-content-new/containers.css   (../shared/incontentprefs/containers.css)
   skin/classic/browser/preferences/in-content/icons.svg        (../shared/incontentprefs-old/icons.svg)
   skin/classic/browser/preferences/in-content/search.css       (../shared/incontentprefs-old/search.css)
 * skin/classic/browser/preferences/in-content/containers.css   (../shared/incontentprefs-old/containers.css)
 * skin/classic/browser/preferences/containers.css              (../shared/preferences/containers.css)
   skin/classic/browser/fxa/default-avatar.svg                  (../shared/fxa/default-avatar.svg)
   skin/classic/browser/fxa/logo.png                            (../shared/fxa/logo.png)
   skin/classic/browser/fxa/logo@2x.png                         (../shared/fxa/logo@2x.png)
--- a/browser/themes/windows/preferences/in-content-new/preferences.css
+++ b/browser/themes/windows/preferences/in-content-new/preferences.css
@@ -1,48 +1,14 @@
 /* - 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/. */
 
 %include ../../../shared/incontentprefs/preferences.inc.css
 
-@media (-moz-windows-default-theme: 0) {
-  #category-general > .category-icon {
-    list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#general-native");
-  }
-
-  #category-privacy > .category-icon {
-    list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#security-native");
-  }
-
-  #category-sync > .category-icon {
-    list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#sync-native");
-  }
-
-  #category-search > .category-icon {
-    list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#search-native");
-  }
-}
-
 .actionsMenu > .menulist-label-box > .menulist-icon {
   margin-inline-end: 9px;
 }
 
 textbox + button,
 filefield + button {
   margin-inline-start: -4px;
 }
-
-#advancedPrefs {
-  padding-bottom: 0; /* override padding from normal preferences.css */
-}
-
-#fxaProfileImage {
-  -moz-user-focus: normal;
-}
-
-/**
- * Dialog
- */
-
-#dialogTitle {
-  font-size: 1em;
-}
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -17,19 +17,19 @@
   --in-content-box-background-hover: #ebebeb;
   --in-content-box-background-active: #dadada;
   --in-content-box-border-color: #c1c1c1;
   --in-content-item-hover: rgba(0,149,221,0.25);
   --in-content-item-selected: #0a84ff;
   --in-content-border-highlight: #ff9500;
   --in-content-border-focus: #0a84ff;
   --in-content-border-color: #c1c1c1;
-  --in-content-category-text: #c1c1c1;
+  --in-content-category-text: #0c0c0d;
   --in-content-category-border-focus: 1px dotted #fff;
-  --in-content-category-text-selected: #f2f2f2;
+  --in-content-category-text-selected: #0a84ff;
   --in-content-category-background: #424f5a;
   --in-content-category-background-hover: #5e6972;
   --in-content-category-background-active: #343f48;
   --in-content-tab-color: #424f5a;
   --in-content-link-color: #0a84ff;
   --in-content-link-color-hover: #0060df;
   --in-content-link-color-active: #ff9500;
   --in-content-link-color-visited: #551a8b;
@@ -677,16 +677,19 @@ xul|*.radio-label-box {
   padding-inline-start: 9px;
   margin: 0;
   -moz-user-select: none;
 }
 
 *|*.category-icon {
   width: 24px;
   height: 24px;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.8;
 }
 
 /* header */
 
 *|*.header {
   border-bottom: 1px solid var(--in-content-header-border-color);
   margin-inline-end: 4px; /* add the 4px end-margin of other elements */
   margin-bottom: 15px;