commit cd7681f62c6a2ab2fa4cdf00a561db31f0c2126b parent 6d30811052aa6da3d7e91728495602c1e181cb81 Author: Henry Wilkes <henry@torproject.org> Date: Tue, 27 Jan 2026 13:03:01 +0000 fixup! BB 41916: Letterboxing preferences UI TB 44459: Use settings config for Letterboxing. Diffstat:
11 files changed, 194 insertions(+), 400 deletions(-)
diff --git a/browser/components/preferences/jar.mn b/browser/components/preferences/jar.mn @@ -48,7 +48,5 @@ browser.jar: 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 + content/browser/preferences/letterboxing-middle.svg + content/browser/preferences/letterboxing-top.svg diff --git a/browser/components/preferences/letterboxing-middle-dark.svg b/browser/components/preferences/letterboxing-middle-dark.svg @@ -1,35 +0,0 @@ -<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> diff --git a/browser/components/preferences/letterboxing-middle-light.svg b/browser/components/preferences/letterboxing-middle-light.svg @@ -1,35 +0,0 @@ -<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> diff --git a/browser/components/preferences/letterboxing-middle.svg b/browser/components/preferences/letterboxing-middle.svg @@ -0,0 +1,20 @@ +<svg width="54" height="42" xmlns="http://www.w3.org/2000/svg"> +<rect width="54" height="42" fill="light-dark(#CFCFD8, #5B5B66)"/> +<rect width="54" height="11" fill="light-dark(#F0F0F4, #42414D)"/> +<rect width="54" height="5" fill="light-dark(#E0E0E6, #2B2A33)"/> +<g fill="light-dark(#52525E, white)"> + <rect x="5" y="2" width="12" height="2" rx="1"/> + <rect x="50" y="7" width="2" height="2" rx="1"/> + <rect x="2" y="7" width="2" height="2" rx="1"/> + <rect x="6" y="7" width="2" height="2" rx="1"/> + <rect x="10" y="7" width="38" height="2" rx="1"/> +</g> +<g fill="light-dark(white, #3A3944)"> + <rect x="4" y="15" width="46" height="23" rx="2"/> +</g> +<g fill="light-dark(#52525E, white)"> + <rect x="8" y="19" width="27" height="2" rx="1"/> + <rect x="8" y="23" width="16" height="2" rx="1"/> + <rect x="8" y="27" width="31" height="2" rx="1"/> +</g> +</svg> diff --git a/browser/components/preferences/letterboxing-top-dark.svg b/browser/components/preferences/letterboxing-top-dark.svg @@ -1,35 +0,0 @@ -<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> diff --git a/browser/components/preferences/letterboxing-top-light.svg b/browser/components/preferences/letterboxing-top-light.svg @@ -1,35 +0,0 @@ -<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> diff --git a/browser/components/preferences/letterboxing-top.svg b/browser/components/preferences/letterboxing-top.svg @@ -0,0 +1,21 @@ +<svg width="54" height="42" xmlns="http://www.w3.org/2000/svg"> +<rect width="54" height="42" fill="light-dark(#CFCFD8, #5B5B66)"/> +<rect width="54" height="11" fill="light-dark(#F0F0F4, #42414D)"/> +<rect width="54" height="5" fill="light-dark(#E0E0E6, #2B2A33)"/> +<g fill="light-dark(#52525E, white)"> + <rect x="5" y="2" width="12" height="2" rx="1"/> + <rect x="50" y="7" width="2" height="2" rx="1"/> + <rect x="2" y="7" width="2" height="2" rx="1"/> + <rect x="6" y="7" width="2" height="2" rx="1"/> + <rect x="10" y="7" width="38" height="2" rx="1"/> +</g> +<g fill="light-dark(white, #3A3944)"> + <rect x="4" y="11" width="46" height="27" rx="2"/> + <rect x="4" y="11" width="46" height="4"/> +</g> +<g fill="light-dark(#52525E, white)"> + <rect x="8" y="15" width="27" height="2" rx="1"/> + <rect x="8" y="19" width="16" height="2" rx="1"/> + <rect x="8" y="23" width="31" height="2" rx="1"/> +</g> +</svg> diff --git a/browser/components/preferences/letterboxing.css b/browser/components/preferences/letterboxing.css @@ -1,69 +1,11 @@ -.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 { +#letterboxingCategory.hide-all-letterboxing { 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; +.letterboxing-overview { + margin-block-end: var(--space-xxlarge); } -/* 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; +.letterboxing-chooser-item.appearance-chooser-item { + flex: 0 1 200px; } diff --git a/browser/components/preferences/letterboxing.inc.xhtml b/browser/components/preferences/letterboxing.inc.xhtml @@ -15,100 +15,12 @@ ></html:a> </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 description-deemphasized"> - <html:span data-l10n-id="letterboxing-overview"></html:span> - <html:a - is="moz-support-link" - tor-manual-page="anti-fingerprinting_letterboxing" - data-l10n-id="letterboxing-learn-more" - ></html:a> - </description> - <checkbox - id="letterboxingRememberSize" - data-l10n-id="letterboxing-remember-size" - preference="privacy.resistFingerprinting.letterboxing.rememberSize" - /> +<groupbox data-category="paneGeneral" hidden="true"> + <html:setting-group groupid="letterboxingDisabled"></html:setting-group> </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 description-deemphasized"> - <html:span data-l10n-id="letterboxing-overview"></html:span> - <html:a - is="moz-support-link" - tor-manual-page="anti-fingerprinting_letterboxing" - data-l10n-id="letterboxing-learn-more" - ></html:a> - </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 data-category="paneGeneral" hidden="true"> + <html:setting-group groupid="letterboxingSize"></html:setting-group> </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 description-deemphasized"> - <html:span data-l10n-id="letterboxing-overview"></html:span> - <html:a - is="moz-support-link" - tor-manual-page="anti-fingerprinting_letterboxing" - data-l10n-id="letterboxing-learn-more" - ></html:a> - </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 data-category="paneGeneral" hidden="true"> + <html:setting-group groupid="letterboxingAlignment"></html:setting-group> </groupbox> diff --git a/browser/components/preferences/letterboxing.js b/browser/components/preferences/letterboxing.js @@ -1,112 +1,155 @@ -/* import-globals-from /browser/components/preferences/preferences.js */ -/* import-globals-from /browser/components/preferences/findInPage.js */ -/* import-globals-from /toolkit/content/preferencesBindings.js */ +/* import-globals-from preferences.js */ +/* import-globals-from findInPage.js */ Preferences.addAll([ { + id: "privacy.resistFingerprinting.letterboxing", + type: "bool", + }, + { id: "privacy.resistFingerprinting.letterboxing.rememberSize", type: "bool", }, + { + id: "privacy.resistFingerprinting.letterboxing.vcenter", + type: "bool", + }, ]); -{ - const lbEnabledPref = "privacy.resistFingerprinting.letterboxing"; - const visibilityPrefs = ["privacy.resistFingerprinting", lbEnabledPref]; - const alignMiddlePref = "privacy.resistFingerprinting.letterboxing.vcenter"; +Preferences.addSetting({ + id: "letterboxingEnabled", + pref: "privacy.resistFingerprinting.letterboxing", +}); - 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); +Preferences.addSetting({ + id: "letterboxingRememberSize", + pref: "privacy.resistFingerprinting.letterboxing.rememberSize", + deps: ["letterboxingEnabled", "resistFingerprinting"], + visible: ({ letterboxingEnabled, resistFingerprinting }) => { + return letterboxingEnabled.value && resistFingerprinting.value; + }, +}); - // 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") - ); - }; +Preferences.addSetting({ + id: "letterboxingContentAlignment", + pref: "privacy.resistFingerprinting.letterboxing.vcenter", + deps: ["letterboxingEnabled", "resistFingerprinting"], + visible: ({ letterboxingEnabled, resistFingerprinting }) => { + return letterboxingEnabled.value && resistFingerprinting.value; + }, + get: val => { + return val ? "middle" : "top"; + }, + set: val => { + return val == "middle"; + }, +}); - 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"); +Preferences.addSetting({ + id: "letterboxingShouldEnable", + deps: ["letterboxingEnabled", "resistFingerprinting"], + visible: ({ letterboxingEnabled, resistFingerprinting }) => { + return !letterboxingEnabled.value && resistFingerprinting.value; + }, + onUserClick: (e, { letterboxingEnabled }) => { + const buttonEl = document.getElementById("enableLetterboxingButton"); + if (!buttonEl?.contains(e.target)) { + return; } - }; - - 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); + 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 + ); + }); + }, +}); - 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); - }, +SettingGroupManager.registerGroups({ + letterboxingDisabled: { + items: [ + { + id: "letterboxingShouldEnable", + l10nId: "letterboxing-disabled-message", + control: "moz-promo", + options: [ + { + control: "moz-button", + l10nId: "letterboxing-enable-button", + id: "enableLetterboxingButton", + slot: "actions", + }, + ], + }, + ], + }, + letterboxingSize: { + l10nId: "letterboxing-window-size-group", + headingLevel: 2, + 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: [ + { + value: "top", + l10nId: "letterboxing-alignment-top-option", + controlAttrs: { + class: "appearance-chooser-item letterboxing-chooser-item", + imagesrc: + "chrome://browser/content/preferences/letterboxing-top.svg", + }, + }, + { + value: "middle", + l10nId: "letterboxing-alignment-middle-option", + controlAttrs: { + class: "appearance-chooser-item letterboxing-chooser-item", + imagesrc: + "chrome://browser/content/preferences/letterboxing-middle.svg", + }, + }, + ], + }, + ], + }, +}); - destroy() { - for (const pref of visibilityPrefs) { - Services.prefs.removeObserver(pref, onVisibilityPrefChange); - } - Services.prefs.removeObserver(alignMiddlePref, syncAligner); - }, - }; -} +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"); + }, +}; diff --git a/browser/components/preferences/main.js b/browser/components/preferences/main.js @@ -6221,8 +6221,6 @@ var gMainPane = { this._translationsView.destroy(); this._translationsView = null; } - - gLetterboxingPrefs.destroy(); }, // nsISupports
