Commit 49546dc3 authored by ma1's avatar ma1 Committed by Beatriz Rizental
Browse files

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

parent 868f7515

browser/components/tabbrowser/content/tabbrowser.js

+1 −0
Original line number Diff line number Diff line
@@ -8019,6 +8019,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
@@ -167,6 +167,7 @@ 
    min-width: min(23em, 33%);

  }



  &[type=letterboxingStatus],

  &[type=overLink] {

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

  }
@@ -175,12 +176,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;

    }
@@ -229,6 +232,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
@@ -215,7 +215,7 @@ class _RFPHelper { 
    switch (aMessage.type) {

      case "TabOpen": {

        let browser = aMessage.target.linkedBrowser;

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

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

        browser.ownerGlobal._rfpResizeObserver.observe(browser.parentElement);

        break;

      }
@@ -483,7 +483,7 @@ class _RFPHelper { 
    );

  }



  _roundOrResetContentSize(aBrowser, isNewTab = false) {

  _roundOrResetContentSize(aBrowser, context = {}) {

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

    if (!aBrowser?.isConnected) {

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

      this._resetContentSize(aBrowser);

    } else {

      this._roundContentSize(aBrowser, isNewTab);

      this._roundContentSize(aBrowser, context);

    }

  }
@@ -518,7 +518,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;
@@ -690,6 +691,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.
@@ -792,8 +813,12 @@ class _RFPHelper { 
    aWindow.addEventListener("TabOpen", this);

    const resizeObserver = (aWindow._rfpResizeObserver =

      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 windows)