Bug 1551202 - Support dark theme for radio input at abuse reports r=jaws
☠☠ backed out by c07f5967e0fc ☠ ☠
authorRob Wu <rob@robwu.nl>
Fri, 17 May 2019 18:48:03 +0000
changeset 474388 70b0d5a417b826c34f76cc244a303200fc4de885
parent 474387 1454297813951e8531bed6673e41fb38425b9def
child 474389 67b8391890d08c4eabe23de9a77bd0a87cadfef6
push id113152
push userdluca@mozilla.com
push dateSat, 18 May 2019 10:33:03 +0000
treeherdermozilla-inbound@9b2f851979cb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1551202
milestone68.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 1551202 - Support dark theme for radio input at abuse reports r=jaws - Put every color in a variable name. - Add `label:hover` so that the radio input provides visual feedback upon hover. - Implement "pressed" (`[type="radio"]:active`) and `:focus{border:0}` to match Photon's design guidelines at https://design.firefox.com/photon/components/radio-buttons.html - Implement dark theme for radio inputs (using creative freedom as there is no Photon guideline for this). Differential Revision: https://phabricator.services.mozilla.com/D31510
toolkit/mozapps/extensions/content/abuse-report-panel.css
--- a/toolkit/mozapps/extensions/content/abuse-report-panel.css
+++ b/toolkit/mozapps/extensions/content/abuse-report-panel.css
@@ -17,16 +17,35 @@
   --textarea-height: 220px;
   --button-padding: 52px;
   --listitem-padding-bottom: 14px;
   --list-radio-column-size: 28px;
   --note-font-size: 14px;
   --note-font-weight: 400;
   --subtitle-font-size: 16px;
   --subtitle-font-weight: 600;
+
+  --input-radio-border: var(--in-content-box-border-color);
+  --input-radio-background: var(--grey-90-a10);
+  --input-radio-background-hover: var(--grey-90-a20);
+  --input-radio-background-active: var(--grey-90-a30);
+  --input-radio-background-selected: var(--blue-60);
+  --input-radio-background-selected-hover: var(--blue-70);
+  --input-radio-background-selected-active: var(--blue-80);
+  --input-radio-focus-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
+}
+
+@supports -moz-bool-pref("browser.in-content.dark-mode") {
+@media (prefers-color-scheme: dark) {
+  :root {
+    --input-radio-background: #202023;
+    --input-radio-background-hover: #303033;
+    --input-radio-background-active: #404044;
+  }
+}
 }
 
 /* Ensure that the document (embedded in the XUL about:addons using a
    XUL browser) has a transparent background */
 html {
   background-color: transparent;
 }
 
@@ -149,38 +168,49 @@ ul.abuse-report-reasons > li > label > s
   padding-top: 2px;
 }
 
 .abuse-report-contents [type=radio] {
   -moz-appearance: none;
   height: var(--radio-size);
   width: var(--radio-size);
   border-radius: 100%;
-  border: 1px solid var(--grey-90-a30);
-  background-color: var(--grey-90-a10);
+  border: 1px solid var(--input-radio-border);
+  background-color: var(--input-radio-background);
   margin-inline-start: 4px;
   margin-inline-end: 4px;
 }
 
 .abuse-report-contents [type=radio]:focus {
-  box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
+  border: none;
+  box-shadow: var(--input-radio-focus-shadow);
 }
 
+.abuse-report-contents label:hover [type=radio]:not(:active),
 .abuse-report-contents [type=radio]:hover {
-  background-color: var(--grey-90-a20);
+  background-color: var(--input-radio-background-hover);
+}
+
+.abuse-report-contents [type=radio]:active {
+  background-color: var(--input-radio-background-active);
 }
 
 .abuse-report-contents [type=radio]:checked {
   background-image: var(--radio-image-url);
-  background-color: var(--blue-60);
+  background-color: var(--input-radio-background-selected);
   background-position: center center;
 }
 
+.abuse-report-contents label:hover [type=radio]:checked:not(:active),
 .abuse-report-contents [type=radio]:checked:hover {
-  background-color: var(--blue-70);
+  background-color: var(--input-radio-background-selected-hover);
+}
+
+.abuse-report-contents [type=radio]:checked:active {
+  background-color: var(--input-radio-background-selected-active);
 }
 
 abuse-report-submit-panel textarea {
   width: 100%;
   height: var(--textarea-height);
   resize: none;
   box-sizing: border-box;
 }