+

+   content/browser/preferences/letterboxing.js

+   content/browser/preferences/letterboxing.css

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

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

+   content/browser/preferences/letterboxing-top-dark.svg

+   content/browser/preferences/letterboxing-top-light.svg

+<svg width="62" height="50" viewBox="0 0 62 50" fill="none" xmlns="http://www.w3.org/2000/svg">

+<g filter="url(#filter0_d_2272_529)">

+<g clip-path="url(#clip0_2272_529)">

+<path d="M58 3H4V45H58V3Z" fill="#42414D"/>

+<path d="M58 3H4V14H58V3Z" fill="#42414D"/>

+<path d="M58 3H4V8H58V3Z" fill="#2B2A33"/>

+<path d="M20 5H10C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7H20C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5Z" fill="white"/>

+<path d="M56 11C56 10.4477 55.5523 10 55 10C54.4477 10 54 10.4477 54 11C54 11.5523 54.4477 12 55 12C55.5523 12 56 11.5523 56 11Z" fill="white"/>

+<path d="M8 11C8 10.4477 7.55228 10 7 10C6.44772 10 6 10.4477 6 11C6 11.5523 6.44772 12 7 12C7.55228 12 8 11.5523 8 11Z" fill="white"/>

+<path d="M12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11C10 11.5523 10.4477 12 11 12C11.5523 12 12 11.5523 12 11Z" fill="white"/>

+<path d="M51 10H15C14.4477 10 14 10.4477 14 11C14 11.5523 14.4477 12 15 12H51C51.5523 12 52 11.5523 52 11C52 10.4477 51.5523 10 51 10Z" fill="white"/>

+<path d="M58 14H4V45H58V14Z" fill="#5B5B66"/>

+<rect x="8" y="18" width="46" height="23" rx="2" fill="#3A3944"/>

+<path d="M38 22H13C12.4477 22 12 22.4477 12 23C12 23.5523 12.4477 24 13 24H38C38.5523 24 39 23.5523 39 23C39 22.4477 38.5523 22 38 22Z" fill="white"/>

+<path d="M27 26H13C12.4477 26 12 26.4477 12 27C12 27.5523 12.4477 28 13 28H27C27.5523 28 28 27.5523 28 27C28 26.4477 27.5523 26 27 26Z" fill="white"/>

+<path d="M42 30H13C12.4477 30 12 30.4477 12 31C12 31.5523 12.4477 32 13 32H42C42.5523 32 43 31.5523 43 31C43 30.4477 42.5523 30 42 30Z" fill="white"/>

+</g>

+<rect x="4.5" y="3.5" width="53" height="41" rx="1.5" stroke="#8F8F9D" shape-rendering="crispEdges"/>

+</g>

+<defs>

+<filter id="filter0_d_2272_529" x="0" y="0" width="62" height="50" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">

+<feFlood flood-opacity="0" result="BackgroundImageFix"/>

+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>

+<feOffset dy="1"/>

+<feGaussianBlur stdDeviation="2"/>

+<feComposite in2="hardAlpha" operator="out"/>

+<feColorMatrix type="matrix" values="0 0 0 0 0.0470588 0 0 0 0 0.0470588 0 0 0 0 0.0509804 0 0 0 0.1 0"/>

+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2272_529"/>

+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2272_529" result="shape"/>

+</filter>

+<clipPath id="clip0_2272_529">

+<rect x="4" y="3" width="54" height="42" rx="2" fill="white"/>

+</clipPath>

+</defs>

+</svg>

+<svg width="62" height="50" viewBox="0 0 62 50" fill="none" xmlns="http://www.w3.org/2000/svg">

+<g filter="url(#filter0_d_202_960)">

+<g clip-path="url(#clip0_202_960)">

+<path d="M58 3H4V45H58V3Z" fill="#F0F0F4"/>

+<path d="M58 3H4V14H58V3Z" fill="#F0F0F4"/>

+<path d="M58 3H4V8H58V3Z" fill="#E0E0E6"/>

+<path d="M20 5H10C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7H20C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5Z" fill="#52525E"/>

