Backed out changeset 0b9a1b2668a4 (bug 1685595) for browser_parsable_css.js failures. CLOSED TREE

browser/components/aboutconfig/content/aboutconfig.css

@@ -178,21 +178,7 @@ tr:not(.deleted) > .cell-value {
 }
 
 #form-edit > label {
-  /* Make the radiobutton's text wrap to a new line along with
-     the radiobutton itself, when space is constrained. */
-  display: inline-block;
-  /* margin-block to apply some spacing between the radio buttons
-     when the labels are wrapping. */
-  margin-block: 2px;
-  margin-inline-end: 30px;
-}
-
-#form-edit > label:last-of-type {
-  margin-inline-end: 0;
-}
-
-#form-edit > label > :is(input[type="radio"], span) {
-  vertical-align: middle;
+  padding-inline-end: 10px;
 }
 
 td.cell-value > form > input[type="text"],

browser/themes/shared/aboutWelcomeBack.css

@@ -7,11 +7,7 @@
 }
 
 .radioRestoreContainer:not(:last-child) {
-  margin-bottom: 0.4em;
-}
-
-.radioRestoreContainer > :is(.radioRestoreButton, .radioRestoreLabel) {
-  vertical-align: middle;
+  margin-bottom: 0.2em;
 }
 
 /* tablist starts out hidden, but JS may make it visible in response to

toolkit/components/printing/content/print.css

@@ -40,6 +40,14 @@ body[loading] #print {
   margin-block: 2px;
 }
 
+.row > input,
+.row > select,
+.col > input {
+  margin-inline: 0 0;
+  max-width: 100%;
+  display: inline-block;
+}
+
 .row.cols-2 {
   flex-direction: row;
   align-items: center;
@@ -110,6 +118,47 @@ select:not([size], [multiple])[iconic] {
   background-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg"), url("chrome://global/content/portrait.svg");
 }
 
+input[type="checkbox"] {
+  margin-inline-end: 8px;
+}
+
+input[type="radio"] {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 50%;
+  margin: 0;
+  margin-inline-end: 8px;
+  background-color: var(--in-content-box-background);
+}
+
+input[type="radio"]:checked {
+  appearance: none;
+  background-image: url("chrome://global/skin/in-content/radio.svg");
+  -moz-context-properties: fill;
+  fill: #3485ff;
+}
+
+input[type="radio"]:enabled:-moz-focusring,
+input[type="radio"]:enabled:hover {
+  border-color: var(--in-content-border-focus);
+}
+
+input[type="radio"]:enabled:-moz-focusring {
+  outline: 2px solid var(--in-content-border-active);
+  /* offset outline to align with 1px border-width set for buttons/menulists above. */
+  outline-offset: -1px;
+  /* Make outline-radius slightly bigger than the border-radius set above,
+   * to make the thicker outline corners look smooth */
+  -moz-outline-radius: 50%;
+  box-shadow: 0 0 0 4px var(--in-content-border-active-shadow);
+}
+
+input[type="radio"]:disabled {
+  opacity: 0.5;
+}
+
 input[type="number"],
 input[type="text"] {
   padding: 2px;
@@ -216,7 +265,6 @@ input[type="text"] {
 
 #custom-range {
   margin-top: 4px;
-  margin-inline: 0;
 }
 
 .vertical-margins,

toolkit/content/aboutTelemetry.css

@@ -212,11 +212,6 @@ section:not(.active) {
   margin-bottom: 10px;
 }
 
-#ping-source-picker > div > :is(input[type="radio"], label),
-#current-ping-picker > :is(input[type="checkbox"], label) {
-  vertical-align: middle;
-}
-
 #ping-source-archive-container.disabled {
   opacity: 0.5;
 }

toolkit/mozapps/extensions/content/aboutaddons.css

@@ -540,22 +540,10 @@ addon-details {
   margin: 0;
 }
 
-.addon-detail-actions,
 .addon-detail-rating {
   display: flex;
 }
 
-.addon-detail-actions {
-  gap: 20px;
-}
-
-.addon-detail-actions > label {
-  /* Center the items and remove the whitespaces between the input and the span
-     to allow them to accomodate more space when it's constrained. */
-  display: inline-flex;
-  flex-wrap: wrap;
-}
-
 .addon-detail-rating > a {
   margin-inline-start: 8px;
 }

toolkit/mozapps/extensions/content/aboutaddons.html

@@ -234,7 +234,7 @@
           </div>
           <div class="addon-detail-row addon-detail-row-updates">
             <label data-l10n-id="addon-detail-updates-label"></label>
