GitLab

at 2026-08-10T15:31:38+00:00

fixup! BB 41916: Letterboxing preferences UI

BB 45079: Move letterboxing controls into appearance settings.

fixup! Base Browser strings

BB 45079: Combine letterboxing setting strings together.

fixup! Tor Browser localization migration scripts.

TB 45079: Add migration to combine letterboxing setting strings
together.

 import { Preferences } from "chrome://global/content/preferences/Preferences.mjs";

 import { SettingGroupManager } from "chrome://browser/content/preferences/config/SettingGroupManager.mjs";

+ChromeUtils.importESModule(

+  "chrome://browser/content/preferences/config/letterboxing.mjs",

+  { global: "current" }

+);

+

 const FORCED_COLORS_QUERY = matchMedia("(forced-colors)");

 Preferences.addAll([

-/* import-globals-from preferences.js */

-/* import-globals-from findInPage.js */

+import { Preferences } from "chrome://global/content/preferences/Preferences.mjs";

+import { SettingGroupManager } from "chrome://browser/content/preferences/config/SettingGroupManager.mjs";

 Preferences.addAll([

   {

 });

 Preferences.addSetting({

-  id: "letterboxingRememberSize",

-  pref: "privacy.resistFingerprinting.letterboxing.rememberSize",

+  id: "letterboxingWindowSize",

   deps: ["letterboxingEnabled", "resistFingerprinting"],

   visible: ({ letterboxingEnabled, resistFingerprinting }) => {

     return letterboxingEnabled.value && resistFingerprinting.value;

   },

 });

+Preferences.addSetting({

+  id: "letterboxingRememberSize",

+  pref: "privacy.resistFingerprinting.letterboxing.rememberSize",

+});

+

 Preferences.addSetting({

   id: "letterboxingContentAlignment",

-  pref: "privacy.resistFingerprinting.letterboxing.vcenter",

   deps: ["letterboxingEnabled", "resistFingerprinting"],

   visible: ({ letterboxingEnabled, resistFingerprinting }) => {

     return letterboxingEnabled.value && resistFingerprinting.value;

   },

+});

+

+Preferences.addSetting({

+  id: "letterboxingContentAlignmentOptions",

+  pref: "privacy.resistFingerprinting.letterboxing.vcenter",

   get: val => {

     return val ? "middle" : "top";

   },

       return;

     }

     letterboxingEnabled.value = true;

-    setTimeout(() => {

-      // Need to re-search to remove the "hidden" attribute on the groupbox

-      // elements (after the data-hidden-from-search attributes are changed by

-      // the "visible" callback).

-      // TODO: Is this an upstream issue that "hidden" is not removed?

-      if (!gSearchResultsPane.query) {

-        search(gLastCategory.category, "data-category");

-      }

-      // Button should have focus when activated but will be hidden now,

-      // so re-assign focus to the newly revealed options.

-      Services.focus.moveFocus(

-        window,

-        buttonEl,

-        Services.focus.MOVEFOCUS_FORWARD,

-        0

-      );

-    });

+    // Button should have focus when activated but will be hidden now,

+    // so re-assign focus after the new section is revealed.

+    document

+      .getElementById("letterboxingWindowSize")

+      .updateComplete.then(() => {

+        document.getElementById("letterboxingRememberSize").focus();

+      });

   },

 });

 SettingGroupManager.registerGroups({

-  letterboxingDisabled: {

+  letterboxing: {

+    l10nId: "letterboxing-settings-group",

+    supportPage: "tor-manual:features__fingerprinting-protections___letterboxing",

+    headingLevel: 2,

     items: [

       {

         id: "letterboxingShouldEnable",

           },

         ],

       },

-    ],

-  },

-  letterboxingSize: {

-    l10nId: "letterboxing-window-size-group",

-    headingLevel: 2,

-    items: [

       {

-        id: "letterboxingRememberSize",

-        l10nId: "letterboxing-remember-size",

-        control: "moz-checkbox",

+        id: "letterboxingWindowSize",

+        l10nId: "letterboxing-window-size-group",

+        control: "moz-fieldset",

+        controlAttrs: {

+          headinglevel: 3,

+        },

+        items: [

+          {

+            id: "letterboxingRememberSize",

+            l10nId: "letterboxing-remember-size",

+            control: "moz-checkbox",

+          },

+        ],

       },

-    ],

-  },

-  letterboxingAlignment: {

-    l10nId: "letterboxing-alignment-group",

-    headingLevel: 2,

-    items: [

       {

         id: "letterboxingContentAlignment",

-        control: "moz-visual-picker",

-        options: [

+        l10nId: "letterboxing-alignment-group",

+        control: "moz-fieldset",

+        controlAttrs: {

+          headinglevel: 3,

+        },

+        items: [

           {

-            value: "top",

-            l10nId: "letterboxing-alignment-top-option",

-            controlAttrs: {

-              class: "setting-chooser-item letterboxing-chooser-item",

-              imagesrc:

-                "chrome://browser/content/preferences/letterboxing-top.svg",

-            },

-          },

-          {

-            value: "middle",

-            l10nId: "letterboxing-alignment-middle-option",

-            controlAttrs: {

-              class: "setting-chooser-item letterboxing-chooser-item",

-              imagesrc:

-                "chrome://browser/content/preferences/letterboxing-middle.svg",

-            },

+            id: "letterboxingContentAlignmentOptions",

+            control: "moz-visual-picker",

+            options: [

+              {

+                value: "top",

+                l10nId: "letterboxing-alignment-top-option",

+                controlAttrs: {

+                  class: "setting-chooser-item letterboxing-chooser-item",

+                  imagesrc:

+                    "chrome://browser/content/preferences/letterboxing-top.svg",

+                },

+              },

+              {

+                value: "middle",

+                l10nId: "letterboxing-alignment-middle-option",

+                controlAttrs: {

+                  class: "setting-chooser-item letterboxing-chooser-item",

+                  imagesrc:

+                    "chrome://browser/content/preferences/letterboxing-middle.svg",

+                },

+              },

+            ],

           },

         ],

       },

     ],

   },

 });
-

-var gLetterboxingPrefs = {

-  init() {

-    const rfpSetting = Preferences.getSetting("resistFingerprinting");

-    const updateCategoryVisibility = () => {

-      document

-        .getElementById("letterboxingCategory")

-        .classList.toggle("hide-all-letterboxing", !rfpSetting.value);

-    };

-    rfpSetting.on("change", updateCategoryVisibility);

-    updateCategoryVisibility();

-    initSettingGroup("letterboxingDisabled");

-    initSettingGroup("letterboxingSize");

-    initSettingGroup("letterboxingAlignment");

-  },

-};
    content/browser/preferences/widgets/update-state.mjs          (widgets/update-state/update-state.mjs)

    content/browser/preferences/widgets/update-state.css          (widgets/update-state/update-state.css)

-   content/browser/preferences/letterboxing.js

-   content/browser/preferences/letterboxing.css

-   content/browser/preferences/letterboxing-middle.svg

-   content/browser/preferences/letterboxing-top.svg
+   content/browser/preferences/config/letterboxing.mjs                  (config/letterboxing.mjs)

+   content/browser/preferences/letterboxing.css                         (letterboxing.css)

+   content/browser/preferences/letterboxing-middle.svg                  (letterboxing-middle.svg)

+   content/browser/preferences/letterboxing-top.svg                     (letterboxing-top.svg)
-<script src="chrome://browser/content/preferences/letterboxing.js" />

-<vbox

-  id="letterboxingCategory"

-  class="subcategory"

-  hidden="true"

-  data-category="paneGeneral"

->

-  <html:h1 data-l10n-id="letterboxing-header" />

-  <description class="letterboxing-overview description-deemphasized">

-    <html:span data-l10n-id="letterboxing-overview"></html:span>

-    <html:a

-      is="moz-support-link"

-      support-page="tor-manual:features__fingerprinting-protections___letterboxing"

-      data-l10n-id="letterboxing-learn-more"

-    ></html:a>

-  </description>

-</vbox>

-<groupbox data-category="paneGeneral" hidden="true">

-  <html:setting-group groupid="letterboxingDisabled"></html:setting-group>

-</groupbox>

-<groupbox data-category="paneGeneral" hidden="true">

-  <html:setting-group groupid="letterboxingSize"></html:setting-group>

-</groupbox>

-<groupbox data-category="paneGeneral" hidden="true">

-  <html:setting-group groupid="letterboxingAlignment"></html:setting-group>

-</groupbox>
 <html:setting-group groupid="browserLayout" data-category="paneGeneral" data-subcategory="layout" data-srd-migrated="" hidden="true"></html:setting-group>

 <!-- Letterboxing -->

-#include ./letterboxing.inc.xhtml

+<html:setting-group data-category="paneGeneral" groupid="letterboxing" data-srd-migrated="" hidden="true"></html:setting-group>

 <hbox id="languageAndAppearanceCategory"

       class="subcategory"

 /** @import { HandlerInfoWrapper, ApplicationListItem } from './config/downloads.mjs';*/

 /* import-globals-from extensionControlled.js */

-/* import-globals-from letterboxing.js */

 /* import-globals-from preferences.js */

 /* import-globals-from /toolkit/mozapps/preferences/fontbuilder.js */

 /* import-globals-from /browser/base/content/aboutDialog-appUpdater.js */

     initSettingGroup("tabs");

     initSettingGroup("profiles");

     initSettingGroup("profilePane");

+    initSettingGroup("letterboxing");

     setEventListener("manageBrowserLanguagesButton", "command", function () {

       gMainPane.showBrowserLanguagesSubDialog({ search: false });

     // Listen for window unload so we can remove our preference observers.

     window.addEventListener("unload", this);

-    gLetterboxingPrefs.init();

-

     // Notify observers that the UI is now ready

     Services.obs.notifyObservers(window, "main-pane-loaded");

     this.setInitialized();

   },

   appearance: {

     l10nId: "preferences-appearance-header",

-    groupIds: ["appearance", "browserTheme", "relatedSettings"],

+    groupIds: ["appearance", "browserTheme", "letterboxing", "relatedSettings"],

     module: "chrome://browser/content/preferences/config/appearance.mjs",

     iconSrc: "chrome://global/skin/icons/eye.svg",

     visible: () => srdSectionPrefs.all,

 # "Letterboxing" should be treated as a feature/product name, and likely not changed in other languages.

 letterboxing-overview = { -brand-short-name }'s Letterboxing feature restricts websites to display at specific sizes, making it harder to single out users on the basis of their window or screen size.

 letterboxing-learn-more = Learn more

+# The word "Letterboxing" is the proper noun for the Tor Browser feature, and is therefore capitalised.

+# "Letterboxing" should be treated as a feature/product name, and likely not changed in other languages.

+# "{ -brand-short-name }" will be replaced with the localized name of the browser, e.g. "Tor Browser".

+letterboxing-settings-group =

+    .label = Letterboxing

+    .description = { -brand-short-name }'s Letterboxing feature restricts websites to display at specific sizes, making it harder to single out users on the basis of their window or screen size.

 letterboxing-window-size-group =

     .label = Window size

 letterboxing-remember-size =

+from fluent.migrate.helpers import transforms_from

+

+

+def migrate(ctx):

+    ctx.add_transforms(

+        "base-browser.ftl",

+        "base-browser.ftl",

+        transforms_from(

+            """

+letterboxing-settings-group =

+    .label = { COPY_PATTERN(path, "letterboxing-header") }

+    .description = { COPY_PATTERN(path, "letterboxing-overview") }

+""",

+            path="base-browser.ftl",

+        ),

+    )

morgan pushed to branch tor-browser-153.0esr-16.0-1 at The Tor Project / Applications / Tor Browser

Commits:

9 changed files:

Changes: