henry pushed to branch tor-browser-147.0a1-16.0-2 at The Tor Project / Applications / Tor Browser

Commits:

13 changed files:

Changes:

  • browser/components/preferences/jar.mn
    ... ... @@ -45,7 +45,5 @@ browser.jar:
    45 45
    46 46 
        content/browser/preferences/letterboxing.js
    47 47 
        content/browser/preferences/letterboxing.css
    48 
    -   content/browser/preferences/letterboxing-middle-dark.svg
    49 
    -   content/browser/preferences/letterboxing-middle-light.svg
    50 
    -   content/browser/preferences/letterboxing-top-dark.svg
    51 
    -   content/browser/preferences/letterboxing-top-light.svg
    48 
    +   content/browser/preferences/letterboxing-middle.svg
    49 
    +   content/browser/preferences/letterboxing-top.svg

  • browser/components/preferences/letterboxing-middle-dark.svg deleted
    1 
    -<svg width="62" height="50" viewBox="0 0 62 50" fill="none" xmlns="http://www.w3.org/2000/svg">
    2 
    -<g filter="url(#filter0_d_2272_529)">
    3 
    -<g clip-path="url(#clip0_2272_529)">
    4 
    -<path d="M58 3H4V45H58V3Z" fill="#42414D"/>
    5 
    -<path d="M58 3H4V14H58V3Z" fill="#42414D"/>
    6 
    -<path d="M58 3H4V8H58V3Z" fill="#2B2A33"/>
    7 
    -<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"/>
    8 
    -<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"/>
    9 
    -<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"/>
    10 
    -<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"/>
    11 
    -<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"/>
    12 
    -<path d="M58 14H4V45H58V14Z" fill="#5B5B66"/>
    13 
    -<rect x="8" y="18" width="46" height="23" rx="2" fill="#3A3944"/>
    14 
    -<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"/>
    15 
    -<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"/>
    16 
    -<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"/>
    17 
    -</g>
    18 
    -<rect x="4.5" y="3.5" width="53" height="41" rx="1.5" stroke="#8F8F9D" shape-rendering="crispEdges"/>
    19 
    -</g>
    20 
    -<defs>
    21 
    -<filter id="filter0_d_2272_529" x="0" y="0" width="62" height="50" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    22 
    -<feFlood flood-opacity="0" result="BackgroundImageFix"/>
    23 
    -<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"/>
    24 
    -<feOffset dy="1"/>
    25 
    -<feGaussianBlur stdDeviation="2"/>
    26 
    -<feComposite in2="hardAlpha" operator="out"/>
    27 
    -<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"/>
    28 
    -<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2272_529"/>
    29 
    -<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2272_529" result="shape"/>
    30 
    -</filter>
    31 
    -<clipPath id="clip0_2272_529">
    32 
    -<rect x="4" y="3" width="54" height="42" rx="2" fill="white"/>
    33 
    -</clipPath>
    34 
    -</defs>
    35 
    -</svg>

  • browser/components/preferences/letterboxing-middle-light.svg deleted
    1 
    -<svg width="62" height="50" viewBox="0 0 62 50" fill="none" xmlns="http://www.w3.org/2000/svg">
    2 
    -<g filter="url(#filter0_d_202_960)">
    3 
    -<g clip-path="url(#clip0_202_960)">
    4 
    -<path d="M58 3H4V45H58V3Z" fill="#F0F0F4"/>
    5 
    -<path d="M58 3H4V14H58V3Z" fill="#F0F0F4"/>
    6 
    -<path d="M58 3H4V8H58V3Z" fill="#E0E0E6"/>
    7 
    -<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"/>
    8 
    -<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"/>
    9 
    -<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"/>
    10 
    -<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"/>
    11 
    -<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"/>
    12 
    -<path d="M58 14H4V45H58V14Z" fill="#CFCFD8"/>
    13 
    -<rect x="8" y="18" width="46" height="23" rx="2" fill="white"/>
    14 
    -<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"/>
    15 
    -<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"/>
    16 
    -<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"/>
    17 
    -</g>
    18 
    -<rect x="4.5" y="3.5" width="53" height="41" rx="1.5" stroke="#8F8F9D" shape-rendering="crispEdges"/>
    19 
    -</g>
    20 
    -<defs>
    21 
    -<filter id="filter0_d_202_960" x="0" y="0" width="62" height="50" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    22 
    -<feFlood flood-opacity="0" result="BackgroundImageFix"/>
    23 
    -<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"/>
    24 
    -<feOffset dy="1"/>
    25 
    -<feGaussianBlur stdDeviation="2"/>
    26 
    -<feComposite in2="hardAlpha" operator="out"/>
    27 
    -<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"/>
    28 
    -<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_202_960"/>
    29 
    -<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_202_960" result="shape"/>
    30 
    -</filter>
    31 
    -<clipPath id="clip0_202_960">
    32 
    -<rect x="4" y="3" width="54" height="42" rx="2" fill="white"/>
    33 
    -</clipPath>
    34 
    -</defs>
    35 
    -</svg>

  • browser/components/preferences/letterboxing-middle.svg
    1 
    +<svg width="54" height="42" xmlns="http://www.w3.org/2000/svg">
    2 
    +<rect width="54" height="42" fill="light-dark(#CFCFD8, #5B5B66)"/>
    3 
    +<rect width="54" height="11" fill="light-dark(#F0F0F4, #42414D)"/>
    4 
    +<rect width="54" height="5" fill="light-dark(#E0E0E6, #2B2A33)"/>
    5 
    +<g fill="light-dark(#52525E, white)">
    6 
    +  <rect x="5" y="2" width="12" height="2" rx="1"/>
    7 
    +  <rect x="50" y="7" width="2" height="2" rx="1"/>
    8 
    +  <rect x="2" y="7" width="2" height="2" rx="1"/>
    9 
    +  <rect x="6" y="7" width="2" height="2" rx="1"/>
    10 
    +  <rect x="10" y="7" width="38" height="2" rx="1"/>
    11 
    +</g>
    12 
    +<g fill="light-dark(white, #3A3944)">
    13 
    +  <rect x="4" y="15" width="46" height="23" rx="2"/>
    14 
    +</g>
    15 
    +<g fill="light-dark(#52525E, white)">
    16 
    +  <rect x="8" y="19" width="27" height="2" rx="1"/>
    17 
    +  <rect x="8" y="23" width="16" height="2" rx="1"/>
    18 
    +  <rect x="8" y="27" width="31" height="2" rx="1"/>
    19 
    +</g>
    20 
    +</svg>

  • browser/components/preferences/letterboxing-top-dark.svg deleted
    1 
    -<svg width="62" height="50" viewBox="0 0 62 50" fill="none" xmlns="http://www.w3.org/2000/svg">
    2 
    -<g filter="url(#filter0_d_2272_508)">
    3 
    -<g clip-path="url(#clip0_2272_508)">
    4 
    -<path d="M58 3H4V45H58V3Z" fill="#52525E"/>
    5 
    -<path d="M58 3H4V14H58V3Z" fill="#42414D"/>
    6 
    -<path d="M58 3H4V8H58V3Z" fill="#2B2A33"/>
    7 
    -<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"/>
    8 
    -<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"/>
    9 
    -<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"/>
    10 
    -<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"/>
    11 
    -<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"/>
    12 
    -<path d="M58 14H4V45H58V14Z" fill="#5B5B66"/>
    13 
    -<path d="M8 14H55V39C55 40.1046 54.1046 41 53 41H10C8.89543 41 8 40.1046 8 39V14Z" fill="#3A3944"/>
    14 
    -<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"/>
    15 
    -<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"/>
    16 
    -<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"/>
    17 
    -</g>
    18 
    -<rect x="4.5" y="3.5" width="53" height="41" rx="3.5" stroke="#8F8F9D" shape-rendering="crispEdges"/>
    19 
    -</g>
    20 
    -<defs>
    21 
    -<filter id="filter0_d_2272_508" x="0" y="0" width="62" height="50" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    22 
    -<feFlood flood-opacity="0" result="BackgroundImageFix"/>
    23 
    -<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"/>
    24 
    -<feOffset dy="1"/>
    25 
    -<feGaussianBlur stdDeviation="2"/>
    26 
    -<feComposite in2="hardAlpha" operator="out"/>
    27 
    -<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"/>
    28 
    -<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2272_508"/>
    29 
    -<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2272_508" result="shape"/>
    30 
    -</filter>
    31 
    -<clipPath id="clip0_2272_508">
    32 
    -<rect x="4" y="3" width="54" height="42" rx="4" fill="white"/>
    33 
    -</clipPath>
    34 
    -</defs>
    35 
    -</svg>

  • browser/components/preferences/letterboxing-top-light.svg deleted
    1 
    -<svg width="62" height="50" viewBox="0 0 62 50" fill="none" xmlns="http://www.w3.org/2000/svg">
    2 
    -<g filter="url(#filter0_d_202_926)">
    3 
    -<g clip-path="url(#clip0_202_926)">
    4 
    -<path d="M58 3H4V45H58V3Z" fill="#F0F0F4"/>
    5 
    -<path d="M58 3H4V14H58V3Z" fill="#F0F0F4"/>
    6 
    -<path d="M58 3H4V8H58V3Z" fill="#E0E0E6"/>
    7 
    -<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"/>
    8 
    -<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"/>
    9 
    -<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"/>
    10 
    -<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"/>
    11 
    -<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"/>
    12 
    -<path d="M58 14H4V45H58V14Z" fill="#CFCFD8"/>
    13 
    -<path d="M8 14H55V39C55 40.1046 54.1046 41 53 41H10C8.89543 41 8 40.1046 8 39V14Z" fill="white"/>
    14 
    -<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"/>
    15 
    -<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"/>
    16 
    -<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"/>
    17 
    -</g>
    18 
    -<rect x="4.5" y="3.5" width="53" height="41" rx="3.5" stroke="#8F8F9D" shape-rendering="crispEdges"/>
    19 
    -</g>
    20 
    -<defs>
    21 
    -<filter id="filter0_d_202_926" x="0" y="0" width="62" height="50" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    22 
    -<feFlood flood-opacity="0" result="BackgroundImageFix"/>
    23 
    -<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"/>
    24 
    -<feOffset dy="1"/>
    25 
    -<feGaussianBlur stdDeviation="2"/>
    26 
    -<feComposite in2="hardAlpha" operator="out"/>
    27 
    -<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"/>
    28 
    -<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_202_926"/>
    29 
    -<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_202_926" result="shape"/>
    30 
    -</filter>
    31 
    -<clipPath id="clip0_202_926">
    32 
    -<rect x="4" y="3" width="54" height="42" rx="4" fill="white"/>
    33 
    -</clipPath>
    34 
    -</defs>
    35 
    -</svg>

  • browser/components/preferences/letterboxing-top.svg
    1 
    +<svg width="54" height="42" xmlns="http://www.w3.org/2000/svg">
    2 
    +<rect width="54" height="42" fill="light-dark(#CFCFD8, #5B5B66)"/>
    3 
    +<rect width="54" height="11" fill="light-dark(#F0F0F4, #42414D)"/>
    4 
    +<rect width="54" height="5" fill="light-dark(#E0E0E6, #2B2A33)"/>
    5 
    +<g fill="light-dark(#52525E, white)">
    6 
    +  <rect x="5" y="2" width="12" height="2" rx="1"/>
    7 
    +  <rect x="50" y="7" width="2" height="2" rx="1"/>
    8 
    +  <rect x="2" y="7" width="2" height="2" rx="1"/>
    9 
    +  <rect x="6" y="7" width="2" height="2" rx="1"/>
    10 
    +  <rect x="10" y="7" width="38" height="2" rx="1"/>
    11 
    +</g>
    12 
    +<g fill="light-dark(white, #3A3944)">
    13 
    +  <rect x="4" y="11" width="46" height="27" rx="2"/>
    14 
    +  <rect x="4" y="11" width="46" height="4"/>
    15 
    +</g>
    16 
    +<g fill="light-dark(#52525E, white)">
    17 
    +  <rect x="8" y="15" width="27" height="2" rx="1"/>
    18 
    +  <rect x="8" y="19" width="16" height="2" rx="1"/>
    19 
    +  <rect x="8" y="23" width="31" height="2" rx="1"/>
    20 
    +</g>
    21 
    +</svg>

  • browser/components/preferences/letterboxing.css
    1 
    -.letterboxing-overview {
    2 
    -  margin-block-end: 32px;
    3 
    -}
    4 
    -
    5 
    -.letterboxing-search-overview {
    6 
    -  margin-block-end: 16px;
    7 
    -}
    8 
    -#letterboxingAligner {
    9 
    -  display: flex;
    10 
    -  justify-content: start;
    11 
    -  gap: 16px;
    12 
    -  margin-block: 12px;
    13 
    -
    14 
    -  --letterboxing-alignment-img-top: url("chrome://browser/content/preferences/letterboxing-top-light.svg");
    15 
    -  --letterboxing-alignment-img-middle: url("chrome://browser/content/preferences/letterboxing-middle-light.svg");
    16 
    -}
    17 
    -
    18 
    -@media (prefers-color-scheme: dark) {
    19 
    -  #letterboxingAligner {
    20 
    -    --letterboxing-alignment-img-top: url("chrome://browser/content/preferences/letterboxing-top-dark.svg");
    21 
    -    --letterboxing-alignment-img-middle: url("chrome://browser/content/preferences/letterboxing-middle-dark.svg");
    22 
    -  }
    23 
    -}
    24 
    -
    25 
    -#letterboxingAligner .letterboxing-align-top img {
    26 
    -  content: var(--letterboxing-alignment-img-top);
    27 
    -}
    28 
    -#letterboxingAligner .letterboxing-align-middle img {
    29 
    -  content: var(--letterboxing-alignment-img-middle);
    30 
    -}
    31 
    -
    32 
    -#letterboxingAligner label {
    33 
    -  width: 200px;
    34 
    -  flex: 0 0 auto;
    35 
    -}
    36 
    -
    37 
    -#letterboxingAligner img {
    38 
    -  border: none;
    39 
    -  box-shadow: none;
    40 
    -}
    41 
    -
    42 
    -/* Hide letterboxing options depending on whether ResistFingerprinting or
    43 
    - * Letterboxing is enabled. */
    44 
    -#letterboxingCategory:not(.rfp-enabled),
    45 
    -#letterboxingCategory:not(.rfp-enabled) ~ #letterboxingDisabled,
    46 
    -#letterboxingCategory.letterboxing-enabled ~ #letterboxingDisabled,
    47 
    -#letterboxingCategory:not(.rfp-enabled.letterboxing-enabled) ~ .letterboxing-category {
    1 
    +#letterboxingCategory.hide-all-letterboxing {
    48 2 
       display: none;
    49 3 
     }
    50 4
    51 
    -/* We duplicate the Letterboxing overview to appear in search results.
    52 
    - * We want to hide them whenever they are *not* part of a search result. */
    53 
    -:is(
    54 
    -  /* Hide the duplicates when the category is *not* hidden. */
    55 
    -  #letterboxingCategory:not(.visually-hidden) ~ .letterboxing-category,
    56 
    -  /* Also hide the duplicated overview for subsequence search results if a
    57 
    -   * previous groupbox is *not* hidden. */
    58 
    -  .letterboxing-category:not(.visually-hidden) ~ .letterboxing-category,
    59 
    -) .letterboxing-search-overview {
    60 
    -  display: none;
    5 
    +.letterboxing-overview {
    6 
    +  margin-block-end: var(--space-xxlarge);
    61 7 
     }
    62 8
    63 
    -/* Similarly for #letterboxingDisabled, but we also want to hide its
    64 
    - * "Letterboxing" heading.
    65 
    - * NOTE: This should only appear in isolation, so we do not need to worry about
    66 
    - * subsequent groupboxes. */
    67 
    -#letterboxingCategory:not(.visually-hidden) ~ #letterboxingDisabled :is(.letterboxing-search-heading, .letterboxing-search-overview) {
    68 
    -  display: none;
    9 
    +.letterboxing-chooser-item.appearance-chooser-item {
    10 
    +  flex: 0 1 200px;
    69 11 
     }

  • browser/components/preferences/letterboxing.inc.xhtml
    ... ... @@ -15,100 +15,12 @@
    15 15 
         ></html:a>
    16 16 
       </description>
    17 17 
     </vbox>
    18 
    -<groupbox
    19 
    -  class="letterboxing-category"
    20 
    -  data-category="paneGeneral"
    21 
    -  hidden="true"
    22 
    ->
    23 
    -  <label><html:h2
    24 
    -    data-l10n-id="letterboxing-window-size-header"/></label>
    25 
    -  <description class="letterboxing-search-overview description-deemphasized">
    26 
    -    <html:span data-l10n-id="letterboxing-overview"></html:span>
    27 
    -    <html:a
    28 
    -      is="moz-support-link"
    29 
    -      tor-manual-page="anti-fingerprinting_letterboxing"
    30 
    -      data-l10n-id="letterboxing-learn-more"
    31 
    -    ></html:a>
    32 
    -  </description>
    33 
    -  <checkbox
    34 
    -    id="letterboxingRememberSize"
    35 
    -    data-l10n-id="letterboxing-remember-size"
    36 
    -    preference="privacy.resistFingerprinting.letterboxing.rememberSize"
    37 
    -  />
    18 
    +<groupbox data-category="paneGeneral" hidden="true">
    19 
    +  <html:setting-group groupid="letterboxingDisabled"></html:setting-group>
    38 20 
     </groupbox>
    39 
    -<groupbox
    40 
    -  class="letterboxing-category"
    41 
    -  data-category="paneGeneral"
    42 
    -  hidden="true"
    43 
    ->
    44 
    -  <label><html:h2
    45 
    -    data-l10n-id="letterboxing-alignment-header"
    46 
    -    /></label>
    47 
    -  <description class="letterboxing-search-overview description-deemphasized">
    48 
    -    <html:span data-l10n-id="letterboxing-overview"></html:span>
    49 
    -    <html:a
    50 
    -      is="moz-support-link"
    51 
    -      tor-manual-page="anti-fingerprinting_letterboxing"
    52 
    -      data-l10n-id="letterboxing-learn-more"
    53 
    -    ></html:a>
    54 
    -  </description>
    55 
    -  <description
    56 
    -    id="letterboxingAlignmentDesc"
    57 
    -    flex="1"
    58 
    -    data-l10n-id="letterboxing-alignment-description"
    59 
    -  />
    60 
    -  <form
    61 
    -    xmlns="http://www.w3.org/1999/xhtml"
    62 
    -    id="letterboxingAligner"
    63 
    -    autocomplete="off"
    64 
    -    aria-labelledby="letterboxingAlignmentDesc"
    65 
    -  >
    66 
    -    <label class="web-appearance-choice letterboxing-align-top">
    67 
    -      <div class="web-appearance-choice-image-container">
    68 
    -        <img role="presentation" />
    69 
    -      </div>
    70 
    -      <div class="web-appearance-choice-footer">
    71 
    -        <input type="radio" name="alignment" value="top" />
    72 
    -        <span data-l10n-id="letterboxing-alignment-top"></span>
    73 
    -      </div>
    74 
    -    </label>
    75 
    -    <label class="web-appearance-choice letterboxing-align-middle">
    76 
    -      <div class="web-appearance-choice-image-container">
    77 
    -        <img role="presentation" />
    78 
    -      </div>
    79 
    -      <div class="web-appearance-choice-footer">
    80 
    -        <input type="radio" name="alignment" value="middle" />
    81 
    -        <span data-l10n-id="letterboxing-alignment-middle"></span>
    82 
    -      </div>
    83 
    -    </label>
    84 
    -  </form>
    21 
    +<groupbox data-category="paneGeneral" hidden="true">
    22 
    +  <html:setting-group groupid="letterboxingSize"></html:setting-group>
    85 23 
     </groupbox>
    86 
    -<groupbox
    87 
    -  id="letterboxingDisabled"
    88 
    -  data-category="paneGeneral"
    89 
    -  hidden="true"
    90 
    ->
    91 
    -  <label class="letterboxing-search-heading"><html:h2
    92 
    -    data-l10n-id="letterboxing-header"/></label>
    93 
    -  <description class="letterboxing-search-overview description-deemphasized">
    94 
    -    <html:span data-l10n-id="letterboxing-overview"></html:span>
    95 
    -    <html:a
    96 
    -      is="moz-support-link"
    97 
    -      tor-manual-page="anti-fingerprinting_letterboxing"
    98 
    -      data-l10n-id="letterboxing-learn-more"
    99 
    -    ></html:a>
    100 
    -  </description>
    101 
    -  <hbox align="center">
    102 
    -    <label
    103 
    -      class="face-sad"
    104 
    -      flex="1"
    105 
    -      data-l10n-id="letterboxing-disabled-description"
    106 
    -    />
    107 
    -    <button
    108 
    -      id="letterboxingEnableButton"
    109 
    -      class="accessory-button"
    110 
    -      is="highlightable-button"
    111 
    -      data-l10n-id="letterboxing-enable-button"
    112 
    -    />
    113 
    -  </hbox>
    24 
    +<groupbox data-category="paneGeneral" hidden="true">
    25 
    +  <html:setting-group groupid="letterboxingAlignment"></html:setting-group>
    114 26 
     </groupbox>

  • browser/components/preferences/letterboxing.js
    1 
    -/* import-globals-from /browser/components/preferences/preferences.js */
    2 
    -/* import-globals-from /browser/components/preferences/findInPage.js */
    3 
    -/* import-globals-from /toolkit/content/preferencesBindings.js */
    1 
    +/* import-globals-from preferences.js */
    2 
    +/* import-globals-from findInPage.js */
    4 3
    5 4 
     Preferences.addAll([
    5 
    +  {
    6 
    +    id: "privacy.resistFingerprinting.letterboxing",
    7 
    +    type: "bool",
    8 
    +  },
    6 9 
       {
    7 10 
         id: "privacy.resistFingerprinting.letterboxing.rememberSize",
    8 11 
         type: "bool",
    9 12 
       },
    13 
    +  {
    14 
    +    id: "privacy.resistFingerprinting.letterboxing.vcenter",
    15 
    +    type: "bool",
    16 
    +  },
    10 17 
     ]);
    11 18
    12 
    -{
    13 
    -  const lbEnabledPref = "privacy.resistFingerprinting.letterboxing";
    14 
    -  const visibilityPrefs = ["privacy.resistFingerprinting", lbEnabledPref];
    15 
    -  const alignMiddlePref = "privacy.resistFingerprinting.letterboxing.vcenter";
    19 
    +Preferences.addSetting({
    20 
    +  id: "letterboxingEnabled",
    21 
    +  pref: "privacy.resistFingerprinting.letterboxing",
    22 
    +});
    16 23
    17 
    -  const hideFromSearchIf = (mustHide, ...elements) => {
    18 
    -    for (const element of elements) {
    19 
    -      if (mustHide) {
    20 
    -        element.setAttribute("data-hidden-from-search", "true");
    21 
    -      } else {
    22 
    -        element.removeAttribute("data-hidden-from-search");
    23 
    -      }
    24 
    -    }
    25 
    -  };
    26 
    -
    27 
    -  const syncVisibility = () => {
    28 
    -    const [rfpEnabled, letterboxingEnabled] = visibilityPrefs.map(pref =>
    29 
    -      Services.prefs.getBoolPref(pref, false)
    30 
    -    );
    31 
    -    const categoryElement = document.getElementById("letterboxingCategory");
    32 
    -    const { classList } = categoryElement;
    33 
    -
    34 
    -    // Show the letterboxing section only if resistFingerprinting is enabled
    35 
    -    classList.toggle("rfp-enabled", rfpEnabled);
    36 
    -    classList.toggle("letterboxing-enabled", letterboxingEnabled);
    24 
    +Preferences.addSetting({
    25 
    +  id: "letterboxingRememberSize",
    26 
    +  pref: "privacy.resistFingerprinting.letterboxing.rememberSize",
    27 
    +  deps: ["letterboxingEnabled", "resistFingerprinting"],
    28 
    +  visible: ({ letterboxingEnabled, resistFingerprinting }) => {
    29 
    +    return letterboxingEnabled.value && resistFingerprinting.value;
    30 
    +  },
    31 
    +});
    37 32
    38 
    -    // To ensure the hidden parts do not contribute to search results, we need
    39 
    -    // to add "data-hidden-from-search".
    40 
    -    hideFromSearchIf(
    41 
    -      !rfpEnabled || !letterboxingEnabled,
    42 
    -      ...document.querySelectorAll(".letterboxing-category")
    43 
    -    );
    44 
    -    hideFromSearchIf(
    45 
    -      !rfpEnabled || letterboxingEnabled,
    46 
    -      document.getElementById("letterboxingDisabled")
    47 
    -    );
    48 
    -  };
    33 
    +Preferences.addSetting({
    34 
    +  id: "letterboxingContentAlignment",
    35 
    +  pref: "privacy.resistFingerprinting.letterboxing.vcenter",
    36 
    +  deps: ["letterboxingEnabled", "resistFingerprinting"],
    37 
    +  visible: ({ letterboxingEnabled, resistFingerprinting }) => {
    38 
    +    return letterboxingEnabled.value && resistFingerprinting.value;
    39 
    +  },
    40 
    +  get: val => {
    41 
    +    return val ? "middle" : "top";
    42 
    +  },
    43 
    +  set: val => {
    44 
    +    return val == "middle";
    45 
    +  },
    46 
    +});
    49 47
    50 
    -  const onVisibilityPrefChange = () => {
    51 
    -    syncVisibility();
    52 
    -    // NOTE: Firefox does not expect "data-hidden-from-search" to change
    53 
    -    // dynamically after page initialization. So we need to manually recall the
    54 
    -    // methods that use "data-hidden-from-search". I.e. the "search" method,
    55 
    -    // using the currently shown category.
    56 
    -    // NOTE: We skip this if we are just initializing on page load.
    57 
    -    // NOTE: data-hidden-from-search is also used when the user has entered a
    58 
    -    // search term. We do not update the results in this case. Instead, it will
    59 
    -    // update when the search term changes or is cleared.
    60 
    -    if (!gSearchResultsPane.query) {
    61 
    -      search(gLastCategory.category, "data-category");
    48 
    +Preferences.addSetting({
    49 
    +  id: "letterboxingShouldEnable",
    50 
    +  deps: ["letterboxingEnabled", "resistFingerprinting"],
    51 
    +  visible: ({ letterboxingEnabled, resistFingerprinting }) => {
    52 
    +    return !letterboxingEnabled.value && resistFingerprinting.value;
    53 
    +  },
    54 
    +  onUserClick: (e, { letterboxingEnabled }) => {
    55 
    +    const buttonEl = document.getElementById("enableLetterboxingButton");
    56 
    +    if (!buttonEl?.contains(e.target)) {
    57 
    +      return;
    62 58 
         }
    63 
    -  };
    64 
    -
    65 
    -  const alignerId = "letterboxingAligner";
    66 
    -  const syncAligner = () => {
    67 
    -    const value = Services.prefs.getBoolPref(alignMiddlePref)
    68 
    -      ? "middle"
    69 
    -      : "top";
    70 
    -    document.querySelector(`#${alignerId} input[value="${value}"]`).checked =
    71 
    -      true;
    72 
    -  };
    73 
    -
    74 
    -  var gLetterboxingPrefs = {
    75 
    -    init() {
    76 
    -      syncVisibility();
    77 
    -      document
    78 
    -        .getElementById("letterboxingEnableButton")
    79 
    -        .addEventListener("command", () => {
    80 
    -          Services.prefs.setBoolPref(lbEnabledPref, true);
    81 
    -          // Button should have focus when activated but will be hidden now,
    82 
    -          // so re-assign focus to the newly revealed options.
    83 
    -          Services.focus.moveFocus(
    84 
    -            window,
    85 
    -            document.querySelector(".letterboxing-category"),
    86 
    -            Services.focus.MOVEFOCUS_FIRST,
    87 
    -            0
    88 
    -          );
    89 
    -        });
    90 
    -      for (const pref of visibilityPrefs) {
    91 
    -        Services.prefs.addObserver(pref, onVisibilityPrefChange);
    59 
    +    letterboxingEnabled.value = true;
    60 
    +    setTimeout(() => {
    61 
    +      // Need to re-search to remove the "hidden" attribute on the groupbox
    62 
    +      // elements (after the data-hidden-from-search attributes are changed by
    63 
    +      // the "visible" callback).
    64 
    +      // TODO: Is this an upstream issue that "hidden" is not removed?
    65 
    +      if (!gSearchResultsPane.query) {
    66 
    +        search(gLastCategory.category, "data-category");
    92 67 
           }
    68 
    +      // Button should have focus when activated but will be hidden now,
    69 
    +      // so re-assign focus to the newly revealed options.
    70 
    +      Services.focus.moveFocus(
    71 
    +        window,
    72 
    +        buttonEl,
    73 
    +        Services.focus.MOVEFOCUS_FORWARD,
    74 
    +        0
    75 
    +      );
    76 
    +    });
    77 
    +  },
    78 
    +});
    93 79
    94 
    -      syncAligner();
    95 
    -      document.getElementById(alignerId).addEventListener("change", e => {
    96 
    -        // NOTE: the "change" event is only fired on the checked input.
    97 
    -        Services.prefs.setBoolPref(
    98 
    -          alignMiddlePref,
    99 
    -          e.target.value === "middle"
    100 
    -        );
    101 
    -      });
    102 
    -      Services.prefs.addObserver(alignMiddlePref, syncAligner);
    103 
    -    },
    80 
    +SettingGroupManager.registerGroups({
    81 
    +  letterboxingDisabled: {
    82 
    +    items: [
    83 
    +      {
    84 
    +        id: "letterboxingShouldEnable",
    85 
    +        l10nId: "letterboxing-disabled-message",
    86 
    +        control: "moz-promo",
    87 
    +        options: [
    88 
    +          {
    89 
    +            control: "moz-button",
    90 
    +            l10nId: "letterboxing-enable-button",
    91 
    +            id: "enableLetterboxingButton",
    92 
    +            slot: "actions",
    93 
    +          },
    94 
    +        ],
    95 
    +      },
    96 
    +    ],
    97 
    +  },
    98 
    +  letterboxingSize: {
    99 
    +    l10nId: "letterboxing-window-size-group",
    100 
    +    headingLevel: 2,
    101 
    +    items: [
    102 
    +      {
    103 
    +        id: "letterboxingRememberSize",
    104 
    +        l10nId: "letterboxing-remember-size",
    105 
    +        control: "moz-checkbox",
    106 
    +      },
    107 
    +    ],
    108 
    +  },
    109 
    +  letterboxingAlignment: {
    110 
    +    l10nId: "letterboxing-alignment-group",
    111 
    +    headingLevel: 2,
    112 
    +    items: [
    113 
    +      {
    114 
    +        id: "letterboxingContentAlignment",
    115 
    +        control: "moz-visual-picker",
    116 
    +        options: [
    117 
    +          {
    118 
    +            value: "top",
    119 
    +            l10nId: "letterboxing-alignment-top-option",
    120 
    +            controlAttrs: {
    121 
    +              class: "appearance-chooser-item letterboxing-chooser-item",
    122 
    +              imagesrc:
    123 
    +                "chrome://browser/content/preferences/letterboxing-top.svg",
    124 
    +            },
    125 
    +          },
    126 
    +          {
    127 
    +            value: "middle",
    128 
    +            l10nId: "letterboxing-alignment-middle-option",
    129 
    +            controlAttrs: {
    130 
    +              class: "appearance-chooser-item letterboxing-chooser-item",
    131 
    +              imagesrc:
    132 
    +                "chrome://browser/content/preferences/letterboxing-middle.svg",
    133 
    +            },
    134 
    +          },
    135 
    +        ],
    136 
    +      },
    137 
    +    ],
    138 
    +  },
    139 
    +});
    104 140
    105 
    -    destroy() {
    106 
    -      for (const pref of visibilityPrefs) {
    107 
    -        Services.prefs.removeObserver(pref, onVisibilityPrefChange);
    108 
    -      }
    109 
    -      Services.prefs.removeObserver(alignMiddlePref, syncAligner);
    110 
    -    },
    111 
    -  };
    112 
    -}
    141 
    +var gLetterboxingPrefs = {
    142 
    +  init() {
    143 
    +    const rfpSetting = Preferences.getSetting("resistFingerprinting");
    144 
    +    const updateCategoryVisibility = () => {
    145 
    +      document
    146 
    +        .getElementById("letterboxingCategory")
    147 
    +        .classList.toggle("hide-all-letterboxing", !rfpSetting.value);
    148 
    +    };
    149 
    +    rfpSetting.on("change", updateCategoryVisibility);
    150 
    +    updateCategoryVisibility();
    151 
    +    initSettingGroup("letterboxingDisabled");
    152 
    +    initSettingGroup("letterboxingSize");
    153 
    +    initSettingGroup("letterboxingAlignment");
    154 
    +  },
    155 
    +};

  • browser/components/preferences/main.js
    ... ... @@ -5017,8 +5017,6 @@ var gMainPane = {
    5017 5017 
           this._translationsView.destroy();
    5018 5018 
           this._translationsView = null;
    5019 5019 
         }
    5020 
    -
    5021 
    -    gLetterboxingPrefs.destroy();
    5022 5020 
       },
    5023 5021
    5024 5022 
       // nsISupports

  • toolkit/locales/en-US/toolkit/global/base-browser.ftl
    ... ... @@ -81,17 +81,22 @@ letterboxing-header = Letterboxing
    81 81 
     # "Letterboxing" should be treated as a feature/product name, and likely not changed in other languages.
    82 82 
     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.
    83 83 
     letterboxing-learn-more = Learn more
    84 
    -letterboxing-window-size-header = Window size
    84 
    +letterboxing-window-size-group =
    85 
    +    .label = Window size
    85 86 
     letterboxing-remember-size =
    86 87 
         .label = Reuse last window size when opening a new window
    87 88 
         .accesskey = R
    88 
    -letterboxing-alignment-header = Content alignment
    89 
    -letterboxing-alignment-description = Choose where you want to align the website’s content.
    90 
    -letterboxing-alignment-top = Top
    91 
    -letterboxing-alignment-middle = Middle
    89 
    +letterboxing-alignment-group =
    90 
    +    .label = Content alignment
    91 
    +    .description = Choose where you want to align the website’s content.
    92 
    +letterboxing-alignment-top-option =
    93 
    +    .label = Top
    94 
    +letterboxing-alignment-middle-option =
    95 
    +    .label = Middle
    92 96 
     # The word "Letterboxing" is the proper noun for the Tor Browser feature, and is therefore capitalised.
    93 97 
     # "Letterboxing" should be treated as a feature/product name, and likely not changed in other languages.
    94 
    -letterboxing-disabled-description = Letterboxing is currently disabled.
    98 
    +letterboxing-disabled-message =
    99 
    +    .message = Letterboxing is currently disabled.
    95 100 
     # The word "Letterboxing" is the proper noun for the Tor Browser feature, and is therefore capitalised.
    96 101 
     # "Letterboxing" should be treated as a feature/product name, and likely not changed in other languages.
    97 102 
     letterboxing-enable-button =

  • tools/torbrowser/l10n/migrations/bug-44459-letterboxing-settings-group.py
    1 
    +from fluent.migrate.helpers import transforms_from
    2 
    +
    3 
    +
    4 
    +def migrate(ctx):
    5 
    +    ctx.add_transforms(
    6 
    +        "base-browser.ftl",
    7 
    +        "base-browser.ftl",
    8 
    +        transforms_from(
    9 
    +            """
    10 
    +letterboxing-window-size-group =
    11 
    +    .label = { COPY_PATTERN(path, "letterboxing-window-size-header") }
    12 
    +letterboxing-alignment-group =
    13 
    +    .label = { COPY_PATTERN(path, "letterboxing-alignment-header") }
    14 
    +    .description = { COPY_PATTERN(path, "letterboxing-alignment-description") }
    15 
    +letterboxing-alignment-top-option =
    16 
    +    .label = { COPY_PATTERN(path, "letterboxing-alignment-top") }
    17 
    +letterboxing-alignment-middle-option =
    18 
    +    .label = { COPY_PATTERN(path, "letterboxing-alignment-middle") }
    19 
    +letterboxing-disabled-message =
    20 
    +    .message = { COPY_PATTERN(path, "letterboxing-disabled-description") }
    21 
    +""",
    22 
    +            path="base-browser.ftl",
    23 
    +        ),
    24 
    +    )

    • —
    View it on GitLab.
    You're receiving this email because of your account on gitlab.torproject.org. Manage all notifications · Help Notification message regarding https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/14497cc92ac8db2ec7b15f5a61d8b570cd625845...d70fc64b20d221e724241e65f0f9b0d4f35664ef at 1770919823