Bug 32220: Improve the letterboxing experience

CSS and JS changes to alter the UX surrounding letterboxing. The
browser element containing page content is now anchored to the bottom
of the toolbar, and the remaining letterbox margin is the same color
as the firefox chrome. The letterbox margin and outline are tied to
the currently selected theme.

Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1594455

browser/base/content/browser.css

@@ -104,10 +104,18 @@ body {
 **/
 .letterboxing .browserStack > browser:not(.exclude-letterboxing) {
   margin: 0; /* to be dynamically set by RFHelper.jsm */
+  outline: 1px solid var(--chrome-content-separator-color);
 }
 
 browser.exclude-letterboxing {
   margin: 0 !important;
+  outline: initial;
+}
+
+/* extend down the toolbar's colors when letterboxing is enabled */
+.letterboxing {
+  background-color: var(--toolbar-bgcolor);
+  background-image: var(--toolbar-bgimage);
 }
 
 #toolbar-menubar[autohide="true"] {

toolkit/components/resistfingerprinting/RFPHelper.jsm

@@ -515,6 +515,7 @@ class _RFPHelper {
     // Calculating the margins around the browser element in order to round the
     // content viewport. We will use a 200x100 stepping if the dimension set
     // is not given.
+    // Margin and outline colors are set in browser.css (.letterboxing  * selectors).
 
     const buildMarginStyleString = (aWidth, aHeight) => {
       const marginDims = calcMargins(aWidth, aHeight);
@@ -577,9 +578,10 @@ class _RFPHelper {
     }
 
     log(`${logPrefix} setting margins to ${marginStyleString}`);
-    // One cannot (easily) control the color of a margin unfortunately.
-    // An initial attempt to use a border instead of a margin resulted
-    // in offset event dispatching; so for now we use a colorless margin.
+    // Here we set the browser's margin to round its content size.
+    // A "border" visual is created by using a CSS outline, which does't
+    // affect layout, while the background appearance is borrowed from the
+    // toolbar and set in the .letterboxing ancestor (see browser.css).
     marginChanges.perform();
   }