Bug 1685595 - Make input[type=radio] styling match xul|radio styling in common.inc.css r=sfoster,robwu,extension-reviewers,ntim

Differential Revision: https://phabricator.services.mozilla.com/D101064

browser/components/aboutconfig/content/aboutconfig.css

@@ -178,7 +178,21 @@ tr:not(.deleted) > .cell-value {
 }
 
 #form-edit > label {
-  padding-inline-end: 10px;
+  /* 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;
 }
 
 td.cell-value > form > input[type="text"],

browser/themes/shared/aboutWelcomeBack.css

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

toolkit/components/printing/content/print.css

@@ -40,14 +40,6 @@ 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;
@@ -118,47 +110,6 @@ 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;
@@ -265,6 +216,7 @@ input[type="text"] {
 
 #custom-range {
   margin-top: 4px;
+  margin-inline: 0;
 }
 
 .vertical-margins,

toolkit/content/aboutTelemetry.css

@@ -212,6 +212,11 @@ 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,10 +540,22 @@ 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>
+            <div class="addon-detail-actions">
               <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>
+            <div class="addon-detail-actions">
               <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

@@ -8,9 +8,6 @@
   --close-icon-url: url("chrome://global/skin/icons/close.svg");
   --close-icon-size: 20px;
 
-  --radio-image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E %3Ccircle cx='8' cy='8' r='4' fill='%23fff'/%3E %3C/svg%3E");
-  --radio-size: 16px;
-
   --modal-panel-min-width: 60%;
   --modal-panel-margin-top: 36px;
   --modal-panel-margin-bottom: 36px;
@@ -26,23 +23,6 @@
   --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
@@ -146,19 +126,17 @@ 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 {
-  display: grid;
-  grid-template-columns: var(--list-radio-column-size) auto;
-  grid-template-rows: 50% auto;
-}
-
-ul.abuse-report-reasons > li > label > [type=radio] {
+ul.abuse-report-reasons > li > label > [type="radio"] {
   grid-column: 1;
 }
 
@@ -166,50 +144,6 @@ 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"]):-moz-focusring,
+html|input:is([type="checkbox"], [type="color"], [type="radio"]):-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,6 +276,10 @@ 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;
@@ -591,6 +595,7 @@ xul|radio {
   appearance: none;
 }
 
+html|input[type="radio"],
 xul|*.radio-check {
   appearance: none;
   width: 20px;
@@ -600,20 +605,31 @@ 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);
 }
@@ -631,8 +647,9 @@ xul|label[disabled="true"] {
   color: inherit;
 }
 
-xul|checkbox[disabled="true"],
 html|input[type="checkbox"]:disabled,
+html|input[type="radio"]:disabled,
+xul|checkbox[disabled="true"],
 xul|radio[disabled="true"],
 xul|label[disabled="true"] {
   opacity: 0.5;