mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1633938 - Implement RDM zoom with transform. r=bradwerth 

Differential Revision: https://phabricator.services.mozilla.com/D72981
This commit is contained in:
Emilio Cobos Álvarez 2020-04-30 01:37:30 +00:00
Родитель e0c490b2cd
Коммит 321e28ab43
7 изменённых файлов: 77 добавлений и 75 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

10
devtools/client/responsive/browser/content.js
Просмотреть файл

@ -61,10 +61,8 @@ var global = this;
}
// At this point, a content viewer might not be loaded for this
// docshell. setDocumentInRDMPane and makeScrollbarsFloating will be
// triggered by onLocationChange.
// docshell. makeScrollbarsFloating will be triggered by onLocationChange.
if (docShell.contentViewer) {
setDocumentInRDMPane(true);
makeScrollbarsFloating();
}
active = true;
@ -128,7 +126,6 @@ var global = this;
webProgress.removeProgressListener(WebProgressListener);
docShell.deviceSizeIsPageSize = gDeviceSizeWasPageSize;
restoreScrollbars();
setDocumentInRDMPane(false);
stopOnResize();
sendAsyncMessage("ResponsiveMode:Stop:Done");
}
@ -171,11 +168,6 @@ var global = this;
flushStyle();
}
function setDocumentInRDMPane(inRDMPane) {
// We don't propegate this property to descendent documents.
docShell.browsingContext.inRDMPane = inRDMPane;
}
function flushStyle() {
// Force presContext destruction
const isSticky = docShell.contentViewer.sticky;

32
devtools/client/responsive/responsive-browser.css
Просмотреть файл

@ -31,6 +31,8 @@
--resizer-offset: 4px;
--browser-viewport-width: calc(var(--rdm-width) + var(--resizer-offset));
--browser-viewport-height: calc(var(--rdm-height) + var(--resizer-offset));
--rdm-zoomed-width: calc(var(--rdm-width) * var(--rdm-zoom));
--rdm-zoomed-height: calc(var(--rdm-height) * var(--rdm-zoom));
min-height: 0;
min-width: 0;
overflow: auto;
@ -66,6 +68,12 @@ html[dir="rtl"] .browserContainer.responsive-mode.left-aligned > .browserStack {
.browserContainer.responsive-mode > .browserStack > browser {
border: 1px solid var(--devtools-splitter-color);
box-shadow: var(--rdm-browser-box-shadow);
transform-origin: 50% 0;
transform: scale(var(--rdm-zoom), var(--rdm-zoom));
}
.browserContainer.responsive-mode.left-aligned > .browserStack > browser {
transform-origin: 0 0;
}
/* Resize handles */
@ -81,18 +89,38 @@ html[dir="rtl"] .browserContainer.responsive-mode.left-aligned > .browserStack {
cursor: nwse-resize;
align-self: end;
justify-self: right;
position: relative;
left: calc((var(--rdm-zoomed-width) - var(--rdm-width)) / 2);
top: calc(var(--rdm-zoomed-height) - var(--rdm-height));
}
.browserContainer.responsive-mode.left-aligned > .browserStack > .viewport-resize-handle {
left: calc(var(--rdm-zoomed-width) - var(--rdm-width));
}
.browserContainer.responsive-mode > .browserStack > .viewport-horizontal-resize-handle {
width: 5px;
height: calc(var(--rdm-height) - 16px);
height: calc(var(--rdm-zoomed-height) - 16px);
cursor: ew-resize;
justify-self: right;
position: relative;
left: calc((var(--rdm-zoomed-width) - var(--rdm-width)) / 2);
}
.browserContainer.responsive-mode.left-aligned > .browserStack > .viewport-horizontal-resize-handle {
left: calc(var(--rdm-zoomed-width) - var(--rdm-width));
}
.browserContainer.responsive-mode > .browserStack > .viewport-vertical-resize-handle {
width: calc(var(--rdm-width) - 16px);
width: calc(var(--rdm-zoomed-width) - 16px);
height: 5px;
cursor: ns-resize;
align-self: end;
position: relative;
top: calc(var(--rdm-zoomed-height) - var(--rdm-height));
left: calc((-1 * (var(--rdm-zoomed-width) - var(--rdm-width)) / 2));
}
.browserContainer.responsive-mode.left-aligned > .browserStack > .viewport-vertical-resize-handle {
left: 0;
}

2
devtools/client/responsive/test/browser/browser_viewport_zoom_resolution_invariant.js
Просмотреть файл

@ -34,7 +34,7 @@ const WIDTH = 200;
const HEIGHT = 200;
const TESTS = [
{ content: "width=600", res_target: 0.333 },
{ content: "width=600, initial-scale=1.0", res_target: 0.333 },
{ content: "width=600, initial-scale=1.0", res_target: 1.0 },
{ content: "width=device-width", res_target: 1.0 },
{ content: "width=device-width, initial-scale=2.0", res_target: 2.0 },
];

52
devtools/client/responsive/ui.js
Просмотреть файл

@ -197,22 +197,7 @@ class ResponsiveUI {
this.rdmFrame.contentWindow.addEventListener("message", this);
}
// Set the ui toolWindow to fullZoom and textZoom of 100%. Directly change
// the zoom levels of the toolwindow docshell. That doesn't affect the zoom
// of the RDM content, but it does send events that confuse the Zoom UI.
// So before we adjust the zoom levels of the toolWindow, we first cache
// the reported zoom levels of the RDM content, because we'll have to
// re-apply them to re-sync the Zoom UI.
// Cache the values now and we'll re-apply them near the end of this function.
// This is important since other steps here can also cause the Zoom UI update
// event to be sent for other browsers, and this means that the changes from
// our Zoom UI update event would be overwritten. After this function, future
// changes to zoom levels will send Zoom UI update events in an order that
// keeps the Zoom UI synchronized with the RDM content zoom levels.
const rdmContent = this.tab.linkedBrowser;
const fullZoom = rdmContent.fullZoom;
const textZoom = rdmContent.textZoom;
this.tab.linkedBrowser.enterResponsiveMode();
// Listen to FullZoomChange events coming from the browser window,
// so that we can zoom the size of the viewport by the same amount.
@ -244,20 +229,6 @@ class ResponsiveUI {
// Show the browser UI now that its state is ready.
this.showBrowserUI();
if (!this.isBrowserUIEnabled) {
// Force the newly created Zoom actor to cache its 1.0 zoom level. This
// prevents it from sending out FullZoomChange events when the content
// full zoom level is changed the first time.
const bc = this._toolWindow.docShell.browsingContext;
const zoomActor = bc.currentWindowGlobal.getActor("Zoom");
zoomActor.sendAsyncMessage("FullZoom", { value: 1.0 });
// Re-apply our cached zoom levels. Other Zoom UI update events have finished
// by now.
rdmContent.fullZoom = fullZoom;
rdmContent.textZoom = textZoom;
}
// Non-blocking message to tool UI to start any delayed init activities
message.post(this.toolWindow, "post-init");
@ -392,7 +363,6 @@ class ResponsiveUI {
await this.updateMaxTouchPointsEnabled(false);
if (this.isBrowserUIEnabled) {
await this.responsiveFront.setDocumentInRDMPane(false);
await this.responsiveFront.setFloatingScrollbars(false);
// Hide browser UI to avoid displaying weird intermediate states while closing.
@ -409,6 +379,7 @@ class ResponsiveUI {
this.tab.removeEventListener("TabClose", this);
this.tab.removeEventListener("BeforeTabRemotenessChange", this);
this.browserWindow.removeEventListener("unload", this);
this.tab.linkedBrowser.leaveResponsiveMode();
if (!this.isBrowserUIEnabled) {
this.tab.linkedBrowser.removeEventListener("FullZoomChange", this);
@ -430,6 +401,7 @@ class ResponsiveUI {
this.browserContainerEl.classList.remove("responsive-mode");
this.browserStackEl.style.removeProperty("--rdm-width");
this.browserStackEl.style.removeProperty("--rdm-height");
this.browserStackEl.style.removeProperty("--rdm-zoom");
}
if (!this.isBrowserUIEnabled && !isTabContentDestroying) {
@ -908,11 +880,11 @@ class ResponsiveUI {
*/
async restoreActorState() {
if (this.isBrowserUIEnabled) {
// It's possible the target will switch to a page loaded in the parent-process
// (i.e: about:robots). When this happens, the values set on the BrowsingContext
// by RDM are not preserved. So we need to set setDocumentInRDMPane = true whenever
// there is a target switch.
await this.responsiveFront.setDocumentInRDMPane(true);
// It's possible the target will switch to a page loaded in the
// parent-process (i.e: about:robots). When this happens, the values set
// on the BrowsingContext by RDM are not preserved. So we need to call
// enterResponsiveMode whenever there is a target switch.
this.tab.linkedBrowser.enterResponsiveMode();
// Apply floating scrollbar styles to document.
await this.responsiveFront.setFloatingScrollbars(true);
@ -1139,13 +1111,11 @@ class ResponsiveUI {
const zoom = this.tab.linkedBrowser.fullZoom;
const scaledWidth = width * zoom;
const scaledHeight = height * zoom;
// Setting this with a variable on the stack instead of directly as width/height
// on the <browser> because we'll need to use this for the alert dialog as well.
this.browserStackEl.style.setProperty("--rdm-width", `${scaledWidth}px`);
this.browserStackEl.style.setProperty("--rdm-height", `${scaledHeight}px`);
this.browserStackEl.style.setProperty("--rdm-width", `${width}px`);
this.browserStackEl.style.setProperty("--rdm-height", `${height}px`);
this.browserStackEl.style.setProperty("--rdm-zoom", zoom);
// This is a bit premature, but we emit a content-resize event here. It
// would be preferrable to wait until the viewport is actually resized,

6
devtools/server/actors/emulation/responsive.js
Просмотреть файл

@ -374,12 +374,6 @@ const ResponsiveActor = protocol.ActorClassWithSpec(responsiveSpec, {
return this.screenshotActor.capture({});
},
async setDocumentInRDMPane(inRDMPane) {
if (this.docShell && this.docShell.document) {
this.docShell.browsingContext.inRDMPane = inRDMPane;
}
},
/**
* Applies a mobile scrollbar overlay to the content document.
*

7
devtools/shared/specs/responsive.js
Просмотреть файл

@ -148,13 +148,6 @@ const responsiveSpec = generateActorSpec({
},
},
setDocumentInRDMPane: {
request: {
state: Arg(0, "boolean"),
},
response: {},
},
setFloatingScrollbars: {
request: {
state: Arg(0, "boolean"),

43
toolkit/content/widgets/browser-custom-element.js
Просмотреть файл

@ -96,6 +96,8 @@
this._characterSet = null;
this._documentContentType = null;
this._fullZoom = 1.0;
/**
* These are managed by the tabbrowser:
*/
@ -111,6 +113,12 @@
return new LazyModules.PopupBlocker(this);
});
this.addEventListener("FullZoomChange", function() {
if (!this.browsingContext.inRDMPane) {
this._fullZoom = this.browsingContext.fullZoom;
}
});
this.addEventListener(
"keypress",
event => {
@ -804,21 +812,28 @@
}
}
set fullZoom(val) {
if (val.toFixed(2) == this.fullZoom.toFixed(2)) {
return;
}
this.browsingContext.fullZoom = val;
}
get referrerInfo() {
return this.isRemoteBrowser
? this._referrerInfo
: this.contentDocument.referrerInfo;
}
set fullZoom(val) {
if (val.toFixed(2) == this.fullZoom.toFixed(2)) {
return;
}
this._fullZoom = val;
if (this.browsingContext.inRDMPane) {
let event = document.createEvent("Events");
event.initEvent("FullZoomChange", true, false);
this.dispatchEvent(event);
} else {
this.browsingContext.fullZoom = val;
}
}
get fullZoom() {
return this.browsingContext.fullZoom;
return this._fullZoom;
}
set textZoom(val) {
@ -832,6 +847,16 @@
return this.browsingContext.textZoom;
}
enterResponsiveMode() {
this.browsingContext.inRDMPane = true;
this.browsingContext.fullZoom = 1.0;
}
leaveResponsiveMode() {
this.browsingContext.inRDMPane = false;
this.browsingContext.fullZoom = this._fullZoom;
}
get isSyntheticDocument() {
if (this.isRemoteBrowser) {
return this._isSyntheticDocument;
@ -1786,7 +1811,7 @@
// DOMLinkAdded/Removed, onStateChange) should not be swapped here,
// because these notifications are dispatched again once the docshells
// are swapped.
var fieldsToSwap = ["_webBrowserFind"];
var fieldsToSwap = ["_webBrowserFind", "_fullZoom"];
if (this.isRemoteBrowser) {
fieldsToSwap.push(