+<path d="M56 11C56 10.4477 55.5523 10 55 10C54.4477 10 54 10.4477 54 11C54 11.5523 54.4477 12 55 12C55.5523 12 56 11.5523 56 11Z" fill="#52525E"/>

+<path d="M8 11C8 10.4477 7.55228 10 7 10C6.44772 10 6 10.4477 6 11C6 11.5523 6.44772 12 7 12C7.55228 12 8 11.5523 8 11Z" fill="#52525E"/>

+<path d="M12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11C10 11.5523 10.4477 12 11 12C11.5523 12 12 11.5523 12 11Z" fill="#52525E"/>

+<path d="M51 10H15C14.4477 10 14 10.4477 14 11C14 11.5523 14.4477 12 15 12H51C51.5523 12 52 11.5523 52 11C52 10.4477 51.5523 10 51 10Z" fill="#52525E"/>

+<path d="M58 14H4V45H58V14Z" fill="#CFCFD8"/>

+<rect x="8" y="18" width="46" height="23" rx="2" fill="white"/>

+<path d="M38 22H13C12.4477 22 12 22.4477 12 23C12 23.5523 12.4477 24 13 24H38C38.5523 24 39 23.5523 39 23C39 22.4477 38.5523 22 38 22Z" fill="#52525E"/>

+<path d="M27 26H13C12.4477 26 12 26.4477 12 27C12 27.5523 12.4477 28 13 28H27C27.5523 28 28 27.5523 28 27C28 26.4477 27.5523 26 27 26Z" fill="#52525E"/>

+<path d="M42 30H13C12.4477 30 12 30.4477 12 31C12 31.5523 12.4477 32 13 32H42C42.5523 32 43 31.5523 43 31C43 30.4477 42.5523 30 42 30Z" fill="#52525E"/>

+</g>

+<rect x="4.5" y="3.5" width="53" height="41" rx="1.5" stroke="#8F8F9D" shape-rendering="crispEdges"/>

+</g>

+<defs>

+<filter id="filter0_d_202_960" x="0" y="0" width="62" height="50" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">

+<feFlood flood-opacity="0" result="BackgroundImageFix"/>

+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>

+<feOffset dy="1"/>

+<feGaussianBlur stdDeviation="2"/>

+<feComposite in2="hardAlpha" operator="out"/>

+<feColorMatrix type="matrix" values="0 0 0 0 0.0470588 0 0 0 0 0.0470588 0 0 0 0 0.0509804 0 0 0 0.1 0"/>

+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_202_960"/>

+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_202_960" result="shape"/>

+</filter>

+<clipPath id="clip0_202_960">

+<rect x="4" y="3" width="54" height="42" rx="2" fill="white"/>

+</clipPath>

+</defs>

+</svg>

+<svg width="62" height="50" viewBox="0 0 62 50" fill="none" xmlns="http://www.w3.org/2000/svg">

+<g filter="url(#filter0_d_2272_508)">

+<g clip-path="url(#clip0_2272_508)">

+<path d="M58 3H4V45H58V3Z" fill="#52525E"/>

+<path d="M58 3H4V14H58V3Z" fill="#42414D"/>

+<path d="M58 3H4V8H58V3Z" fill="#2B2A33"/>

+<path d="M20 5H10C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7H20C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5Z" fill="white"/>

+<path d="M56 11C56 10.4477 55.5523 10 55 10C54.4477 10 54 10.4477 54 11C54 11.5523 54.4477 12 55 12C55.5523 12 56 11.5523 56 11Z" fill="white"/>

+<path d="M8 11C8 10.4477 7.55228 10 7 10C6.44772 10 6 10.4477 6 11C6 11.5523 6.44772 12 7 12C7.55228 12 8 11.5523 8 11Z" fill="white"/>

+<path d="M12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11C10 11.5523 10.4477 12 11 12C11.5523 12 12 11.5523 12 11Z" fill="white"/>

+<path d="M51 10H15C14.4477 10 14 10.4477 14 11C14 11.5523 14.4477 12 15 12H51C51.5523 12 52 11.5523 52 11C52 10.4477 51.5523 10 51 10Z" fill="white"/>

+<path d="M58 14H4V45H58V14Z" fill="#5B5B66"/>