-            <div class="addon-detail-actions">
+            <div>
               <button class="button-link" data-l10n-id="addon-detail-update-check-label" action="update-check" hidden></button>
               <label>
                 <input type="radio" name="autoupdate" value="1" data-telemetry-value="default">
@@ -252,7 +252,7 @@
           </div>
           <div class="addon-detail-row addon-detail-row-has-help addon-detail-row-private-browsing" hidden>
             <label data-l10n-id="detail-private-browsing-label"></label>
-            <div class="addon-detail-actions">
+            <div>
               <label>
                 <input type="radio" name="private-browsing" value="1" data-telemetry-value="on">
                 <span data-l10n-id="addon-detail-private-browsing-allow"></span>

toolkit/mozapps/extensions/content/abuse-report-panel.css

@@ -26,6 +26,23 @@
   --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);
+}
+
+@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
@@ -129,17 +146,19 @@ ul.abuse-report-reasons > li {
 }
 
 ul.abuse-report-reasons > li > label {
-  display: grid;
-  grid-template-columns: var(--list-radio-column-size) auto;
-  grid-template-rows: 50% auto;
   width: 100%;
   line-height: var(--line-height);
   font-size: var(--subtitle-font-size);
   font-weight: var(--note-font-weight);
-  margin-inline-start: 4px;
 }
 
-ul.abuse-report-reasons > li > label > [type="radio"] {
+ul.abuse-report-reasons > li > label {
+  display: grid;
+  grid-template-columns: var(--list-radio-column-size) auto;
+  grid-template-rows: 50% auto;
+}
+
+ul.abuse-report-reasons > li > label > [type=radio] {
   grid-column: 1;
 }
 
@@ -147,6 +166,50 @@ ul.abuse-report-reasons > li > label > span {
   grid-column: 2;
 }
 
+ul.abuse-report-reasons > li > label > span:nth-child(2) {
+  padding-top: 2px;
+}
+
+.abuse-report-contents [type=radio] {
+  appearance: none;
+  height: var(--radio-size);
+  width: var(--radio-size);
+  border-radius: 100%;
+  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 {
+  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(--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(--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(--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);

toolkit/themes/shared/in-content/common.inc.css

@@ -265,7 +265,7 @@ html|button {
 
 button:-moz-focusring,
 html|select:-moz-focusring,
-html|input:is([type="checkbox"], [type="color"], [type="radio"]):-moz-focusring,
+html|input:is([type="checkbox"], [type="color"]):-moz-focusring,
 xul|menulist:-moz-focusring {
   outline: 2px solid var(--in-content-border-active);
   /* offset outline to align with 1px border-width set for buttons/menulists above. */
@@ -276,10 +276,6 @@ xul|menulist:-moz-focusring {
   box-shadow: 0 0 0 4px var(--in-content-border-active-shadow);
 }
 
-html|input[type="radio"]:-moz-focusring {
-  -moz-outline-radius: 50%;
-}
-
 html|select:not([size], [multiple]) {
   background-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
   background-position: right 3px center;
@@ -595,7 +591,6 @@ xul|radio {
   appearance: none;
 }
 
-html|input[type="radio"],
 xul|*.radio-check {
   appearance: none;
   width: 20px;
@@ -605,31 +600,20 @@ xul|*.radio-check {
   margin: 0;
   margin-inline-end: 10px;
   background-color: var(--grey-90-a10);
-  background-position: center;
 }
 
-html|input[type="radio"]:enabled:hover,
 xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
   background-color: var(--grey-90-a20);
 }
 
-html|input[type="radio"]:checked,
 xul|*.radio-check[selected] {
+  list-style-image: url("chrome://global/skin/in-content/radio.svg");
   -moz-context-properties: fill;
   fill: currentColor;
   color: white;
   background-color: var(--blue-60);
 }
 
-html|input[type="radio"]:checked {
-  background-image: url("chrome://global/skin/in-content/radio.svg");
-}
-
-xul|*.radio-check[selected] {
-  list-style-image: url("chrome://global/skin/in-content/radio.svg");
-}
-
-html|input[type="radio"]:enabled:checked:hover,
 xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
   background-color: var(--blue-70);
 }
@@ -647,9 +631,8 @@ xul|label[disabled="true"] {
   color: inherit;
 }
 
-html|input[type="checkbox"]:disabled,
-html|input[type="radio"]:disabled,
 xul|checkbox[disabled="true"],
+html|input[type="checkbox"]:disabled,
 xul|radio[disabled="true"],
 xul|label[disabled="true"] {
   opacity: 0.5;