Bug 1361957 - Update new icons for about:preferences to match Photon spec r?dao draft
authorRicky Chien <ricky060709@gmail.com>
Wed, 09 Aug 2017 09:49:46 +0800
changeset 642971 8097d7664e1627157dbb0e6818362596a3c6df9a
parent 642916 1d042bcb2632ea6a38fa08dbe21a6e8a0ee46961
child 642973 9f8125567fd7977967a49a9e3a96e3e336a34061
push id72933
push userbmo:rchien@mozilla.com
push dateWed, 09 Aug 2017 02:09:25 +0000
reviewersdao
bugs1361957
milestone57.0a1
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;