Bug 2050132 - Replace the segmented buttons in the print dialog with moz-segmented-control r=fluent-reviewers,desktop-theme-reviewers,flod,mstriemer

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

python/l10n/fluent_migrations/bug_2050132_print_orientation_control.py

@@ -0,0 +1,27 @@
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+
+from fluent.migrate.helpers import transforms_from
+
+
+def migrate(ctx):
+    """Bug 2050132 - Replace the segmented buttons in the print dialog with moz-segmented-control, part {index}."""
+
+    source = "toolkit/toolkit/printing/printUI.ftl"
+    ctx.add_transforms(
+        source,
+        source,
+        transforms_from(
+            """
+printui-orientation-control =
+    .aria-label = {COPY_PATTERN(from_path, "printui-orientation")}
+printui-landscape-2 =
+    .label = {COPY_PATTERN(from_path, "printui-landscape")}
+    .title = {COPY_PATTERN(from_path, "printui-landscape")}
+printui-portrait-2 =
+    .label = {COPY_PATTERN(from_path, "printui-portrait")}
+    .title = {COPY_PATTERN(from_path, "printui-portrait")}
+""",
+            from_path=source,
+        ),
+    )

stylelint-rollouts.config.js

@@ -290,7 +290,6 @@ module.exports = [
       "toolkit/components/printing/content/printPagination.css",
       "toolkit/components/printing/content/printPreview.css",
       "toolkit/components/printing/content/simplifyMode.css",
-      "toolkit/components/printing/content/toggle-group.css",
       "toolkit/components/prompts/content/commonDialog.css",
       "toolkit/components/prompts/content/selectDialog.css",
       "toolkit/components/reader/moz-slider.css",

toolkit/components/printing/content/print.css

@@ -146,6 +146,13 @@ input[type="radio"]:disabled + span > label {
   opacity: 0.5;
 }
 
+#orientation-control {
+  --button-font-size-small: none;
+
+  width: 100%;
+  box-sizing: border-box;
+}
+
 #custom-range {
   margin: 0;
   margin-top: var(--space-xsmall);
@@ -161,18 +168,6 @@ input[type="radio"]:disabled + span > label {
   }
 }
 
