Commit e372625d authored by henry's avatar henry Committed by Pier Angelo Vendrame
Browse files

fixup! BB 32308: Use direct browser sizing for letterboxing. 

BB 44685: Use border radius for letterboxing. This allows us to drop
browserDecorator.

BB 44847: Drop the custom sidebar border radius logic since upstream now
permanently uses a rounded corner for the browserContainer element when
the sidebar is shown. We move the letterboxing background styling to
browserContainer as well, so it does not leak out the corners.
parent 417f7418

browser/components/tabbrowser/content/tabbrowser.js

+0 −4
Original line number Diff line number Diff line
@@ -2860,10 +2860,6 @@ 
      stack.className = "browserStack";

      stack.appendChild(b);



      let decorator = document.createXULElement("hbox");

      decorator.className = "browserDecorator";

      stack.appendChild(decorator);



      let browserContainer = document.createXULElement("vbox");

      browserContainer.className = "browserContainer";

      browserContainer.appendChild(stack);

toolkit/components/resistfingerprinting/RFPHelper.sys.mjs

+1 −25
Original line number Diff line number Diff line
@@ -25,8 +25,6 @@ const kPrefLetterboxingRememberSize = 
const kTopicDOMWindowOpened = "domwindowopened";

const kTopicDOMWindowClosed = "domwindowclosed";



const kTopicFullscreenNavToolbox = "fullscreen-nav-toolbox";



const kPrefVerticalTabs = "sidebar.verticalTabs";



