ma1 pushed to branch mullvad-browser-115.9.0esr-13.5-1 at The Tor Project / Applications / Mullvad Browser

Commits: 2cf6d2c1 by hackademix at 2024-03-21T15:02:43+01:00 fixup! Base Browser strings

Bug 41916: Letterboxing preferences UI

- - - - - 4d921a55 by hackademix at 2024-03-21T15:03:00+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"); +} + +@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 ===================================== @@ -736,6 +736,7 @@ var gMainPane = { ]);

AppearanceChooser.init(); + gLetterboxingPrefs.init();

// Notify observers that the UI is now ready Services.obs.notifyObservers(window, "main-pane-loaded"); @@ -2594,6 +2595,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"?>

<!DOCTYPE html> @@ -40,6 +41,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/mullvad-browser/-/compare/a82...