-.toggle-group-label {
-  padding: var(--space-xsmall) var(--space-small);
-
-  #landscape + &::before {
-    content: url("chrome://global/skin/icons/page-landscape.svg");
-  }
-
-  #portrait + &::before {
-    content: url("chrome://global/skin/icons/page-portrait.svg");
-  }
-}
-
 #more-settings {
   > summary {
     list-style: none;

toolkit/components/printing/content/print.html

@@ -14,7 +14,6 @@
     <link rel="localization" href="toolkit/printing/printUI.ftl" />
 
     <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
-    <link rel="stylesheet" href="chrome://global/content/toggle-group.css" />
     <link rel="stylesheet" href="chrome://global/content/print.css" />
     <script defer src="chrome://global/content/print.js"></script>
     <script
@@ -77,31 +76,25 @@
     </template>
 
     <template id="orientation-template">
-      <input
+      <moz-segmented-control
-        type="radio"
+        id="orientation-control"
-        name="orientation"
+        data-l10n-id="printui-orientation-control"
-        id="portrait"
+      >
-        value="0"
+        <moz-segmented-control-item
-        checked
+          id="portrait"
-        class="toggle-group-input"
+          value="0"
-      />
+          size="small"
-      <label
+          iconsrc="chrome://global/skin/icons/page-portrait.svg"
-        for="portrait"
+          data-l10n-id="printui-portrait-2"
-        data-l10n-id="printui-portrait"
+        ></moz-segmented-control-item>
-        class="toggle-group-label toggle-group-label-iconic"
+        <moz-segmented-control-item
-      ></label>
+          id="landscape"
-      <input
+          value="1"
-        type="radio"
+          size="small"
-        name="orientation"
+          iconsrc="chrome://global/skin/icons/page-landscape.svg"
-        id="landscape"
+          data-l10n-id="printui-landscape-2"
-        value="1"
+        ></moz-segmented-control-item>
-        class="toggle-group-input"
+      </moz-segmented-control>
-      />
-      <label
-        for="landscape"
-        data-l10n-id="printui-landscape"
-        class="toggle-group-label toggle-group-label-iconic"
-      ></label>
     </template>
 
     <template id="twisty-summary-template">
@@ -343,12 +336,7 @@
               class="block-label"
               data-l10n-id="printui-orientation"
             ></label>
-            <div
+            <div is="orientation-input"></div>
-              is="orientation-input"
-              class="toggle-group"
-              role="radiogroup"
-              aria-labelledby="orientation-label"
-            ></div>
           </section>
 
           <section id="pages" class="section-block">

toolkit/components/printing/content/print.js

@@ -1689,7 +1689,8 @@ class PrintUIForm extends PrintUIControlMixin(HTMLFormElement) {
       // Find the invalid element
       let invalidElement;
       for (let element of this.elements) {
-        if (!element.checkValidity()) {
+        // Form-associated custom elements may not expose checkValidity.
+        if (element.checkValidity && !element.checkValidity()) {
           invalidElement = element;
           break;
         }
@@ -1706,7 +1707,7 @@ class PrintUIForm extends PrintUIControlMixin(HTMLFormElement) {
         element.disabled =
           element.hasAttribute("disallowed") ||
           (!isValid &&
-            element.validity.valid &&
+            (element.validity?.valid ?? true) &&
             element.name != "cancel" &&
             element.closest(".section-block") != this._printerDestination &&
             element.closest(".section-block") != section);
@@ -1974,6 +1975,7 @@ class OrientationInput extends PrintUIControlMixin(HTMLElement) {
   initialize() {
     super.initialize();
     document.addEventListener("hide-orientation", this);
+    this.addEventListener("keydown", this);
   }
 
   get templateId() {
@@ -1981,9 +1983,8 @@ class OrientationInput extends PrintUIControlMixin(HTMLElement) {
   }
 
   update(settings) {
-    for (let input of this.querySelectorAll("input")) {
+    let segmentedControl = this.querySelector("moz-segmented-control");
-      input.checked = settings.orientation == input.value;
+    segmentedControl.value = String(settings.orientation);
-    }
   }
 
   handleEvent(e) {
@@ -1991,6 +1992,15 @@ class OrientationInput extends PrintUIControlMixin(HTMLElement) {
       document.getElementById("orientation").hidden = true;
       return;
     }
+    if (e.type == "keydown") {
+      // The segmented control's buttons would otherwise consume Enter.
+      if (e.key == "Enter") {
+        e.preventDefault();
+        let form = this.closest("form");
+        form.requestSubmit(form.querySelector("button[name='print']"));
+      }
+      return;
+    }
     this.dispatchSettingsChange({
       orientation: e.target.value,
     });

toolkit/components/printing/content/toggle-group.css

@@ -1,79 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/*
- * A radiogroup styled to hide the radio buttons
- * and present tab-like labels as buttons
- */
-
-.toggle-group {
-  display: inline-flex;
-  min-height: var(--button-min-height-small);
-}
-
-.toggle-group-label {
-  display: inline-flex;
-  align-items: center;
-  margin: 0;
-  padding: 6px 10px;
-  background-color: var(--button-background-color);
-}
-
-.toggle-group-input {
-  position: absolute;
-  inset-inline-start: -100px;
-}
-
-.toggle-group-label-iconic::before {
-  width: var(--icon-size);
-  height: var(--icon-size);
-  margin-inline-end: 5px;
-  -moz-context-properties: fill;
-  fill: currentColor;
-}
-
-.toggle-group-label:first-of-type {
-  border-start-start-radius: var(--border-radius-small);
-  border-end-start-radius: var(--border-radius-small);
-}
-
-.toggle-group-label:last-of-type {
-  border-start-end-radius: var(--border-radius-small);
-  border-end-end-radius: var(--border-radius-small);
-}
-
-.toggle-group-input:disabled + .toggle-group-label {
-  opacity: 0.4;
-}
-
-.toggle-group-input:enabled + .toggle-group-label:hover {
-  background-color: var(--button-background-color-hover);
-  color: var(--button-text-color-hover);
-}
-
-.toggle-group-input:enabled + .toggle-group-label:hover:active {
-  background-color: var(--button-background-color-active);
-  color: var(--button-text-color-active);
-}
-
-.toggle-group-input:focus-visible + .toggle-group-label {
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
-  z-index: 1;
-}
-
-.toggle-group-input:checked + .toggle-group-label {
-  background-color: var(--button-background-color-primary);
-  color: var(--button-text-color-primary);
-}
-
-.toggle-group-input:enabled:checked + .toggle-group-label:hover {
-  background-color: var(--button-background-color-primary-hover);
-  color: var(--button-text-color-primary-hover);
-}
-
-.toggle-group-input:enabled:checked + .toggle-group-label:hover:active {
-  background-color: var(--button-background-color-primary-active);
-  color: var(--button-text-color-primary-active);
-}

toolkit/components/printing/jar.mn

@@ -15,4 +15,3 @@ toolkit.jar:
    content/global/printPreviewPagination.js         (content/printPreviewPagination.js)
    content/global/printUtils.js                     (content/printUtils.js)
    content/global/simplifyMode.css                  (content/simplifyMode.css)
-   content/global/toggle-group.css                  (content/toggle-group.css)

toolkit/components/printing/tests/browser_ui_labels.js

@@ -9,7 +9,10 @@ add_task(async function test_FormFieldLabels() {
 
     let fields = Array.from(helper.get("print").elements);
     for (let field of fields) {
-      if (field.localName == "button") {
+      if (
+        field.localName == "button" ||
+        field.localName == "moz-segmented-control"
+      ) {
         continue;
       }
       ok(

toolkit/locales/en-US/toolkit/printing/printUI.ftl

@@ -30,8 +30,14 @@ printui-page-custom-range-input =
 printui-copies-label = Copies
 
 printui-orientation = Orientation
-printui-landscape = Landscape
+printui-orientation-control =
-printui-portrait = Portrait
+  .aria-label = Orientation
+printui-landscape-2 =
+  .label = Landscape
+  .title = Landscape
+printui-portrait-2 =
+  .label = Portrait
+  .title = Portrait
 
 # Section title for the printer or destination device to target
 printui-destination-label = Destination