[tor-commits] [Git][tpo/applications/tor-browser][tor-browser-115.9.0esr-13.5-1] Bug 41916: Letterboxing preferences UI
ma1 (@ma1)
git at gitlab.torproject.org
Thu Mar 21 12:53:04 UTC 2024
ma1 pushed to branch tor-browser-115.9.0esr-13.5-1 at The Tor Project / Applications / Tor Browser
Commits:
96be793b by hackademix at 2024-03-21T13:41:16+01:00
Bug 41916: Letterboxing preferences UI
- - - - -
12 changed files:
- browser/components/preferences/jar.mn
- + browser/components/preferences/letterboxing-middle-dark.svg
- + browser/components/preferences/letterboxing-middle-light.svg
- + browser/components/preferences/letterboxing-top-dark.svg
- + browser/components/preferences/letterboxing-top-light.svg
- + browser/components/preferences/letterboxing.css
- + browser/components/preferences/letterboxing.inc.xhtml
- + browser/components/preferences/letterboxing.js
- browser/components/preferences/main.inc.xhtml
- browser/components/preferences/main.js
- browser/components/preferences/preferences.xhtml
- browser/locales/en-US/browser/base-browser.ftl
Changes:
=====================================
browser/components/preferences/jar.mn
=====================================
@@ -22,3 +22,10 @@ browser.jar:
content/browser/preferences/more-from-mozilla-qr-code-simple-cn.svg
content/browser/preferences/web-appearance-dark.svg
content/browser/preferences/web-appearance-light.svg
+
+ 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
=====================================
browser/components/preferences/letterboxing-middle-dark.svg
=====================================
@@ -0,0 +1,35 @@
+<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>
=====================================
browser/components/preferences/letterboxing-middle-light.svg
=====================================
@@ -0,0 +1,35 @@
+<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>
=====================================
browser/components/preferences/letterboxing-top-dark.svg
=====================================
@@ -0,0 +1,35 @@
+<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>
=====================================
browser/components/preferences/letterboxing-top-light.svg
=====================================
@@ -0,0 +1,35 @@
+<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>
=====================================
browser/components/preferences/letterboxing.css
=====================================
@@ -0,0 +1,72 @@
+.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");
+}
+
+ at 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;
+}
=====================================
browser/components/preferences/letterboxing.inc.xhtml
=====================================
@@ -0,0 +1,134 @@
+<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>
=====================================
browser/components/preferences/letterboxing.js
=====================================
@@ -0,0 +1,113 @@
+/* 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);
+ },
+ };
+}
=====================================
browser/components/preferences/main.inc.xhtml
=====================================
@@ -130,6 +130,9 @@
</vbox>
</groupbox>
+<!-- Letterboxing -->
+#include ./letterboxing.inc.xhtml
+
<hbox id="languageAndAppearanceCategory"
class="subcategory"
hidden="true"
=====================================
browser/components/preferences/main.js
=====================================
@@ -729,6 +729,7 @@ var gMainPane = {
]);
AppearanceChooser.init();
+ gLetterboxingPrefs.init();
// Notify observers that the UI is now ready
Services.obs.notifyObservers(window, "main-pane-loaded");
@@ -2585,6 +2586,7 @@ var gMainPane = {
Services.prefs.removeObserver(PREF_CONTAINERS_EXTENSION, this);
Services.obs.removeObserver(this, AUTO_UPDATE_CHANGED_TOPIC);
Services.obs.removeObserver(this, BACKGROUND_UPDATE_CHANGED_TOPIC);
+ gLetterboxingPrefs.destroy();
AppearanceChooser.destroy();
},
=====================================
browser/components/preferences/preferences.xhtml
=====================================
@@ -12,6 +12,7 @@
<?xml-stylesheet href="chrome://browser/skin/preferences/search.css"?>
<?xml-stylesheet href="chrome://browser/skin/preferences/containers.css"?>
<?xml-stylesheet href="chrome://browser/skin/preferences/privacy.css"?>
+<?xml-stylesheet href="chrome://browser/content/preferences/letterboxing.css"?>
<?xml-stylesheet href="chrome://browser/content/securitylevel/securityLevelPreferences.css"?>
<?xml-stylesheet href="chrome://browser/content/torpreferences/torPreferences.css"?>
<?xml-stylesheet href="chrome://browser/content/onionservices/authPreferences.css"?>
@@ -42,6 +43,7 @@
<!-- Links below are only used for search-l10n-ids into subdialogs -->
<link rel="localization" href="browser/aboutDialog.ftl"/>
+ <link rel="localization" href="browser/base-browser.ftl"/>
<link rel="localization" href="browser/preferences/addEngine.ftl"/>
<link rel="localization" href="browser/preferences/blocklists.ftl"/>
<link rel="localization" href="browser/preferences/clearSiteData.ftl"/>
=====================================
browser/locales/en-US/browser/base-browser.ftl
=====================================
@@ -70,3 +70,27 @@ new-identity-dialog-confirm =
new-identity-blocked-home-notification = { -brand-short-name } blocked your homepage ({ $url }) from loading because it might recognize your previous session.
# Button to continue loading the home page, despite the warning message.
new-identity-blocked-home-ignore-button = Load it anyway
+## 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
View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/commit/96be793bc5b626f609f3996d4eaafeba1244bee9
--
View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/commit/96be793bc5b626f609f3996d4eaafeba1244bee9
You're receiving this email because of your account on gitlab.torproject.org.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.torproject.org/pipermail/tor-commits/attachments/20240321/e36a6274/attachment-0001.htm>
More information about the tor-commits
mailing list