Bug 1731144 - Improve theming in about:config r=mconley
authorItiel <itiel_yn8@walla.com>
Sat, 18 Sep 2021 17:21:52 +0000
changeset 592431 1f98e3d483494e48b277c4c409840cc44df99e16
parent 592430 9adcbf4e1bd9385a3128de0501859a3f144cf672
child 592432 5db09c852a6f55bd5122739ee2496023f83e00ef
push id38802
push userctuns@mozilla.com
push dateSun, 19 Sep 2021 21:29:08 +0000
treeherdermozilla-central@21f27a8573cb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley
bugs1731144
milestone94.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 1731144 - Improve theming in about:config r=mconley Differential Revision: https://phabricator.services.mozilla.com/D125885
toolkit/components/aboutconfig/content/aboutconfig.css
toolkit/components/aboutconfig/content/aboutconfig.js
toolkit/themes/shared/in-content/common.inc.css
--- a/toolkit/components/aboutconfig/content/aboutconfig.css
+++ b/toolkit/components/aboutconfig/content/aboutconfig.css
@@ -30,16 +30,17 @@
 .title {
   background-image: url("chrome://global/skin/icons/warning.svg");
   fill: #fcd100;
 }
 
 #toolbar {
   position: sticky;
   top: 0;
+  z-index: 1;
   box-sizing: border-box;
   width: 100%;
   background-color: var(--in-content-page-background);
   padding: 10px;
   padding-bottom: 0;
   min-width: 644px;
   display: flex;
 }
@@ -49,31 +50,35 @@
   display: inline-flex;
   align-items: center;
   margin-inline-start: 1ch;
 }
 
 #about-config-search {
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
-  fill-opacity: 0.4;
   box-sizing: border-box;
   flex-grow: 1;
   background-image: url("chrome://global/skin/icons/search-glass.svg");
   background-repeat: no-repeat;
   background-position: 8px center;
   background-size: 16px;
-  z-index: 1;
   /* Set horizontal margin to 0 to ensure alignment with table. */
   margin-inline: 0;
   text-align: match-parent;
   /* All prefs must be left-to-right. */
   direction: ltr;
 }
 
+@media not (prefers-contrast) {
+  #about-config-search {
+    fill-opacity: 0.4;
+  }
+}
+
 #about-config-search:placeholder-shown {
   /* Display the placeholder in its natural directionality,
    * even if the user changes the text direction manually
    * (e.g. via RightCtrl+Shift). */
   direction: inherit;
 }
 
 :root:dir(ltr) #about-config-search {
@@ -96,17 +101,17 @@
   background-color: var(--in-content-box-background);
   color: var(--in-content-text-color);
   margin: 10px;
   table-layout: fixed;
   width: calc(100% - 20px);
   min-width: 644px;
   /* To stay consistent with about:preferences (664px - 20px margin). */
   border: var(--prefs-table-border);
-  border-radius: 2px;
+  border-radius: 4px;
   border-spacing: 0;
 }
 
 #prefs > tr.odd {
   background-color: var(--in-content-box-background-odd);
 }
 
 #prefs > tr:hover {
@@ -147,17 +152,17 @@
   /* Be explicit about padding direction since `th` is forced to be LTR. */
   padding-left: 30px;
 }
 
 #prefs > tr:dir(rtl) > th {
   padding-right: 30px;
 }
 
-#prefs > tr.deleted > th {
+#prefs > tr.deleted > th > span {
   font-weight: bold;
   color: var(--in-content-deemphasized-text);
 }
 
 #prefs > tr > td.cell-edit,
 #prefs > tr > td.cell-reset {
   width: 40px;
   padding: 0;
@@ -272,8 +277,20 @@ td.cell-value > form > input[type="numbe
 
 #prefs[has-visible-prefs] > .add > th,
 #prefs[has-visible-prefs] > .add > td {
   /* This is the border underneath the last existing pref row. */
   border-top: var(--prefs-table-border);
   padding-top: 14px;
   position: relative;
 }
