Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-19 16:25:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1579178 Part 4: Update test functions and an existing zoom test to work with new RDM UI. r=mtigley

Browse Source 
This patch does several related things:
1) Updates the test helper functions in ui.js to make them sensible
for both the old and new RDM UI.
2) Updates the test helper function addRDMTask to return the correct
"browser" values for both RDM UIs. Old RDM UI tests that want to
spawn a content task should now use ui.getViewportBrowser() for that,
and only use the browser value for getting/setting of zoom and any
other methods that take browsers as arguments.
3) Updates the test helper function promiseRDM to make it wait on
the correct event.
4) Updates a non-zoom test that uses addRDMTask to use the new
browser value correctly.
5) Updates a zoom test to use the addRDMTask function, and therefore
run the test using the new RDM UI. This test exercises the issue
that is the focus of this bug.

Differential Revision: https://phabricator.services.mozilla.com/D56510

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Brad Werth 2019-12-13 19:13:00 +00:00
parent 21a5598360
commit a226876281
4 changed files with 103 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
devtools/client/responsive/test/browser/browser_in_rdm_pane.js
View File

@ -10,15 +10,21 @@ const TEST_URL = "http://example.com/";
addRDMTask(
TEST_URL,
async function({ browser }) {
const contentURL = await ContentTask.spawn(browser, {}, function() {
async function({ ui }) {
const viewportBrowser = ui.getViewportBrowser();
const contentURL = await ContentTask.spawn(viewportBrowser, {}, function() {
return content.document.URL;
});
info("content URL is " + contentURL);
const contentInRDMPane = await ContentTask.spawn(browser, {}, function() {
return content.docShell.browsingContext.inRDMPane;
});
const contentInRDMPane = await ContentTask.spawn(
viewportBrowser,
{},
function() {
return content.docShell.browsingContext.inRDMPane;
}
);
ok(
contentInRDMPane,

152
devtools/client/responsive/test/browser/browser_viewport_zoom_resolution_invariant.js
View File

@ -6,90 +6,84 @@
// Test that resolution is as expected for different types of meta viewport
// settings, as the RDM pane is zoomed to different values.
add_task(async function() {
// Turn on the pref that allows meta viewport support.
await SpecialPowers.pushPrefEnv({
set: [["devtools.responsive.metaViewport.enabled", true]],
});
const RESOLUTION_FACTOR_MIN = 0.96;
const RESOLUTION_FACTOR_MAX = 1.04;
const ZOOM_LEVELS = [
0.3,
0.5,
0.67,
0.8,
0.9,
1.0,
1.1,
1.2,
1.33,
1.5,
1.7,
2.0,
2.4,
3.0,
];
const RESOLUTION_FACTOR_MIN = 0.96;
const RESOLUTION_FACTOR_MAX = 1.04;
const ZOOM_LEVELS = [
0.3,
0.5,
0.67,
0.8,
0.9,
1.0,
1.1,
1.2,
1.33,
1.5,
1.7,
2.0,
2.4,
3.0,
];
info("--- Starting viewport test output ---");
info("--- Starting viewport test output ---");
const WIDTH = 200;
const HEIGHT = 200;
const TESTS = [
{ content: "width=600", 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 },
];
const WIDTH = 200;
const HEIGHT = 200;
const TESTS = [
{ content: "width=600", 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 },
];
for (const { content, res_target } of TESTS) {
const TEST_URL =
`data:text/html;charset=utf-8,` +
`<html><head><meta name="viewport" content="${content}"></head>` +
`<body><div style="width:100%;background-color:green">${content}</div>` +
`</body></html>`;
for (const { content, res_target } of TESTS) {
info(`Using meta viewport content "${content}".`);
addRDMTask(
TEST_URL,
async function({ ui, manager, browser, usingBrowserUI }) {
info(
`Using meta viewport content "${content}" with new RDM UI ${usingBrowserUI}.`
);
const TEST_URL =
`data:text/html;charset=utf-8,` +
`<html><head><meta name="viewport" content="${content}"></head>` +
`<body><div style="width:100%;background-color:green">${content}</div>` +
`</body></html>`;
const tab = await addTab(TEST_URL);
const browser = tab.linkedBrowser;
const { ui, manager } = await openRDM(tab);
const store = ui.toolWindow.store;
// Wait until the viewport has been added.
await waitUntilState(store, state => state.viewports.length == 1);
await setViewportSize(ui, manager, WIDTH, HEIGHT);
await setTouchAndMetaViewportSupport(ui, true);
// Randomize the order that we'll check the zoom levels.
const random_zoom_levels = ZOOM_LEVELS.slice();
const l = random_zoom_levels.length;
for (let i = l - 1; i > 0; i--) {
const j = Math.floor(Math.random() * l);
const temp = random_zoom_levels[i];
random_zoom_levels[i] = random_zoom_levels[j];
random_zoom_levels[j] = temp;
}
for (const zoom of random_zoom_levels) {
info(`Set zoom to ${zoom}.`);
await promiseRDMZoom(ui, browser, zoom);
const resolution = await spawnViewportTask(ui, {}, () => {
return content.windowUtils.getResolution();
// Turn on the pref that allows meta viewport support.
await SpecialPowers.pushPrefEnv({
set: [["devtools.responsive.metaViewport.enabled", true]],
});
const res_min = res_target * RESOLUTION_FACTOR_MIN;
const res_max = res_target * RESOLUTION_FACTOR_MAX;
ok(
res_min <= resolution && res_max >= resolution,
`${content} zoom ${zoom} resolution should be near ${res_target}, and we got ${resolution}.`
);
}
await setViewportSize(ui, manager, WIDTH, HEIGHT);
await setTouchAndMetaViewportSupport(ui, true);
await closeRDM(tab);
await removeTab(tab);
}
});
// Randomize the order that we'll check the zoom levels.
const random_zoom_levels = ZOOM_LEVELS.slice();
const l = random_zoom_levels.length;
for (let i = l - 1; i > 0; i--) {
const j = Math.floor(Math.random() * l);
const temp = random_zoom_levels[i];
random_zoom_levels[i] = random_zoom_levels[j];
random_zoom_levels[j] = temp;
}
for (const zoom of random_zoom_levels) {
info(`Set zoom to ${zoom}.`);
await promiseRDMZoom(ui, browser, zoom);
const resolution = await spawnViewportTask(ui, {}, () => {
return content.windowUtils.getResolution();
});
const res_min = res_target * RESOLUTION_FACTOR_MIN;
const res_max = res_target * RESOLUTION_FACTOR_MAX;
ok(
res_min <= resolution && res_max >= resolution,
`${content} zoom ${zoom} resolution should be near ${res_target}, and we got ${resolution}.`
);
}
},
true
);
}

15
devtools/client/responsive/test/browser/head.js
View File

@ -154,9 +154,7 @@ function addRDMTask(rdmUrl, rdmTask, includeBrowserEmbeddedUI) {
const usingBrowserUI = Services.prefs.getBoolPref(
"devtools.responsive.browserUI.enabled"
);
const browser = usingBrowserUI
? tab.linkedBrowser
: ui.getViewportBrowser();
const browser = tab.linkedBrowser;
try {
await task({ ui, manager, browser, usingBrowserUI });
} catch (err) {
@ -832,14 +830,13 @@ function promiseRDMZoom(ui, browser, zoom) {
return;
}
const zoomComplete = BrowserTestUtils.waitForEvent(
browser,
"PostFullZoomChange"
);
ZoomManager.setZoomForBrowser(browser, zoom);
// Await the zoom complete event, then reflow.
BrowserTestUtils.waitForContentEvent(
ui.getViewportBrowser(),
"ZoomComplete"
)
.then(promiseContentReflow(ui))
.then(resolve);
zoomComplete.then(promiseContentReflow(ui)).then(resolve);
});
}

15
devtools/client/responsive/ui.js
View File

@ -849,7 +849,11 @@ class ResponsiveUI {
* Helper for tests. Assumes a single viewport for now.
*/
getViewportSize() {
return this.toolWindow.getViewportSize();
if (!this.isBrowserUIEnabled) {
return this.toolWindow.getViewportSize();
}
return this.rdmFrame.contentWindow.getViewportSize();
}
/**
@ -857,7 +861,13 @@ class ResponsiveUI {
*/
async setViewportSize(size) {
await this.inited;
this.toolWindow.setViewportSize(size);
if (!this.isBrowserUIEnabled) {
this.toolWindow.setViewportSize(size);
return;
}
const { width, height } = size;
this.updateViewportSize(width, height);
}
/**
@ -867,6 +877,7 @@ class ResponsiveUI {
if (!this.isBrowserUIEnabled) {
return this.toolWindow.getViewportBrowser();
}
return this.tab.linkedBrowser;
}