Commit 8fdf9651 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 f8db6563

browser/components/tabbrowser/content/tabbrowser.js

+1 −0
Original line number Diff line number Diff line
@@ -8783,6 +8783,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

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

  }



  &[type="letterboxingStatus"],

  &[type="overLink"] {

    transition:

      opacity 120ms ease-out,
@@ -186,12 +187,15 @@ 
    direction: ltr;

  }



  .browserStack:not(.letterboxingStatus) &[type="letterboxingStatus"],

  .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,
@@ -242,6 +246,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: 0.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

+53 −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,35 @@ class _RFPHelper { 
          borderRadius === 0 ? "hidden" : "",

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

      });

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

        const updateStatus = async args => {

          win.XULBrowserWindow.letterboxingStatus = args

            ? await win.document.l10n.formatValue(

                "letterboxing-size-status",

                args

              )

            : "";

          win.StatusPanel.update();

        };

        if (

          isResize &&

          this.letterboxingEnabled &&

          (parentWidth > lastRoundedSize.width ||

            parentHeight > lastRoundedSize.height)

        ) {

          const clazz = "letterboxingStatus";

          const currentParent = win.document.getElementsByClassName(clazz)[0];

          if (currentParent != browserParent) {

            currentParent?.classList.remove(clazz);

            browserParent.classList.add(clazz);

          }

          updateStatus(lastRoundedSize);

          win.clearTimeout(win._letterboxingStatusTimeout);

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

        } else {

          updateStatus("");

        }

      }

    }



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

    aWindow.addEventListener("TabOpen", this);

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

      const context = { isResize: true };

      if (entries.length == 1) {

        const { target } = entries[0];

        if (!("_letterboxingNew" in target)) {

          target._letterboxingNew = !entries[0].contentRect.width;

          if (target._letterboxingNew) {

            return;

          }

          context.isResize = false;

        } else if (target._letterboxingNew) {

          target._letterboxingNew = false;

          context.isResize = false;

        }

      }



      for (let { target } of entries) {

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

        this._roundOrResetContentSize(

          target.getElementsByTagName("browser")[0],

          context

        );

      }

    });

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