From b20db2f2c021b6426ce6e30ea3bda9578c6b9258 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= <emilio@crisal.io>
Date: Wed, 25 Jan 2023 23:13:53 +0000
Subject: [PATCH] Bug 1812335 - Remove some XUL image usage from preferences.
 r=Gijs,settings-reviewers

Use content rather than list-style.

Differential Revision: https://phabricator.services.mozilla.com/D167811
---
 browser/components/preferences/main.inc.xhtml | 24 +++++++++----------
 .../themes/shared/preferences/preferences.css | 19 ++++-----------
 2 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/browser/components/preferences/main.inc.xhtml b/browser/components/preferences/main.inc.xhtml
index bc11087b5259..f8bc211d9b62 100644
--- a/browser/components/preferences/main.inc.xhtml
+++ b/browser/components/preferences/main.inc.xhtml
@@ -38,7 +38,7 @@
               data-l10n-id="always-check-default"/>
     <stack id="setDefaultPane">
       <hbox id="isNotDefaultPane" align="center" class="indent">
-        <image class="face-sad"/>
+        <html:img class="face-sad"/>
         <label id="isNotDefaultLabel" flex="1" data-l10n-id="is-not-default"/>
         <button id="setDefaultButton"
                 is="highlightable-button"
@@ -47,7 +47,7 @@
                 preference="pref.general.disable_button.default_browser"/>
       </hbox>
       <hbox id="isDefaultPane" align="center" class="indent">
-        <image class="face-smile"/>
+        <html:img class="face-smile"/>
         <label id="isDefaultLabel" flex="1" data-l10n-id="is-default"/>
       </hbox>
     </stack>
@@ -133,7 +133,7 @@
     <description data-l10n-id="preferences-web-appearance-description"/>
     <html:div id="web-appearance-override-warning" class="info-box-container">
       <html:div class="info-icon-container">
-        <image class="info-icon"></image>
+        <html:img class="info-icon"/>
       </html:div>
       <description data-l10n-id="preferences-web-appearance-override-warning">
         <html:a class="text-link" data-l10n-name="colors-link" id="web-appearance-manage-colors-link" href="#"/>
@@ -318,7 +318,7 @@
     </hbox>
   </vbox>
   <hbox id="confirmBrowserLanguage" class="message-bar" align="center" hidden="true">
-    <image class="message-bar-icon"/>
+    <html:img class="message-bar-icon"/>
     <vbox class="message-bar-content-container" align="stretch" flex="1"/>
   </hbox>
 
@@ -505,7 +505,7 @@
                 data-l10n-id="update-updateButton"/>
       </hbox>
       <hbox id="checkingForUpdates" align="start">
-        <image class="update-throbber"/>
+        <html:img class="update-throbber"/>
         <label data-l10n-id="update-checkingForUpdates"></label>
         <spacer flex="1"/>
         <button data-l10n-id="update-checkForUpdatesButton"
@@ -517,7 +517,7 @@
         <label id="downloadStatus" data-l10n-name="download-status"/>
       </hbox>
       <hbox id="applying" align="start">
-        <image class="update-throbber"/>
+        <html:img class="update-throbber"/>
         <label data-l10n-id="update-applying"></label>
       </hbox>
       <hbox id="downloadFailed" align="start">
@@ -537,7 +537,7 @@
                 disabled="true"/>
       </hbox>
       <hbox id="noUpdatesFound" align="start">
-        <image class="face-smile"/>
+        <html:img class="face-smile"/>
         <label data-l10n-id="update-noUpdatesFound"></label>
         <spacer flex="1"/>
         <button id="checkForUpdatesButton3"
@@ -545,7 +545,7 @@
                 is="highlightable-button"/>
       </hbox>
       <hbox id="checkingFailed" align="start">
-        <image class="face-sad"/>
+        <html:img class="face-sad"/>
         <label data-l10n-id="aboutdialog-update-checking-failed"></label>
         <spacer flex="1"/>
         <button id="checkForUpdatesButton4"
@@ -560,7 +560,7 @@
                 disabled="true"/>
       </hbox>
       <hbox id="manualUpdate" align="start">
-        <image class="face-sad"/>
+        <html:img class="face-sad"/>
         <description flex="1" data-l10n-id="update-manual">
           <label class="manualLink" data-l10n-name="manual-link" is="text-link"/>
         </description>
@@ -579,14 +579,14 @@
                 disabled="true"/>
       </hbox>
       <hbox id="restarting" align="start">
-        <image class="update-throbber"/><label data-l10n-id="update-restarting"></label>
+        <html:img class="update-throbber"/><label data-l10n-id="update-restarting"></label>
         <spacer flex="1"/>
         <button data-l10n-id="update-updateButton"
                 is="highlightable-button"
                 disabled="true"/>
       </hbox>
       <hbox id="internalError" align="start">
-        <image class="face-sad"/>
+        <html:img class="face-sad"/>
         <description flex="1" data-l10n-id="update-internal-error">
           <label class="manualLink" data-l10n-name="manual-link" is="text-link"/>
         </description>
@@ -618,7 +618,7 @@
     </radiogroup>
     <hbox id="updateSettingCrossUserWarningDesc" hidden="true">
       <hbox class="info-icon-container">
-        <image class="info-icon"></image>
+        <html:img class="info-icon"/>
       </hbox>
       <description id="updateSettingCrossUserWarning"
                    flex="1"
diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css
index 12beaa7e0132..b508025f2f60 100644
--- a/browser/themes/shared/preferences/preferences.css
+++ b/browser/themes/shared/preferences/preferences.css
@@ -896,20 +896,11 @@ dialog > .sync-engines-list + hbox {
   min-height: 16px;
   margin-block: 7px;
   margin-inline-end: 8px;
-}
-
-html|img.update-throbber {
   vertical-align: middle;
 }
 
-image.update-throbber {
-  list-style-image: url("chrome://global/skin/icons/loading.png");
-}
-
-@media (min-resolution: 1.1dppx) {
-  .update-throbber {
-    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
-  }
+.update-throbber {
+  content: image-set(url("chrome://global/skin/icons/loading.png"), url("chrome://global/skin/icons/loading@2x.png") 2x);
 }
 
 .navigation {
@@ -932,7 +923,7 @@ image.update-throbber {
 }
 
 .face-sad {
-  list-style-image: url("chrome://browser/skin/preferences/face-sad.svg");
+  content: url("chrome://browser/skin/preferences/face-sad.svg");
   width: 20px;
   height: 20px;
   margin-block: 5px;
@@ -940,7 +931,7 @@ image.update-throbber {
 }
 
 .face-smile {
-  list-style-image: url("chrome://browser/skin/preferences/face-smile.svg");
+  content: url("chrome://browser/skin/preferences/face-smile.svg");
   width: 20px;
   height: 20px;
   margin-block: 5px;
@@ -978,7 +969,7 @@ image.update-throbber {
 }
 
 .info-icon {
-  list-style-image: url("chrome://global/skin/icons/info.svg");
+  content: url("chrome://global/skin/icons/info.svg");
   width: 16px;
   height: 16px;
   margin-inline-end: 6px;