Bug 1361957 - Update new icons for about:preferences to match Photon …

…spec r=dao

--HG--
extra : rebase_source : ee7c284aa329663e48ad9c1a7486b26e22831197

browser/components/preferences/in-content-new/main.xul

@@ -309,13 +309,15 @@
               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>
@@ -828,6 +830,7 @@
                 disabled="true"/>
       </hbox>
       <hbox id="noUpdatesFound" align="center">
+        <image class="face-smile"/>
         <label>&update.noUpdatesFound;</label>
         <spacer flex="1"/>
         <button label="&update.checkForUpdatesButton.label;"
@@ -842,6 +845,7 @@
                 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;"

browser/themes/linux/preferences/in-content-new/preferences.css

@@ -25,10 +25,6 @@
   margin-top: 2px !important;
 }
 
-#fxaProfileImage {
-  -moz-user-focus: normal;
-}
-
 menulist.actionsMenu > .menulist-dropmarker {
   margin-top: 11px;
   margin-bottom: 11px;
@@ -38,11 +34,3 @@ textbox + button,
 filefield + button {
   margin-inline-start: -4px;
 }
-
-/**
- * Dialog
- */
-
-#dialogTitle {
-  font-size: 1em;
-}

browser/themes/osx/preferences/in-content-new/preferences.css

@@ -19,10 +19,6 @@ prefpane .groupbox-title {
   padding-inline-start: 3px;
 }
 
-#fxaProfileImage {
-  -moz-user-focus: normal;
-}
-
 textbox + button {
   margin-inline-start: -4px;
 }
@@ -38,16 +34,3 @@ filefield + button {
   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;
-}

browser/themes/shared/incontentprefs/preferences.inc.css

@@ -19,7 +19,7 @@
   width: 100%;
   padding: 0;
   font: message-box;
-  color: #0c0c0d;
+  color: currentColor;
 }
 
 #mainPrefPane groupbox,
@@ -124,7 +124,6 @@ caption > label {
 
 .category-name {
   font-size: 1.45rem;
-  color: #0c0c0d;
 }
 
 .category,
@@ -135,10 +134,6 @@ caption > label {
   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
@@ -150,19 +145,19 @@ richlistitem[selected='true'] .category-name {
 }
 
 #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) {
@@ -452,10 +447,11 @@ groupbox {
   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 {
@@ -581,7 +577,7 @@ groupbox {
 }
 
 .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;
@@ -604,37 +600,25 @@ groupbox {
 }
 
 .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/[email protected]");
-  }
-  .iOSLink {
-    list-style-image: url("chrome://browser/skin/fxa/[email protected]");
-  }
-  .fxaFirefoxLogo {
-    list-style-image: url(chrome://browser/skin/fxa/[email protected]);
-  }
-}
-
 #updateDeck > hbox > label {
   margin-inline-end: 5px ! important;
 }
@@ -658,14 +642,15 @@ groupbox {
   /* 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) {
@@ -674,19 +659,29 @@ groupbox {
   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 {