Commit 7f145a01 authored by ma1's avatar ma1 Committed by Pier Angelo Vendrame
Browse files

BB 41919: Letterboxing, add temporarily visible web content-size indicator on window resizing.

parent 710d62b1

browser/components/tabbrowser/content/tabbrowser.js

+1 −0
Original line number Diff line number Diff line
@@ -8590,6 +8590,7 @@ var StatusPanel = { 
    if (XULBrowserWindow.busyUI) {

      types.push("status");

    }

    types.push("letterboxingStatus");

    types.push("defaultStatus");

    for (type of types) {

      if ((text = XULBrowserWindow[type])) {

browser/themes/shared/tabbrowser/content-area.css

+18 −0
Original line number Diff line number Diff line
@@ -172,6 +172,7 @@ 
    min-width: min(23em, 33%);

  }



  &[type=letterboxingStatus],

  &[type=overLink] {

    transition: opacity 120ms ease-out, visibility 120ms;

  }
@@ -180,12 +181,14 @@ 
    direction: ltr;

  }



  .exclude-letterboxing &[type=letterboxingStatus],

  &[inactive],

  :root[inDOMFullscreen] &:not([type=overLink]) {

    transition: none;

    opacity: 0;

    visibility: hidden;



    &[previoustype=letterboxingStatus],

    &[previoustype=overLink] {

      transition: opacity 200ms ease-out, visibility 200ms;

    }
@@ -234,6 +237,21 @@ 
  }

}



#statuspanel[type=letterboxingStatus] > #statuspanel-label,

#statuspanel[previoustype=letterboxingStatus][inactive] > #statuspanel-label {

  background-image: url("chrome://browser/skin/window.svg");

  background-size: 1em;

  background-repeat: no-repeat;

  background-position-x: .5em;

  background-position-y: center;

  padding-inline-start: 2em;

  -moz-context-properties: fill;

  fill: var(--color-accent-primary);

  @media (forced-colors) {

    fill: var(--icon-color);

  }

}



/**

 * Shortcuts

 */

toolkit/components/resistfingerprinting/RFPHelper.sys.mjs

+30 −5
Original line number Diff line number Diff line
@@ -221,7 +221,7 @@ class _RFPHelper { 
    switch (aMessage.type) {

      case "TabOpen": {

        let browser = aMessage.target.linkedBrowser;

        this._roundOrResetContentSize(browser, /* isNewTab = */ true);

        this._roundOrResetContentSize(browser, { isNewTab: true });

        let resizeObserver = this._resizeObservers.get(browser.ownerGlobal);

        resizeObserver.observe(browser.parentElement);

        break;
@@ -490,7 +490,7 @@ class _RFPHelper { 
    );

  }



  _roundOrResetContentSize(aBrowser, isNewTab = false) {

  _roundOrResetContentSize(aBrowser, context = {}) {

    // We won't do anything for lazy browsers.

    if (!aBrowser?.isConnected) {

      return;
@@ -499,7 +499,7 @@ class _RFPHelper { 
      // this tab doesn't need letterboxing

      this._resetContentSize(aBrowser);

    } else {

      this._roundContentSize(aBrowser, isNewTab);

      this._roundContentSize(aBrowser, context);

    }

  }
@@ -525,7 +525,8 @@ class _RFPHelper { 
  /**

   * The function will round the given browser size

   */

  async _roundContentSize(aBrowser, isNewTab = false) {

  async _roundContentSize(aBrowser, context) {

    const { isResize, isNewTab } = context;

    let logPrefix = `_roundContentSize[${Math.random()}]`;

    log(logPrefix);

    let win = aBrowser.ownerGlobal;
@@ -707,6 +708,26 @@ class _RFPHelper { 
          borderRadius === 0 ? "hidden" : "",

        "--letterboxing-border-radius": borderRadius,

      });



      if (

        isResize &&

        this.letterboxingEnabled &&

        (parentWidth > lastRoundedSize.width ||

          parentHeight > lastRoundedSize.height)

      ) {

        const updateStatus = async args => {

          win.XULBrowserWindow.letterboxingStatus = args

            ? await win.document.l10n.formatValue(

                "letterboxing-size-status",

                args

              )

            : "";

          win.StatusPanel.update();

        };

        updateStatus(lastRoundedSize);

        win.clearTimeout(win._letterboxingStatusTimeout);

        win._letterboxingStatusTimeout = win.setTimeout(updateStatus, 1000);

      }

    }



    // If the size of the content is already quantized, we do nothing.
@@ -809,8 +830,12 @@ class _RFPHelper { 
    aWindow.gBrowser.addTabsProgressListener(this);

    aWindow.addEventListener("TabOpen", this);

    let resizeObserver = new aWindow.ResizeObserver(entries => {

      const context = { isResize: true };

      for (let { target } of entries) {

        this._roundOrResetContentSize(target.querySelector("browser"));

        this._roundOrResetContentSize(

          target.querySelector("browser"),

          context

        );

      }

    });

    // Observe resizing of each browser's parent (gets rid of RPC from content