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

Bug 32308: use direct browser sizing for letterboxing. 

Bug 30556: align letterboxing with 200x100 new win width stepping
parent 5ccf18ea

browser/actors/RFPHelperChild.sys.mjs

deleted100644 → 0
+0 −25
Original line number Diff line number Diff line 
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */

/* This Source Code Form is subject to the terms of the Mozilla Public

 * License, v. 2.0. If a copy of the MPL was not distributed with this

 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */



import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";



const kPrefLetterboxing = "privacy.resistFingerprinting.letterboxing";



const lazy = {};



XPCOMUtils.defineLazyPreferenceGetter(

  lazy,

  "isLetterboxingEnabled",

  kPrefLetterboxing,

  false

);



export class RFPHelperChild extends JSWindowActorChild {

  handleEvent(event) {

    if (lazy.isLetterboxingEnabled && event.type == "resize") {

      this.sendAsyncMessage("Letterboxing:ContentSizeUpdated");

    }

  }

}

browser/actors/RFPHelperParent.sys.mjs

deleted100644 → 0
+0 −33
Original line number Diff line number Diff line 
1; /* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */

/* This Source Code Form is subject to the terms of the Mozilla Public

 * License, v. 2.0. If a copy of the MPL was not distributed with this

 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */



import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";



const lazy = {};

ChromeUtils.defineESModuleGetters(lazy, {

  RFPHelper: "resource://gre/modules/RFPHelper.sys.mjs",

});



const kPrefLetterboxing = "privacy.resistFingerprinting.letterboxing";



XPCOMUtils.defineLazyPreferenceGetter(

  lazy,

  "isLetterboxingEnabled",

  kPrefLetterboxing,

  false

);



export class RFPHelperParent extends JSWindowActorParent {

  receiveMessage(aMessage) {

    if (

      lazy.isLetterboxingEnabled &&

      aMessage.name == "Letterboxing:ContentSizeUpdated"

    ) {

      let browser = this.browsingContext.top.embedderElement;

      let window = browser.ownerGlobal;

      lazy.RFPHelper.contentSizeUpdated(window);

    }

  }

}

browser/actors/moz.build

+0 −2
Original line number Diff line number Diff line
@@ -77,8 +77,6 @@ FINAL_TARGET_FILES.actors += [ 
    "PromptParent.sys.mjs",

    "RefreshBlockerChild.sys.mjs",

    "RefreshBlockerParent.sys.mjs",

    "RFPHelperChild.sys.mjs",

    "RFPHelperParent.sys.mjs",

    "ScreenshotsComponentChild.sys.mjs",

    "SearchSERPTelemetryChild.sys.mjs",

    "SearchSERPTelemetryParent.sys.mjs",

browser/app/profile/001-base-profile.js

+4 −0
Original line number Diff line number Diff line
@@ -373,6 +373,10 @@ pref("security.remote_settings.intermediates.enabled", false); 
pref("dom.use_components_shim", false);

// Enable letterboxing

pref("privacy.resistFingerprinting.letterboxing", true);

// tor-browser#41917 center letterboxed area vertically

pref("privacy.resistFingerprinting.letterboxing.vcenter", true);

// tor-browser#41917 letterboxing gradient background

pref("privacy.resistFingerprinting.letterboxing.gradient", true);

// tor-browser#33282: new windows start at 1400x900 when there's enough screen space, otherwise down by 200x100 blocks

pref("privacy.window.maxInnerWidth", 1400);

pref("privacy.window.maxInnerHeight", 900);

browser/base/content/browser.css

+105 −5
Original line number Diff line number Diff line
@@ -129,14 +129,114 @@ body { 


/**

  Never modify the following selector without synchronizing

  LETTERBOX_CSS_SELECTOR in RFPHelper.jsm!

  LETTERBOX_CSS_SELECTOR in RFPHelper.sys.jsm, where

  --letterboxing-width & --letterboxing-height are actually set.

**/

.letterboxing .browserStack > browser:not(.exclude-letterboxing) {

  margin: 0; /* to be dynamically set by RFHelper.jsm */

.letterboxing .browserContainer {

  /*

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

  and without this trick the .browserStack's resize observer

  doesn't get notified on horizontal shrinking.

  */

  overflow-x: hidden;

  background: var(--letterboxing-bgcolor);

}



.browserDecorator {

  display: none;

  pointer-events: none;

  background: transparent;

  position: relative;

  z-index: 1;

}



.letterboxing {

  --letterboxing-border-radius: 8px;

  --letterboxing-border-top-radius: 0;

  --letterboxing-vertical-alignment: start;

  --letterboxing-shadow-color: rgba(12, 12, 13, 0.10);

  --letterboxing-bgcolor: var(--tabpanel-background-color);

  --letterboxing-gradient-color1: var(--letterboxing-bgcolor);

  --letterboxing-gradient-color2: color-mix(in srgb, var(--chrome-content-separator-color) 50%, var(--letterboxing-bgcolor));

  --letterboxing-border-color: var(--letterboxing-bgcolor);

  --letterboxing-decorator-visibility: visible;

}



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

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

  --letterboxing-vertical-alignment: center;

}



.letterboxing.letterboxing-gradient .browserContainer {

  background: linear-gradient(283deg, var(--letterboxing-gradient-color1) 0%, var(--letterboxing-gradient-color2) 100%), var(--letterboxing-bgcolor);

}



:root:not([inDOMFullscreen]) .letterboxing .browserContainer:not(.responsive-mode)

  > .browserStack:not(.exclude-letterboxing)

  > .browserDecorator {

  display: initial;

  visibility: var(--letterboxing-decorator-visibility);

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

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

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

  box-shadow: var(--letterboxing-border-color) 0px 0px .1px inset, var(--letterboxing-border-color) 0 0 .1px;

  border: .1px solid var(--letterboxing-border-color);

  outline: .1px solid var(--letterboxing-bgcolor);

  height: calc(var(--letterboxing-height) + 1px);

  top: -1px;

}



.letterboxing-vcenter .browserDecorator {

  height: auto !important;

  top: 0 !important;

}



/*

  Align status bar with content.

  TODO: switch to nested CSS selectors for conciseness when available (Firefox >= 117)

*/

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

  > #statuspanel:not([hidden]) {

  position: relative;

  place-self: end left;

  left: 0;

  right: 0;

  z-index: 2;

  --letterboxing-status-left-radius: var(--letterboxing-border-radius);

  --letterboxing-status-right-radius: 0;

}

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

  > #statuspanel:not([mirror]):-moz-locale-dir(rtl),

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

  > #statuspanel[mirror]:-moz-locale-dir(ltr) {

  left: 0;

  right: 0;

  --letterboxing-status-right-radius: var(--letterboxing-border-radius);

  --letterboxing-status-left-radius: 0;

  justify-self: right;

}



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

#statuspanel-label {

  border-radius: 0 0 var(--letterboxing-status-right-radius) var(--letterboxing-status-left-radius);

  margin: 0;

  border: 1px solid var(--letterboxing-border-color);

  max-width: calc(var(--letterboxing-width) * .5);

}



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

  box-shadow: 0px 4px 8px 0px var(--letterboxing-shadow-color);

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

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

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

  width: var(--letterboxing-width) !important;

  height: var(--letterboxing-height) !important;

  background: var(--letterboxing-gradient-color2);

}



browser.exclude-letterboxing {

  margin: 0 !important;

:root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode)

  > .browserStack:not(.exclude-letterboxing) {

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

}



#toolbar-menubar[autohide="true"] {