commit c8a58ee14289223adb851543830129b3397efde5
parent ea0343adb07dec6d6af6068cddde8041bfe846db
Author: Serban Stanca <sstanca@mozilla.com>
Date: Tue, 28 Oct 2025 18:53:44 +0200
Revert "Bug 1979518 - [devtools] Always specify the size of the screenshot to be taken. r=ochameau,devtools-reviewers" as requested by @ochameau.
This reverts commit a8fb4f85a8f750054e15233b0398eec7ce313136.
Diffstat:
7 files changed, 106 insertions(+), 111 deletions(-)
diff --git a/devtools/client/responsive/test/browser/browser.toml b/devtools/client/responsive/test/browser/browser.toml
@@ -91,8 +91,6 @@ tags = "devtools webextensions"
["browser_eyedropper.js"]
-["browser_eyedropper_desktop.js"]
-
["browser_eyedropper_update.js"]
skip-if = [
"os == 'linux' && os_version == '18.04' && processor == 'x86_64' && tsan",
diff --git a/devtools/client/responsive/test/browser/browser_eyedropper.js b/devtools/client/responsive/test/browser/browser_eyedropper.js
@@ -7,7 +7,7 @@
const TEST_URL =
"data:text/html;charset=utf-8,<meta name='viewport' content='width=device-width' /><iframe></iframe>";
-addRDMTask(TEST_URL, async function () {
+addRDMTask(TEST_URL, async function ({ ui }) {
info(
"Test that the eyedropper follows the mouse in RDM without touch simulation"
);
@@ -15,7 +15,7 @@ addRDMTask(TEST_URL, async function () {
const { inspector, highlighterTestFront } = await openInspector();
await openEyeDropper(inspector, highlighterTestFront);
- await checkEyeDropperFollowsMouse(highlighterTestFront);
+ await checkEyeDropperFollowsMouse(ui, highlighterTestFront);
});
addRDMTask(TEST_URL, async function ({ ui }) {
@@ -29,19 +29,41 @@ addRDMTask(TEST_URL, async function ({ ui }) {
const { inspector, highlighterTestFront } = await openInspector();
await openEyeDropper(inspector, highlighterTestFront);
- await checkEyeDropperFollowsMouse(highlighterTestFront);
+ await checkEyeDropperFollowsMouse(ui, highlighterTestFront);
});
-async function checkEyeDropperFollowsMouse(highlighterTestFront) {
+async function openEyeDropper(inspector, highlighterTestFront) {
+ info("Opening the eyedropper");
+ const toggleButton = inspector.panelDoc.querySelector(
+ "#inspector-eyedropper-toggle"
+ );
+ toggleButton.click();
+ await TestUtils.waitForCondition(() =>
+ highlighterTestFront.isEyeDropperVisible()
+ );
+}
+
+async function checkEyeDropperFollowsMouse(ui, highlighterTestFront) {
for (const [x, y] of [
[40, 60],
[100, 80],
]) {
- await moveMouse(x, y);
+ await moveMouse(ui, x, y);
await checkEyeDropperPosition(highlighterTestFront, x, y);
}
}
+async function moveMouse(ui, x, y) {
+ info(`Moving mouse to (${x}, ${y})`);
+ await BrowserTestUtils.synthesizeMouse(
+ "html",
+ x,
+ y,
+ { type: "mousemove", isSynthesized: false },
+ ui.getViewportBrowser()
+ );
+}
+
async function checkEyeDropperPosition(highlighterTestFront, x, y) {
const style = await highlighterTestFront.getEyeDropperElementAttribute(
"eye-dropper-root",
diff --git a/devtools/client/responsive/test/browser/browser_eyedropper_desktop.js b/devtools/client/responsive/test/browser/browser_eyedropper_desktop.js
@@ -1,31 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-"use strict";
-
-// Test that the eyedropper's underlying screenshot covers the entire viewport
-// in RDM when showing a page without a viewport meta tag. See Bug 1972770.
-
-const TEST_URL =
- "data:text/html;charset=utf-8," +
- `
- <body>
- <div style="position: absolute; left: 800px; width: 200px; height: 100px; background-color: green;"></div>
- </body>
- `;
-
-add_task(async function () {
- info("Test that the eyedropper works in RDM without a viewport meta tag.");
-
- const { inspector, highlighterTestFront } =
- await openInspectorForURL(TEST_URL);
-
- info("Switch to RDM");
- await openRDM(gBrowser.selectedTab);
- await openEyeDropper(inspector, highlighterTestFront);
-
- await moveMouse(50, 50);
- await waitForEyedropperColor(highlighterTestFront, "#ffffff");
-
- await moveMouse(900, 50);
- await waitForEyedropperColor(highlighterTestFront, "#008000");
-});
diff --git a/devtools/client/responsive/test/browser/browser_eyedropper_update.js b/devtools/client/responsive/test/browser/browser_eyedropper_update.js
@@ -52,6 +52,35 @@ add_task(async function () {
);
});
+async function openEyeDropper(inspector, highlighterTestFront) {
+ info("Opening the eyedropper");
+ const toggleButton = inspector.panelDoc.querySelector(
+ "#inspector-eyedropper-toggle"
+ );
+ toggleButton.click();
+ await TestUtils.waitForCondition(() =>
+ highlighterTestFront.isEyeDropperVisible()
+ );
+}
+
+async function moveMouse(x, y) {
+ info(`Moving mouse to (${x}, ${y})`);
+ await BrowserTestUtils.synthesizeMouse(
+ "html",
+ x,
+ y,
+ { type: "mousemove", isSynthesized: false },
+ gBrowser.selectedBrowser
+ );
+}
+
+async function waitForEyedropperColor(highlighterTestFront, expectedColor) {
+ await waitFor(async () => {
+ const color = await highlighterTestFront.getEyeDropperColorValue();
+ return color === expectedColor;
+ }, `Wait for the eyedropper color to be ${expectedColor}`);
+}
+
async function changeViewportWidth(width, ui) {
info(`Changing viewport width to ${width}`);
diff --git a/devtools/client/responsive/test/browser/browser_screenshot_button.js b/devtools/client/responsive/test/browser/browser_screenshot_button.js
@@ -3,47 +3,42 @@
"use strict";
-// Test global screenshot button and screenshot size with and without a viewport meta tag.
-// See Bug 1979518.
+// Test global screenshot button
const TEST_URL = "data:text/html;charset=utf-8,";
-const TEST_URL2 =
- TEST_URL + "<meta name='viewport' content='width=device-width' />";
-for (const URL of [TEST_URL, TEST_URL2]) {
- addRDMTask(URL, async function ({ ui }) {
- info(
- `Test global screenshot button and screenshot size ${URL.includes("viewport") ? "with" : "without"} a viewport meta tag`
- );
+addRDMTask(TEST_URL, async function ({ ui }) {
+ const { toolWindow } = ui;
+ const { store, document } = toolWindow;
- const { toolWindow } = ui;
- const { document } = toolWindow;
+ info("Click the screenshot button");
+ const screenshotButton = document.getElementById("screenshot-button");
+ screenshotButton.click();
- info("Click the screenshot button");
- const screenshotButton = document.getElementById("screenshot-button");
- screenshotButton.click();
+ const whenScreenshotSucceeded = waitUntilDownload();
- const whenScreenshotSucceeded = waitUntilDownload();
+ const filePath = await whenScreenshotSucceeded;
+ const image = new Image();
+ image.src = PathUtils.toFileURI(filePath);
- const filePath = await whenScreenshotSucceeded;
- const image = new Image();
- image.src = PathUtils.toFileURI(filePath);
+ await once(image, "load");
- await once(image, "load");
+ // We have only one viewport at the moment
+ const viewport = store.getState().viewports[0];
+ const ratio = window.devicePixelRatio;
- const { width, height, ratio } = await spawnViewportTask(ui, {}, () => {
- return {
- width: content.innerWidth,
- height: content.innerHeight,
- ratio: content.devicePixelRatio,
- };
- });
+ is(
+ image.width,
+ viewport.width * ratio,
+ "screenshot width has the expected width"
+ );
- is(image.width, width * ratio, "screenshot has the expected width");
+ is(
+ image.height,
+ viewport.height * ratio,
+ "screenshot width has the expected height"
+ );
- is(image.height, height * ratio, "screenshot has the expected height");
-
- await IOUtils.remove(filePath);
- await resetDownloads();
- });
-}
+ await IOUtils.remove(filePath);
+ await resetDownloads();
+});
diff --git a/devtools/client/responsive/test/browser/head.js b/devtools/client/responsive/test/browser/head.js
@@ -1003,32 +1003,3 @@ async function waitForDevicePixelRatio(
return dpx;
}
-
-async function moveMouse(x, y) {
- info(`Moving mouse to (${x}, ${y})`);
- await BrowserTestUtils.synthesizeMouse(
- "html",
- x,
- y,
- { type: "mousemove", isSynthesized: false },
- gBrowser.selectedBrowser
- );
-}
-
-async function openEyeDropper(inspector, highlighterTestFront) {
- info("Opening the eyedropper");
- const toggleButton = inspector.panelDoc.querySelector(
- "#inspector-eyedropper-toggle"
- );
- toggleButton.click();
- await TestUtils.waitForCondition(() =>
- highlighterTestFront.isEyeDropperVisible()
- );
-}
-
-async function waitForEyedropperColor(highlighterTestFront, expectedColor) {
- await waitFor(async () => {
- const color = await highlighterTestFront.getEyeDropperColorValue();
- return color === expectedColor;
- }, `Wait for the eyedropper color to be ${expectedColor}`);
-}
diff --git a/devtools/server/actors/screenshot-content.js b/devtools/server/actors/screenshot-content.js
@@ -66,16 +66,23 @@ exports.ScreenshotContentActor = class ScreenshotContentActor extends Actor {
const windowZoom = getCurrentZoom(window);
const messages = [];
+ // If we're going to take the current view of the page, we don't need to compute a rect,
+ // since it's the default behaviour of drawSnapshot.
+ if (!fullpage && !selector && !nodeActorID) {
+ return {
+ rect: null,
+ messages,
+ windowDpr,
+ windowZoom,
+ };
+ }
+
let left;
let top;
let width;
let height;
- // If we're going to take the current view of the page (!fullpage && !selector && !nodeActorID),
- // we could leave the computation of the rect to drawSnapshot since that is its default behaviour.
- // However, drawSnapshot computes the wrong size for a page without a viewport meta tag in RDM
- // (Bug 1972770). Until that bug is fixed, we work around it by always computing the rect here.
- if (fullpage || (!selector && !nodeActorID)) {
+ if (fullpage) {
// We don't want to render the scrollbars
const winUtils = window.windowUtils;
const scrollbarHeight = {};
@@ -84,12 +91,16 @@ exports.ScreenshotContentActor = class ScreenshotContentActor extends Actor {
left = 0;
top = 0;
- width = window.innerWidth - scrollbarWidth.value;
- height = window.innerHeight - scrollbarHeight.value;
- if (fullpage) {
- width = width + window.scrollMaxX - window.scrollMinX;
- height = height + window.scrollMaxY - window.scrollMinY;
- }
+ width =
+ window.innerWidth +
+ window.scrollMaxX -
+ window.scrollMinX -
+ scrollbarWidth.value;
+ height =
+ window.innerHeight +
+ window.scrollMaxY -
+ window.scrollMinY -
+ scrollbarHeight.value;
} else if (selector) {
const node = window.document.querySelector(selector);