+
+@media (prefers-contrast) {
+  #prefs > tr.deleted:hover > th > span {
+    color: inherit;
+  }
+
+  td:is(.cell-edit, .cell-reset) > button:hover,
+  tr:hover > td > button.primary,
+  tr.deleted:hover input[type="radio"]:checked:not(:hover) {
+    border-color: ThreeDShadow;
+  }
+}
--- a/toolkit/components/aboutconfig/content/aboutconfig.js
+++ b/toolkit/components/aboutconfig/content/aboutconfig.js
@@ -164,16 +164,18 @@ class PrefRow {
     if (this._element) {
       return this._element;
     }
 
     this._element = document.createElement("tr");
     this._element._pref = this;
 
     let nameCell = document.createElement("th");
+    let nameCellSpan = document.createElement("span");
+    nameCell.appendChild(nameCellSpan);
     this._element.append(
       nameCell,
       (this.valueCell = document.createElement("td")),
       (this.editCell = document.createElement("td")),
       (this.resetCell = document.createElement("td"))
     );
     this.editCell.appendChild(
       (this.editButton = document.createElement("button"))
@@ -183,19 +185,19 @@ class PrefRow {
     nameCell.setAttribute("scope", "row");
     this.valueCell.className = "cell-value";
     this.editCell.className = "cell-edit";
     this.resetCell.className = "cell-reset";
 
     // Add <wbr> behind dots to prevent line breaking in random mid-word places.
     let parts = this.name.split(".");
     for (let i = 0; i < parts.length - 1; i++) {
-      nameCell.append(parts[i] + ".", document.createElement("wbr"));
+      nameCellSpan.append(parts[i] + ".", document.createElement("wbr"));
     }
-    nameCell.append(parts[parts.length - 1]);
+    nameCellSpan.append(parts[parts.length - 1]);
 
     this.refreshElement();
 
     return this._element;
   }
 
   refreshElement() {
     if (!this._element) {
@@ -229,23 +231,23 @@ class PrefRow {
       outerSpan.appendChild(span);
       this.valueCell.textContent = "";
       this.valueCell.append(outerSpan);
       if (this.type == "Boolean") {
         document.l10n.setAttributes(
           this.editButton,
           "about-config-pref-toggle-button"
         );
-        this.editButton.className = "button-toggle";
+        this.editButton.className = "button-toggle semi-transparent";
       } else {
         document.l10n.setAttributes(
           this.editButton,
           "about-config-pref-edit-button"
         );
-        this.editButton.className = "button-edit";
+        this.editButton.className = "button-edit semi-transparent";
       }
       this.editButton.removeAttribute("form");
       delete this.inputField;
     } else {
       this.valueCell.textContent = "";
       // The form is needed for the validation report to appear, but we need to
       // prevent the associated button from reloading the page.
       let form = document.createElement("form");
@@ -262,17 +264,17 @@ class PrefRow {
         } else {
           this.inputField.type = "text";
         }
         form.appendChild(this.inputField);
         document.l10n.setAttributes(
           this.editButton,
           "about-config-pref-save-button"
         );
-        this.editButton.className = "primary button-save";
+        this.editButton.className = "primary button-save semi-transparent";
       } else {
         delete this.inputField;
         for (let type of ["Boolean", "Number", "String"]) {
           let radio = document.createElement("input");
           radio.type = "radio";
           radio.name = "type";
           radio.value = type;
           radio.checked = this.type == type;
@@ -296,39 +298,41 @@ class PrefRow {
               this.value = "";
             }
           }
         });
         document.l10n.setAttributes(
           this.editButton,
           "about-config-pref-add-button"
         );
-        this.editButton.className = "button-add";
+        this.editButton.className = "button-add semi-transparent";
       }
       this.valueCell.appendChild(form);
       this.editButton.setAttribute("form", "form-edit");
     }
     this.editButton.disabled = this.isLocked;
     if (!this.isLocked && this.hasUserValue) {
       if (!this.resetButton) {
         this.resetButton = document.createElement("button");
         this.resetCell.appendChild(this.resetButton);
       }
       if (!this.hasDefaultValue) {
         document.l10n.setAttributes(
           this.resetButton,
           "about-config-pref-delete-button"
         );
-        this.resetButton.className = "button-delete ghost-button";
+        this.resetButton.className =
+          "button-delete ghost-button semi-transparent";
       } else {
         document.l10n.setAttributes(
           this.resetButton,
           "about-config-pref-reset-button"
         );
-        this.resetButton.className = "button-reset ghost-button";
+        this.resetButton.className =
+          "button-reset ghost-button semi-transparent";
       }
     } else if (this.resetButton) {
       this.resetButton.remove();
       delete this.resetButton;
     }
 
     this.refreshClass();
   }
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -462,16 +462,30 @@ xul|button.primary:not([disabled="true"]
 html|button[autofocus]:enabled:hover:active,
 html|button[type="submit"]:enabled:hover:active,
 html|button.primary:enabled:hover:active,
 xul|button[default]:not([disabled="true"]):hover:active,
 xul|button.primary:not([disabled="true"]):hover:active {
   background-color: var(--in-content-primary-button-background-active);
 }
 
+@media not (prefers-contrast) {
+  html|button.semi-transparent:not(.ghost-button, .primary):enabled {
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  html|button.semi-transparent:not(.primary):enabled:hover {
+    background-color: color-mix(in srgb, currentColor 20%, transparent);
+  }
+
+  html|button.semi-transparent:not(.primary):enabled:hover:active {
+    background-color: color-mix(in srgb, currentColor 30%, transparent);
+  }
+}
+
 @media (prefers-contrast) {
   html|button[autofocus]:enabled:hover,
   html|button[type="submit"]:enabled:hover,
   html|button.primary:enabled:hover,
   xul|button[default]:not([disabled="true"]):hover,
   xul|button.primary:not([disabled="true"]):hover {
     border-color: currentColor;
   }
@@ -494,32 +508,22 @@ xul|button.primary:not([disabled="true"]
   --in-content-primary-button-background-active: var(--in-content-danger-button-background-active);
   --in-content-focus-outline-color: var(--in-content-danger-button-background);
 }
 
 html|button.ghost-button {
   background-color: transparent;
 }
 
-html|button.ghost-button:enabled:hover {
-  background-color: var(--in-content-button-background);
-  color: var(--in-content-button-text-color);
-}
-
-html|button.ghost-button:enabled:hover:active {
+html|button.ghost-button:not(.semi-transparent):enabled:hover {
   background-color: var(--in-content-button-background-hover);
   color: var(--in-content-button-text-color-hover);
 }
 
-html|button.ghost-button:enabled:hover {
-  background-color: var(--in-content-button-background-hover);
-  color: var(--in-content-button-text-color-hover);
-}
-
-html|button.ghost-button:enabled:hover:active {
+html|button.ghost-button:not(.semi-transparent):enabled:hover:active {
   background-color: var(--in-content-button-background-active);
 }
 
 html|input[type="color"] {
   padding: 6px;
   width: 50px;
 }