+<path d="M8 14H55V39C55 40.1046 54.1046 41 53 41H10C8.89543 41 8 40.1046 8 39V14Z" fill="#3A3944"/>

+<path d="M38 18H13C12.4477 18 12 18.4477 12 19C12 19.5523 12.4477 20 13 20H38C38.5523 20 39 19.5523 39 19C39 18.4477 38.5523 18 38 18Z" fill="white"/>

+<path d="M27 22H13C12.4477 22 12 22.4477 12 23C12 23.5523 12.4477 24 13 24H27C27.5523 24 28 23.5523 28 23C28 22.4477 27.5523 22 27 22Z" fill="white"/>

+<path d="M42 26H13C12.4477 26 12 26.4477 12 27C12 27.5523 12.4477 28 13 28H42C42.5523 28 43 27.5523 43 27C43 26.4477 42.5523 26 42 26Z" fill="white"/>

+</g>

+<rect x="4.5" y="3.5" width="53" height="41" rx="3.5" stroke="#8F8F9D" shape-rendering="crispEdges"/>

+</g>

+<defs>

+<filter id="filter0_d_2272_508" x="0" y="0" width="62" height="50" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">

+<feFlood flood-opacity="0" result="BackgroundImageFix"/>

+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>

+<feOffset dy="1"/>

+<feGaussianBlur stdDeviation="2"/>

+<feComposite in2="hardAlpha" operator="out"/>

+<feColorMatrix type="matrix" values="0 0 0 0 0.0470588 0 0 0 0 0.0470588 0 0 0 0 0.0509804 0 0 0 0.1 0"/>

+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2272_508"/>

+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2272_508" result="shape"/>

+</filter>

+<clipPath id="clip0_2272_508">

+<rect x="4" y="3" width="54" height="42" rx="4" fill="white"/>

+</clipPath>

+</defs>

+</svg>

+<svg width="62" height="50" viewBox="0 0 62 50" fill="none" xmlns="http://www.w3.org/2000/svg">

+<g filter="url(#filter0_d_202_926)">

+<g clip-path="url(#clip0_202_926)">

+<path d="M58 3H4V45H58V3Z" fill="#F0F0F4"/>

+<path d="M58 3H4V14H58V3Z" fill="#F0F0F4"/>

+<path d="M58 3H4V8H58V3Z" fill="#E0E0E6"/>

+<path d="M20 5H10C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7H20C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5Z" fill="#52525E"/>

+<path d="M56 11C56 10.4477 55.5523 10 55 10C54.4477 10 54 10.4477 54 11C54 11.5523 54.4477 12 55 12C55.5523 12 56 11.5523 56 11Z" fill="#52525E"/>

+<path d="M8 11C8 10.4477 7.55228 10 7 10C6.44772 10 6 10.4477 6 11C6 11.5523 6.44772 12 7 12C7.55228 12 8 11.5523 8 11Z" fill="#52525E"/>

+<path d="M12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11C10 11.5523 10.4477 12 11 12C11.5523 12 12 11.5523 12 11Z" fill="#52525E"/>

+<path d="M51 10H15C14.4477 10 14 10.4477 14 11C14 11.5523 14.4477 12 15 12H51C51.5523 12 52 11.5523 52 11C52 10.4477 51.5523 10 51 10Z" fill="#52525E"/>

+<path d="M58 14H4V45H58V14Z" fill="#CFCFD8"/>

+<path d="M8 14H55V39C55 40.1046 54.1046 41 53 41H10C8.89543 41 8 40.1046 8 39V14Z" fill="white"/>

+<path d="M38 18H13C12.4477 18 12 18.4477 12 19C12 19.5523 12.4477 20 13 20H38C38.5523 20 39 19.5523 39 19C39 18.4477 38.5523 18 38 18Z" fill="#52525E"/>

+<path d="M27 22H13C12.4477 22 12 22.4477 12 23C12 23.5523 12.4477 24 13 24H27C27.5523 24 28 23.5523 28 23C28 22.4477 27.5523 22 27 22Z" fill="#52525E"/>

+<path d="M42 26H13C12.4477 26 12 26.4477 12 27C12 27.5523 12.4477 28 13 28H42C42.5523 28 43 27.5523 43 27C43 26.4477 42.5523 26 42 26Z" fill="#52525E"/>

