XLinfini/sousa-gecko
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D316851
This commit is contained in:
Anna Kulyk
2026-08-25 14:53:05 +00:00
committed by akulyk@mozilla.com
parent 5666c13937
commit 7ffa79ce80
9 changed files with 81 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
python/l10n/fluent_migrations/bug_2050132_print_orientation_control.py
+27
View File
@@ -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
-1
View File
@@ -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
+7 -12
View File
@@ -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
+20 -32
View File
@@ -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
type="radio"
name="orientation"
id="portrait"
value="0"
checked
class="toggle-group-input"
/>
<label
for="portrait"
data-l10n-id="printui-portrait"
class="toggle-group-label toggle-group-label-iconic"
></label>
<input
type="radio"
name="orientation"
id="landscape"
value="1"
class="toggle-group-input"
/>
<label
for="landscape"
data-l10n-id="printui-landscape"
class="toggle-group-label toggle-group-label-iconic"
></label>
<moz-segmented-control
id="orientation-control"
data-l10n-id="printui-orientation-control"
>
<moz-segmented-control-item
id="portrait"
value="0"
size="small"
iconsrc="chrome://global/skin/icons/page-portrait.svg"
data-l10n-id="printui-portrait-2"
></moz-segmented-control-item>
<moz-segmented-control-item
id="landscape"
value="1"
size="small"
iconsrc="chrome://global/skin/icons/page-landscape.svg"
data-l10n-id="printui-landscape-2"
></moz-segmented-control-item>
</moz-segmented-control>
</template>
<template id="twisty-summary-template">
@@ -343,12 +336,7 @@
class="block-label"
data-l10n-id="printui-orientation"
></label>
<div
is="orientation-input"
class="toggle-group"
role="radiogroup"
aria-labelledby="orientation-label"
></div>
<div is="orientation-input"></div>
</section>
<section id="pages" class="section-block">
toolkit/components/printing/content/print.js
+15 -5
View File
@@ -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")) {
input.checked = settings.orientation == input.value;
}
let segmentedControl = this.querySelector("moz-segmented-control");
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
-79
View File
@@ -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
-1
View File
@@ -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
+4 -1
View File
@@ -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
+8 -2
View File
@@ -30,8 +30,14 @@ printui-page-custom-range-input =
printui-copies-label = Copies
printui-orientation = Orientation
printui-landscape = Landscape
printui-portrait = Portrait
printui-orientation-control =
.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