const kPrefResizeWarnings = "privacy.resistFingerprinting.resizeWarnings";
@@ -165,7 +163,6 @@ class _RFPHelper { 
    Services.prefs.addObserver(kPrefLetterboxing, this);

    Services.prefs.addObserver(kPrefLetterboxingVcenter, this);

    Services.prefs.addObserver(kPrefVerticalTabs, this);

    Services.obs.addObserver(this, kTopicFullscreenNavToolbox);



    XPCOMUtils.defineLazyPreferenceGetter(

      this,
@@ -201,7 +198,6 @@ class _RFPHelper { 
    Services.prefs.removeObserver(kPrefLetterboxingVcenter, this);

    Services.prefs.removeObserver(kPrefLetterboxing, this);

    Services.prefs.removeObserver(kPrefVerticalTabs, this);

    Services.obs.removeObserver(this, kTopicFullscreenNavToolbox);

    // Remove the RFP observers, swallowing exceptions if they weren't present

    this._removeLanguagePrefObservers();

  }
@@ -223,15 +219,6 @@ class _RFPHelper { 
      case kTopicDOMWindowClosed:

        this._handleDOMWindowClosed(subject);

        break;

      case kTopicFullscreenNavToolbox:

        // The `subject` is the gNavToolbox.

        // Record whether the toobox has been hidden when the browser (not

        // content) is in fullscreen.

        subject.ownerGlobal.gBrowser.tabbox.classList.toggle(

          "letterboxing-nav-toolbox-hidden",

          data === "hidden"

        );

        break;

      default:

        break;

    }
@@ -727,14 +714,6 @@ class _RFPHelper { 
        gapVertical >= this._letterboxingBorderRadius ||

          gapHorizontal >= this._letterboxingBorderRadius

      );

      // When the Letterboxing area is top-aligned, only show the sidebar corner

      // if there is enough horizontal space.

      // The factor of 4 is from the horizontal centre-alignment and wanting

      // enough space for twice the corner radius.

      browserParent.classList.toggle(

        "letterboxing-show-sidebar-corner",

        gapHorizontal >= 4 * this._letterboxingBorderRadius

      );

      if (win.gBrowser.selectedBrowser == aBrowser) {

        const updateStatus = async args => {

          win.XULBrowserWindow.letterboxingStatus = args
@@ -796,10 +775,7 @@ class _RFPHelper { 


  _resetContentSize(aBrowser) {

    aBrowser.parentElement.classList.add("exclude-letterboxing");

    aBrowser.parentElement.classList.remove(

      "letterboxing-show-outline",

      "letterboxing-show-sidebar-corner"

    );

    aBrowser.parentElement.classList.remove("letterboxing-show-outline");

  }



  _updateSizeForTabsInWindow(aWindow) {

toolkit/components/resistfingerprinting/content/letterboxing.css

+13 −61
Original line number Diff line number Diff line
@@ -66,45 +66,12 @@ 
    }

  }



  background: var(--letterboxing-bgcolor);



  &:has(.deck-selected .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing).letterboxing-show-outline) {

    /* Letterboxing outline is visible for the current tab. Replace the usual

     * outline to match the Letterboxing outline. For most scenarios, this

     * should be mostly the same colour as when Letterboxing is not visible. But

     * it may make a difference for some theme combinations. */

    outline-color: var(--letterboxing-outline-color);

    outline-width: var(--letterboxing-outline-width);

  }



  /* Override the --tabpanel-background-color. */

  /* TODO: FIX this for newtab pages. tor-browser#44085 */

  --tabpanel-background-color: transparent;



  /* stylelint-disable-next-line media-query-no-invalid */

  @media -moz-pref("sidebar.revamp") {

    :root:not([inDOMFullscreen]) &[sidebar-shown]:not(.letterboxing-nav-toolbox-hidden):is(

      /* When the Letterboxing area is aligned to the top, show the rounded

       * corner if there is enough vertical space between the sidebar and the

       * browser element, which is not rounded at the top. */

      :not(.letterboxing-vcenter):has(.deck-selected .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing).letterboxing-show-sidebar-corner),

      /* When the Letterboxing area is aligned to the centre, show the rounded

       * corner if the Letterboxing border is shown. */

      .letterboxing-vcenter:has(.deck-selected .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing).letterboxing-show-outline)

    ) {

      /* stylelint-disable-next-line media-query-no-invalid */

      @media -moz-pref("sidebar.position_start") {

        border-start-start-radius: var(--letterboxing-border-radius);

      }



      /* stylelint-disable-next-line media-query-no-invalid */

      @media not -moz-pref("sidebar.position_start") {

        border-start-end-radius: var(--letterboxing-border-radius);

      }

    }

  }



  .browserContainer {

    background: var(--letterboxing-bgcolor);

    /*

     * From Firefox 115 on, .browserContainer layout is flex / column,

     * and without this trick the .browserStack's resize observer
@@ -119,29 +86,22 @@ 
  }

}



.browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) {

  :root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready & {

.letterboxing .deck-selected .browserContainer:not(.responsive-mode):has(> .browserStack:not(.exclude-letterboxing).letterboxing-show-outline) {

  /* Letterboxing outline is visible for the current tab. Replace the usual

   * outline to match the Letterboxing outline. For most scenarios, this

   * should be mostly the same colour as when Letterboxing is not visible. But

   * it may make a difference for some theme combinations. */

  outline-color: var(--letterboxing-outline-color);

  outline-width: var(--letterboxing-outline-width);

}



.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) {

  :root:not([inDOMFullscreen]) .letterboxing-ready & {

    place-content: var(--letterboxing-vertical-alignment) center;

  }



  :root:not([inDOMFullscreen]) .letterboxing &.letterboxing-show-outline {

  :root:not([inDOMFullscreen]) &.letterboxing-show-outline {

    browser {

      /* We use clip-path rather than border-radius because border-radius on its

       * own leads to rendering artefacts in the corners (tested with GNOME).

       * See tor-browser#44214 (comment 3262962). */

      /* TODO: Use border-radius once bugzilla bug 1991874 is resolved. */

      clip-path: rect(

        auto auto auto auto round var(--letterboxing-border-radius-top) var(--letterboxing-border-radius-top) var(--letterboxing-border-radius)

          var(--letterboxing-border-radius)

      );

    }



    .browserDecorator {

      /* Need a separate browserDecorator element because the clip-path on the

       * browser would exclude the outline and box-shadow. */

      /* TODO: Move these rules to the browser element once bugzilla bug 1991874

       * is resolved, and drop browserDecorator. */

      display: block;

      border-radius: var(--letterboxing-border-radius-top) var(--letterboxing-border-radius-top) var(--letterboxing-border-radius)

        var(--letterboxing-border-radius);

      /* NOTE: The top outline will not be visible when this is aligned to the
@@ -175,11 +135,3 @@ 
    max-width: calc(var(--letterboxing-width) * 0.5);

  }

}
 


.browserDecorator {

  display: none;

  pointer-events: none;

  background: transparent;

  position: relative;

  z-index: 1;

}