+</g>

+<rect x="4.5" y="3.5" width="53" height="41" rx="3.5" stroke="#8F8F9D" shape-rendering="crispEdges"/>

+</g>

+<defs>

+<filter id="filter0_d_202_926" x="0" y="0" width="62" height="50" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">

+<feFlood flood-opacity="0" result="BackgroundImageFix"/>

+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>

+<feOffset dy="1"/>

+<feGaussianBlur stdDeviation="2"/>

+<feComposite in2="hardAlpha" operator="out"/>

+<feColorMatrix type="matrix" values="0 0 0 0 0.0470588 0 0 0 0 0.0470588 0 0 0 0 0.0509804 0 0 0 0.1 0"/>

+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_202_926"/>

+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_202_926" result="shape"/>

+</filter>

+<clipPath id="clip0_202_926">

+<rect x="4" y="3" width="54" height="42" rx="4" fill="white"/>

+</clipPath>

+</defs>

+</svg>

+.letterboxing-overview {

+  margin-block-end: 32px;

+}

+

+.letterboxing-search-overview {

+  margin-block-end: 16px;

+}

+#letterboxingAligner {

+  display: flex;

+  justify-content: start;

+  gap: 16px;

+  margin-block: 12px;

+

+  --letterboxing-alignment-img-top: url("chrome://browser/content/preferences/letterboxing-top-light.svg");

+  --letterboxing-alignment-img-middle: url("chrome://browser/content/preferences/letterboxing-middle-light.svg");

+}

+

+@media (prefers-color-scheme: dark) {

+  #letterboxingAligner  {

+    --letterboxing-alignment-img-top: url("chrome://browser/content/preferences/letterboxing-top-dark.svg");

+    --letterboxing-alignment-img-middle: url("chrome://browser/content/preferences/letterboxing-middle-dark.svg");

+  }

+}

+

+#letterboxingAligner .letterboxing-align-top img {

+  content: var(--letterboxing-alignment-img-top);

+}

+#letterboxingAligner .letterboxing-align-middle img {

+  content: var(--letterboxing-alignment-img-middle);

+}

+

+#letterboxingAligner label {

+  width: 200px;

+  flex: 0 0 auto;

+}

+

+#letterboxingAligner img {

+  border: none;

+  box-shadow: none;

+}

+

+/* Hide letterboxing options depending on whether ResistFingerprinting or

+ * Letterboxing is enabled. */

+#letterboxingCategory:not(.rfp-enabled),

+#letterboxingCategory:not(.rfp-enabled) ~ #letterboxingDisabled,

+#letterboxingCategory.letterboxing-enabled ~ #letterboxingDisabled,

+#letterboxingCategory:not(.rfp-enabled.letterboxing-enabled) ~ .letterboxing-category {

+  display: none;

+}

+

+/* We duplicate the Letterboxing overview to appear in search results.

+ * We want to hide them whenever they are *not* part of a search result. */

+:is(

+  /* Hide the duplicates when the category is *not* hidden. */

+  #letterboxingCategory:not(.visually-hidden) ~ .letterboxing-category,

+  /* Also hide the duplicated overview for subsequence search results if a

+   * previous groupbox is *not* hidden. */

+  .letterboxing-category:not(.visually-hidden) ~ .letterboxing-category,

+) .letterboxing-search-overview {

+  display: none;

+}

+

+/* Similarly for #letterboxingDisabled, but we also want to hide its

+ * "Letterboxing" heading.

+ * NOTE: This should only appear in isolation, so we do not need to worry about

+ * subsequent groupboxes. */

+#letterboxingCategory:not(.visually-hidden) ~ #letterboxingDisabled :is(

+  .letterboxing-search-heading,

+  .letterboxing-search-overview

+) {

+  display: none;

+}

+<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">

+    <html:span

+      data-l10n-id="letterboxing-overview"

+      class="tail-with-learn-more"

+    ></html:span>

+    <label

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

+      class="learnMore text-link"

+      is="text-link"

+      href="about:manual#letterboxing"

+      useoriginprincipal="true"

+    />

+  </description>

+</vbox>

+<groupbox

