| ... |
... |
@@ -95,7 +95,7 @@ class _RFPHelper { |
|
95
|
95
|
case kTopicDOMWindowOpened:
|
|
96
|
96
|
// We attach to the newly created window by adding tabsProgressListener
|
|
97
|
97
|
// and event listener on it. We listen for new tabs being added or
|
|
98
|
|
- // the change of the content principal and apply margins accordingly.
|
|
|
98
|
+ // the change of the content principal and round browser sizes accordingly.
|
|
99
|
99
|
this._handleDOMWindowOpened(subject);
|
|
100
|
100
|
break;
|
|
101
|
101
|
default:
|
| ... |
... |
@@ -106,8 +106,9 @@ class _RFPHelper { |
|
106
|
106
|
handleEvent(aMessage) {
|
|
107
|
107
|
switch (aMessage.type) {
|
|
108
|
108
|
case "TabOpen": {
|
|
109
|
|
- let tab = aMessage.target;
|
|
110
|
|
- this._addOrClearContentMargin(tab.linkedBrowser, /* isNewTab = */ true);
|
|
|
109
|
+ let browser = aMessage.target.linkedBrowser;
|
|
|
110
|
+ this._roundOrResetContentSize(browser, /* isNewTab = */ true);
|
|
|
111
|
+ browser.ownerGlobal._rfpResizeObserver.observe(browser.parentElement);
|
|
111
|
112
|
break;
|
|
112
|
113
|
}
|
|
113
|
114
|
default:
|
| ... |
... |
@@ -131,10 +132,6 @@ class _RFPHelper { |
|
131
|
132
|
}
|
|
132
|
133
|
}
|
|
133
|
134
|
|
|
134
|
|
- contentSizeUpdated(win) {
|
|
135
|
|
- this._updateMarginsForTabsInWindow(win);
|
|
136
|
|
- }
|
|
137
|
|
-
|
|
138
|
135
|
// ============================================================================
|
|
139
|
136
|
// Language Prompt
|
|
140
|
137
|
// ============================================================================
|
| ... |
... |
@@ -291,44 +288,22 @@ class _RFPHelper { |
|
291
|
288
|
// ============================================================================
|
|
292
|
289
|
/**
|
|
293
|
290
|
* We use the TabsProgressListener to catch the change of the content
|
|
294
|
|
- * principal. We would clear the margins around the content viewport if
|
|
295
|
|
- * it is the system principal.
|
|
|
291
|
+ * principal. We would reset browser size if it is the system principal.
|
|
296
|
292
|
*/
|
|
297
|
293
|
onLocationChange(aBrowser) {
|
|
298
|
|
- this._addOrClearContentMargin(aBrowser);
|
|
|
294
|
+ this._roundOrResetContentSize(aBrowser);
|
|
299
|
295
|
}
|
|
300
|
296
|
|
|
301
|
297
|
_handleLetterboxingPrefChanged() {
|
|
302
|
298
|
if (Services.prefs.getBoolPref(kPrefLetterboxing, false)) {
|
|
303
|
299
|
Services.ww.registerNotification(this);
|
|
304
|
|
- this._registerActor();
|
|
305
|
300
|
this._attachAllWindows();
|
|
306
|
301
|
} else {
|
|
307
|
|
- this._unregisterActor();
|
|
308
|
302
|
this._detachAllWindows();
|
|
309
|
303
|
Services.ww.unregisterNotification(this);
|
|
310
|
304
|
}
|
|
311
|
305
|
}
|
|
312
|
306
|
|
|
313
|
|
- _registerActor() {
|
|
314
|
|
- ChromeUtils.registerWindowActor("RFPHelper", {
|
|
315
|
|
- parent: {
|
|
316
|
|
- moduleURI: "resource:///actors/RFPHelperParent.jsm",
|
|
317
|
|
- },
|
|
318
|
|
- child: {
|
|
319
|
|
- moduleURI: "resource:///actors/RFPHelperChild.jsm",
|
|
320
|
|
- events: {
|
|
321
|
|
- resize: {},
|
|
322
|
|
- },
|
|
323
|
|
- },
|
|
324
|
|
- allFrames: true,
|
|
325
|
|
- });
|
|
326
|
|
- }
|
|
327
|
|
-
|
|
328
|
|
- _unregisterActor() {
|
|
329
|
|
- ChromeUtils.unregisterWindowActor("RFPHelper");
|
|
330
|
|
- }
|
|
331
|
|
-
|
|
332
|
307
|
// The function to parse the dimension set from the pref value. The pref value
|
|
333
|
308
|
// should be formated as 'width1xheight1, width2xheight2, ...'. For
|
|
334
|
309
|
// example, '100x100, 200x200, 400x200 ...'.
|
| ... |
... |
@@ -354,13 +329,13 @@ class _RFPHelper { |
|
354
|
329
|
|
|
355
|
330
|
getLetterboxingDefaultRule(aBrowser) {
|
|
356
|
331
|
let document = aBrowser.ownerDocument;
|
|
357
|
|
- return (document._letterboxingMarginsRule ||= (() => {
|
|
|
332
|
+ return (document._letterBoxingSizingRule ||= (() => {
|
|
358
|
333
|
// If not already cached on the document object, traverse the CSSOM and
|
|
359
|
334
|
// find the rule applying the default letterboxing styles to browsers
|
|
360
|
335
|
// preemptively in order to beat race conditions on tab/window creation
|
|
361
|
336
|
const LETTERBOX_CSS_URL = "chrome://browser/content/browser.css";
|
|
362
|
337
|
const LETTERBOX_CSS_SELECTOR =
|
|
363
|
|
- ".letterboxing .browserStack > browser:not(.exclude-letterboxing)";
|
|
|
338
|
+ ".letterboxing .browserStack:not(.exclude-letterboxing) > browser";
|
|
364
|
339
|
for (let ss of document.styleSheets) {
|
|
365
|
340
|
if (ss.href !== LETTERBOX_CSS_URL) {
|
|
366
|
341
|
continue;
|
| ... |
... |
@@ -389,23 +364,23 @@ class _RFPHelper { |
|
389
|
364
|
);
|
|
390
|
365
|
}
|
|
391
|
366
|
|
|
392
|
|
- _addOrClearContentMargin(aBrowser, isNewTab = false) {
|
|
|
367
|
+ _roundOrResetContentSize(aBrowser, isNewTab = false) {
|
|
393
|
368
|
// We won't do anything for lazy browsers.
|
|
394
|
|
- if (!aBrowser.isConnected) {
|
|
|
369
|
+ if (!aBrowser?.isConnected) {
|
|
395
|
370
|
return;
|
|
396
|
371
|
}
|
|
397
|
372
|
if (this._noLetterBoxingFor(aBrowser)) {
|
|
398
|
373
|
// this tab doesn't need letterboxing
|
|
399
|
|
- this._clearContentViewMargin(aBrowser);
|
|
|
374
|
+ this._resetContentSize(aBrowser);
|
|
400
|
375
|
} else {
|
|
401
|
|
- this._roundContentView(aBrowser, isNewTab);
|
|
|
376
|
+ this._roundContentSize(aBrowser, isNewTab);
|
|
402
|
377
|
}
|
|
403
|
378
|
}
|
|
404
|
379
|
|
|
405
|
380
|
/**
|
|
406
|
|
- * Given a width or height, returns the appropriate margin to apply.
|
|
|
381
|
+ * Given a width or height, rounds it with the proper stepping.
|
|
407
|
382
|
*/
|
|
408
|
|
- steppedRange(aDimension) {
|
|
|
383
|
+ steppedSize(aDimension) {
|
|
409
|
384
|
let stepping;
|
|
410
|
385
|
if (aDimension <= 50) {
|
|
411
|
386
|
return 0;
|
| ... |
... |
@@ -417,22 +392,21 @@ class _RFPHelper { |
|
417
|
392
|
stepping = 200;
|
|
418
|
393
|
}
|
|
419
|
394
|
|
|
420
|
|
- return (aDimension % stepping) / 2;
|
|
|
395
|
+ return aDimension - (aDimension % stepping);
|
|
421
|
396
|
}
|
|
422
|
397
|
|
|
423
|
398
|
/**
|
|
424
|
|
- * The function will round the given browser by adding margins around the
|
|
425
|
|
- * content viewport.
|
|
|
399
|
+ * The function will round the given browser size
|
|
426
|
400
|
*/
|
|
427
|
|
- async _roundContentView(aBrowser, isNewTab = false) {
|
|
428
|
|
- let logPrefix = `_roundContentView[${Math.random()}]`;
|
|
|
401
|
+ async _roundContentSize(aBrowser, isNewTab = false) {
|
|
|
402
|
+ let logPrefix = `_roundContentSize[${Math.random()}]`;
|
|
429
|
403
|
log(logPrefix);
|
|
430
|
|
- aBrowser.classList.remove("exclude-letterboxing");
|
|
431
|
404
|
let win = aBrowser.ownerGlobal;
|
|
432
|
405
|
let browserContainer = aBrowser
|
|
433
|
406
|
.getTabBrowser()
|
|
434
|
407
|
.getBrowserContainer(aBrowser);
|
|
435
|
408
|
let browserParent = aBrowser.parentElement;
|
|
|
409
|
+ browserParent.classList.remove("exclude-letterboxing");
|
|
436
|
410
|
let [
|
|
437
|
411
|
[contentWidth, contentHeight],
|
|
438
|
412
|
[parentWidth, parentHeight],
|
| ... |
... |
@@ -455,25 +429,27 @@ class _RFPHelper { |
|
455
|
429
|
return;
|
|
456
|
430
|
}
|
|
457
|
431
|
|
|
458
|
|
- const calcMargins = (aWidth, aHeight) => {
|
|
|
432
|
+ const roundDimensions = (aWidth, aHeight) => {
|
|
|
433
|
+ const r = (aWidth, aHeight) => ({
|
|
|
434
|
+ width: `${aWidth}px`,
|
|
|
435
|
+ height: `${aHeight}px`,
|
|
|
436
|
+ });
|
|
|
437
|
+
|
|
459
|
438
|
let result;
|
|
460
|
|
- log(`${logPrefix} calcMargins(${aWidth}, ${aHeight})`);
|
|
|
439
|
+ log(`${logPrefix} roundDimensions(${aWidth}, ${aHeight})`);
|
|
461
|
440
|
// If the set is empty, we will round the content with the default
|
|
462
|
441
|
// stepping size.
|
|
463
|
442
|
if (!this._letterboxingDimensions.length) {
|
|
464
|
|
- result = {
|
|
465
|
|
- width: this.steppedRange(aWidth),
|
|
466
|
|
- height: this.steppedRange(aHeight),
|
|
467
|
|
- };
|
|
|
443
|
+ result = r(this.steppedSize(aWidth), this.steppedSize(aHeight));
|
|
468
|
444
|
log(
|
|
469
|
|
- `${logPrefix} calcMargins(${aWidth}, ${aHeight}) = ${result.width} x ${result.height}`
|
|
|
445
|
+ `${logPrefix} roundDimensions(${aWidth}, ${aHeight}) = ${result.width} x ${result.height}`
|
|
470
|
446
|
);
|
|
471
|
447
|
return result;
|
|
472
|
448
|
}
|
|
473
|
449
|
|
|
474
|
450
|
let matchingArea = aWidth * aHeight;
|
|
475
|
451
|
let minWaste = Number.MAX_SAFE_INTEGER;
|
|
476
|
|
- let targetDimensions = undefined;
|
|
|
452
|
+ let targetDimensions;
|
|
477
|
453
|
|
|
478
|
454
|
// Find the desired dimensions which waste the least content area.
|
|
479
|
455
|
for (let dim of this._letterboxingDimensions) {
|
| ... |
... |
@@ -493,119 +469,119 @@ class _RFPHelper { |
|
493
|
469
|
|
|
494
|
470
|
// If we cannot find any dimensions match to the real content window, this
|
|
495
|
471
|
// means the content area is smaller the smallest size in the set. In this
|
|
496
|
|
- // case, we won't apply any margins.
|
|
497
|
|
- if (!targetDimensions) {
|
|
498
|
|
- result = {
|
|
499
|
|
- width: 0,
|
|
500
|
|
- height: 0,
|
|
501
|
|
- };
|
|
502
|
|
- } else {
|
|
503
|
|
- result = {
|
|
504
|
|
- width: (aWidth - targetDimensions.width) / 2,
|
|
505
|
|
- height: (aHeight - targetDimensions.height) / 2,
|
|
506
|
|
- };
|
|
507
|
|
- }
|
|
|
472
|
+ // case, we won't round the size and default to the max.
|
|
|
473
|
+ result = targetDimensions
|
|
|
474
|
+ ? r(targetDimensions.width, targetDimensions.height)
|
|
|
475
|
+ : r(aWidth, aHeight);
|
|
508
|
476
|
|
|
509
|
477
|
log(
|
|
510
|
|
- `${logPrefix} calcMargins(${aWidth}, ${aHeight}) = ${result.width} x ${result.height}`
|
|
|
478
|
+ `${logPrefix} roundDimensions(${aWidth}, ${aHeight}) = ${result.width} x ${result.height}`
|
|
511
|
479
|
);
|
|
512
|
480
|
return result;
|
|
513
|
481
|
};
|
|
514
|
482
|
|
|
515
|
|
- // Calculating the margins around the browser element in order to round the
|
|
516
|
|
- // content viewport. We will use a 200x100 stepping if the dimension set
|
|
517
|
|
- // is not given.
|
|
518
|
|
- // Margin and outline colors are set in browser.css (.letterboxing * selectors).
|
|
519
|
|
-
|
|
520
|
|
- const buildMarginStyleString = (aWidth, aHeight) => {
|
|
521
|
|
- const marginDims = calcMargins(aWidth, aHeight);
|
|
522
|
|
-
|
|
523
|
|
- // snap browser element to top
|
|
524
|
|
- const top = 0,
|
|
525
|
|
- // and leave 'double' margin at the bottom
|
|
526
|
|
- bottom = 2 * marginDims.height,
|
|
527
|
|
- // identical margins left and right
|
|
528
|
|
- left = marginDims.width,
|
|
529
|
|
- right = marginDims.width;
|
|
530
|
|
-
|
|
531
|
|
- return `${top}px ${right}px ${bottom}px ${left}px`;
|
|
532
|
|
- };
|
|
533
|
|
-
|
|
534
|
|
- const marginChanges = Object.assign([], {
|
|
535
|
|
- queueIfNeeded({ style }, margin) {
|
|
536
|
|
- if (style.margin !== margin) {
|
|
537
|
|
- this.push(() => {
|
|
538
|
|
- style.margin = margin;
|
|
539
|
|
- });
|
|
|
483
|
+ const styleChanges = Object.assign([], {
|
|
|
484
|
+ queueIfNeeded({ style }, props) {
|
|
|
485
|
+ for (let [name, value] of Object.entries(props)) {
|
|
|
486
|
+ if (style[name] !== value) {
|
|
|
487
|
+ this.push(() => {
|
|
|
488
|
+ style.setProperty(name, value, "important");
|
|
|
489
|
+ });
|
|
|
490
|
+ }
|
|
540
|
491
|
}
|
|
541
|
492
|
},
|
|
542
|
493
|
perform() {
|
|
543
|
494
|
win.requestAnimationFrame(() => {
|
|
544
|
495
|
for (let change of this) {
|
|
545
|
|
- change();
|
|
|
496
|
+ try {
|
|
|
497
|
+ change();
|
|
|
498
|
+ } catch (e) {
|
|
|
499
|
+ logConsole.error(e);
|
|
|
500
|
+ }
|
|
546
|
501
|
}
|
|
547
|
502
|
});
|
|
548
|
503
|
},
|
|
549
|
504
|
});
|
|
550
|
505
|
|
|
551
|
|
- marginChanges.queueIfNeeded(
|
|
|
506
|
+ const roundedDefault = roundDimensions(containerWidth, containerHeight);
|
|
|
507
|
+
|
|
|
508
|
+ styleChanges.queueIfNeeded(
|
|
552
|
509
|
this.getLetterboxingDefaultRule(aBrowser),
|
|
553
|
|
- buildMarginStyleString(containerWidth, containerHeight)
|
|
|
510
|
+ roundedDefault
|
|
554
|
511
|
);
|
|
555
|
512
|
|
|
556
|
|
- const marginStyleString =
|
|
|
513
|
+ const roundedInline =
|
|
557
|
514
|
!isNewTab && // new tabs cannot have extra UI components
|
|
558
|
515
|
(containerHeight > parentHeight || containerWidth > parentWidth)
|
|
559
|
516
|
? // optional UI components such as the notification box, the find bar
|
|
560
|
517
|
// or devtools are constraining this browser's size: recompute custom
|
|
561
|
|
- buildMarginStyleString(parentWidth, parentHeight)
|
|
562
|
|
- : ""; // otherwise we can keep the default letterboxing margins
|
|
563
|
|
- marginChanges.queueIfNeeded(aBrowser, marginStyleString);
|
|
|
518
|
+ roundDimensions(parentWidth, parentHeight)
|
|
|
519
|
+ : { width: "", height: "" }; // otherwise we can keep the default (rounded) size
|
|
|
520
|
+ styleChanges.queueIfNeeded(aBrowser, roundedInline);
|
|
564
|
521
|
|
|
565
|
522
|
// If the size of the content is already quantized, we do nothing.
|
|
566
|
|
- if (!marginChanges.length) {
|
|
|
523
|
+ if (!styleChanges.length) {
|
|
567
|
524
|
log(`${logPrefix} is_rounded == true`);
|
|
568
|
525
|
if (this._isLetterboxingTesting) {
|
|
569
|
526
|
log(
|
|
570
|
|
- `${logPrefix} is_rounded == true test:letterboxing:update-margin-finish`
|
|
|
527
|
+ `${logPrefix} is_rounded == true test:letterboxing:update-size-finish`
|
|
571
|
528
|
);
|
|
572
|
529
|
Services.obs.notifyObservers(
|
|
573
|
530
|
null,
|
|
574
|
|
- "test:letterboxing:update-margin-finish"
|
|
|
531
|
+ "test:letterboxing:update-size-finish"
|
|
575
|
532
|
);
|
|
576
|
533
|
}
|
|
577
|
534
|
return;
|
|
578
|
535
|
}
|
|
579
|
536
|
|
|
580
|
|
- log(`${logPrefix} setting margins to ${marginStyleString}`);
|
|
581
|
|
- // Here we set the browser's margin to round its content size.
|
|
|
537
|
+ log(
|
|
|
538
|
+ `${logPrefix} setting size to ${JSON.stringify({
|
|
|
539
|
+ roundedDefault,
|
|
|
540
|
+ roundedInline,
|
|
|
541
|
+ })}`
|
|
|
542
|
+ );
|
|
|
543
|
+ // Here we round the browser's size through CSS.
|
|
582
|
544
|
// A "border" visual is created by using a CSS outline, which does't
|
|
583
|
545
|
// affect layout, while the background appearance is borrowed from the
|
|
584
|
546
|
// toolbar and set in the .letterboxing ancestor (see browser.css).
|
|
585
|
|
- marginChanges.perform();
|
|
|
547
|
+ styleChanges.perform();
|
|
586
|
548
|
}
|
|
587
|
549
|
|
|
588
|
|
- _clearContentViewMargin(aBrowser) {
|
|
589
|
|
- aBrowser.classList.add("exclude-letterboxing");
|
|
|
550
|
+ _resetContentSize(aBrowser) {
|
|
|
551
|
+ aBrowser.parentElement.classList.add("exclude-letterboxing");
|
|
590
|
552
|
}
|
|
591
|
553
|
|
|
592
|
|
- _updateMarginsForTabsInWindow(aWindow) {
|
|
|
554
|
+ _updateSizeForTabsInWindow(aWindow) {
|
|
593
|
555
|
let tabBrowser = aWindow.gBrowser;
|
|
594
|
556
|
|
|
595
|
557
|
tabBrowser.tabpanels?.classList.add("letterboxing");
|
|
596
|
558
|
|
|
597
|
559
|
for (let tab of tabBrowser.tabs) {
|
|
598
|
560
|
let browser = tab.linkedBrowser;
|
|
599
|
|
- this._addOrClearContentMargin(browser);
|
|
|
561
|
+ this._roundOrResetContentSize(browser);
|
|
600
|
562
|
}
|
|
|
563
|
+ // we need to add this class late because otherwise new windows get maximized
|
|
|
564
|
+ aWindow.setTimeout(() => {
|
|
|
565
|
+ tabBrowser.tabpanels?.classList.add("letterboxing-ready");
|
|
|
566
|
+ });
|
|
601
|
567
|
}
|
|
602
|
568
|
|
|
603
|
569
|
_attachWindow(aWindow) {
|
|
604
|
570
|
aWindow.gBrowser.addTabsProgressListener(this);
|
|
605
|
571
|
aWindow.addEventListener("TabOpen", this);
|
|
606
|
|
-
|
|
|
572
|
+ const resizeObserver = (aWindow._rfpResizeObserver = new aWindow.ResizeObserver(
|
|
|
573
|
+ entries => {
|
|
|
574
|
+ for (let { target } of entries) {
|
|
|
575
|
+ this._roundOrResetContentSize(target.querySelector("browser"));
|
|
|
576
|
+ }
|
|
|
577
|
+ }
|
|
|
578
|
+ ));
|
|
|
579
|
+ // observe resizing of each browser's parent (gets rid of RPC from content windows)
|
|
|
580
|
+ for (let bs of aWindow.document.querySelectorAll(".browserStack")) {
|
|
|
581
|
+ resizeObserver.observe(bs);
|
|
|
582
|
+ }
|
|
607
|
583
|
// Rounding the content viewport.
|
|
608
|
|
- this._updateMarginsForTabsInWindow(aWindow);
|
|
|
584
|
+ this._updateSizeForTabsInWindow(aWindow);
|
|
609
|
585
|
}
|
|
610
|
586
|
|
|
611
|
587
|
_attachAllWindows() {
|
| ... |
... |
@@ -625,15 +601,17 @@ class _RFPHelper { |
|
625
|
601
|
_detachWindow(aWindow) {
|
|
626
|
602
|
let tabBrowser = aWindow.gBrowser;
|
|
627
|
603
|
tabBrowser.removeTabsProgressListener(this);
|
|
|
604
|
+ aWindow._rfpResizeObserver.disconnect();
|
|
|
605
|
+ delete aWindow._rfpResizeObserver;
|
|
628
|
606
|
aWindow.removeEventListener("TabOpen", this);
|
|
629
|
607
|
|
|
630
|
608
|
// revert tabpanel's style to default
|
|
631
|
609
|
tabBrowser.tabpanels?.classList.remove("letterboxing");
|
|
632
|
610
|
|
|
633
|
|
- // and restore default margins on each browser element
|
|
|
611
|
+ // and restore default size on each browser element
|
|
634
|
612
|
for (let tab of tabBrowser.tabs) {
|
|
635
|
613
|
let browser = tab.linkedBrowser;
|
|
636
|
|
- this._clearContentViewMargin(browser);
|
|
|
614
|
+ this._resetContentSize(browser);
|
|
637
|
615
|
}
|
|
638
|
616
|
}
|
|
639
|
617
|
|