+  class="letterboxing-category"

+  data-category="paneGeneral"

+  hidden="true"

+>

+  <label><html:h2

+    data-l10n-id="letterboxing-window-size-header"/></label>

+  <description class="letterboxing-search-overview">

+    <html:span

+      data-l10n-id="letterboxing-overview"

+      class="tail-with-learn-more"

+    ></html:span>

+    <label

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

+      class="learnMore text-link"

+      is="text-link"

+      href="about:manual#letterboxing"

+      useoriginprincipal="true"

+    />

+  </description>

+  <checkbox

+    id="letterboxingRememberSize"

+    data-l10n-id="letterboxing-remember-size"

+    preference="privacy.resistFingerprinting.letterboxing.rememberSize"

+  />

+</groupbox>

+<groupbox

+  class="letterboxing-category"

+  data-category="paneGeneral"

+  hidden="true"

+>

+  <label><html:h2

+    data-l10n-id="letterboxing-alignment-header"

+    /></label>

+  <description class="letterboxing-search-overview">

+    <html:span

+      data-l10n-id="letterboxing-overview"

+      class="tail-with-learn-more"

+    ></html:span>

+    <label

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

+      class="learnMore text-link"

+      is="text-link"

+      href="about:manual#letterboxing"

+      useoriginprincipal="true"

+    />

+  </description>

+  <description

+    id="letterboxingAlignmentDesc"

+    flex="1"

+    data-l10n-id="letterboxing-alignment-description"

+  />

+  <form

+    xmlns="http://www.w3.org/1999/xhtml"

+    id="letterboxingAligner"

+    autocomplete="off"

+    aria-labelledby="letterboxingAlignmentDesc"

+  >

+    <label class="web-appearance-choice letterboxing-align-top">

+      <div class="web-appearance-choice-image-container">

+        <img role="presentation" />

+      </div>

+      <div class="web-appearance-choice-footer">

+        <input type="radio" name="alignment" value="top" />

+        <span data-l10n-id="letterboxing-alignment-top"></span>

+      </div>

+    </label>

+    <label class="web-appearance-choice letterboxing-align-middle">

+      <div class="web-appearance-choice-image-container">

+        <img role="presentation" />

+      </div>

+      <div class="web-appearance-choice-footer">

+        <input type="radio" name="alignment" value="middle" />

+        <span data-l10n-id="letterboxing-alignment-middle"></span>

+      </div>

+    </label>

+  </form>

+</groupbox>

+<groupbox

+  id="letterboxingDisabled"

+  data-category="paneGeneral"

+  hidden="true"

+>

+  <label class="letterboxing-search-heading"><html:h2

+    data-l10n-id="letterboxing-header"/></label>

+  <description class="letterboxing-search-overview">

+    <html:span

+      data-l10n-id="letterboxing-overview"

+      class="tail-with-learn-more"

+    ></html:span>

+    <label

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

+      class="learnMore text-link"

+      is="text-link"

+      href="about:manual#letterboxing"

+      useoriginprincipal="true"

+    />

+  </description>

+  <hbox align="center">

+    <label

+      class="face-sad"

+      flex="1"

+      data-l10n-id="letterboxing-disabled-description"

+    />

+    <button

+      id="letterboxingEnableButton"

+      class="accessory-button"

+      is="highlightable-button"

+      data-l10n-id="letterboxing-enable-button"

+    />

+  </hbox>

+</groupbox>

+/* import-globals-from /browser/components/preferences/preferences.js */

+/* import-globals-from /browser/components/preferences/findInPage.js */

+/* import-globals-from /toolkit/content/preferencesBindings.js */

+

+Preferences.addAll([

+  {

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

+    type: "bool",

+  },

+]);

+

+{

+  const lbEnabledPref = "privacy.resistFingerprinting.letterboxing";

+  const visibilityPrefs = ["privacy.resistFingerprinting", lbEnabledPref];

+  const alignMiddlePref = "privacy.resistFingerprinting.letterboxing.vcenter";

+

+  const hideFromSearchIf = (mustHide, ...elements) => {

+    for (const element of elements) {

+      if (mustHide) {

+        element.setAttribute("data-hidden-from-search", "true");

+      } else {

+        element.removeAttribute("data-hidden-from-search");

+      }

+    }

+  };

+

+  const syncVisibility = () => {

+    const [rfpEnabled, letterboxingEnabled] = visibilityPrefs.map(pref =>

+      Services.prefs.getBoolPref(pref, false)

+    );

+    const categoryElement = document.getElementById("letterboxingCategory");

+    const { classList } = categoryElement;

+

+    // Show the letterboxing section only if resistFingerprinting is enabled

+    classList.toggle("rfp-enabled", rfpEnabled);

+    classList.toggle("letterboxing-enabled", letterboxingEnabled);

+

+    // To ensure the hidden parts do not contribute to search results, we need

+    // to add "data-hidden-from-search".

+    hideFromSearchIf(

+      !rfpEnabled || !letterboxingEnabled,

+      ...document.querySelectorAll(".letterboxing-category")

+    );

+    hideFromSearchIf(

+      !rfpEnabled || letterboxingEnabled,

+      document.getElementById("letterboxingDisabled")

+    );

+  };

+

+  const onVisibilityPrefChange = () => {

+    syncVisibility();

+    // NOTE: Firefox does not expect "data-hidden-from-search" to change

+    // dynamically after page initialization. So we need to manually recall the

+    // methods that use "data-hidden-from-search". I.e. the "search" method,

+    // using the currently shown category.

+    // NOTE: We skip this if we are just initializing on page load.

+    // NOTE: data-hidden-from-search is also used when the user has entered a

+    // search term. We do not update the results in this case. Instead, it will

+    // update when the search term changes or is cleared.

+    if (!gSearchResultsPane.query) {

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

+    }

+  };

+

+  const alignerId = "letterboxingAligner";

+  const syncAligner = () => {

+    const value = Services.prefs.getBoolPref(alignMiddlePref)

+      ? "middle"

+      : "top";

+    document.querySelector(

+      `#${alignerId} input[value="${value}"]`

+    ).checked = true;

+  };

+

+  var gLetterboxingPrefs = {

+    init() {

+      syncVisibility();

+      document

+        .getElementById("letterboxingEnableButton")

+        .addEventListener("command", () => {

+          Services.prefs.setBoolPref(lbEnabledPref, true);

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

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

+          Services.focus.moveFocus(

+            window,

+            document.querySelector(".letterboxing-category"),

+            Services.focus.MOVEFOCUS_FIRST,

+            0

+          );

+        });

+      for (const pref of visibilityPrefs) {

+        Services.prefs.addObserver(pref, onVisibilityPrefChange);

+      }

+

+      syncAligner();

+      document.getElementById(alignerId).addEventListener("change", e => {

+        // NOTE: the "change" event is only fired on the checked input.

+        Services.prefs.setBoolPref(

+          alignMiddlePref,

+          e.target.value === "middle"

+        );

+      });

+      Services.prefs.addObserver(alignMiddlePref, syncAligner);

+    },

+

+    destroy() {

+      for (const pref of visibilityPrefs) {

+        Services.prefs.removeObserver(pref, onVisibilityPrefChange);

+      }

+      Services.prefs.removeObserver(alignMiddlePref, syncAligner);

+    },

+  };

+}

+<!-- Letterboxing -->

+#include ./letterboxing.inc.xhtml

+

+    gLetterboxingPrefs.init();

+    gLetterboxingPrefs.destroy();

+<?xml-stylesheet href="chrome://browser/content/preferences/letterboxing.css"?>

+  <link rel="localization" href="browser/base-browser.ftl"/>

+## Preferences - Letterboxing.

+

+# 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.

+letterboxing-header = Letterboxing

+# 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.

+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

+letterboxing-window-size-header = Window size

+letterboxing-remember-size =

+    .label = Reuse last window size when opening a new window

+    .accesskey = R

+letterboxing-alignment-header = Content Alignment

+letterboxing-alignment-description = Choose where you want to align the website’s content.

+letterboxing-alignment-top = Top

+letterboxing-alignment-middle = Middle

+# 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.

+letterboxing-disabled-description = Letterboxing is currently disabled.

+# 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.

+letterboxing-enable-button =

+    .label = Enable Letterboxing