Web Inspector: Change the InspectorOverlay to use native rather than canvas
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 25 Feb 2019 04:41:53 +0000 (04:41 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 25 Feb 2019 04:41:53 +0000 (04:41 +0000)
https://bugs.webkit.org/show_bug.cgi?id=105023
<rdar://problem/13443692>

Reviewed by Brian Burg.

.:

* ManualTests/inspector/overlay-nodes.html: Added.
* ManualTests/inspector/overlay-rulers.html: Added.

Source/JavaScriptCore:

* inspector/protocol/OverlayTypes.json: Removed.
Now that the overlay is entirely generated in C++, we no longer need the special prototol
types for transferring data to a JavaScript context.

* inspector/protocol/Debugger.json:
* inspector/agents/InspectorDebuggerAgent.h:
* inspector/agents/InspectorDebuggerAgent.cpp:
(Inspector::InspectorDebuggerAgent::setOverlayMessage): Deleted.
Remove `Debugger.setOverlayMessage` command as it hasn't been used and is no longer supported.

* CMakeLists.txt:
* DerivedSources-input.xcfilelist:
* DerivedSources.make:

Source/WebCore:

Should be no change in observed functionality.

* inspector/InspectorOverlay.h:
* inspector/InspectorOverlay.cpp:
(WebCore::truncateWithEllipsis): Added.
(WebCore::localPointToRootPoint): Added.
(WebCore::contentsQuadToCoordinateSystem):
(WebCore::effectiveElementForNode): Added.
(WebCore::quadToPath): Added.
(WebCore::drawOutlinedQuadWithClip): Added.
(WebCore::drawOutlinedQuad): Added.
(WebCore::drawFragmentHighlight): Added.
(WebCore::drawShapeHighlight): Added.
(WebCore::InspectorOverlay::paint):
(WebCore::InspectorOverlay::setIndicating):
(WebCore::InspectorOverlay::shouldShowOverlay const):
(WebCore::InspectorOverlay::update):
(WebCore::InspectorOverlay::setShowPaintRects): Added.
(WebCore::InspectorOverlay::showPaintRect):
(WebCore::InspectorOverlay::updatePaintRectsTimerFired):
(WebCore::InspectorOverlay::drawNodeHighlight):
(WebCore::InspectorOverlay::drawQuadHighlight):
(WebCore::InspectorOverlay::drawPaintRects):
(WebCore::InspectorOverlay::drawBounds): Added.
(WebCore::InspectorOverlay::drawRulers):
(WebCore::InspectorOverlay::drawElementTitle): Added.
(WebCore::contentsQuadToPage): Deleted.
(WebCore::InspectorOverlay::setPausedInDebuggerMessage): Deleted.
(WebCore::buildObjectForPoint): Deleted.
(WebCore::buildObjectForRect): Deleted.
(WebCore::buildArrayForQuad): Deleted.
(WebCore::buildObjectForHighlight): Deleted.
(WebCore::buildObjectForSize): Deleted.
(WebCore::InspectorOverlay::setShowingPaintRects): Deleted.
(WebCore::buildArrayForRendererFragments): Deleted.
(WebCore::localPointToRoot): Deleted.
(WebCore::appendPathCommandAndPoints): Deleted.
(WebCore::appendPathSegment): Deleted.
(WebCore::buildObjectForShapeOutside): Deleted.
(WebCore::buildObjectForElementData): Deleted.
(WebCore::InspectorOverlay::buildHighlightObjectForNode const): Deleted.
(WebCore::InspectorOverlay::buildObjectForHighlightedNodes const): Deleted.
(WebCore::InspectorOverlay::drawPausedInDebuggerMessage): Deleted.
(WebCore::InspectorOverlay::overlayPage): Deleted.
(WebCore::InspectorOverlay::forcePaint): Deleted.
(WebCore::InspectorOverlay::reset): Deleted.
(WebCore::evaluateCommandInOverlay): Deleted.
(WebCore::InspectorOverlay::evaluateInOverlay): Deleted.
(WebCore::InspectorOverlay::freePage): Deleted.

* inspector/agents/InspectorPageAgent.cpp:
(WebCore::InspectorPageAgent::disable):
(WebCore::InspectorPageAgent::setShowPaintRects):
Drive-by: rename `setShowingPaintRects` to better match the protocol.
* inspector/agents/page/PageDebuggerAgent.h:
* inspector/agents/page/PageDebuggerAgent.cpp:
(WebCore::PageDebuggerAgent::PageDebuggerAgent):
(WebCore::PageDebuggerAgent::setOverlayMessage): Deleted.
Remove `Debugger.setOverlayMessage` command as it hasn't been used and is no longer supported.

* inspector/InspectorController.h:
* inspector/InspectorController.cpp:
(WebCore::InspectorController::createLazyAgents):
(WebCore::InspectorController::disconnectFrontend):
(WebCore::InspectorController::disconnectAllFrontends):
(WebCore::InspectorController::buildObjectForHighlightedNodes const): Deleted.

* testing/Internals.h:
* testing/Internals.idl:
* testing/Internals.cpp:
(WebCore::Internals::inspectorHighlightObject): Deleted.

* inspector/InspectorOverlayPage.css: Removed.
* inspector/InspectorOverlayPage.html: Removed.
* inspector/InspectorOverlayPage.js: Removed.

* CMakeLists.txt:
* DerivedSources-input.xcfilelist:
* DerivedSources-output.xcfilelist:
* DerivedSources.make:
* WebCore.xcodeproj/project.pbxproj:

Source/WebInspectorUI:

* UserInterface/Base/Main.js:
(WI.initializeTarget):

* UserInterface/Protocol/Legacy/10.0/InspectorBackendCommands.js:
* UserInterface/Protocol/Legacy/10.3/InspectorBackendCommands.js:
* UserInterface/Protocol/Legacy/11.0/InspectorBackendCommands.js:
* UserInterface/Protocol/Legacy/11.3/InspectorBackendCommands.js:
* UserInterface/Protocol/Legacy/12.0/InspectorBackendCommands.js:
* UserInterface/Protocol/Legacy/12.2/InspectorBackendCommands.js:
* UserInterface/Protocol/Legacy/8.0/InspectorBackendCommands.js:
* UserInterface/Protocol/Legacy/9.0/InspectorBackendCommands.js:
* UserInterface/Protocol/Legacy/9.3/InspectorBackendCommands.js:
* Versions/Inspector-iOS-10.0.json:
* Versions/Inspector-iOS-10.3.json:
* Versions/Inspector-iOS-11.0.json:
* Versions/Inspector-iOS-11.3.json:
* Versions/Inspector-iOS-12.0.json:
* Versions/Inspector-iOS-12.2.json:
* Versions/Inspector-iOS-8.0.json:
* Versions/Inspector-iOS-9.0.json:
* Versions/Inspector-iOS-9.3.json:
Remove `Debugger.setOverlayMessage` command as it hasn't been used and is no longer supported.

LayoutTests:

* http/tests/inspector/dom/shapes-test.js: Removed.
* inspector/dom/hideHighlight.html: Removed.
* inspector/dom/hideHighlight-expected.txt: Removed.
* inspector/dom/highlight-shape-outside.html: Removed.
* inspector/dom/highlight-shape-outside-expected.txt: Removed.
* inspector/dom/highlight-shape-outside-margin.html: Removed.
* inspector/dom/highlight-shape-outside-margin-expected.txt: Removed.
* inspector/dom/highlightFrame.html: Removed.
* inspector/dom/highlightFrame-expected.txt: Removed.
* inspector/dom/highlightNode.html: Removed.
* inspector/dom/highlightNode-expected.txt: Removed.
* inspector/dom/highlightNodeList.html: Removed.
* inspector/dom/highlightNodeList-expected.txt: Removed.
* inspector/dom/highlightSelector.html: Removed.
* inspector/dom/highlightSelector-expected.txt: Removed.
* platform/mac/TestExpectations:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@242019 268f45cc-cd09-0410-ab3c-d52691b4dbfc

67 files changed:
ChangeLog
LayoutTests/ChangeLog
LayoutTests/http/tests/inspector/dom/shapes-test.js [deleted file]
LayoutTests/inspector/dom/hideHighlight-expected.txt [deleted file]
LayoutTests/inspector/dom/hideHighlight.html [deleted file]
LayoutTests/inspector/dom/highlight-shape-outside-expected.txt [deleted file]
LayoutTests/inspector/dom/highlight-shape-outside-margin-expected.txt [deleted file]
LayoutTests/inspector/dom/highlight-shape-outside-margin.html [deleted file]
LayoutTests/inspector/dom/highlight-shape-outside.html [deleted file]
LayoutTests/inspector/dom/highlightFrame-expected.txt [deleted file]
LayoutTests/inspector/dom/highlightFrame.html [deleted file]
LayoutTests/inspector/dom/highlightNode-expected.txt [deleted file]
LayoutTests/inspector/dom/highlightNode.html [deleted file]
LayoutTests/inspector/dom/highlightNodeList-expected.txt [deleted file]
LayoutTests/inspector/dom/highlightNodeList.html [deleted file]
LayoutTests/inspector/dom/highlightSelector-expected.txt [deleted file]
LayoutTests/inspector/dom/highlightSelector.html [deleted file]
LayoutTests/platform/mac/TestExpectations
ManualTests/inspector/overlay-nodes.html [new file with mode: 0644]
ManualTests/inspector/overlay-rulers.html [new file with mode: 0644]
Source/JavaScriptCore/CMakeLists.txt
Source/JavaScriptCore/ChangeLog
Source/JavaScriptCore/DerivedSources-input.xcfilelist
Source/JavaScriptCore/DerivedSources.make
Source/JavaScriptCore/inspector/agents/InspectorDebuggerAgent.cpp
Source/JavaScriptCore/inspector/agents/InspectorDebuggerAgent.h
Source/JavaScriptCore/inspector/protocol/Debugger.json
Source/JavaScriptCore/inspector/protocol/OverlayTypes.json [deleted file]
Source/WebCore/CMakeLists.txt
Source/WebCore/ChangeLog
Source/WebCore/DerivedSources-input.xcfilelist
Source/WebCore/DerivedSources-output.xcfilelist
Source/WebCore/DerivedSources.make
Source/WebCore/WebCore.xcodeproj/project.pbxproj
Source/WebCore/inspector/InspectorController.cpp
Source/WebCore/inspector/InspectorController.h
Source/WebCore/inspector/InspectorOverlay.cpp
Source/WebCore/inspector/InspectorOverlay.h
Source/WebCore/inspector/InspectorOverlayPage.css [deleted file]
Source/WebCore/inspector/InspectorOverlayPage.html [deleted file]
Source/WebCore/inspector/InspectorOverlayPage.js [deleted file]
Source/WebCore/inspector/agents/InspectorPageAgent.cpp
Source/WebCore/inspector/agents/page/PageDebuggerAgent.cpp
Source/WebCore/inspector/agents/page/PageDebuggerAgent.h
Source/WebCore/testing/Internals.cpp
Source/WebCore/testing/Internals.h
Source/WebCore/testing/Internals.idl
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Base/Main.js
Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.0/InspectorBackendCommands.js
Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.3/InspectorBackendCommands.js
Source/WebInspectorUI/UserInterface/Protocol/Legacy/11.0/InspectorBackendCommands.js
Source/WebInspectorUI/UserInterface/Protocol/Legacy/11.3/InspectorBackendCommands.js
Source/WebInspectorUI/UserInterface/Protocol/Legacy/12.0/InspectorBackendCommands.js
Source/WebInspectorUI/UserInterface/Protocol/Legacy/12.2/InspectorBackendCommands.js
Source/WebInspectorUI/UserInterface/Protocol/Legacy/8.0/InspectorBackendCommands.js
Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.0/InspectorBackendCommands.js
Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.3/InspectorBackendCommands.js
Source/WebInspectorUI/Versions/Inspector-iOS-10.0.json
Source/WebInspectorUI/Versions/Inspector-iOS-10.3.json
Source/WebInspectorUI/Versions/Inspector-iOS-11.0.json
Source/WebInspectorUI/Versions/Inspector-iOS-11.3.json
Source/WebInspectorUI/Versions/Inspector-iOS-12.0.json
Source/WebInspectorUI/Versions/Inspector-iOS-12.2.json
Source/WebInspectorUI/Versions/Inspector-iOS-8.0.json
Source/WebInspectorUI/Versions/Inspector-iOS-9.0.json
Source/WebInspectorUI/Versions/Inspector-iOS-9.3.json

index 8afc981..0f2f161 100644 (file)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,14 @@
+2019-02-24  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Change the InspectorOverlay to use native rather than canvas
+        https://bugs.webkit.org/show_bug.cgi?id=105023
+        <rdar://problem/13443692>
+
+        Reviewed by Brian Burg.
+
+        * ManualTests/inspector/overlay-nodes.html: Added.
+        * ManualTests/inspector/overlay-rulers.html: Added.
+
 2019-02-22  Adrian Perez de Castro  <aperez@igalia.com>
 
         Unreviewed. Bump version numbers
index e3ddc68..e7348b5 100644 (file)
@@ -1,5 +1,30 @@
 2019-02-24  Devin Rousso  <drousso@apple.com>
 
+        Web Inspector: Change the InspectorOverlay to use native rather than canvas
+        https://bugs.webkit.org/show_bug.cgi?id=105023
+        <rdar://problem/13443692>
+
+        Reviewed by Brian Burg.
+
+        * http/tests/inspector/dom/shapes-test.js: Removed.
+        * inspector/dom/hideHighlight.html: Removed.
+        * inspector/dom/hideHighlight-expected.txt: Removed.
+        * inspector/dom/highlight-shape-outside.html: Removed.
+        * inspector/dom/highlight-shape-outside-expected.txt: Removed.
+        * inspector/dom/highlight-shape-outside-margin.html: Removed.
+        * inspector/dom/highlight-shape-outside-margin-expected.txt: Removed.
+        * inspector/dom/highlightFrame.html: Removed.
+        * inspector/dom/highlightFrame-expected.txt: Removed.
+        * inspector/dom/highlightNode.html: Removed.
+        * inspector/dom/highlightNode-expected.txt: Removed.
+        * inspector/dom/highlightNodeList.html: Removed.
+        * inspector/dom/highlightNodeList-expected.txt: Removed.
+        * inspector/dom/highlightSelector.html: Removed.
+        * inspector/dom/highlightSelector-expected.txt: Removed.
+        * platform/mac/TestExpectations:
+
+2019-02-24  Devin Rousso  <drousso@apple.com>
+
         Web Inspector: provide a way to make searches case sensitive or use a regular expression
         https://bugs.webkit.org/show_bug.cgi?id=192527
         <rdar://problem/46800955>
diff --git a/LayoutTests/http/tests/inspector/dom/shapes-test.js b/LayoutTests/http/tests/inspector/dom/shapes-test.js
deleted file mode 100644 (file)
index 048f9e3..0000000
+++ /dev/null
@@ -1,91 +0,0 @@
-TestPage.registerInitializer(function() {
-
-InspectorTest.Shapes = {
-    getShapeOutsideInfoForSelector: function(selector, callback)
-    {
-        WI.domManager.requestDocument(requestDocumentCallback);
-
-        function requestDocumentCallback(node) {
-            InspectorTest.assert(node instanceof WI.DOMNode, "Unexpected argument to requestDocument callback.")
-            DOMAgent.querySelector.invoke({nodeId: node.id, selector: selector}, querySelectorCallback);
-        }
-
-        function querySelectorCallback(error, nodeId) {
-            InspectorTest.assert(!error, "Error in callback for DOMAgent.querySelector");
-            InspectorTest.assert(nodeId, "Invalid argument to callback for DOMAgent.querySelector");
-
-            var highlightConfig = {
-                showInfo: true,
-                contentColor: {r: 255, g: 255, b: 255},
-                paddingColor: {r: 255, g: 255, b: 255},
-                borderColor: {r: 255, g: 255, b: 255},
-                marginColor: {r: 255, g: 255, b: 255},
-            };
-            DOMAgent.highlightNode.invoke({nodeId: nodeId, highlightConfig: highlightConfig}, highlightNodeCallback);
-        }
-
-        function highlightNodeCallback(error) {
-            InspectorTest.assert(!error, "Error in callback for DOMAgent.highlightNode");
-
-            InspectorTest.evaluateInPage("window.internals.inspectorHighlightObject()", receivedHighlightObject);
-        }
-
-        function receivedHighlightObject(error, value, wasThrown) {
-            InspectorTest.assert(!error, "When evaluating code, received unexpected error:" + error);
-            InspectorTest.assert(!error, "When evaluating code, an exception was thrown:" + wasThrown);
-
-            var data = JSON.parse(value);
-            callback(data[0].elementData.shapeOutsideData);
-        }
-    },
-
-    assertPathsAreRoughlyEqual: function(actual, expected, message)
-    {
-        function coordinatesAreRoughlyEqual(a, b) {
-            // Some platforms may only store integer path points, so the potential
-            // differences between correct paths can be roughly half a unit.
-            return typeof a === "number" && typeof b === "number" && Math.abs(a - b) < 0.5;
-        }
-
-        function pathsAreRoughlyEqual(actualPath, expectedPath) {
-            var expectedSubpathStart = 0, ei, ai;
-            for (var ei = 0, ai = 0; ai < actualPath.length && ei < expectedPath.length; ai++, ei++) {
-                if (expectedPath[ei] === 'M')
-                    expectedSubpathStart = ei;
-
-                if (actualPath[ai] === expectedPath[ei]
-                    || coordinatesAreRoughlyEqual(actualPath[ai], expectedPath[ei]))
-                    continue;
-
-                // Extrapolate the missing line to command if it is missing from actual.
-                // The choice to close the path with an explicit line to command is
-                // platform dependent.
-                if (actualPath[ai] === 'Z'
-                    && expectedPath[ei] === 'L'
-                    && coordinatesAreRoughlyEqual(expectedPath[expectedSubpathStart + 1], expectedPath[ei + 1])
-                    && coordinatesAreRoughlyEqual(expectedPath[expectedSubpathStart + 2], expectedPath[ei + 2])) {
-                    ei += 2;
-                    ai--;
-                    continue;
-                }
-                return false;
-            }
-            return true;
-        }
-
-        function makeStringForPath(path) {
-            return path.map(function(item) {
-                if (typeof item === 'number')
-                    return +item.toFixed(2);
-                return item;
-            }).join(' ');
-        }
-
-        var expectedPathString = makeStringForPath(expected);
-        var actualPathString = makeStringForPath(actual);
-        var assertionMessage = message + " \nEXPECTED: " + expectedPathString + "\n  ACTUAL: " + actualPathString;
-        InspectorTest.assert(pathsAreRoughlyEqual(actual, expected), assertionMessage);
-    }
-}
-
-});
diff --git a/LayoutTests/inspector/dom/hideHighlight-expected.txt b/LayoutTests/inspector/dom/hideHighlight-expected.txt
deleted file mode 100644 (file)
index bbee55b..0000000
+++ /dev/null
@@ -1,31 +0,0 @@
-Tests for the DOM.hideHighlight command.
-
-
-== Running test suite: DOM.hideHighlight
--- Running test case: CheckEmptyHighlight
-PASS: Should not be a highlight yet.
-
--- Running test case: HighlightRect
-PASS: Should be one highlight rect.
-Highlight Rect: {"x":0,"y":0,"width":100,"height":100,"top":0,"right":100,"bottom":100,"left":0}
-
--- Running test case: HideHighlight
-PASS: Should be no highlight.
-
--- Running test case: HighlightQuad
-PASS: Should be one highlight rect.
-Highlight Rect: {"x":50,"y":100,"width":100,"height":100,"top":100,"right":150,"bottom":200,"left":50}
-
--- Running test case: HideHighlight
-PASS: Should be no highlight.
-
--- Running test case: HighlightNode
-PASS: Should be one highlighted node.
-Highlighted Element Data: {"tagName":"p","idValue":"target","size":{"width":500,"height":100},"role":"paragraph"}
-
--- Running test case: HideHighlight
-PASS: Should be no highlight.
-
--- Running test case: HideHighlight
-PASS: Should be no highlight.
-
diff --git a/LayoutTests/inspector/dom/hideHighlight.html b/LayoutTests/inspector/dom/hideHighlight.html
deleted file mode 100644 (file)
index 5c43585..0000000
+++ /dev/null
@@ -1,130 +0,0 @@
-<!doctype html>
-<html>
-<head>
-<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
-<script>
-function test()
-{
-    const color = undefined;
-    const outlineColor = undefined;
-
-    function getHighlightRects(callback) {
-        InspectorTest.evaluateInPage("JSON.stringify(Array.from(window.internals.inspectorHighlightRects()))", (error, value, wasThrown) => {
-            InspectorTest.assert(!error, "Unexpected error dumping highlight: " + error);
-            InspectorTest.assert(!wasThrown, "Unexpected exception when dumping highlight.");
-            callback(JSON.parse(value));
-        });
-    }
-
-    function dumpHighlightRects(callback) {
-        getHighlightRects((highlightRects) => {
-            InspectorTest.expectThat(highlightRects.length === 1, "Should be one highlight rect.");
-            InspectorTest.log("Highlight Rect: " + JSON.stringify(highlightRects[0]));
-            callback();
-        });
-    }
-
-    function getHighlight(callback) {
-        InspectorTest.evaluateInPage("window.internals.inspectorHighlightObject()", (error, value, wasThrown) => {
-            InspectorTest.assert(!error, "Unexpected error dumping highlight: " + error);
-            InspectorTest.assert(!wasThrown, "Unexpected exception when dumping highlight.");
-            callback(JSON.parse(value));
-        });
-    }
-
-    function dumpHighlight(callback) {
-        getHighlight((highlightObjectPayload) => {
-            InspectorTest.expectThat(highlightObjectPayload.length === 1, "Should be one highlighted node.");
-            InspectorTest.log("Highlighted Element Data: " + JSON.stringify(highlightObjectPayload[0].elementData));
-            callback();
-        });
-    }
-
-    let suite = InspectorTest.createAsyncSuite("DOM.hideHighlight");
-
-    function addHideHighlightTestCase() {
-        suite.addTestCase({
-            name: "HideHighlight",
-            description: "Calling hideHighlight should hide the highlight.",
-            test(resolve, reject) {
-                DOMAgent.hideHighlight(() => {
-                    getHighlightRects((highlightRects) => {
-                        InspectorTest.expectThat(highlightRects.length === 0, "Should be no highlight.");
-                        resolve();
-                    });
-                });
-            }
-        });
-    }
-
-    suite.addTestCase({
-        name: "CheckEmptyHighlight",
-        description: "Should not be a highlight yet.",
-        test(resolve, reject) {
-            getHighlightRects((highlightRects) => {
-                InspectorTest.expectThat(highlightRects.length === 0, "Should not be a highlight yet.");
-                resolve();
-            });
-        }
-    });
-
-    suite.addTestCase({
-        name: "HighlightRect",
-        description: "Call highlightRect to create a highlight.",
-        test(resolve, reject) {
-            let rect = new WI.Rect(0, 0, 100, 100);
-            DOMAgent.highlightRect(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height, color, outlineColor, (error) => {
-                dumpHighlightRects(resolve);
-            });
-        }
-    });
-
-    addHideHighlightTestCase();
-
-    suite.addTestCase({
-        name: "HighlightQuad",
-        description: "Call highlightQuad to create a highlight.",
-        test(resolve, reject) {
-            let quad = new WI.Quad([100, 100, 150, 150, 100, 200, 50, 150]);
-            DOMAgent.highlightQuad(quad.toProtocol(), color, outlineColor, (error) => {
-                dumpHighlightRects(resolve);
-            });
-        }
-    });
-
-    addHideHighlightTestCase();
-
-    suite.addTestCase({
-        name: "HighlightNode",
-        description: "Call highlightNode to create a highlight.",
-        test(resolve, reject) {
-            const highlightConfig = {
-                showInfo: true,
-                contentColor: {r: 255, g: 255, b: 255},
-                paddingColor: {r: 255, g: 255, b: 255},
-                borderColor: {r: 255, g: 255, b: 255},
-                marginColor: {r: 255, g: 255, b: 255},
-            };
-
-            WI.domManager.requestDocument((documentNode) => {
-                WI.domManager.querySelector(documentNode.id, "#target", (nodeId) => {
-                    DOMAgent.highlightNode(highlightConfig, nodeId, (error) => {
-                        InspectorTest.assert(!error, "Should not have an error.");
-                        dumpHighlight(resolve);
-                    });
-                });
-            });
-        }
-    });
-
-    addHideHighlightTestCase();
-    addHideHighlightTestCase(); // Test that a duplicate hideHighlight is not problematic.
-
-    suite.runTestCasesAndFinish();
-}
-</script>
-</head>
-<body onload="runTest()">
-    <p id="target" style="width:500px; height:100px">Tests for the DOM.hideHighlight command.</p>
-</body>
-</html>
diff --git a/LayoutTests/inspector/dom/highlight-shape-outside-expected.txt b/LayoutTests/inspector/dom/highlight-shape-outside-expected.txt
deleted file mode 100644 (file)
index 3e041e9..0000000
+++ /dev/null
@@ -1,16 +0,0 @@
-PASS: .inset
-PASS: .inset.padded
-PASS: .inset.padded.border-box
-PASS: .polygon
-PASS: .polygon.padded.border-box
-PASS: .vertical-lr > .inset
-PASS: .vertical-lr > .inset.padded
-PASS: .vertical-lr > .inset.padded.border-box
-PASS: .vertical-rl > .inset
-PASS: .vertical-rl > .inset.padded
-PASS: .vertical-rl > .inset.padded.border-box
-PASS: .content-box.padded
-PASS: .raster-svg.padded
-PASS: .raster-svg-complex.padded
-PASS: .raster-png.padded
-
diff --git a/LayoutTests/inspector/dom/highlight-shape-outside-margin-expected.txt b/LayoutTests/inspector/dom/highlight-shape-outside-margin-expected.txt
deleted file mode 100644 (file)
index 595fbfd..0000000
+++ /dev/null
@@ -1,7 +0,0 @@
-PASS: .inset
-PASS: .inset with shape-margin
-PASS: .circle
-PASS: .circle with shape-margin
-PASS: .svg
-PASS: .svg with shape-margin
-
diff --git a/LayoutTests/inspector/dom/highlight-shape-outside-margin.html b/LayoutTests/inspector/dom/highlight-shape-outside-margin.html
deleted file mode 100644 (file)
index 3e98c58..0000000
+++ /dev/null
@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<style>
-body {
-    margin: 0;
-}
-.shape {
-    float: left;
-    width: 100px;
-    height: 100px;
-    padding: 25px 75px 75px 25px;
-    margin-right: -200px;
-    -webkit-shape-margin: 10px;
-}
-.inset {
-    -webkit-shape-outside: inset(25px round 10px) content-box;
-}
-.circle {
-    -webkit-shape-outside: circle(25% at center) content-box;
-}
-.svg {
-    -webkit-shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' width='100px' height='100px'><rect x='25' y='25' width='50' height='50' fill='blue' /></svg>");
-    -webkit-shape-margin: 1px;
-}
-</style>
-<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
-<script src="../../http/tests/inspector/dom/shapes-test.js"></script>
-<script>
-function test() {
-    var testcases = [
-    {
-        'selector' : '.inset',
-        'path' : ['M', 60, 50, 'L', 90, 50, 'C', 96, 50, 100, 54, 100, 60, 'L', 100, 90, 'C', 100, 96, 96, 100, 90, 100,
-            'L', 60, 100, 'C', 54, 100, 50, 96, 50, 90, 'L', 50, 60, 'C', 50, 54, 54, 50, 60, 50, 'Z'],
-        'marginPath' : ['M', 60, 40, 'L', 90, 40, 'C', 101, 40, 110, 49, 110, 60, 'L', 110, 90, 'C', 110, 101, 101, 110, 90, 110,
-            'L', 60, 110, 'C', 49, 110, 40, 101, 40, 90, 'L', 40, 60, 'C', 40, 49, 49, 40, 60, 40, 'Z']
-    },
-    {
-        'selector' : '.circle',
-        'path' : ['M', 75, 63, 'L', 75, 63, 'C', 89, 63, 100, 74, 100, 88, 'L', 100, 88, 'C', 100, 102, 89, 113, 75, 113, 'L', 75, 113,
-            'C', 61, 113, 50, 102, 50, 88, 'L', 50, 88, 'C', 50, 74, 61, 63, 75, 63, 'Z'],
-        'marginPath' : ['M', 75, 53, 'L', 75, 53, 'C', 94, 53, 110, 69, 110, 88, 'L', 110, 88, 'C', 110, 107, 94, 123, 75, 123, 'L', 75, 123,
-            'C', 56, 123, 40, 107, 40, 88, 'L', 40, 88, 'C', 40, 69, 56, 53, 75, 53, 'Z']
-    },
-    {
-        'selector' : '.svg',
-        'path' : ['M', 50, 63, 'L', 100, 63, 'L', 100, 113, 'L', 50, 113, 'Z'],
-        'marginPath' : ['M', 50, 62, 'L', 100, 62, 'L', 100, 63, 'L', 50, 63, 'Z',
-            'M', 49, 63, 'L', 101, 63, 'L', 101, 113, 'L', 49, 113, 'Z',
-            'M', 50, 113, 'L', 100, 113, 'L', 100, 114, 'L', 50, 114, 'Z']
-    }];
-
-    function runNextTest(tests) {
-        var testcase = tests[0];
-        var selectorInformation = "Selector: \'" + testcase.selector + "\'";
-
-        InspectorTest.Shapes.getShapeOutsideInfoForSelector(testcase.selector, function(payload) {
-            if (!InspectorTest.Shapes.assertPathsAreRoughlyEqual(payload.shape, testcase.path, selectorInformation + " Shape information was not roughly equal."))
-                InspectorTest.log("PASS: " + testcase.selector);
-            if (!InspectorTest.Shapes.assertPathsAreRoughlyEqual(payload.marginShape, testcase.marginPath, selectorInformation + " Margin shape information was not roughly equal."))
-                InspectorTest.log("PASS: " + testcase.selector + " with shape-margin");
-
-            if (tests.length > 1)
-                runNextTest(tests.splice(1));
-            else
-                InspectorTest.completeTest();
-        });
-    }
-
-    runNextTest(testcases);
-}
-</script>
-</head>
-<body onload="runTest()">
-    <div class='shape inset'></div>
-    <div class='shape circle'></div>
-    <div class='shape svg'></div>
-</body>
-</html>
diff --git a/LayoutTests/inspector/dom/highlight-shape-outside.html b/LayoutTests/inspector/dom/highlight-shape-outside.html
deleted file mode 100644 (file)
index 981b3bd..0000000
+++ /dev/null
@@ -1,161 +0,0 @@
-<html>
-<head>
-<style>
-body {
-    margin: 0;
-}
-.shape {
-    float: left;
-    width: 200px;
-    height: 200px;
-    margin-right: -200px;
-    box-sizing: border-box;
-}
-.padded {
-    padding: 25px 75px 75px 25px;
-}
-.vertical-lr, .vertical-rl {
-    float: left;
-}
-.vertical-lr {
-    -webkit-writing-mode: vertical-lr;
-}
-.vertical-rl {
-    -webkit-writing-mode: vertical-rl;
-}
-.inset {
-    -webkit-shape-outside: inset(50px 50px 100px 50px) content-box;
-}
-.inset.padded {
-    -webkit-shape-outside: inset(5px 5px 10px 5px) content-box;
-}
-.inset.padded.border-box {
-    -webkit-shape-outside: inset(50px 50px 100px 50px) border-box;
-}
-.polygon {
-    -webkit-shape-outside: polygon(50px 50px, 150px 50px, 150px 100px, 50px 100px) content-box;
-}
-.polygon.border-box {
-    -webkit-shape-outside: polygon(50px 50px, 150px 50px, 150px 100px, 50px 100px) border-box;
-}
-.content-box {
-    -webkit-shape-outside: content-box;
-}
-.raster-svg {
-    -webkit-shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' width='100px' height='100px'><rect x='25' y='25' width='50' height='50' fill='blue' /></svg>");
-}
-.raster-svg-complex {
-    -webkit-shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' width='100px' height='100px'><rect x='10' y='10' width='30' height='30' fill='blue' /><rect x='60' y='10' width='30' height='30' fill='blue' /><rect x='10' y='60' width='30' height='30' fill='blue' /><rect x='60' y='60' width='30' height='30' fill='blue' /></svg>");
-}
-.raster-png {
-    /* png version of raster-svg */
-   -webkit-shape-outside: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFAAD/////e9yZLAAAAAJ0Uk5T/wDltzBKAAAASUlEQVR42uzYsQ0AMAgEsWf/pTMDBURIvgXcX2qhQCAQCAQCgUA+I2kHgUAgEAgEAoFAIBAIBAKBQOYRoxMCgUAgEAjkHPIEGAA2ih1NVnaDGgAAAABJRU5ErkJggg==");
-}
-</style>
-<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
-<script src="../../http/tests/inspector/dom/shapes-test.js"></script>
-<script>
-function test() {
-    var testcases = [
-    {
-        'selector' : '.inset',
-        'path' : ['M', 50, 50, 'L', 150, 50, 'L', 150, 100, 'L', 50, 100, 'L', 50, 50, 'Z']
-    },
-    {
-        'selector' : '.inset.padded',
-        'path' : ['M', 30, 30, 'L', 120, 30, 'L', 120, 115, 'L', 30, 115, 'L', 30, 30, 'Z']
-    },
-    {
-        'selector' : '.inset.padded.border-box',
-        'path' : ['M', 50, 50, 'L', 150, 50, 'L', 150, 100, 'L', 50, 100, 'L', 50, 50, 'Z']
-    },
-    {
-        'selector' : '.polygon',
-        'path' : ['M', 50, 50, 'L', 150, 50, 'L', 150, 100, 'L', 50, 100, 'Z']
-    },
-    {
-        'selector' : '.polygon.padded.border-box',
-        'path' : ['M', 50, 50, 'L', 150, 50, 'L', 150, 100, 'L', 50, 100, 'L', 50, 50, 'Z']
-    },
-    {
-        'selector' : '.vertical-lr > .inset',
-        'path' : ['M', 50, 50, 'L', 50, 100, 'L', 150, 100, 'L', 150, 50, 'L', 50, 50, 'Z']
-    },
-    {
-        'selector' : '.vertical-lr > .inset.padded',
-        'path' : ['M', 30, 30, 'L', 30, 115, 'L', 120, 115, 'L', 120, 30, 'L', 30, 30, 'Z']
-    },
-    {
-        'selector' : '.vertical-lr > .inset.padded.border-box',
-        'path' : ['M', 50, 50, 'L', 50, 100, 'L', 150, 100, 'L', 150, 50, 'L', 50, 50, 'Z']
-    },
-    {
-        'selector' : '.vertical-rl > .inset',
-        'path' : ['M', 150, 50, 'L', 150, 100, 'L', 50, 100, 'L', 50, 50, 'L', 150, 50, 'Z']
-    },
-    {
-        'selector' : '.vertical-rl > .inset.padded',
-        'path' : ['M', 120, 30, 'L', 120, 115, 'L', 30, 115, 'L', 30, 30, 'L', 120, 30, 'Z']
-    },
-    {
-        'selector' : '.vertical-rl > .inset.padded.border-box',
-        'path' : ['M', 150, 50, 'L', 150, 100, 'L', 50, 100, 'L', 50, 50, 'L', 150, 50, 'Z']
-    },
-    {
-        'selector' : '.content-box.padded',
-        'path' : ['M', 25, 25, 'L', 125, 25, 'L', 125, 125, 'L', 25, 125, 'L', 25, 25, 'Z']
-    },
-    {
-        'selector' : '.raster-svg.padded',
-        'path' : ['M', 50, 50, 'L', 100, 50, 'L', 100, 100, 'L', 50, 100, 'Z']
-    },
-    {
-        'selector' : '.raster-svg-complex.padded',
-        'path' : ['M', 35, 35, 'L', 115, 35, 'L', 115, 65, 'L', 35, 65, 'Z', 'M', 35, 85, 'L', 115, 85, 'L', 115, 115, 'L', 35, 115, 'Z']
-    },
-    {
-        'selector' : '.raster-png.padded',
-        'path' : ['M', 50, 50, 'L', 100, 50, 'L', 100, 100, 'L', 50, 100, 'Z']
-    }
-    ];
-
-    function runNextTest(tests) {
-        var testcase = tests[0];
-
-        InspectorTest.Shapes.getShapeOutsideInfoForSelector(testcase.selector, function(payload) {
-            if (!InspectorTest.Shapes.assertPathsAreRoughlyEqual(payload.shape, testcase.path, "Selector: \'" + testcase.selector + "\' Shape information was not roughly equal."))
-                 InspectorTest.log("PASS: " + testcase.selector);
-
-            if (tests.length > 1)
-                runNextTest(tests.splice(1));
-            else
-                InspectorTest.completeTest();
-        });
-    }
-
-    runNextTest(testcases);
-}
-</script>
-</head>
-<body onload="runTest()">
-    <div class='shape inset'></div>
-    <div class='shape padded inset'></div>
-    <div class='shape padded inset border-box'></div>
-    <div class='shape polygon'></div>
-    <div class='shape padded polygon border-box'></div>
-    <div class='vertical-lr'>
-        <div class='shape inset'></div>
-        <div class='shape padded inset'></div>
-        <div class='shape padded inset border-box'></div>
-    </div>
-    <div class='vertical-rl'>
-        <div class='shape inset'></div>
-        <div class='shape padded inset'></div>
-        <div class='shape padded inset border-box'></div>
-    </div>
-    <div class='shape padded content-box'></div>
-    <div class='shape padded raster-svg'></div>
-    <div class='shape padded raster-svg-complex'></div>
-    <div class='shape padded raster-png'></div>
-</body>
-</html>
diff --git a/LayoutTests/inspector/dom/highlightFrame-expected.txt b/LayoutTests/inspector/dom/highlightFrame-expected.txt
deleted file mode 100644 (file)
index 04c411a..0000000
+++ /dev/null
@@ -1,22 +0,0 @@
-Tests for the DOM.highlightFrame command.
-
-  
-PASS: Page should have subframes.
-
-== Running test suite: DOM.highlightFrame
--- Running test case: CheckEmptyHighlight
-PASS: Should not be a highlight yet.
-
--- Running test case: HighlightMainFrame
-PASS: Should not be a highlight for the main frame.
-
--- Running test case: HighlightChildFrame1
-Highlight Object: [{"scrollOffset":{"x":0,"y":0},"fragments":[{"quads":[[{"x":8,"y":50},{"x":312,"y":50},{"x":312,"y":204},{"x":8,"y":204}],[{"x":8,"y":50},{"x":312,"y":50},{"x":312,"y":204},{"x":8,"y":204}],[{"x":10,"y":52},{"x":310,"y":52},{"x":310,"y":202},{"x":10,"y":202}],[{"x":10,"y":52},{"x":310,"y":52},{"x":310,"y":202},{"x":10,"y":202}]],"contentColor":"rgba(0, 0, 0, 0)","contentOutlineColor":"rgba(0, 0, 0, 0)","paddingColor":"rgba(0, 0, 0, 0)","borderColor":"rgba(0, 0, 0, 0)","marginColor":"rgba(0, 0, 0, 0)"}],"elementData":{"tagName":"iframe","idValue":"frame-1","size":{"width":304,"height":154},"role":""}}]
-
--- Running test case: HighlightChildFrame2
-Highlight Object: [{"scrollOffset":{"x":0,"y":0},"fragments":[{"quads":[[{"x":316,"y":50},{"x":620,"y":50},{"x":620,"y":204},{"x":316,"y":204}],[{"x":316,"y":50},{"x":620,"y":50},{"x":620,"y":204},{"x":316,"y":204}],[{"x":318,"y":52},{"x":618,"y":52},{"x":618,"y":202},{"x":318,"y":202}],[{"x":318,"y":52},{"x":618,"y":52},{"x":618,"y":202},{"x":318,"y":202}]],"contentColor":"rgba(0, 0, 0, 0)","contentOutlineColor":"rgba(0, 0, 0, 0)","paddingColor":"rgba(0, 0, 0, 0)","borderColor":"rgba(0, 0, 0, 0)","marginColor":"rgba(0, 0, 0, 0)"}],"elementData":{"tagName":"iframe","idValue":"frame-2","size":{"width":304,"height":154},"role":""}}]
-
--- Running test case: BadFrameId
-PASS: Should produce an error.
-Error: No frame for given id found
-
diff --git a/LayoutTests/inspector/dom/highlightFrame.html b/LayoutTests/inspector/dom/highlightFrame.html
deleted file mode 100644 (file)
index 458c532..0000000
+++ /dev/null
@@ -1,100 +0,0 @@
-<!doctype html>
-<html>
-<head>
-<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
-<script>
-function test()
-{
-    let suite = InspectorTest.createAsyncSuite("DOM.highlightFrame");
-
-    let mainFrame = WI.networkManager.mainFrame;
-    let childFrames = Array.from(mainFrame.childFrameCollection);
-    InspectorTest.expectEqual(childFrames.length, 2, "Page should have subframes.");
-
-    function getHighlight(callback) {
-        InspectorTest.evaluateInPage("window.internals.inspectorHighlightObject()", (error, value, wasThrown) => {
-            InspectorTest.assert(!error, "Unexpected error dumping highlight: " + error);
-            InspectorTest.assert(!wasThrown, "Unexpected exception when dumping highlight.");
-            callback(JSON.parse(value));
-        });
-    }
-
-    function dumpHighlight(callback) {
-        getHighlight((highlightObjectPayload) => {
-            InspectorTest.log("Highlight Object: " + JSON.stringify(highlightObjectPayload));
-            callback();
-        });
-    }
-
-    suite.addTestCase({
-        name: "CheckEmptyHighlight",
-        description: "Should not be a highlight yet.",
-        test(resolve, reject) {
-            getHighlight((highlightObjectPayload) => {
-                InspectorTest.expectThat(highlightObjectPayload.length === 0, "Should not be a highlight yet.");
-                resolve();
-            });
-        }
-    });
-
-    suite.addTestCase({
-        name: "HighlightMainFrame",
-        description: "Main frame does not have an owner element, so there will be no highlight.",
-        test(resolve, reject) {
-            DOMAgent.highlightFrame(mainFrame.id, undefined, undefined, (error) => {
-                getHighlight((highlightObjectPayload) => {
-                    InspectorTest.expectThat(highlightObjectPayload.length === 0, "Should not be a highlight for the main frame.");
-                    resolve();
-                });
-            });
-        }
-    });
-
-    suite.addTestCase({
-        name: "HighlightChildFrame1",
-        description: "Should highlight child frame 1.",
-        test(resolve, reject) {
-            DOMAgent.highlightFrame(childFrames[0].id, undefined, undefined, (error) => {
-                InspectorTest.assert(!error, "Should not have an error.");
-                dumpHighlight(resolve);
-            });
-        }
-    });
-
-    suite.addTestCase({
-        name: "HighlightChildFrame2",
-        description: "Should highlight child frame 2.",
-        test(resolve, reject) {
-            DOMAgent.highlightFrame(childFrames[1].id, undefined, undefined, (error) => {
-                InspectorTest.assert(!error, "Should not have an error.");
-                dumpHighlight(resolve);
-            });
-        }
-    });
-
-    // ------
-
-    suite.addTestCase({
-        name: "BadFrameId",
-        description: "Bad frame id should cause an error.",
-        test(resolve, reject) {
-            DOMAgent.highlightFrame("bad-frame-id", undefined, undefined, (error) => {
-                InspectorTest.expectThat(error, "Should produce an error.");
-                InspectorTest.log("Error: " + error);
-                resolve();
-            });
-        }
-    });
-
-    suite.runTestCasesAndFinish();
-}
-</script>
-</head>
-<body onload="runTest()">
-    <p>Tests for the DOM.highlightFrame command.</p>
-    <div>
-        <iframe id="frame-1" src="resources/highlight-iframe.html"></iframe>
-        <iframe id="frame-2" src="resources/highlight-iframe.html"></iframe>
-    </div>
-</body>
-</html>
diff --git a/LayoutTests/inspector/dom/highlightNode-expected.txt b/LayoutTests/inspector/dom/highlightNode-expected.txt
deleted file mode 100644 (file)
index f4171cc..0000000
+++ /dev/null
@@ -1,37 +0,0 @@
-Tests for the DOM.highlightNode command.
-
-
-PASS: Page should have a subframe.
-
-== Running test suite: DOM.highlightNode
--- Running test case: CheckEmptyHighlight
-PASS: Should not be a highlight yet.
-
--- Running test case: MainFrameNodeViaNodeId
-PASS: Should be one highlighted node.
-Highlighted Element Data: {"tagName":"div","idValue":"id-one","classes":["class-two"],"size":{"width":100,"height":200},"role":""}
-
--- Running test case: ChildFrameNodeViaNodeId
-PASS: Should be one highlighted node.
-Highlighted Element Data: {"tagName":"div","idValue":"id-one","size":{"width":150,"height":250},"role":""}
-
--- Running test case: MainFrameNodeViaObjectId
-PASS: Should be one highlighted node.
-Highlighted Element Data: {"tagName":"div","idValue":"id-one","classes":["class-two"],"size":{"width":100,"height":200},"role":""}
-
--- Running test case: ChildFrameNodeViaObjectId
-PASS: Should be one highlighted node.
-Highlighted Element Data: {"tagName":"div","idValue":"id-one","size":{"width":150,"height":250},"role":""}
-
--- Running test case: MissingNodeAndObjectIdShouldError
-PASS: Should produce an exception.
-Error: Either nodeId or objectId must be specified
-
--- Running test case: BadNodeId
-PASS: Should produce an exception.
-Error: Could not find node with given id
-
--- Running test case: BadObjectId
-PASS: Should produce an exception.
-Error: Node for given objectId not found
-
diff --git a/LayoutTests/inspector/dom/highlightNode.html b/LayoutTests/inspector/dom/highlightNode.html
deleted file mode 100644 (file)
index 8e84808..0000000
+++ /dev/null
@@ -1,163 +0,0 @@
-<!doctype html>
-<html>
-<head>
-<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
-<script>
-function test()
-{
-    let suite = InspectorTest.createAsyncSuite("DOM.highlightNode");
-
-    let mainFrame = WI.networkManager.mainFrame;
-    let childFrames = Array.from(mainFrame.childFrameCollection);
-    InspectorTest.expectEqual(childFrames.length, 1, "Page should have a subframe.");
-
-    const highlightConfig = {
-        showInfo: true,
-        contentColor: {r: 255, g: 255, b: 255},
-        paddingColor: {r: 255, g: 255, b: 255},
-        borderColor: {r: 255, g: 255, b: 255},
-        marginColor: {r: 255, g: 255, b: 255},
-    };
-
-    function getHighlight(callback) {
-        InspectorTest.evaluateInPage("window.internals.inspectorHighlightObject()", (error, value, wasThrown) => {
-            InspectorTest.assert(!error, "Unexpected error dumping highlight: " + error);
-            InspectorTest.assert(!wasThrown, "Unexpected exception when dumping highlight.");
-            callback(JSON.parse(value));
-        });
-    }
-
-    function dumpHighlight(callback) {
-        getHighlight((highlightObjectPayload) => {
-            InspectorTest.expectEqual(highlightObjectPayload.length, 1, "Should be one highlighted node.");
-            InspectorTest.log("Highlighted Element Data: " + JSON.stringify(highlightObjectPayload[0].elementData));
-            callback();
-        });
-    }
-
-
-    let mainFrameDocumentNodeId, mainFrameTargetNode;
-    let childFrameDocumentNodeId, childFrameTargetNode;
-
-    suite.addTestCase({
-        name: "CheckEmptyHighlight",
-        description: "Should not be a highlight yet.",
-        test(resolve, reject) {
-            getHighlight((highlightObjectPayload) => {
-                InspectorTest.expectEqual(highlightObjectPayload.length, 0, "Should not be a highlight yet.");
-                resolve();
-            });
-        }
-    });
-
-    suite.addTestCase({
-        name: "MainFrameNodeViaNodeId",
-        description: "Should highlight a node in the main frame using node id.",
-        test(resolve, reject) {
-            WI.domManager.querySelector(mainFrameDocumentNodeId, "#id-one", function(nodeId) {
-                mainFrameTargetNode = WI.domManager.nodeForId(nodeId);
-                DOMAgent.highlightNode(highlightConfig, mainFrameTargetNode.id, undefined, (error) => {
-                    InspectorTest.assert(!error, "Should not have an error.");
-                    dumpHighlight(resolve);
-                });
-            });
-        }
-    });
-
-    suite.addTestCase({
-        name: "ChildFrameNodeViaNodeId",
-        description: "Should highlight a node in the child frame using node id.",
-        test(resolve, reject) {
-            WI.domManager.querySelector(childFrameDocumentNodeId, "#id-one", function(nodeId) {
-                childFrameTargetNode = WI.domManager.nodeForId(nodeId);
-                DOMAgent.highlightNode(highlightConfig, childFrameTargetNode.id, undefined, (error) => {
-                    InspectorTest.assert(!error, "Should not have an error.");
-                    dumpHighlight(resolve);
-                });
-            });
-        }
-    });
-
-    suite.addTestCase({
-        name: "MainFrameNodeViaObjectId",
-        description: "Should highlight a node in the main frame using object id.",
-        test(resolve, reject) {
-            WI.RemoteObject.resolveNode(mainFrameTargetNode, "test").then((remoteObject) => {
-                DOMAgent.highlightNode(highlightConfig, undefined, remoteObject.objectId, (error) => {
-                    InspectorTest.assert(!error, "Should not have an error.");
-                    dumpHighlight(resolve);
-                });
-            })
-            .catch(reject);
-        }
-    });
-
-    suite.addTestCase({
-        name: "ChildFrameNodeViaObjectId",
-        description: "Should highlight a node in the child frame using object id.",
-        test(resolve, reject) {
-            WI.RemoteObject.resolveNode(childFrameTargetNode, "test").then((remoteObject) => {
-                DOMAgent.highlightNode(highlightConfig, undefined, remoteObject.objectId, (error) => {
-                    InspectorTest.assert(!error, "Should not have an error.");
-                    dumpHighlight(resolve);
-                });
-            })
-            .catch(reject);
-        }
-    });
-
-    // ------
-
-    suite.addTestCase({
-        name: "MissingNodeAndObjectIdShouldError",
-        description: "Missing identifiers should cause an error.",
-        async test() {
-            await InspectorTest.expectException(async () => {
-                await DOMAgent.highlightNode(highlightConfig, undefined, undefined);
-            });
-        }
-    });
-
-    suite.addTestCase({
-        name: "BadNodeId",
-        description: "Bad node id should cause an error.",
-        async test() {
-            await InspectorTest.expectException(async () => {
-                await DOMAgent.highlightNode(highlightConfig, 9999999, undefined);
-            });
-        }
-    });
-
-    suite.addTestCase({
-        name: "BadObjectId",
-        description: "Bad object id should cause an error.",
-        async test() {
-            await InspectorTest.expectException(async () => {
-                await DOMAgent.highlightNode(highlightConfig, undefined, "bad-object-id");
-            });
-        }
-    });
-
-    WI.domManager.requestDocument((documentNode) => {
-        mainFrameDocumentNodeId = documentNode.id;
-        RuntimeAgent.evaluate.invoke({expression: "document", objectGroup: "test", contextId: childFrames[0].pageExecutionContext.id}, (error, remoteObjectPayload) => {
-            let remoteObject = WI.RemoteObject.fromPayload(remoteObjectPayload)
-            remoteObject.pushNodeToFrontend((documentNodeId) => {
-                childFrameDocumentNodeId = documentNodeId
-
-                suite.runTestCasesAndFinish();
-            });
-        })
-    });
-}
-</script>
-</head>
-<body onload="runTest()">
-    <p>Tests for the DOM.highlightNode command.</p>
-    <div style="width: 500px; height: 500px">
-        <div class="class-one" style="width: 10px; height: 20px"></div>
-        <div id="id-one" class="class-two" style="width:100px; height: 200px"></div>
-        <iframe class="class-one" src="resources/highlight-iframe.html"></iframe>
-    </div>
-</body>
-</html>
diff --git a/LayoutTests/inspector/dom/highlightNodeList-expected.txt b/LayoutTests/inspector/dom/highlightNodeList-expected.txt
deleted file mode 100644 (file)
index ab2c182..0000000
+++ /dev/null
@@ -1,78 +0,0 @@
-Tests for the DOM.highlightNodeList command.
-
-
-PASS: Page should have a subframe.
-
-== Running test suite: DOM.highlightNodeList
--- Running test case: DOM.highlightNodeList.CheckEmptyHighlight
-PASS: Highlight should not exist.
-
--- Running test case: DOM.highlightNodeList.emptyNodeList
-PASS: Should highlight 0 element(s).
-
--- Running test case: DOM.highlightNodeList.mainFrameNode
-PASS: Should highlight 3 element(s).
-Highlighted Elements:
-{
-  "tagName": "div",
-  "idValue": "",
-  "size": {
-    "width": 500,
-    "height": 500
-  },
-  "role": ""
-}
-{
-  "tagName": "div",
-  "idValue": "",
-  "classes": [
-    "class-one"
-  ],
-  "size": {
-    "width": 10,
-    "height": 20
-  },
-  "role": ""
-}
-{
-  "tagName": "div",
-  "idValue": "id-one",
-  "classes": [
-    "class-two"
-  ],
-  "size": {
-    "width": 100,
-    "height": 200
-  },
-  "role": ""
-}
-
--- Running test case: DOM.highlightNodeList.childFrameNode
-PASS: Should highlight 2 element(s).
-Highlighted Elements:
-{
-  "tagName": "div",
-  "idValue": "id-one",
-  "size": {
-    "width": 150,
-    "height": 250
-  },
-  "role": ""
-}
-{
-  "tagName": "div",
-  "idValue": "",
-  "size": {
-    "width": 269,
-    "height": 0
-  },
-  "role": ""
-}
-
--- Running test case: DOM.highlightNodeList.invalidNodeId
-PASS: Should highlight 0 element(s).
-
--- Running test case: DOM.highlightNodeList.nonIntegerNodeId
-PASS: Should produce an error.
-Error: Invalid nodeIds item type. Expecting integer types.
-
diff --git a/LayoutTests/inspector/dom/highlightNodeList.html b/LayoutTests/inspector/dom/highlightNodeList.html
deleted file mode 100644 (file)
index 028dc88..0000000
+++ /dev/null
@@ -1,162 +0,0 @@
-<!doctype html>
-<html>
-<head>
-<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
-<script>
-function test()
-{
-    let suite = InspectorTest.createAsyncSuite("DOM.highlightNodeList");
-
-    let mainFrame = WI.networkManager.mainFrame;
-    let childFrames = Array.from(mainFrame.childFrameCollection);
-    InspectorTest.expectEqual(childFrames.length, 1, "Page should have a subframe.");
-
-    const highlightConfig = {
-        showInfo: true,
-        contentColor: {r: 255, g: 255, b: 255},
-        paddingColor: {r: 255, g: 255, b: 255},
-        borderColor: {r: 255, g: 255, b: 255},
-        marginColor: {r: 255, g: 255, b: 255},
-    };
-
-    function getHighlight(callback) {
-        InspectorTest.evaluateInPage("window.internals.inspectorHighlightObject()", (error, value, wasThrown) => {
-            InspectorTest.assert(!error, "Unexpected error dumping highlight: " + error);
-            InspectorTest.assert(!wasThrown, "Unexpected exception when dumping highlight.");
-            callback(JSON.parse(value));
-        });
-    }
-
-    function dumpHighlight(expectedElements, callback) {
-        getHighlight((highlightPayloadList) => {
-            InspectorTest.expectThat(highlightPayloadList.length === expectedElements, `Should highlight ${expectedElements} element(s).`);
-            if (highlightPayloadList.length) {
-                InspectorTest.log("Highlighted Elements:");
-                for (let highlightPayload of highlightPayloadList)
-                    InspectorTest.log(JSON.stringify(highlightPayload.elementData, null, 2));
-            }
-            callback();
-        });
-    }
-
-    let mainFrameDocumentNodeId = 0;
-    let childFrameDocumentNodeId = 0;
-
-    suite.addTestCase({
-        name: "DOM.highlightNodeList.CheckEmptyHighlight",
-        description: "Check that highlight list is initially empty.",
-        test(resolve, reject) {
-            getHighlight((highlightObjectPayload) => {
-                InspectorTest.expectEqual(highlightObjectPayload.length, 0, "Highlight should not exist.");
-                resolve();
-            });
-        }
-    });
-
-    suite.addTestCase({
-        name: "DOM.highlightNodeList.emptyNodeList",
-        description: "Checks that an empty array highlights no elements.",
-        test(resolve, reject) {
-            DOMAgent.highlightNodeList([], highlightConfig, (error) => {
-                if (error) {
-                    reject(error);
-                    return;
-                }
-
-                const expectedElements = 0;
-                dumpHighlight(expectedElements, resolve);
-            });
-        }
-    });
-
-    suite.addTestCase({
-        name: "DOM.highlightNodeList.mainFrameNode",
-        description: "Should highlight all div in the main frame.",
-        test(resolve, reject) {
-            WI.domManager.querySelectorAll(mainFrameDocumentNodeId, "div", (nodeIds) => {
-                DOMAgent.highlightNodeList(nodeIds, highlightConfig, (error) => {
-                    if (error) {
-                        reject(error);
-                        return;
-                    }
-
-                    const expectedElements = 3;
-                    dumpHighlight(expectedElements, resolve);
-                });
-            });
-        }
-    });
-
-    suite.addTestCase({
-        name: "DOM.highlightNodeList.childFrameNode",
-        description: "Should highlight all div in the child frame.",
-        test(resolve, reject) {
-            WI.domManager.querySelectorAll(childFrameDocumentNodeId, "div", (nodeIds) => {
-                DOMAgent.highlightNodeList(nodeIds, highlightConfig, (error) => {
-                    if (error) {
-                        reject(error);
-                        return;
-                    }
-
-                    const expectedElements = 2;
-                    dumpHighlight(expectedElements, resolve);
-                });
-            });
-        }
-    });
-
-    suite.addTestCase({
-        name: "DOM.highlightNodeList.invalidNodeId",
-        description: "Bad node id should not cause an error.",
-        test(resolve, reject) {
-            const invalidNodeId = 9999999;
-            DOMAgent.highlightNodeList([invalidNodeId], highlightConfig, (error) => {
-                if (error) {
-                    reject(error);
-                    return;
-                }
-
-                const expectedElements = 0;
-                dumpHighlight(expectedElements, resolve);
-            });
-        }
-    });
-
-    // ------
-
-    suite.addTestCase({
-        name: "DOM.highlightNodeList.nonIntegerNodeId",
-        description: "Non-integer item for node id should cause an error.",
-        test(resolve, reject) {
-            const nonIntegerNodeId = "DOES_NOT_EXIST";
-            DOMAgent.highlightNodeList([nonIntegerNodeId], highlightConfig, (error) => {
-                InspectorTest.expectThat(error, "Should produce an error.");
-                InspectorTest.log("Error: " + error);
-                resolve();
-            });
-        }
-    });
-
-    WI.domManager.requestDocument((documentNode) => {
-        mainFrameDocumentNodeId = documentNode.id;
-        RuntimeAgent.evaluate.invoke({expression: "document", objectGroup: "test", contextId: childFrames[0].pageExecutionContext.id}, (error, remoteObjectPayload) => {
-            let remoteObject = WI.RemoteObject.fromPayload(remoteObjectPayload)
-            remoteObject.pushNodeToFrontend((documentNodeId) => {
-                childFrameDocumentNodeId = documentNodeId;
-
-                suite.runTestCasesAndFinish();
-            });
-        })
-    });
-}
-</script>
-</head>
-<body onload="runTest()">
-    <p>Tests for the DOM.highlightNodeList command.</p>
-    <div style="width: 500px; height: 500px">
-        <div class="class-one" style="width: 10px; height: 20px"></div>
-        <div id="id-one" class="class-two" style="width:100px; height: 200px"></div>
-        <iframe class="class-one" src="resources/highlight-iframe.html"></iframe>
-    </div>
-</body>
-</html>
diff --git a/LayoutTests/inspector/dom/highlightSelector-expected.txt b/LayoutTests/inspector/dom/highlightSelector-expected.txt
deleted file mode 100644 (file)
index 7e96716..0000000
+++ /dev/null
@@ -1,83 +0,0 @@
-Tests for the DOM.highlightSelector command.
-
-
-PASS: Page should have a subframe.
-
-== Running test suite: DOM.highlightSelector
--- Running test case: MainFrameTagSelector
-- Frame: <main-frame>
-- Selector: div
-PASS: Should highlight 3 element(s).
-Highlighted Elements:
-{"tagName":"div","idValue":"","size":{"width":500,"height":500},"role":""}
-{"tagName":"div","idValue":"","classes":["class-one",".escaped"],"size":{"width":10,"height":20},"role":""}
-{"tagName":"div","idValue":"id-one","classes":["class-two"],"size":{"width":100,"height":200},"role":""}
-
--- Running test case: MainFrameWithClassSelector
-- Frame: <main-frame>
-- Selector: .class-one
-PASS: Should highlight 2 element(s).
-Highlighted Elements:
-{"tagName":"div","idValue":"","classes":["class-one",".escaped"],"size":{"width":10,"height":20},"role":""}
-{"tagName":"iframe","idValue":"","classes":["class-one"],"size":{"width":304,"height":154},"role":""}
-
--- Running test case: MainFrameWithMultipleClassSelector
-- Frame: <main-frame>
-- Selector: .class-one.\.escaped
-PASS: Should highlight 1 element(s).
-Highlighted Elements:
-{"tagName":"div","idValue":"","classes":["class-one",".escaped"],"size":{"width":10,"height":20},"role":""}
-
--- Running test case: MainFrameIdSelector
-- Frame: <main-frame>
-- Selector: #id-one
-PASS: Should highlight 1 element(s).
-Highlighted Elements:
-{"tagName":"div","idValue":"id-one","classes":["class-two"],"size":{"width":100,"height":200},"role":""}
-
--- Running test case: MainFrameMultipleSelectors
-- Frame: <main-frame>
-- Selector: .class-one, .class-two
-PASS: Should highlight 3 element(s).
-Highlighted Elements:
-{"tagName":"div","idValue":"","classes":["class-one",".escaped"],"size":{"width":10,"height":20},"role":""}
-{"tagName":"div","idValue":"id-one","classes":["class-two"],"size":{"width":100,"height":200},"role":""}
-{"tagName":"iframe","idValue":"","classes":["class-one"],"size":{"width":304,"height":154},"role":""}
-
--- Running test case: MissingOptionalFrameIdShouldUseMainFrame
-- Frame: Not Provided
-- Selector: iframe.class-one
-PASS: Should highlight 1 element(s).
-Highlighted Elements:
-{"tagName":"iframe","idValue":"","classes":["class-one"],"size":{"width":304,"height":154},"role":""}
-
--- Running test case: MainFrameNonMatchingSelector
-- Frame: <main-frame>
-- Selector: .no-elements
-PASS: Should highlight 0 element(s).
-
--- Running test case: BadFrameShouldError
-- Frame: Bad Value
-- Selector: div
-PASS: Should throw error: No frame for given id found
-
--- Running test case: BadSelectorShouldError
-- Frame: <main-frame>
-- Selector: $%foobar
-PASS: Should throw error: DOM Error while querying
-
--- Running test case: ChildFrameTagSelector
-- Frame: <child-frame>
-- Selector: div
-PASS: Should highlight 2 element(s).
-Highlighted Elements:
-{"tagName":"div","idValue":"id-one","size":{"width":150,"height":250},"role":""}
-{"tagName":"div","idValue":"","size":{"width":269,"height":0},"role":""}
-
--- Running test case: ChildFrameIdSelector
-- Frame: <child-frame>
-- Selector: #id-one
-PASS: Should highlight 1 element(s).
-Highlighted Elements:
-{"tagName":"div","idValue":"id-one","size":{"width":150,"height":250},"role":""}
-
diff --git a/LayoutTests/inspector/dom/highlightSelector.html b/LayoutTests/inspector/dom/highlightSelector.html
deleted file mode 100644 (file)
index 9610322..0000000
+++ /dev/null
@@ -1,150 +0,0 @@
-<!doctype html>
-<html>
-<head>
-<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
-<script>
-function test()
-{
-    let suite = InspectorTest.createAsyncSuite("DOM.highlightSelector");
-
-    let mainFrame = WI.networkManager.mainFrame;
-    let childFrames = Array.from(mainFrame.childFrameCollection);
-    InspectorTest.expectEqual(childFrames.length, 1, "Page should have a subframe.");
-
-    let mainFrameId = mainFrame.id;
-    let childFrameId = childFrames[0].id;
-
-    const highlightConfig = {
-        showInfo: true,
-        contentColor: {r: 255, g: 255, b: 255},
-        paddingColor: {r: 255, g: 255, b: 255},
-        borderColor: {r: 255, g: 255, b: 255},
-        marginColor: {r: 255, g: 255, b: 255},
-    };
-
-    let tests = [
-        {
-            name: "MainFrameTagSelector",
-            frameId: mainFrameId,
-            selector: "div",
-            expectedElements: 3,
-        },
-        {
-            name: "MainFrameWithClassSelector",
-            frameId: mainFrameId,
-            selector: ".class-one",
-            expectedElements: 2,
-        },
-        {
-            name: "MainFrameWithMultipleClassSelector",
-            frameId: mainFrameId,
-            selector: ".class-one.\\.escaped",
-            expectedElements: 1,
-        },
-        {
-            name: "MainFrameIdSelector",
-            frameId: mainFrameId,
-            selector: "#id-one",
-            expectedElements: 1,
-        },
-        {
-            name: "MainFrameMultipleSelectors",
-            frameId: mainFrameId,
-            selector: ".class-one, .class-two",
-            expectedElements: 3,
-        },
-        {
-            name: "MissingOptionalFrameIdShouldUseMainFrame",
-            selector: "iframe.class-one",
-            expectedElements: 1,
-        },
-        {
-            name: "MainFrameNonMatchingSelector",
-            frameId: mainFrameId,
-            selector: ".no-elements",
-            expectedElements: 0,
-        },
-        {
-            name: "BadFrameShouldError",
-            frameId: "x.x",
-            selector: "div",
-            expectError: true,
-        },
-        {
-            name: "BadSelectorShouldError",
-            frameId: mainFrameId,
-            selector: "$%foobar",
-            expectError: true,
-        },
-        {
-            name: "ChildFrameTagSelector",
-            frameId: childFrameId,
-            selector: "div",
-            expectedElements: 2,
-        },
-        {
-            name: "ChildFrameIdSelector",
-            frameId: childFrameId,
-            selector: "#id-one",
-            expectedElements: 1,
-        },
-    ];
-
-    function displayNameForFrameId(frameId) {
-        if (frameId === undefined)
-            return "Not Provided";
-        if (frameId === mainFrameId)
-            return "<main-frame>";
-        if (frameId === childFrameId)
-            return "<child-frame>";
-        return "Bad Value";
-    }
-
-    function getHighlight(callback) {
-        InspectorTest.evaluateInPage("window.internals.inspectorHighlightObject()", (error, value, wasThrown) => {
-            InspectorTest.assert(!error, "Unexpected error dumping highlight: " + error);
-            InspectorTest.assert(!wasThrown, "Unexpected exception when dumping highlight.");
-            callback(JSON.parse(value));
-        });
-    }
-
-    for (let {name, frameId, selector, expectedElements, expectError} of tests) {
-        suite.addTestCase({
-            name,
-            test(resolve, reject) {
-                InspectorTest.log("- Frame: " + displayNameForFrameId(frameId));
-                InspectorTest.log("- Selector: " + selector);
-                DOMAgent.highlightSelector(highlightConfig, selector, frameId, (error) => {
-                    if (expectError) {
-                        InspectorTest.expectThat(error, "Should throw error: " + error);
-                        resolve();
-                    } else {
-                        InspectorTest.assert(!error, "Should not throw error.");
-                        getHighlight((highlightPayloadList) => {
-                            InspectorTest.expectThat(highlightPayloadList.length === expectedElements, `Should highlight ${expectedElements} element(s).`);
-                            if (highlightPayloadList.length) {
-                                InspectorTest.log("Highlighted Elements:");
-                                for (let highlightPayload of highlightPayloadList)
-                                    InspectorTest.log(JSON.stringify(highlightPayload.elementData));
-                            }
-                            resolve();
-                        });
-                    }
-                });
-            }
-        });
-    }
-
-    suite.runTestCasesAndFinish();
-}
-</script>
-</head>
-<body onload="runTest()">
-    <p>Tests for the DOM.highlightSelector command.</p>
-    <div style="width: 500px; height: 500px">
-        <div class="class-one .escaped" style="width: 10px; height: 20px"></div>
-        <div id="id-one" class="class-two" style="width:100px; height: 200px"></div>
-        <iframe class="class-one" src="resources/highlight-iframe.html"></iframe>
-    </div>
-</body>
-</html>
index f58395c..03a20a1 100644 (file)
@@ -1062,7 +1062,6 @@ webkit.org/b/169119 [ Debug ] inspector/debugger/tail-deleted-frames-this-value.
 webkit.org/b/168387 [ Debug ] inspector/debugger/tail-recursion.html [ Pass Timeout ]
 webkit.org/b/170127 inspector/dom-debugger/dom-breakpoints.html [ Pass Timeout ]
 webkit.org/b/148636 inspector/dom/getAccessibilityPropertiesForNode.html [ Pass Timeout ]
-webkit.org/b/148636 inspector/dom/highlight-shape-outside.html [ Pass Timeout ]
 webkit.org/b/154610 inspector/dom-debugger/node-removed.html [ Pass Timeout ]
 webkit.org/b/153039 [ Debug ] inspector/heap/garbageCollected.html [ Pass Timeout ]
 webkit.org/b/167408 [ Debug ] inspector/heap/gc.html [ Slow ]
diff --git a/ManualTests/inspector/overlay-nodes.html b/ManualTests/inspector/overlay-nodes.html
new file mode 100644 (file)
index 0000000..676fd21
--- /dev/null
@@ -0,0 +1,131 @@
+<style>
+p {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    margin: 0;
+}
+[id^="test"] {
+    position: relative;
+    pointer-events: none;
+
+    --content: 0;
+    --padding: 0;
+    --border: 0;
+    --margin: 0;
+
+    --content-color: rgba(246, 178, 107, 0.66);
+    --padding-color: rgba(255, 229, 153, 0.66);
+    --border-color: rgba(147, 196, 125, 0.66);
+    --margin-color: rgba(111, 168, 220, 0.66);
+}
+.expected {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    pointer-events: none;
+}
+.expected > .margin {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: calc((var(--border) * 2) + (var(--padding) * 2) + var(--content));
+    height: calc((var(--border) * 2) + (var(--padding) * 2) + var(--content));
+    border: var(--margin) solid var(--content-color);
+}
+.expected > .border {
+    position: absolute;
+    top: var(--margin);
+    left: var(--margin);
+    width: calc((var(--padding) * 2) + var(--content));
+    height: calc((var(--padding) * 2) + var(--content));
+    border: var(--border) solid var(--padding-color);
+}
+.expected > .padding {
+    position: absolute;
+    top: calc(var(--margin) + var(--border));
+    left: calc(var(--margin) + var(--border));
+    width: var(--content);
+    height: var(--content);
+    border: var(--padding) solid var(--border-color);
+}
+.expected > .content {
+    position: absolute;
+    top: calc(var(--margin) + var(--border) + var(--padding));
+    left: calc(var(--margin) + var(--border) + var(--padding));
+    width: var(--content);
+    height: var(--content);
+    background-color: var(--margin-color);
+}
+.actual {
+    display: inline-block;
+    pointer-events: all;
+    width: var(--content);
+    height: var(--content);
+    margin: var(--margin);
+    padding: var(--padding);
+    border: var(--border) solid transparent;
+}
+.clear {
+    clear: both;
+}
+
+#test1 {
+    --content: 10px;
+    --padding: 20px;
+    --border: 30px;
+    --margin: 40px;
+}
+
+#test2 {
+    --content: 100px;
+}
+#test2 > .expected > .content::after {
+    display: block;
+    width: 100%;
+    height: 100%;
+    content: "";
+    background-color: rgba(96, 82, 127, 0.8);
+    border-radius: 50%;
+}
+#test2 > .actual {
+    float: left;
+    shape-outside: ellipse(50%);
+}
+</style>
+<body>
+    <div id="test1">
+        <div class="expected" hidden>
+            <div class="margin"></div>
+            <div class="border"></div>
+            <div class="padding"></div>
+            <div class="content"></div>
+        </div>
+        <div class="actual"></div>
+        <div class="clear"></div>
+    </div>
+
+    <hr>
+
+    <div id="test2">
+        <div class="expected" hidden>
+            <div class="margin"></div>
+            <div class="border"></div>
+            <div class="padding"></div>
+            <div class="content"></div>
+        </div>
+        <div class="actual"></div>
+        <div class="clear"></div>
+    </div>
+
+    <p>Inspect this page and hover each test area in the Elements tab.  Click <button>Show Expected</button> to compare with the expected result.</p>
+    <script>
+let showingExpected = false;
+document.querySelector("button").addEventListener("click", (event) => {
+    showingExpected = !showingExpected;
+    for (let node of document.querySelectorAll(".expected"))
+        node.hidden = !showingExpected;
+});
+    </script>
+</body>
diff --git a/ManualTests/inspector/overlay-rulers.html b/ManualTests/inspector/overlay-rulers.html
new file mode 100644 (file)
index 0000000..5adcf4b
--- /dev/null
@@ -0,0 +1,37 @@
+<style>
+p {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    margin: 0;
+}
+.expected {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 300px;
+    height: 300px;
+}
+.actual {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+    width: 100px;
+    height: 100px;
+    outline: 1px solid black;
+}
+</style>
+<body>
+    <img class="expected" hidden src="data:image/png;base64,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">
+    <div class="actual"></div>
+
+    <p>Inspect this page and hover each test area in the Elements tab.  Click <button>Show Expected</button> to compare with the expected result.</p>
+    <script>
+let showingExpected = false;
+document.querySelector("button").addEventListener("click", (event) => {
+    showingExpected = !showingExpected;
+    for (let node of document.querySelectorAll(".expected"))
+        node.hidden = !showingExpected;
+});
+    </script>
+</body>
index 6afab27..29d9a9f 100644 (file)
@@ -1096,7 +1096,6 @@ set(JavaScriptCore_INSPECTOR_DOMAINS
     ${JAVASCRIPTCORE_DIR}/inspector/protocol/Inspector.json
     ${JAVASCRIPTCORE_DIR}/inspector/protocol/LayerTree.json
     ${JAVASCRIPTCORE_DIR}/inspector/protocol/Network.json
-    ${JAVASCRIPTCORE_DIR}/inspector/protocol/OverlayTypes.json
     ${JAVASCRIPTCORE_DIR}/inspector/protocol/Page.json
     ${JAVASCRIPTCORE_DIR}/inspector/protocol/Recording.json
     ${JAVASCRIPTCORE_DIR}/inspector/protocol/Runtime.json
index 2a514c0..802f9d2 100644 (file)
@@ -1,3 +1,25 @@
+2019-02-24  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Change the InspectorOverlay to use native rather than canvas
+        https://bugs.webkit.org/show_bug.cgi?id=105023
+        <rdar://problem/13443692>
+
+        Reviewed by Brian Burg.
+
+        * inspector/protocol/OverlayTypes.json: Removed.
+        Now that the overlay is entirely generated in C++, we no longer need the special prototol
+        types for transferring data to a JavaScript context.
+
+        * inspector/protocol/Debugger.json:
+        * inspector/agents/InspectorDebuggerAgent.h:
+        * inspector/agents/InspectorDebuggerAgent.cpp:
+        (Inspector::InspectorDebuggerAgent::setOverlayMessage): Deleted.
+        Remove `Debugger.setOverlayMessage` command as it hasn't been used and is no longer supported.
+
+        * CMakeLists.txt:
+        * DerivedSources-input.xcfilelist:
+        * DerivedSources.make:
+
 2019-02-24  Yusuke Suzuki  <ysuzuki@apple.com>
 
         [JSC] Lazily create sentinel Map and Set buckets
index 59ac1c4..c61d435 100644 (file)
@@ -94,7 +94,6 @@ $(PROJECT_DIR)/inspector/protocol/Inspector.json
 $(PROJECT_DIR)/inspector/protocol/LayerTree.json
 $(PROJECT_DIR)/inspector/protocol/Memory.json
 $(PROJECT_DIR)/inspector/protocol/Network.json
-$(PROJECT_DIR)/inspector/protocol/OverlayTypes.json
 $(PROJECT_DIR)/inspector/protocol/Page.json
 $(PROJECT_DIR)/inspector/protocol/Recording.json
 $(PROJECT_DIR)/inspector/protocol/Runtime.json
index 3b5e105..c066081 100644 (file)
@@ -243,7 +243,6 @@ INSPECTOR_DOMAINS := \
     $(JavaScriptCore)/inspector/protocol/Inspector.json \
     $(JavaScriptCore)/inspector/protocol/LayerTree.json \
     $(JavaScriptCore)/inspector/protocol/Network.json \
-    $(JavaScriptCore)/inspector/protocol/OverlayTypes.json \
     $(JavaScriptCore)/inspector/protocol/Page.json \
     $(JavaScriptCore)/inspector/protocol/Recording.json \
     $(JavaScriptCore)/inspector/protocol/Runtime.json \
index 5631672..2c383da 100644 (file)
@@ -857,10 +857,6 @@ void InspectorDebuggerAgent::evaluateOnCallFrame(ErrorString& errorString, const
     }
 }
 
-void InspectorDebuggerAgent::setOverlayMessage(ErrorString&, const String*)
-{
-}
-
 void InspectorDebuggerAgent::scriptExecutionBlockedByCSP(const String& directiveText)
 {
     if (m_scriptDebugServer.pauseOnExceptionsState() != JSC::Debugger::DontPauseOnExceptions)
index ca75073..e657da1 100644 (file)
@@ -80,7 +80,6 @@ public:
     void setPauseOnExceptions(ErrorString&, const String& pauseState) final;
     void setPauseOnAssertions(ErrorString&, bool enabled) final;
     void evaluateOnCallFrame(ErrorString&, const String& callFrameId, const String& expression, const String* objectGroup, const bool* includeCommandLineAPI, const bool* doNotPauseOnExceptionsAndMuteConsole, const bool* returnByValue, const bool* generatePreview, const bool* saveResult, RefPtr<Protocol::Runtime::RemoteObject>& result, Optional<bool>& wasThrown, Optional<int>& savedResultIndex) final;
-    void setOverlayMessage(ErrorString&, const String*) override;
 
     bool isPaused() const;
     bool breakpointsActive() const;
index 2ee4442..a5495ca 100644 (file)
                 { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
                 { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the result was saved, this is the $n index that can be used to access the value." }
             ]
-        },
-        {
-            "name": "setOverlayMessage",
-            "description": "Sets overlay message.",
-            "parameters": [
-                { "name": "message", "type": "string", "optional": true, "description": "Overlay message to display when paused in debugger." }
-            ]
         }
     ],
     "events": [
diff --git a/Source/JavaScriptCore/inspector/protocol/OverlayTypes.json b/Source/JavaScriptCore/inspector/protocol/OverlayTypes.json
deleted file mode 100644 (file)
index 813fb60..0000000
+++ /dev/null
@@ -1,105 +0,0 @@
-{
-    "domain": "OverlayTypes",
-    "description": "Exposes types to be used by the inspector overlay.",
-    "types": [
-        {
-            "id": "Point",
-            "type": "object",
-            "properties": [
-                { "name": "x", "type": "number" },
-                { "name": "y", "type": "number" }
-            ]
-        },
-        {
-            "id": "Size",
-            "type": "object",
-            "properties": [
-                { "name": "width", "type": "integer" },
-                { "name": "height", "type": "integer" }
-            ]
-        },
-        {
-            "id": "Quad",
-            "description": "A quad is a collection of 4 points. When initialized from a rect, the points are in clockwise order from top left.",
-            "type": "array",
-            "items": { "$ref": "Point" }
-        },
-        {
-            "id": "Rect",
-            "description": "A rectangle specified by a reference coordinate and width/height offsets.",
-            "type": "object",
-            "properties": [
-                { "name": "x", "type": "number" },
-                { "name": "y", "type": "number" },
-                { "name": "width", "type": "number" },
-                { "name": "height", "type": "number" }
-            ]
-        },
-        {
-            "id": "DisplayPath",
-            "description": "A vector path described using SVG path syntax.",
-            "type": "array",
-            "items": { "type": "any" }
-        },
-        {
-            "id": "ShapeOutsideData",
-            "type": "object",
-            "properties": [
-                { "name": "bounds", "$ref": "Quad", "description": "Bounds for the shape-outside paths." },
-                { "name": "shape", "$ref": "DisplayPath", "description": "Path for the element's shape.", "optional": true },
-                { "name": "marginShape", "$ref": "DisplayPath", "description": "Path for the element's margin shape.", "optional": true }
-            ]
-        },
-        {
-            "id": "ElementData",
-            "description": "Data that describes an element to be highlighted.",
-            "type": "object",
-            "properties": [
-                { "name": "tagName", "type": "string" },
-                { "name": "idValue", "type": "string", "description": "The value of the element's 'id' attribute." },
-                { "name": "classes", "type": "array", "items": { "type": "string" }, "optional": true },
-                { "name": "size", "$ref": "Size", "optional": true },
-                { "name": "role", "type": "string", "description": "Computed accessibility role for the element.", "optional": true },
-                { "name": "pseudoElement", "type": "string", "optional": true },
-                { "name": "shapeOutsideData", "$ref": "ShapeOutsideData", "optional": true }
-            ]
-        },
-        {
-            "id": "FragmentHighlightData",
-            "description": "Data required to highlight multiple quads.",
-            "type": "object",
-            "properties": [
-                { "name": "quads", "type": "array", "items": { "$ref": "Quad" }, "description": "Quads for which the highlight should be applied."},
-                { "name": "contentColor", "type": "string" },
-                { "name": "contentOutlineColor", "type": "string" },
-                { "name": "paddingColor", "type": "string" },
-                { "name": "borderColor", "type": "string" },
-                { "name": "marginColor", "type": "string" }
-            ]
-        },
-        {
-            "id": "NodeHighlightData",
-            "description": "Data required to highlight a DOM node.",
-            "type": "object",
-            "properties": [
-                { "name": "scrollOffset", "$ref": "Point", "description": "Scroll offset for the MainFrame's FrameView that is shared across all quads." },
-                { "name": "fragments", "type": "array", "items": { "$ref": "FragmentHighlightData" } },
-                { "name": "elementData", "$ref": "ElementData", "optional": true }
-            ]
-        },
-        {
-            "id": "OverlayConfiguration",
-            "description": "Data required to configure the overlay's size and scaling behavior.",
-            "type": "object",
-            "properties": [
-                { "name": "deviceScaleFactor", "type": "number" },
-                { "name": "viewportSize", "$ref": "Size" },
-                { "name": "pageScaleFactor", "type": "number" },
-                { "name": "pageZoomFactor", "type": "number" },
-                { "name": "scrollOffset", "$ref": "Point" },
-                { "name": "contentInset", "$ref": "Size" },
-                { "name": "showRulers", "type": "boolean" }
-            ]
-        }
-    ]
-}
index 64eab57..cd63192 100644 (file)
@@ -1762,17 +1762,6 @@ set(PAINTWORKLETGLOBALSCOPE_CONSTRUCTORS_FILE ${DERIVED_SOURCES_WEBCORE_DIR}/Pai
 WEBKIT_FRAMEWORK_DECLARE(WebCore)
 WEBKIT_INCLUDE_CONFIG_FILES_IF_EXISTS()
 
-# Generate InspectorOverlayPage.h
-add_custom_command(
-    OUTPUT ${DERIVED_SOURCES_WEBCORE_DIR}/InspectorOverlayPage.h ${DERIVED_SOURCES_WEBCORE_DIR}/InspectorOverlayPage.combined.html
-    MAIN_DEPENDENCY inspector/InspectorOverlayPage.html
-    DEPENDS ${JavaScriptCore_SCRIPTS_DIR}/xxd.pl ${JavaScriptCore_SCRIPTS_DIR}/inline-and-minify-stylesheets-and-scripts.py
-    DEPENDS inspector/InspectorOverlayPage.css inspector/InspectorOverlayPage.js
-    COMMAND ${PYTHON_EXECUTABLE} ${JavaScriptCore_SCRIPTS_DIR}/inline-and-minify-stylesheets-and-scripts.py ${WEBCORE_DIR}/inspector/InspectorOverlayPage.html ${DERIVED_SOURCES_WEBCORE_DIR}/InspectorOverlayPage.combined.html
-    COMMAND ${PERL_EXECUTABLE} ${JavaScriptCore_SCRIPTS_DIR}/xxd.pl InspectorOverlayPage_html ${DERIVED_SOURCES_WEBCORE_DIR}/InspectorOverlayPage.combined.html ${DERIVED_SOURCES_WEBCORE_DIR}/InspectorOverlayPage.h
-    VERBATIM)
-list(APPEND WebCore_SOURCES ${DERIVED_SOURCES_WEBCORE_DIR}/InspectorOverlayPage.h)
-
 
 # Generate CommandLineAPIModuleSource.h
 add_custom_command(
index f2f3489..9b4977a 100644 (file)
@@ -1,3 +1,94 @@
+2019-02-24  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Change the InspectorOverlay to use native rather than canvas
+        https://bugs.webkit.org/show_bug.cgi?id=105023
+        <rdar://problem/13443692>
+
+        Reviewed by Brian Burg.
+
+        Should be no change in observed functionality.
+
+        * inspector/InspectorOverlay.h:
+        * inspector/InspectorOverlay.cpp:
+        (WebCore::truncateWithEllipsis): Added.
+        (WebCore::localPointToRootPoint): Added.
+        (WebCore::contentsQuadToCoordinateSystem):
+        (WebCore::effectiveElementForNode): Added.
+        (WebCore::quadToPath): Added.
+        (WebCore::drawOutlinedQuadWithClip): Added.
+        (WebCore::drawOutlinedQuad): Added.
+        (WebCore::drawFragmentHighlight): Added.
+        (WebCore::drawShapeHighlight): Added.
+        (WebCore::InspectorOverlay::paint):
+        (WebCore::InspectorOverlay::setIndicating):
+        (WebCore::InspectorOverlay::shouldShowOverlay const):
+        (WebCore::InspectorOverlay::update):
+        (WebCore::InspectorOverlay::setShowPaintRects): Added.
+        (WebCore::InspectorOverlay::showPaintRect):
+        (WebCore::InspectorOverlay::updatePaintRectsTimerFired):
+        (WebCore::InspectorOverlay::drawNodeHighlight):
+        (WebCore::InspectorOverlay::drawQuadHighlight):
+        (WebCore::InspectorOverlay::drawPaintRects):
+        (WebCore::InspectorOverlay::drawBounds): Added.
+        (WebCore::InspectorOverlay::drawRulers):
+        (WebCore::InspectorOverlay::drawElementTitle): Added.
+        (WebCore::contentsQuadToPage): Deleted.
+        (WebCore::InspectorOverlay::setPausedInDebuggerMessage): Deleted.
+        (WebCore::buildObjectForPoint): Deleted.
+        (WebCore::buildObjectForRect): Deleted.
+        (WebCore::buildArrayForQuad): Deleted.
+        (WebCore::buildObjectForHighlight): Deleted.
+        (WebCore::buildObjectForSize): Deleted.
+        (WebCore::InspectorOverlay::setShowingPaintRects): Deleted.
+        (WebCore::buildArrayForRendererFragments): Deleted.
+        (WebCore::localPointToRoot): Deleted.
+        (WebCore::appendPathCommandAndPoints): Deleted.
+        (WebCore::appendPathSegment): Deleted.
+        (WebCore::buildObjectForShapeOutside): Deleted.
+        (WebCore::buildObjectForElementData): Deleted.
+        (WebCore::InspectorOverlay::buildHighlightObjectForNode const): Deleted.
+        (WebCore::InspectorOverlay::buildObjectForHighlightedNodes const): Deleted.
+        (WebCore::InspectorOverlay::drawPausedInDebuggerMessage): Deleted.
+        (WebCore::InspectorOverlay::overlayPage): Deleted.
+        (WebCore::InspectorOverlay::forcePaint): Deleted.
+        (WebCore::InspectorOverlay::reset): Deleted.
+        (WebCore::evaluateCommandInOverlay): Deleted.
+        (WebCore::InspectorOverlay::evaluateInOverlay): Deleted.
+        (WebCore::InspectorOverlay::freePage): Deleted.
+
+        * inspector/agents/InspectorPageAgent.cpp:
+        (WebCore::InspectorPageAgent::disable):
+        (WebCore::InspectorPageAgent::setShowPaintRects):
+        Drive-by: rename `setShowingPaintRects` to better match the protocol.
+
+        * inspector/agents/page/PageDebuggerAgent.h:
+        * inspector/agents/page/PageDebuggerAgent.cpp:
+        (WebCore::PageDebuggerAgent::PageDebuggerAgent):
+        (WebCore::PageDebuggerAgent::setOverlayMessage): Deleted.
+        Remove `Debugger.setOverlayMessage` command as it hasn't been used and is no longer supported.
+
+        * inspector/InspectorController.h:
+        * inspector/InspectorController.cpp:
+        (WebCore::InspectorController::createLazyAgents):
+        (WebCore::InspectorController::disconnectFrontend):
+        (WebCore::InspectorController::disconnectAllFrontends):
+        (WebCore::InspectorController::buildObjectForHighlightedNodes const): Deleted.
+
+        * testing/Internals.h:
+        * testing/Internals.idl:
+        * testing/Internals.cpp:
+        (WebCore::Internals::inspectorHighlightObject): Deleted.
+
+        * inspector/InspectorOverlayPage.css: Removed.
+        * inspector/InspectorOverlayPage.html: Removed.
+        * inspector/InspectorOverlayPage.js: Removed.
+
+        * CMakeLists.txt:
+        * DerivedSources-input.xcfilelist:
+        * DerivedSources-output.xcfilelist:
+        * DerivedSources.make:
+        * WebCore.xcodeproj/project.pbxproj:
+
 2019-02-20  Darin Adler  <darin@apple.com>
 
         Finish removing String::format
index 540356d..7e6bf5b 100644 (file)
@@ -856,9 +856,6 @@ $(PROJECT_DIR)/inspector/CommandLineAPIModuleSource.js
 $(PROJECT_DIR)/inspector/InspectorAuditAccessibilityObject.idl
 $(PROJECT_DIR)/inspector/InspectorAuditDOMObject.idl
 $(PROJECT_DIR)/inspector/InspectorFrontendHost.idl
-$(PROJECT_DIR)/inspector/InspectorOverlayPage.css
-$(PROJECT_DIR)/inspector/InspectorOverlayPage.html
-$(PROJECT_DIR)/inspector/InspectorOverlayPage.js
 $(PROJECT_DIR)/loader/appcache/DOMApplicationCache.idl
 $(PROJECT_DIR)/make-hash-tools.pl
 $(PROJECT_DIR)/mathml/mathattrs.in
index c5782c3..ceddbae 100644 (file)
@@ -29,7 +29,6 @@ $(BUILT_PRODUCTS_DIR)/DerivedSources/WebCore/HTMLNames.h
 $(BUILT_PRODUCTS_DIR)/DerivedSources/WebCore/HTTPHeaderNames.cpp
 $(BUILT_PRODUCTS_DIR)/DerivedSources/WebCore/HTTPHeaderNames.gperf
 $(BUILT_PRODUCTS_DIR)/DerivedSources/WebCore/HTTPHeaderNames.h
-$(BUILT_PRODUCTS_DIR)/DerivedSources/WebCore/InspectorOverlayPage.h
 $(BUILT_PRODUCTS_DIR)/DerivedSources/WebCore/InternalSettingsGenerated.cpp
 $(BUILT_PRODUCTS_DIR)/DerivedSources/WebCore/InternalSettingsGenerated.h
 $(BUILT_PRODUCTS_DIR)/DerivedSources/WebCore/InternalSettingsGenerated.idl
index ab15904..9e1818d 100644 (file)
@@ -1725,13 +1725,6 @@ endif
 
 # Inspector interfaces
 
-all : InspectorOverlayPage.h
-
-InspectorOverlayPage.h : InspectorOverlayPage.html InspectorOverlayPage.css InspectorOverlayPage.js
-       $(PYTHON) $(JavaScriptCore_SCRIPTS_DIR)/inline-and-minify-stylesheets-and-scripts.py $(WebCore)/inspector/InspectorOverlayPage.html ./InspectorOverlayPage.combined.html
-       $(PERL) $(JavaScriptCore_SCRIPTS_DIR)/xxd.pl InspectorOverlayPage_html ./InspectorOverlayPage.combined.html InspectorOverlayPage.h
-       $(DELETE) InspectorOverlayPage.combined.html
-
 all : CommandLineAPIModuleSource.h
 
 CommandLineAPIModuleSource.h : CommandLineAPIModuleSource.js
index ef0ecfd..ce831a1 100644 (file)
                7A56996E2086C618000E0433 /* CookieRequestHeaderFieldProxy.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = CookieRequestHeaderFieldProxy.h; sourceTree = "<group>"; };
                7A674BD90F9EBF4E006CF099 /* PageGroupLoadDeferrer.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = PageGroupLoadDeferrer.cpp; sourceTree = "<group>"; };
                7A674BDA0F9EBF4E006CF099 /* PageGroupLoadDeferrer.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = PageGroupLoadDeferrer.h; sourceTree = "<group>"; };
-               7A7256B915EB9F5B007323A7 /* InspectorOverlayPage.html */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.html; path = InspectorOverlayPage.html; sourceTree = "<group>"; };
                7A929CA11C598378004DF226 /* ResourceLoadStatistics.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = ResourceLoadStatistics.cpp; sourceTree = "<group>"; };
                7A929CA21C598378004DF226 /* ResourceLoadStatistics.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ResourceLoadStatistics.h; sourceTree = "<group>"; };
                7A93868218DCC14500B8263D /* VTTScanner.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = VTTScanner.cpp; sourceTree = "<group>"; };
                A5071E881C56D4FA009951BE /* ResourceUsageThreadCocoa.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = ResourceUsageThreadCocoa.mm; sourceTree = "<group>"; };
                A516E8B4136E04DB0076C3C0 /* LocalizedDateCache.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = LocalizedDateCache.h; sourceTree = "<group>"; };
                A516E8B5136E04DB0076C3C0 /* LocalizedDateCache.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = LocalizedDateCache.mm; sourceTree = "<group>"; };
-               A518225417E2A0D400A9BA1D /* InspectorOverlayPage.css */ = {isa = PBXFileReference; lastKnownFileType = text.css; path = InspectorOverlayPage.css; sourceTree = "<group>"; };
-               A518225517E2A0D400A9BA1D /* InspectorOverlayPage.js */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.javascript; path = InspectorOverlayPage.js; sourceTree = "<group>"; };
                A52B348C1FA3BD79008B6246 /* ServiceWorkerDebuggable.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ServiceWorkerDebuggable.h; sourceTree = "<group>"; };
                A52B348E1FA3BD79008B6246 /* ServiceWorkerDebuggable.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = ServiceWorkerDebuggable.cpp; sourceTree = "<group>"; };
                A52B34931FA3E286008B6246 /* ServiceWorkerInspectorProxy.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ServiceWorkerInspectorProxy.h; sourceTree = "<group>"; };
                                504AACCC1834455900E3D9BC /* InspectorNodeFinder.h */,
                                7C522D4915B477E8009B7C95 /* InspectorOverlay.cpp */,
                                7C522D4A15B478B2009B7C95 /* InspectorOverlay.h */,
-                               A518225417E2A0D400A9BA1D /* InspectorOverlayPage.css */,
-                               7A7256B915EB9F5B007323A7 /* InspectorOverlayPage.html */,
-                               A518225517E2A0D400A9BA1D /* InspectorOverlayPage.js */,
                                6A7279891F16C29B003F39B8 /* InspectorShaderProgram.cpp */,
                                6A7279881F16C29B003F39B8 /* InspectorShaderProgram.h */,
                                82AB176F125C826700C5069D /* InspectorStyleSheet.cpp */,
index be94652..0f6134e 100644 (file)
@@ -192,7 +192,7 @@ void InspectorController::createLazyAgents()
 
     auto pageContext = pageAgentContext();
 
-    auto debuggerAgent = std::make_unique<PageDebuggerAgent>(pageContext, m_pageAgent, m_overlay.get());
+    auto debuggerAgent = std::make_unique<PageDebuggerAgent>(pageContext, m_pageAgent);
     auto debuggerAgentPtr = debuggerAgent.get();
 
     m_agents.append(WTFMove(debuggerAgent));
@@ -303,7 +303,6 @@ void InspectorController::disconnectFrontend(FrontendChannel& frontendChannel)
         m_agents.willDestroyFrontendAndBackend(DisconnectReason::InspectorDestroyed);
 
         // Clean up inspector resources.
-        m_overlay->freePage();
         m_injectedScriptManager->discardInjectedScripts();
 
         // Unplug all instrumentations since they aren't needed now.
@@ -340,7 +339,6 @@ void InspectorController::disconnectAllFrontends()
     m_agents.willDestroyFrontendAndBackend(DisconnectReason::InspectedTargetDestroyed);
 
     // Clean up inspector resources.
-    m_overlay->freePage();
     m_injectedScriptManager->disconnect();
 
     // Disconnect any remaining remote frontends.
@@ -394,11 +392,6 @@ void InspectorController::getHighlight(Highlight& highlight, InspectorOverlay::C
     m_overlay->getHighlight(highlight, coordinateSystem);
 }
 
-Ref<JSON::ArrayOf<Inspector::Protocol::OverlayTypes::NodeHighlightData>> InspectorController::buildObjectForHighlightedNodes() const
-{
-    return m_overlay->buildObjectForHighlightedNodes();
-}
-
 void InspectorController::inspect(Node* node)
 {
     if (!enabled())
index 492fc8a..1a5f270 100644 (file)
@@ -44,12 +44,6 @@ class BackendDispatcher;
 class FrontendChannel;
 class FrontendRouter;
 class InspectorAgent;
-
-namespace Protocol {
-namespace OverlayTypes {
-class NodeHighlightData;
-}
-}
 }
 
 namespace WebCore {
@@ -103,8 +97,6 @@ public:
 
     WEBCORE_EXPORT void setIndicating(bool);
 
-    WEBCORE_EXPORT Ref<JSON::ArrayOf<Inspector::Protocol::OverlayTypes::NodeHighlightData>> buildObjectForHighlightedNodes() const;
-
     WEBCORE_EXPORT void didComposite(Frame&);
 
     bool isUnderTest() const { return m_isUnderTest; }
index 3e3bc81..9bad9c3 100644 (file)
@@ -1,5 +1,6 @@
 /*
  * Copyright (C) 2011 Google Inc. All rights reserved.
+ * Copyright (C) 2019 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
 #include "config.h"
 #include "InspectorOverlay.h"
 
-#include "CacheStorageProvider.h"
-#include "DocumentLoader.h"
-#include "EditorClient.h"
+#include "AXObjectCache.h"
+#include "AccessibilityObject.h"
+#include "DOMCSSNamespace.h"
+#include "DOMTokenList.h"
 #include "Element.h"
-#include "EmptyClients.h"
+#include "FloatPoint.h"
+#include "FloatSize.h"
+#include "FontCascade.h"
+#include "FontCascadeDescription.h"
 #include "Frame.h"
 #include "FrameView.h"
 #include "GraphicsContext.h"
 #include "InspectorClient.h"
-#include "InspectorOverlayPage.h"
-#include "LibWebRTCProvider.h"
+#include "IntPoint.h"
+#include "IntRect.h"
+#include "IntSize.h"
 #include "Node.h"
+#include "NodeList.h"
 #include "Page.h"
-#include "PageConfiguration.h"
-#include "PolygonShape.h"
+#include "Path.h"
 #include "PseudoElement.h"
-#include "RTCController.h"
-#include "RectangleShape.h"
+#include "RenderBox.h"
 #include "RenderBoxModelObject.h"
-#include "RenderElement.h"
 #include "RenderInline.h"
-#include "RenderView.h"
-#include "ScriptController.h"
-#include "ScriptSourceCode.h"
+#include "RenderObject.h"
 #include "Settings.h"
-#include "SocketProvider.h"
-#include "StyledElement.h"
-#include <JavaScriptCore/InspectorProtocolObjects.h>
-#include <wtf/JSONValues.h>
-
-#if PLATFORM(MAC)
-#include "LocalDefaultSystemAppearance.h"
-#endif
+#include <wtf/MathExtras.h>
+#include <wtf/text/StringBuilder.h>
 
 namespace WebCore {
 
 using namespace Inspector;
 
+static constexpr float elementDataSpacing = 2;
+static constexpr float elementDataArrowSize = 7;
+static constexpr float elementDataBorderSize = 1;
+
+static constexpr float rulerSize = 15;
+static constexpr float rulerLabelSize = 13;
+static constexpr float rulerStepIncrement = 50;
+static constexpr float rulerStepLength = 8;
+static constexpr float rulerSubStepIncrement = 5;
+static constexpr float rulerSubStepLength = 5;
+
+static void truncateWithEllipsis(String& string, size_t length)
+{
+    const UChar ellipsisUChar[] = { 0x2026, 0 };
+
+    if (string.length() > length) {
+        string.truncate(length);
+        string.append(ellipsisUChar);
+    }
+}
+
+static FloatPoint localPointToRootPoint(const FrameView* view, const FloatPoint& point)
+{
+    return view->contentsToRootView(roundedIntPoint(point));
+}
+
 static void contentsQuadToCoordinateSystem(const FrameView* mainView, const FrameView* view, FloatQuad& quad, InspectorOverlay::CoordinateSystem coordinateSystem)
 {
-    quad.setP1(view->contentsToRootView(roundedIntPoint(quad.p1())));
-    quad.setP2(view->contentsToRootView(roundedIntPoint(quad.p2())));
-    quad.setP3(view->contentsToRootView(roundedIntPoint(quad.p3())));
-    quad.setP4(view->contentsToRootView(roundedIntPoint(quad.p4())));
+    quad.setP1(localPointToRootPoint(view, quad.p1()));
+    quad.setP2(localPointToRootPoint(view, quad.p2()));
+    quad.setP3(localPointToRootPoint(view, quad.p3()));
+    quad.setP4(localPointToRootPoint(view, quad.p4()));
 
     if (coordinateSystem == InspectorOverlay::CoordinateSystem::View)
         quad += toIntSize(mainView->scrollPosition());
 }
 
-static void contentsQuadToPage(const FrameView* mainView, const FrameView* view, FloatQuad& quad)
+static Element* effectiveElementForNode(Node& node)
 {
-    contentsQuadToCoordinateSystem(mainView, view, quad, InspectorOverlay::CoordinateSystem::View);
+    if (!is<Element>(node) || !node.document().frame())
+        return nullptr;
+
+    Element* element = nullptr;
+    if (is<PseudoElement>(node)) {
+        if (Element* hostElement = downcast<PseudoElement>(node).hostElement())
+            element = hostElement;
+    } else
+        element = &downcast<Element>(node);
+
+    return element;
 }
 
 static void buildRendererHighlight(RenderObject* renderer, const HighlightConfig& highlightConfig, Highlight& highlight, InspectorOverlay::CoordinateSystem coordinateSystem)
@@ -166,6 +198,167 @@ static void buildQuadHighlight(const FloatQuad& quad, const HighlightConfig& hig
     highlight.quads.append(quad);
 }
 
+static Path quadToPath(const FloatQuad& quad, FloatRect& bounds)
+{
+    Path path;
+    path.moveTo(quad.p1());
+    path.addLineTo(quad.p2());
+    path.addLineTo(quad.p3());
+    path.addLineTo(quad.p4());
+    path.closeSubpath();
+
+    bounds.unite(path.boundingRect());
+
+    return path;
+}
+
+static void drawOutlinedQuadWithClip(GraphicsContext& context, const FloatQuad& quad, const FloatQuad& clipQuad, const Color& fillColor, FloatRect& bounds)
+{
+    GraphicsContextStateSaver stateSaver(context);
+
+    context.setFillColor(fillColor);
+    context.setStrokeThickness(0);
+    context.fillPath(quadToPath(quad, bounds));
+
+    context.setCompositeOperation(CompositeDestinationOut);
+    context.setFillColor(Color::createUnchecked(255, 0, 0));
+    context.fillPath(quadToPath(clipQuad, bounds));
+}
+
+static void drawOutlinedQuad(GraphicsContext& context, const FloatQuad& quad, const Color& fillColor, const Color& outlineColor, FloatRect& bounds)
+{
+    Path path = quadToPath(quad, bounds);
+
+    GraphicsContextStateSaver stateSaver(context);
+
+    context.setStrokeThickness(2);
+
+    context.clipPath(path);
+
+    context.setFillColor(fillColor);
+    context.fillPath(path);
+
+    context.setStrokeColor(outlineColor);
+    context.strokePath(path);
+}
+
+static void drawFragmentHighlight(GraphicsContext& context, Node& node, const HighlightConfig& highlightConfig, FloatRect& bounds)
+{
+    Highlight highlight;
+    buildNodeHighlight(node, highlightConfig, highlight, InspectorOverlay::CoordinateSystem::Document);
+
+    FloatQuad marginQuad;
+    FloatQuad borderQuad;
+    FloatQuad paddingQuad;
+    FloatQuad contentQuad;
+
+    size_t size = highlight.quads.size();
+    if (size >= 1)
+        marginQuad = highlight.quads[0];
+    if (size >= 2)
+        borderQuad = highlight.quads[1];
+    if (size >= 3)
+        paddingQuad = highlight.quads[2];
+    if (size >= 4)
+        contentQuad = highlight.quads[3];
+
+    if (!marginQuad.isEmpty() && marginQuad != borderQuad && highlight.marginColor.isVisible())
+        drawOutlinedQuadWithClip(context, marginQuad, borderQuad, highlight.marginColor, bounds);
+
+    if (!borderQuad.isEmpty() && borderQuad != paddingQuad && highlight.borderColor.isVisible())
+        drawOutlinedQuadWithClip(context, borderQuad, paddingQuad, highlight.borderColor, bounds);
+
+    if (!paddingQuad.isEmpty() && paddingQuad != contentQuad && highlight.paddingColor.isVisible())
+        drawOutlinedQuadWithClip(context, paddingQuad, contentQuad, highlight.paddingColor, bounds);
+
+    if (!contentQuad.isEmpty() && (highlight.contentColor.isVisible() || highlight.contentOutlineColor.isVisible()))
+        drawOutlinedQuad(context, contentQuad, highlight.contentColor, highlight.contentOutlineColor, bounds);
+}
+
+static void drawShapeHighlight(GraphicsContext& context, Node& node, FloatRect& bounds)
+{
+    Element* element = effectiveElementForNode(node);
+    if (!element)
+        return;
+
+    RenderObject* renderer = element->renderer();
+    if (!renderer || !is<RenderBox>(renderer))
+        return;
+
+    const ShapeOutsideInfo* shapeOutsideInfo = downcast<RenderBox>(renderer)->shapeOutsideInfo();
+    if (!shapeOutsideInfo)
+        return;
+
+    const Color shapeHighlightColor(96, 82, 127, 204);
+
+    Frame* containingFrame = element->document().frame();
+    FrameView* containingView = containingFrame->view();
+    FrameView* mainView = containingFrame->page()->mainFrame().view();
+
+    Shape::DisplayPaths paths;
+    shapeOutsideInfo->computedShape().buildDisplayPaths(paths);
+
+    if (paths.shape.isEmpty()) {
+        LayoutRect shapeBounds = shapeOutsideInfo->computedShapePhysicalBoundingBox();
+        FloatQuad shapeQuad = renderer->localToAbsoluteQuad(FloatRect(shapeBounds));
+        contentsQuadToCoordinateSystem(mainView, containingView, shapeQuad, InspectorOverlay::CoordinateSystem::Document);
+        drawOutlinedQuad(context, shapeQuad, shapeHighlightColor, Color::transparent, bounds);
+        return;
+    }
+
+    const auto mapPoints = [&] (const Path& path) {
+        Path newPath;
+        path.apply([&] (const PathElement& pathElement) {
+            const auto localToRoot = [&] (size_t index) {
+                const FloatPoint& point = pathElement.points[index];
+                return localPointToRootPoint(containingView, renderer->localToAbsolute(shapeOutsideInfo->shapeToRendererPoint(point)));
+            };
+
+            switch (pathElement.type) {
+            case PathElementMoveToPoint:
+                newPath.moveTo(localToRoot(0));
+                break;
+
+            case PathElementAddLineToPoint:
+                newPath.addLineTo(localToRoot(0));
+                break;
+
+            case PathElementAddCurveToPoint:
+                newPath.addBezierCurveTo(localToRoot(0), localToRoot(1), localToRoot(2));
+                break;
+
+            case PathElementAddQuadCurveToPoint:
+                newPath.addQuadCurveTo(localToRoot(0), localToRoot(1));
+                break;
+
+            case PathElementCloseSubpath:
+                newPath.closeSubpath();
+                break;
+            }
+        });
+        return newPath;
+    };
+
+    if (paths.marginShape.length()) {
+        Path marginPath = mapPoints(paths.marginShape);
+        bounds.unite(marginPath.boundingRect());
+
+        GraphicsContextStateSaver stateSaver(context);
+
+        const Color shapeMarginHighlightColor(96, 82, 127, 153);
+        context.setFillColor(shapeMarginHighlightColor);
+        context.fillPath(marginPath);
+    }
+
+    Path shapePath = mapPoints(paths.shape);
+    bounds.unite(shapePath.boundingRect());
+
+    GraphicsContextStateSaver stateSaver(context);
+
+    context.setFillColor(shapeHighlightColor);
+    context.fillPath(shapePath);
+}
+
 InspectorOverlay::InspectorOverlay(Page& page, InspectorClient* client)
     : m_page(page)
     , m_client(client)
@@ -180,19 +373,38 @@ void InspectorOverlay::paint(GraphicsContext& context)
     if (!shouldShowOverlay())
         return;
 
-    Page* overlayPage = this->overlayPage();
-    if (!overlayPage)
-        return;
+    FloatSize viewportSize = m_page.mainFrame().view()->sizeForVisibleContent();
+
+    context.clearRect({ FloatPoint::zero(), viewportSize });
 
     GraphicsContextStateSaver stateSaver(context);
-    FrameView* view = overlayPage->mainFrame().view();
 
-#if PLATFORM(MAC)
-    LocalDefaultSystemAppearance localAppearance(view->useDarkAppearance());
-#endif
+    if (m_indicating) {
+        GraphicsContextStateSaver stateSaver(context);
+
+        const Color indicatingColor(111, 168, 220, 168);
+        context.setFillColor(indicatingColor);
+        context.fillRect({ FloatPoint::zero(), viewportSize });
+    }
+
+    if (m_highlightQuad)
+        drawQuadHighlight(context, *m_highlightQuad);
+
+    if (m_highlightNodeList) {
+        for (unsigned i = 0; i < m_highlightNodeList->length(); ++i) {
+            if (Node* node = m_highlightNodeList->item(i))
+                drawNodeHighlight(context, *node);
+        }
+    }
 
-    view->updateLayoutAndStyleIfNeededRecursive();
-    view->paint(context, IntRect(0, 0, view->width(), view->height()));
+    if (m_highlightNode)
+        drawNodeHighlight(context, *m_highlightNode);
+
+    if (!m_paintRects.isEmpty())
+        drawPaintRects(context, m_paintRects);
+
+    if (m_showRulers)
+        drawRulers(context);
 }
 
 void InspectorOverlay::getHighlight(Highlight& highlight, InspectorOverlay::CoordinateSystem coordinateSystem) const
@@ -216,12 +428,6 @@ void InspectorOverlay::getHighlight(Highlight& highlight, InspectorOverlay::Coor
         buildQuadHighlight(*m_highlightQuad, m_quadHighlightConfig, highlight);
 }
 
-void InspectorOverlay::setPausedInDebuggerMessage(const String* message)
-{
-    m_pausedInDebuggerMessage = message ? *message : String();
-    update();
-}
-
 void InspectorOverlay::hideHighlight()
 {
     m_highlightNode = nullptr;
@@ -268,19 +474,17 @@ void InspectorOverlay::didSetSearchingForNode(bool enabled)
 
 void InspectorOverlay::setIndicating(bool indicating)
 {
-    m_indicating = indicating;
+    if (m_indicating == indicating)
+        return;
 
-    if (m_indicating)
-        evaluateInOverlay("showPageIndication"_s);
-    else
-        evaluateInOverlay("hidePageIndication"_s);
+    m_indicating = indicating;
 
     update();
 }
 
 bool InspectorOverlay::shouldShowOverlay() const
 {
-    return m_highlightNode || m_highlightNodeList || m_highlightQuad || m_indicating || m_showingPaintRects || m_showRulers || !m_pausedInDebuggerMessage.isNull();
+    return m_highlightNode || m_highlightNodeList || m_highlightQuad || m_indicating || m_showPaintRects || m_showRulers;
 }
 
 void InspectorOverlay::update()
@@ -294,107 +498,25 @@ void InspectorOverlay::update()
     if (!view)
         return;
 
-    Page* overlayPage = this->overlayPage();
-    if (overlayPage) {
-        FrameView* overlayView = overlayPage->mainFrame().view();
-        IntSize frameViewFullSize = view->sizeForVisibleContent(ScrollableArea::IncludeScrollbars);
-        overlayView->resize(frameViewFullSize);
-    }
-
-    // Clear canvas and paint things.
-    IntSize viewportSize = view->sizeForVisibleContent();
-    IntPoint scrollOffset = view->scrollPosition();
-    reset(viewportSize, scrollOffset);
-
-    // Include scrollbars to avoid masking them by the gutter.
-    drawNodeHighlight();
-    drawQuadHighlight();
-    drawPausedInDebuggerMessage();
-    drawPaintRects();
-
-    if (m_showRulers)
-        drawRulers();
-
-    // Position DOM elements.
-    if (overlayPage) {
-        overlayPage->mainFrame().document()->resolveStyle(Document::ResolveStyleType::Rebuild);
-        FrameView* overlayView = overlayPage->mainFrame().view();
-        if (overlayView->needsLayout())
-            overlayView->layoutContext().layout();
-    }
-
-    forcePaint();
-}
-
-static Ref<Inspector::Protocol::OverlayTypes::Point> buildObjectForPoint(const FloatPoint& point)
-{
-    return Inspector::Protocol::OverlayTypes::Point::create()
-        .setX(point.x())
-        .setY(point.y())
-        .release();
-}
-
-static Ref<Inspector::Protocol::OverlayTypes::Rect> buildObjectForRect(const FloatRect& rect)
-{
-    return Inspector::Protocol::OverlayTypes::Rect::create()
-        .setX(rect.x())
-        .setY(rect.y())
-        .setWidth(rect.width())
-        .setHeight(rect.height())
-        .release();
-}
-
-static Ref<Inspector::Protocol::OverlayTypes::Quad> buildArrayForQuad(const FloatQuad& quad)
-{
-    auto array = Inspector::Protocol::OverlayTypes::Quad::create();
-    array->addItem(buildObjectForPoint(quad.p1()));
-    array->addItem(buildObjectForPoint(quad.p2()));
-    array->addItem(buildObjectForPoint(quad.p3()));
-    array->addItem(buildObjectForPoint(quad.p4()));
-    return array;
-}
-
-static Ref<Inspector::Protocol::OverlayTypes::FragmentHighlightData> buildObjectForHighlight(const Highlight& highlight)
-{
-    auto arrayOfQuads = JSON::ArrayOf<Inspector::Protocol::OverlayTypes::Quad>::create();
-    for (auto& quad : highlight.quads)
-        arrayOfQuads->addItem(buildArrayForQuad(quad));
-
-    return Inspector::Protocol::OverlayTypes::FragmentHighlightData::create()
-        .setQuads(WTFMove(arrayOfQuads))
-        .setContentColor(highlight.contentColor.serialized())
-        .setContentOutlineColor(highlight.contentOutlineColor.serialized())
-        .setPaddingColor(highlight.paddingColor.serialized())
-        .setBorderColor(highlight.borderColor.serialized())
-        .setMarginColor(highlight.marginColor.serialized())
-        .release();
-}
-
-static Ref<Inspector::Protocol::OverlayTypes::Size> buildObjectForSize(const IntSize& size)
-{
-    return Inspector::Protocol::OverlayTypes::Size::create()
-        .setWidth(size.width())
-        .setHeight(size.height())
-        .release();
+    m_client->highlight();
 }
 
-void InspectorOverlay::setShowingPaintRects(bool showingPaintRects)
+void InspectorOverlay::setShowPaintRects(bool showPaintRects)
 {
-    if (m_showingPaintRects == showingPaintRects)
+    if (m_showPaintRects == showPaintRects)
         return;
 
-    m_showingPaintRects = showingPaintRects;
-    if (!m_showingPaintRects) {
+    m_showPaintRects = showPaintRects;
+    if (!m_showPaintRects) {
         m_paintRects.clear();
         m_paintRectUpdateTimer.stop();
-        drawPaintRects();
-        forcePaint();
+        update();
     }
 }
 
 void InspectorOverlay::showPaintRect(const FloatRect& rect)
 {
-    if (!m_showingPaintRects)
+    if (!m_showPaintRects)
         return;
 
     IntRect rootRect = m_page.mainFrame().view()->contentsToRootView(enclosingIntRect(rect));
@@ -409,8 +531,7 @@ void InspectorOverlay::showPaintRect(const FloatRect& rect)
         m_paintRectUpdateTimer.startRepeating(paintRectsUpdateInterval);
     }
 
-    drawPaintRects();
-    forcePaint();
+    update();
 }
 
 void InspectorOverlay::setShowRulers(bool showRulers)
@@ -435,390 +556,447 @@ void InspectorOverlay::updatePaintRectsTimerFired()
     if (m_paintRects.isEmpty())
         m_paintRectUpdateTimer.stop();
 
-    if (rectsChanged) {
-        drawPaintRects();
-        forcePaint();
-    }
+    if (rectsChanged)
+        update();
 }
 
-void InspectorOverlay::drawPaintRects()
+void InspectorOverlay::drawNodeHighlight(GraphicsContext& context, Node& node)
 {
-    auto arrayOfRects = JSON::ArrayOf<Inspector::Protocol::OverlayTypes::Rect>::create();
-    for (const auto& pair : m_paintRects)
-        arrayOfRects->addItem(buildObjectForRect(pair.second));
+    FloatRect bounds;
+
+    drawFragmentHighlight(context, node, m_nodeHighlightConfig, bounds);
+
+    if (m_nodeHighlightConfig.showInfo)
+        drawShapeHighlight(context, node, bounds);
 
-    evaluateInOverlay("updatePaintRects"_s, WTFMove(arrayOfRects));
+    if (m_showRulers)
+        drawBounds(context, bounds);
+
+    // Ensure that the title information is drawn after the bounds.
+    if (m_nodeHighlightConfig.showInfo)
+        drawElementTitle(context, node, bounds);
 }
 
-void InspectorOverlay::drawRulers()
+void InspectorOverlay::drawQuadHighlight(GraphicsContext& context, const FloatQuad& quad)
 {
-    evaluateInOverlay("drawRulers"_s);
+    Highlight highlight;
+    buildQuadHighlight(quad, m_quadHighlightConfig, highlight);
+
+    if (highlight.quads.size() >= 1) {
+        FloatRect bounds;
+
+        drawOutlinedQuad(context, highlight.quads[0], highlight.contentColor, highlight.contentOutlineColor, bounds);
+
+        if (m_showRulers)
+            drawBounds(context, bounds);
+    }
 }
 
-static RefPtr<JSON::ArrayOf<Inspector::Protocol::OverlayTypes::FragmentHighlightData>> buildArrayForRendererFragments(RenderObject* renderer, const HighlightConfig& config)
+void InspectorOverlay::drawPaintRects(GraphicsContext& context, const Deque<TimeRectPair>& paintRects)
 {
-    auto arrayOfFragments = JSON::ArrayOf<Inspector::Protocol::OverlayTypes::FragmentHighlightData>::create();
+    GraphicsContextStateSaver stateSaver(context);
 
-    Highlight highlight;
-    buildRendererHighlight(renderer, config, highlight, InspectorOverlay::CoordinateSystem::View);
-    arrayOfFragments->addItem(buildObjectForHighlight(highlight));
+    const Color paintRectsColor(1.0f, 0.0f, 0.0f, 0.5f);
+    context.setFillColor(paintRectsColor);
 
-    return WTFMove(arrayOfFragments);
+    for (const TimeRectPair& pair : paintRects)
+        context.fillRect(pair.second);
 }
 
-static FloatPoint localPointToRoot(RenderObject* renderer, const FrameView* mainView, const FrameView* view, const FloatPoint& point)
+void InspectorOverlay::drawBounds(GraphicsContext& context, const FloatRect& bounds)
 {
-    FloatPoint result = renderer->localToAbsolute(point);
-    result = view->contentsToRootView(roundedIntPoint(result));
-    result += toIntSize(mainView->scrollPosition());
-    return result;
-}
+    FrameView* pageView = m_page.mainFrame().view();
+    FloatSize viewportSize = pageView->sizeForVisibleContent();
+    FloatSize contentInset(0, pageView->topContentInset(ScrollView::TopContentInsetType::WebCoreOrPlatformContentInset));
 
-struct PathApplyInfo {
-    FrameView* rootView;
-    FrameView* view;
-    Inspector::Protocol::OverlayTypes::DisplayPath* pathArray;
-    RenderObject* renderer;
-    const ShapeOutsideInfo* shapeOutsideInfo;
-};
+    Path path;
 
-static void appendPathCommandAndPoints(PathApplyInfo& info, const String& command, const FloatPoint points[], unsigned length)
-{
-    FloatPoint point;
-    info.pathArray->addItem(command);
-    for (unsigned i = 0; i < length; i++) {
-        point = info.shapeOutsideInfo->shapeToRendererPoint(points[i]);
-        point = localPointToRoot(info.renderer, info.rootView, info.view, point);
-        info.pathArray->addItem(point.x());
-        info.pathArray->addItem(point.y());
+    if (bounds.y() > contentInset.height()) {
+        path.moveTo({ bounds.x(), bounds.y() });
+        path.addLineTo({ bounds.x(), contentInset.height() });
+
+        path.moveTo({ bounds.maxX(), bounds.y() });
+        path.addLineTo({ bounds.maxX(), contentInset.height() });
     }
-}
 
-static void appendPathSegment(PathApplyInfo& pathApplyInfo, const PathElement& pathElement)
-{
-    FloatPoint point;
-    switch (pathElement.type) {
-    // The points member will contain 1 value.
-    case PathElementMoveToPoint:
-        appendPathCommandAndPoints(pathApplyInfo, "M"_s, pathElement.points, 1);
-        break;
-    // The points member will contain 1 value.
-    case PathElementAddLineToPoint:
-        appendPathCommandAndPoints(pathApplyInfo, "L"_s, pathElement.points, 1);
-        break;
-    // The points member will contain 3 values.
-    case PathElementAddCurveToPoint:
-        appendPathCommandAndPoints(pathApplyInfo, "C"_s, pathElement.points, 3);
-        break;
-    // The points member will contain 2 values.
-    case PathElementAddQuadCurveToPoint:
-        appendPathCommandAndPoints(pathApplyInfo, "Q"_s, pathElement.points, 2);
-        break;
-    // The points member will contain no values.
-    case PathElementCloseSubpath:
-        appendPathCommandAndPoints(pathApplyInfo, "Z"_s, nullptr, 0);
-        break;
+    if (bounds.maxY() < viewportSize.height()) {
+        path.moveTo({ bounds.x(), viewportSize.height() });
+        path.addLineTo({ bounds.x(), bounds.maxY() });
+
+        path.moveTo({ bounds.maxX(), viewportSize.height() });
+        path.addLineTo({ bounds.maxX(), bounds.maxY() });
+    }
+
+    if (bounds.x() > contentInset.width()) {
+        path.moveTo({ bounds.x(), bounds.y() });
+        path.addLineTo({ contentInset.width(), bounds.y() });
+
+        path.moveTo({ bounds.x(), bounds.maxY() });
+        path.addLineTo({ contentInset.width(), bounds.maxY() });
     }
+
+    if (bounds.maxX() < viewportSize.width()) {
+        path.moveTo({ bounds.maxX(), bounds.y() });
+        path.addLineTo({ viewportSize.width(), bounds.y() });
+
+        path.moveTo({ bounds.maxX(), bounds.maxY() });
+        path.addLineTo({ viewportSize.width(), bounds.maxY() });
+    }
+
+    GraphicsContextStateSaver stateSaver(context);
+
+    context.setStrokeThickness(1);
+
+    const Color boundsColor(1.0f, 0.0f, 0.0f, 0.6f);
+    context.setStrokeColor(boundsColor);
+
+    context.strokePath(path);
 }
 
-static RefPtr<Inspector::Protocol::OverlayTypes::ShapeOutsideData> buildObjectForShapeOutside(Frame* containingFrame, RenderBox* renderer)
+void InspectorOverlay::drawRulers(GraphicsContext& context)
 {
-    const ShapeOutsideInfo* shapeOutsideInfo = renderer->shapeOutsideInfo();
-    if (!shapeOutsideInfo)
-        return nullptr;
+    const Color rulerBackgroundColor(1.0f, 1.0f, 1.0f, 0.6f);
+    const Color lightRulerColor(0.0f, 0.0f, 0.0f, 0.2f);
+    const Color darkRulerColor(0.0f, 0.0f, 0.0f, 0.5f);
 
-    LayoutRect shapeBounds = shapeOutsideInfo->computedShapePhysicalBoundingBox();
-    FloatQuad shapeQuad = renderer->localToAbsoluteQuad(FloatRect(shapeBounds));
-    contentsQuadToPage(containingFrame->page()->mainFrame().view(), containingFrame->view(), shapeQuad);
+    IntPoint scrollOffset;
 
-    auto shapeObject = Inspector::Protocol::OverlayTypes::ShapeOutsideData::create()
-        .setBounds(buildArrayForQuad(shapeQuad))
-        .release();
+    FrameView* pageView = m_page.mainFrame().view();
+    if (!pageView->delegatesScrolling())
+        scrollOffset = pageView->visibleContentRect().location();
 
-    Shape::DisplayPaths paths;
-    shapeOutsideInfo->computedShape().buildDisplayPaths(paths);
+    FloatSize viewportSize = pageView->sizeForVisibleContent();
+    FloatSize contentInset(0, pageView->topContentInset(ScrollView::TopContentInsetType::WebCoreOrPlatformContentInset));
+    float pageScaleFactor = m_page.pageScaleFactor();
+    float pageZoomFactor = m_page.mainFrame().pageZoomFactor();
 
-    if (paths.shape.length()) {
-        auto shapePath = Inspector::Protocol::OverlayTypes::DisplayPath::create();
-        PathApplyInfo info;
-        info.rootView = containingFrame->page()->mainFrame().view();
-        info.view = containingFrame->view();
-        info.pathArray = &shapePath.get();
-        info.renderer = renderer;
-        info.shapeOutsideInfo = shapeOutsideInfo;
-
-        paths.shape.apply([&info](const PathElement& pathElement) {
-            appendPathSegment(info, pathElement);
-        });
+    float pageFactor = pageZoomFactor * pageScaleFactor;
+    float scrollX = scrollOffset.x() * pageScaleFactor;
+    float scrollY = scrollOffset.y() * pageScaleFactor;
 
-        shapeObject->setShape(shapePath.copyRef());
+    const auto zoom = [&] (float value) -> float {
+        return value * pageFactor;
+    };
 
-        if (paths.marginShape.length()) {
-            auto marginShapePath = Inspector::Protocol::OverlayTypes::DisplayPath::create();
-            info.pathArray = &marginShapePath.get();
+    const auto unzoom = [&] (float value) -> float {
+        return value / pageFactor;
+    };
 
-            paths.marginShape.apply([&info](const PathElement& pathElement) {
-                appendPathSegment(info, pathElement);
-            });
+    const auto multipleBelow = [&] (float value, float step) -> float {
+        return value - std::fmod(value, step);
+    };
 
-            shapeObject->setMarginShape(marginShapePath.copyRef());
-        }
-    }
+    float width = viewportSize.width() / pageFactor;
+    float height = viewportSize.height() / pageFactor;
+    float minX = unzoom(scrollX);
+    float minY = unzoom(scrollY);
+    float maxX = minX + width;
+    float maxY = minY + height;
 
-    return WTFMove(shapeObject);
-}
+    // Draw backgrounds.
+    {
+        GraphicsContextStateSaver backgroundStateSaver(context);
 
-static RefPtr<Inspector::Protocol::OverlayTypes::ElementData> buildObjectForElementData(Node* node, HighlightType)
-{
-    if (!is<Element>(node) || !node->document().frame())
-        return nullptr;
+        float offsetX = contentInset.width() + rulerSize;
+        float offsetY = contentInset.height() + rulerSize;
 
-    Element* effectiveElement = downcast<Element>(node);
-    if (node->isPseudoElement()) {
-        Element* hostElement = downcast<PseudoElement>(*node).hostElement();
-        if (!hostElement)
-            return nullptr;
-        effectiveElement = hostElement;
+        context.setFillColor(rulerBackgroundColor);
+        context.fillRect({ contentInset.width(), contentInset.height(), rulerSize, rulerSize });
+        context.fillRect({ offsetX, contentInset.height(), zoom(width) - offsetX, rulerSize });
+        context.fillRect({ contentInset.width(), offsetY, rulerSize, zoom(height) - offsetY });
     }
 
-    Element& element = *effectiveElement;
-    bool isXHTML = element.document().isXHTMLDocument();
-    auto elementData = Inspector::Protocol::OverlayTypes::ElementData::create()
-        .setTagName(isXHTML ? element.nodeName() : element.nodeName().convertToASCIILowercase())
-        .setIdValue(element.getIdAttribute())
-        .release();
-
-    if (element.hasClass() && is<StyledElement>(element)) {
-        auto classes = JSON::ArrayOf<String>::create();
-        HashSet<AtomicString> usedClassNames;
-        const SpaceSplitString& classNamesString = downcast<StyledElement>(element).classNames();
-        for (size_t i = 0; i < classNamesString.size(); ++i) {
-            const AtomicString& className = classNamesString[i];
-            if (usedClassNames.contains(className))
-                continue;
-
-            usedClassNames.add(className);
-            classes->addItem(className);
+    // Draw lines.
+    {
+        GraphicsContextStateSaver lineStateSaver(context);
+
+        context.setFillColor(darkRulerColor);
+        context.setStrokeThickness(1);
+
+        // Draw horizontal ruler.
+        {
+            GraphicsContextStateSaver horizontalRulerStateSaver(context);
+
+            context.translate(contentInset.width() - scrollX + 0.5f, contentInset.height() - scrollY);
+
+            for (float x = multipleBelow(minX, rulerSubStepIncrement); x < maxX; x += rulerSubStepIncrement) {
+                if (!x && !scrollX)
+                    continue;
+
+                Path path;
+                path.moveTo({ zoom(x), scrollY });
+
+                if (std::fmod(x, rulerStepIncrement)) {
+                    context.setStrokeColor(lightRulerColor);
+                    path.addLineTo({ zoom(x), scrollY + rulerSubStepLength });
+                } else {
+                    context.setStrokeColor(darkRulerColor);
+                    path.addLineTo({ zoom(x), scrollY + (std::fmod(x, rulerStepIncrement * 2) ? rulerSubStepLength : rulerStepLength) });
+                }
+
+                context.strokePath(path);
+            }
         }
-        elementData->setClasses(WTFMove(classes));
-    }
 
-    if (node->isPseudoElement()) {
-        if (node->pseudoId() == PseudoId::Before)
-            elementData->setPseudoElement("before");
-        else if (node->pseudoId() == PseudoId::After)
-            elementData->setPseudoElement("after");
+        // Draw vertical ruler.
+        {
+            GraphicsContextStateSaver veritcalRulerStateSaver(context);
+
+            context.translate(contentInset.width() - scrollX, contentInset.height() - scrollY + 0.5f);
+
+            for (float y = multipleBelow(minY, rulerSubStepIncrement); y < maxY; y += rulerSubStepIncrement) {
+                if (!y && !scrollY)
+                    continue;
+
+                Path path;
+                path.moveTo({ scrollX, zoom(y) });
+
+                if (std::fmod(y, rulerStepIncrement)) {
+                    context.setStrokeColor(lightRulerColor);
+                    path.addLineTo({ scrollX + rulerSubStepLength, zoom(y) });
+                } else {
+                    context.setStrokeColor(darkRulerColor);
+                    path.addLineTo({ scrollX + (std::fmod(y, rulerStepIncrement * 2) ? rulerSubStepLength : rulerStepLength), zoom(y) });
+                }
+
+                context.strokePath(path);
+            }
+        }
+
+        // Draw labels.
+        {
+            GraphicsContextStateSaver labelStateSaver(context);
+
+            FontCascadeDescription fontDescription;
+            fontDescription.setOneFamily(m_page.settings().sansSerifFontFamily());
+            fontDescription.setComputedSize(10);
+
+            FontCascade font(WTFMove(fontDescription), 0, 0);
+            font.update(nullptr);
+
+            context.translate(contentInset.width() - scrollX, contentInset.height() - scrollY);
+
+            for (float x = multipleBelow(minX, rulerStepIncrement * 2); x < maxX; x += rulerStepIncrement * 2) {
+                if (!x && !scrollX)
+                    continue;
+
+                GraphicsContextStateSaver verticalLabelStateSaver(context);
+                context.translate(zoom(x) + 0.5f, scrollY);
+                context.drawText(font, TextRun(String::number(x)), { 2, rulerLabelSize });
+            }
+
+            for (float y = multipleBelow(minY, rulerStepIncrement * 2); y < maxY; y += rulerStepIncrement * 2) {
+                if (!y && !scrollY)
+                    continue;
+
+                GraphicsContextStateSaver horizontalLabelStateSaver(context);
+                context.translate(scrollX, zoom(y) + 0.5f);
+                context.rotate(-piOverTwoFloat);
+                context.drawText(font, TextRun(String::number(y)), { 2, rulerLabelSize });
+            }
+        }
     }
+}
+
+void InspectorOverlay::drawElementTitle(GraphicsContext& context, Node& node, const FloatRect& bounds)
+{
+    if (bounds.isEmpty())
+        return;
+
+    Element* element = effectiveElementForNode(node);
+    if (!element)
+        return;
 
-    RenderElement* renderer = element.renderer();
+    RenderObject* renderer = element->renderer();
     if (!renderer)
-        return nullptr;
+        return;
 
-    Frame* containingFrame = node->document().frame();
-    FrameView* containingView = containingFrame->view();
-    IntRect boundingBox = snappedIntRect(containingView->contentsToRootView(renderer->absoluteBoundingBoxRect()));
-    RenderBoxModelObject* modelObject = is<RenderBoxModelObject>(*renderer) ? downcast<RenderBoxModelObject>(renderer) : nullptr;
-    auto sizeObject = Inspector::Protocol::OverlayTypes::Size::create()
-        .setWidth(modelObject ? adjustForAbsoluteZoom(roundToInt(modelObject->offsetWidth()), *modelObject) : boundingBox.width())
-        .setHeight(modelObject ? adjustForAbsoluteZoom(roundToInt(modelObject->offsetHeight()), *modelObject) : boundingBox.height())
-        .release();
-    elementData->setSize(WTFMove(sizeObject));
-
-    if (is<RenderBox>(*renderer)) {
-        auto& renderBox = downcast<RenderBox>(*renderer);
-        if (RefPtr<Inspector::Protocol::OverlayTypes::ShapeOutsideData> shapeObject = buildObjectForShapeOutside(containingFrame, &renderBox))
-            elementData->setShapeOutsideData(WTFMove(shapeObject));
+    const UChar multiplicationSignUChar[] = { 0x00D7, 0 };
+
+    String elementTagName = element->nodeName();
+    if (!element->document().isXHTMLDocument())
+        elementTagName = elementTagName.convertToASCIILowercase();
+
+    String elementIDValue;
+    if (element->hasID())
+        elementIDValue = makeString('#', DOMCSSNamespace::escape(element->getIdAttribute()));
+
+    String elementClassValue;
+    if (element->hasClass()) {
+        StringBuilder builder;
+        DOMTokenList& classList = element->classList();
+        for (size_t i = 0; i < classList.length(); ++i) {
+            builder.append('.');
+            builder.append(DOMCSSNamespace::escape(classList.item(i)));
+        }
+
+        elementClassValue = builder.toString();
+        truncateWithEllipsis(elementClassValue, 50);
+    }
+
+    String elementPseudoType;
+    if (element->isBeforePseudoElement())
+        elementPseudoType = "::before"_s;
+    else if (element->isAfterPseudoElement())
+        elementPseudoType = "::after"_s;
+
+    String elementWidth;
+    String elementHeight;
+    if (is<RenderBoxModelObject>(renderer)) {
+        RenderBoxModelObject* modelObject = downcast<RenderBoxModelObject>(renderer);
+        elementWidth = String::number(adjustForAbsoluteZoom(roundToInt(modelObject->offsetWidth()), *modelObject));
+        elementHeight = String::number(adjustForAbsoluteZoom(roundToInt(modelObject->offsetHeight()), *modelObject));
+    } else {
+        FrameView* containingView = element->document().frame()->view();
+        IntRect boundingBox = snappedIntRect(containingView->contentsToRootView(renderer->absoluteBoundingBoxRect()));
+        elementWidth = String::number(boundingBox.width());
+        elementHeight = String::number(boundingBox.height());
     }
 
     // Need to enable AX to get the computed role.
     if (!WebCore::AXObjectCache::accessibilityEnabled())
         WebCore::AXObjectCache::enableAccessibility();
 
-    if (AXObjectCache* axObjectCache = node->document().axObjectCache()) {
-        if (AccessibilityObject* axObject = axObjectCache->getOrCreate(node))
-            elementData->setRole(axObject->computedRoleString());
+    String elementRole;
+    if (AXObjectCache* axObjectCache = element->document().axObjectCache()) {
+        if (AccessibilityObject* axObject = axObjectCache->getOrCreate(element))
+            elementRole = axObject->computedRoleString();
     }
 
-    return WTFMove(elementData);
-}
+    FontCascadeDescription fontDescription;
+    fontDescription.setFamilies({ "Menlo", m_page.settings().fixedFontFamily() });
+    fontDescription.setComputedSize(11);
 
-RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> InspectorOverlay::buildHighlightObjectForNode(Node* node, HighlightType type) const
-{
-    if (!node)
-        return nullptr;
+    FontCascade font(WTFMove(fontDescription), 0, 0);
+    font.update(nullptr);
 
-    RenderObject* renderer = node->renderer();
-    if (!renderer)
-        return nullptr;
+    int fontHeight = font.fontMetrics().height();
 
-    RefPtr<JSON::ArrayOf<Inspector::Protocol::OverlayTypes::FragmentHighlightData>> arrayOfFragmentHighlights = buildArrayForRendererFragments(renderer, m_nodeHighlightConfig);
-    if (!arrayOfFragmentHighlights)
-        return nullptr;
+    float elementDataWidth;
+    float elementDataHeight = fontHeight;
+    bool hasSecondLine = !elementRole.isEmpty();
 
-    // The main view's scroll offset is shared across all quads.
-    FrameView* mainView = m_page.mainFrame().view();
+    {
+        String firstLine = makeString(elementTagName, elementIDValue, elementClassValue, elementPseudoType, ' ', elementWidth, "px", ' ', multiplicationSignUChar, ' ', elementHeight, "px");
+        String secondLine = makeString("Role ", elementRole);
 
-    auto nodeHighlightObject = Inspector::Protocol::OverlayTypes::NodeHighlightData::create()
-        .setScrollOffset(buildObjectForPoint(!mainView->delegatesScrolling() ? mainView->visibleContentRect().location() : FloatPoint()))
-        .setFragments(WTFMove(arrayOfFragmentHighlights))
-        .release();
+        float firstLineWidth = font.width(TextRun(firstLine));
+        float secondLineWidth = font.width(TextRun(secondLine));
 
-    if (m_nodeHighlightConfig.showInfo) {
-        if (RefPtr<Inspector::Protocol::OverlayTypes::ElementData> elementData = buildObjectForElementData(node, type))
-            nodeHighlightObject->setElementData(WTFMove(elementData));
+        elementDataWidth = std::fmax(firstLineWidth, secondLineWidth);
+        if (hasSecondLine)
+            elementDataHeight += fontHeight;
     }
 
-    return WTFMove(nodeHighlightObject);
-}
+    FrameView* pageView = m_page.mainFrame().view();
 
-Ref<JSON::ArrayOf<Inspector::Protocol::OverlayTypes::NodeHighlightData>> InspectorOverlay::buildObjectForHighlightedNodes() const
-{
-    auto highlights = JSON::ArrayOf<Inspector::Protocol::OverlayTypes::NodeHighlightData>::create();
+    FloatSize viewportSize = pageView->sizeForVisibleContent();
+    viewportSize.expand(-elementDataSpacing, -elementDataSpacing);
 
-    if (m_highlightNode) {
-        if (RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> nodeHighlightData = buildHighlightObjectForNode(m_highlightNode.get(), HighlightType::Node))
-            highlights->addItem(WTFMove(nodeHighlightData));
-    } else if (m_highlightNodeList) {
-        for (unsigned i = 0; i < m_highlightNodeList->length(); ++i) {
-            if (RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> nodeHighlightData = buildHighlightObjectForNode(m_highlightNodeList->item(i), HighlightType::NodeList))
-                highlights->addItem(WTFMove(nodeHighlightData));
-        }
-    }
+    FloatSize contentInset(0, pageView->topContentInset(ScrollView::TopContentInsetType::WebCoreOrPlatformContentInset));
+    contentInset.expand(elementDataSpacing, elementDataSpacing);
+    if (m_showRulers)
+        contentInset.expand(rulerSize, rulerSize);
 
-    return highlights;
-}
+    float anchorTop = bounds.y();
+    float anchorBottom = bounds.maxY();
 
-void InspectorOverlay::drawNodeHighlight()
-{
-    if (m_highlightNode || m_highlightNodeList)
-        evaluateInOverlay("drawNodeHighlight", buildObjectForHighlightedNodes());
-}
+    bool renderArrowUp = false;
+    bool renderArrowDown = false;
 
-void InspectorOverlay::drawQuadHighlight()
-{
-    if (!m_highlightQuad)
-        return;
+    float boxWidth = elementDataWidth + (elementDataSpacing * 2);
+    float boxHeight = elementDataArrowSize + elementDataHeight + (elementDataSpacing * 2);
 
-    Highlight highlight;
-    buildQuadHighlight(*m_highlightQuad, m_quadHighlightConfig, highlight);
-    evaluateInOverlay("drawQuadHighlight", buildObjectForHighlight(highlight));
-}
-
-void InspectorOverlay::drawPausedInDebuggerMessage()
-{
-    if (!m_pausedInDebuggerMessage.isNull())
-        evaluateInOverlay("drawPausedInDebuggerMessage", m_pausedInDebuggerMessage);
-}
-
-Page* InspectorOverlay::overlayPage()
-{
-#if PLATFORM(IOS_FAMILY)
-    return nullptr;
-#else
-    if (m_overlayPage)
-        return m_overlayPage.get();
-
-    auto pageConfiguration = pageConfigurationWithEmptyClients();
-    m_overlayPage = std::make_unique<Page>(WTFMove(pageConfiguration));
-    m_overlayPage->setDeviceScaleFactor(m_page.deviceScaleFactor());
-
-    Settings& settings = m_page.settings();
-    Settings& overlaySettings = m_overlayPage->settings();
-
-    overlaySettings.setStandardFontFamily(settings.standardFontFamily());
-    overlaySettings.setSerifFontFamily(settings.serifFontFamily());
-    overlaySettings.setSansSerifFontFamily(settings.sansSerifFontFamily());
-    overlaySettings.setCursiveFontFamily(settings.cursiveFontFamily());
-    overlaySettings.setFantasyFontFamily(settings.fantasyFontFamily());
-    overlaySettings.setPictographFontFamily(settings.pictographFontFamily());
-    overlaySettings.setMinimumFontSize(settings.minimumFontSize());
-    overlaySettings.setMinimumLogicalFontSize(settings.minimumLogicalFontSize());
-    overlaySettings.setMediaEnabled(false);
-    overlaySettings.setScriptEnabled(true);
-    overlaySettings.setPluginsEnabled(false);
-
-    Frame& frame = m_overlayPage->mainFrame();
-    frame.setView(FrameView::create(frame));
-    frame.init();
-    FrameLoader& loader = frame.loader();
-    frame.view()->setCanHaveScrollbars(false);
-    frame.view()->setTransparent(true);
-    ASSERT(loader.activeDocumentLoader());
-    auto& writer = loader.activeDocumentLoader()->writer();
-    writer.setMIMEType("text/html");
-    writer.begin();
-    writer.insertDataSynchronously(String(reinterpret_cast<const char*>(InspectorOverlayPage_html), sizeof(InspectorOverlayPage_html)));
-    writer.end();
-
-#if OS(WINDOWS)
-    evaluateInOverlay("setPlatform", "windows");
-#elif OS(MAC_OS_X)
-    evaluateInOverlay("setPlatform", "mac");
-#elif OS(UNIX)
-    evaluateInOverlay("setPlatform", "linux");
-#endif
-
-    return m_overlayPage.get();
-#endif
-}
-
-void InspectorOverlay::forcePaint()
-{
-    // This overlay page is very weird and doesn't automatically paint. We have to force paints manually.
-    m_client->highlight();
-}
+    float boxX = bounds.x();
+    if (boxX < contentInset.width()) {
+        boxX = contentInset.width();
+    } else if (boxX > viewportSize.width() - boxWidth)
+        boxX = viewportSize.width() - boxWidth;
+    else
+        boxX += elementDataSpacing;
+
+    float boxY;
+    if (anchorTop > viewportSize.height()) {
+        boxY = viewportSize.height() - boxHeight;
+        renderArrowDown = true;
+    } else if (anchorBottom < contentInset.height()) {
+        boxY = contentInset.height() + elementDataArrowSize;
+        renderArrowUp = true;
+    } else if (anchorTop - boxHeight - elementDataSpacing > contentInset.height()) {
+        boxY = anchorTop - boxHeight - elementDataSpacing;
+        renderArrowDown = true;
+    } else if (anchorBottom + boxHeight + elementDataSpacing < viewportSize.height()) {
+        boxY = anchorBottom + elementDataArrowSize + elementDataSpacing;
+        renderArrowUp = true;
+    } else {
+        boxY = contentInset.height();
+        renderArrowDown = true;
+    }
 
-void InspectorOverlay::reset(const IntSize& viewportSize, const IntPoint& scrollOffset)
-{
-    auto configObject = Inspector::Protocol::OverlayTypes::OverlayConfiguration::create()
-        .setDeviceScaleFactor(m_page.deviceScaleFactor())
-        .setViewportSize(buildObjectForSize(viewportSize))
-        .setPageScaleFactor(m_page.pageScaleFactor())
-        .setPageZoomFactor(m_page.mainFrame().pageZoomFactor())
-        .setScrollOffset(buildObjectForPoint(scrollOffset))
-        .setContentInset(buildObjectForSize(IntSize(0, m_page.mainFrame().view()->topContentInset(ScrollView::TopContentInsetType::WebCoreOrPlatformContentInset))))
-        .setShowRulers(m_showRulers)
-        .release();
-    evaluateInOverlay("reset", WTFMove(configObject));
-}
+    Path path;
+    path.moveTo({ boxX, boxY });
+    if (renderArrowUp) {
+        path.addLineTo({ boxX + (elementDataArrowSize * 2), boxY });
+        path.addLineTo({ boxX + (elementDataArrowSize * 3), boxY - elementDataArrowSize });
+        path.addLineTo({ boxX + (elementDataArrowSize * 4), boxY });
+    }
+    path.addLineTo({ boxX + elementDataWidth + (elementDataSpacing * 2), boxY });
+    path.addLineTo({ boxX + elementDataWidth + (elementDataSpacing * 2), boxY + elementDataHeight + (elementDataSpacing * 2) });
+    if (renderArrowDown) {
+        path.addLineTo({ boxX + (elementDataArrowSize * 4), boxY + elementDataHeight + (elementDataSpacing * 2) });
+        path.addLineTo({ boxX + (elementDataArrowSize * 3), boxY + elementDataHeight + (elementDataSpacing * 2) + elementDataArrowSize });
+        path.addLineTo({ boxX + (elementDataArrowSize * 2), boxY + elementDataHeight + (elementDataSpacing * 2) });
+    }
+    path.addLineTo({ boxX, boxY + elementDataHeight + (elementDataSpacing * 2) });
+    path.closeSubpath();
 
-static void evaluateCommandInOverlay(Page* page, Ref<JSON::Array>&& command)
-{
-    if (!page)
-        return;
+    GraphicsContextStateSaver stateSaver(context);
 
-    page->mainFrame().script().evaluate(ScriptSourceCode(makeString("dispatch(", command->toJSONString(), ')')));
-}
+    context.translate(elementDataBorderSize / 2.0f, elementDataBorderSize / 2.0f);
 
-void InspectorOverlay::evaluateInOverlay(const String& method)
-{
-    Ref<JSON::Array> command = JSON::Array::create();
-    command->pushString(method);
+    const Color elementTitleBackgroundColor(255, 255, 194);
+    context.setFillColor(elementTitleBackgroundColor);
 
-    evaluateCommandInOverlay(overlayPage(), WTFMove(command));
-}
+    context.fillPath(path);
 
-void InspectorOverlay::evaluateInOverlay(const String& method, const String& argument)
-{
-    Ref<JSON::Array> command = JSON::Array::create();
-    command->pushString(method);
-    command->pushString(argument);
+    context.setStrokeThickness(elementDataBorderSize);
 
-    evaluateCommandInOverlay(overlayPage(), WTFMove(command));
-}
+    const Color elementTitleBorderColor(128, 128, 128);
+    context.setStrokeColor(elementTitleBorderColor);
 
-void InspectorOverlay::evaluateInOverlay(const String& method, RefPtr<JSON::Value>&& argument)
-{
-    Ref<JSON::Array> command = JSON::Array::create();
-    command->pushString(method);
-    command->pushValue(WTFMove(argument));
+    context.strokePath(path);
 
-    evaluateCommandInOverlay(overlayPage(), WTFMove(command));
-}
+    float textPositionX = boxX + elementDataSpacing;
+    float textPositionY = boxY - (elementDataSpacing / 2.0f) + fontHeight;
+    const auto drawText = [&] (const String& text, const Color& color) {
+        if (text.isEmpty())
+            return;
 
-void InspectorOverlay::freePage()
-{
-    m_overlayPage = nullptr;
+        context.setFillColor(color);
+        textPositionX += context.drawText(font, TextRun(text), { textPositionX, textPositionY });
+    };
+
+    drawText(elementTagName, Color(136, 18, 128)); // Keep this in sync with XMLViewer.css (.tag)
+    drawText(elementIDValue, Color(26, 26, 166)); // Keep this in sync with XMLViewer.css (.attribute-value)
+    drawText(elementClassValue, Color(153, 69, 0)); // Keep this in sync with XMLViewer.css (.attribute-name)
+    drawText(elementPseudoType, Color(136, 18, 128)); // Keep this in sync with XMLViewer.css (.tag)
+    drawText(" "_s, Color::black);
+    drawText(elementWidth, Color::black);
+    drawText("px"_s, Color::darkGray);
+    drawText(" "_s, Color::darkGray);
+    drawText(multiplicationSignUChar, Color::darkGray);
+    drawText(" "_s, Color::darkGray);
+    drawText(elementHeight, Color::black);
+    drawText("px"_s, Color::darkGray);
+
+    if (hasSecondLine) {
+        textPositionX = boxX + elementDataSpacing;
+        textPositionY += fontHeight;
+
+        drawText("Role"_s, Color(170, 13, 145));
+        drawText(" "_s, Color::black);
+        drawText(elementRole, Color::black);
+    }
 }
 
 } // namespace WebCore
index a24becd..e5cea11 100644 (file)
@@ -1,5 +1,6 @@
 /*
  * Copyright (C) 2011 Google Inc. All rights reserved.
+ * Copyright (C) 2019 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
 
 #include "Color.h"
 #include "FloatQuad.h"
-#include "LayoutRect.h"
-#include "NodeList.h"
+#include "FloatRect.h"
 #include "Timer.h"
-#include <JavaScriptCore/InspectorProtocolObjects.h>
 #include <wtf/Deque.h>
-#include <wtf/JSONValues.h>
+#include <wtf/MonotonicTime.h>
 #include <wtf/RefPtr.h>
 #include <wtf/Vector.h>
 #include <wtf/text/WTFString.h>
 
 namespace WebCore {
 
-class Color;
 class GraphicsContext;
 class InspectorClient;
-class IntRect;
 class Node;
+class NodeList;
 class Page;
 
 struct HighlightConfig {
@@ -106,60 +104,52 @@ public:
     void paint(GraphicsContext&);
     void getHighlight(Highlight&, CoordinateSystem) const;
 
-    void setPausedInDebuggerMessage(const String*);
-
     void hideHighlight();
     void highlightNodeList(RefPtr<NodeList>&&, const HighlightConfig&);
     void highlightNode(Node*, const HighlightConfig&);
     void highlightQuad(std::unique_ptr<FloatQuad>, const HighlightConfig&);
-    
-    void setShowingPaintRects(bool);
+
+    void setShowPaintRects(bool);
     void showPaintRect(const FloatRect&);
 
     void setShowRulers(bool);
-    
+
     Node* highlightedNode() const;
 
     void didSetSearchingForNode(bool enabled);
 
     void setIndicating(bool indicating);
 
-    RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> buildHighlightObjectForNode(Node*, HighlightType) const;
-    Ref<JSON::ArrayOf<Inspector::Protocol::OverlayTypes::NodeHighlightData>> buildObjectForHighlightedNodes() const;
-
-    void freePage();
 private:
+    using TimeRectPair = std::pair<MonotonicTime, FloatRect>;
+
     bool shouldShowOverlay() const;
-    void drawNodeHighlight();
-    void drawQuadHighlight();
-    void drawPausedInDebuggerMessage();
-    void drawPaintRects();
-    void drawRulers();
-    void updatePaintRectsTimerFired();
 
-    Page* overlayPage();
+    void drawNodeHighlight(GraphicsContext&, Node&);
+    void drawQuadHighlight(GraphicsContext&, const FloatQuad&);
+    void drawPaintRects(GraphicsContext&, const Deque<TimeRectPair>&);
+    void drawBounds(GraphicsContext&, const FloatRect&);
+    void drawRulers(GraphicsContext&);
 
-    void forcePaint();
-    void reset(const IntSize& viewportSize, const IntPoint& scrollOffset);
-    void evaluateInOverlay(const String& method);
-    void evaluateInOverlay(const String& method, const String& argument);
-    void evaluateInOverlay(const String& method, RefPtr<JSON::Value>&& argument);
+    void drawElementTitle(GraphicsContext&, Node&, const FloatRect& bounds);
+
+    void updatePaintRectsTimerFired();
 
     Page& m_page;
     InspectorClient* m_client;
-    String m_pausedInDebuggerMessage;
+
     RefPtr<Node> m_highlightNode;
     RefPtr<NodeList> m_highlightNodeList;
     HighlightConfig m_nodeHighlightConfig;
+
     std::unique_ptr<FloatQuad> m_highlightQuad;
-    std::unique_ptr<Page> m_overlayPage;
     HighlightConfig m_quadHighlightConfig;
-    
-    using TimeRectPair = std::pair<MonotonicTime, FloatRect>;
+
     Deque<TimeRectPair> m_paintRects;
     Timer m_paintRectUpdateTimer;
+
     bool m_indicating {false};
-    bool m_showingPaintRects {false};
+    bool m_showPaintRects {false};
     bool m_showRulers {false};
 };
 
diff --git a/Source/WebCore/inspector/InspectorOverlayPage.css b/Source/WebCore/inspector/InspectorOverlayPage.css
deleted file mode 100644 (file)
index d07b882..0000000
+++ /dev/null
@@ -1,84 +0,0 @@
-body {
-    margin: 0;
-    padding: 0;
-}
-
-body.platform-mac {
-    font-size: 11px;
-    font-family: Menlo, Monaco;
-}
-
-body.platform-windows {
-    font-size: 12px;
-    font-family: Consolas, Lucida Console;
-}
-
-body.platform-linux {
-    font-size: 11px;
-    font-family: dejavu sans mono;
-}
-
-#log {
-    position: absolute;
-}
-
-.fill {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-
-.indicate {
-    background-color: rgba(111, 168, 220, 0.66) !important;
-}
-
-.dimmed {
-    background-color: rgba(0, 0, 0, 0.31);
-}
-
-.message-line {
-    margin: 10px 0;
-    text-align: center;
-}
-
-.message-box {
-    background-color: rgb(255, 255, 194);
-    border: 1px solid rgb(128, 128, 128);
-    display: inline-block;
-    padding: 2px 4px;
-}
-
-.px {
-    color: rgb(128, 128, 128);
-}
-
-.element-title-container {
-    position: absolute;
-    z-index: 10;
-}
-
-.element-title {
-    position: absolute;
-}
-
-.tag-name,
-.pseudo-type {
-    /* Keep this in sync with XMLViewer.css (.tag) */
-    color: rgb(136, 18, 128);
-}
-
-.node-id {
-    /* Keep this in sync with XMLViewer.css (.attribute-value) */
-    color: rgb(26, 26, 166);
-}
-
-.class-name {
-    /* Keep this in sync with XMLViewer.css (.attribute-name) */
-    color: rgb(153, 69, 0);
-}
-
-.css-property {
-    color: rgb(170, 13, 145);
-}
diff --git a/Source/WebCore/inspector/InspectorOverlayPage.html b/Source/WebCore/inspector/InspectorOverlayPage.html
deleted file mode 100644 (file)
index 2977905..0000000
+++ /dev/null
@@ -1,43 +0,0 @@
-<!--
- Copyright (C) 2012 Google Inc. All rights reserved.
-
- Redistribution and use in source and binary forms, with or without
- modification, are permitted provided that the following conditions
- are met:
-
- 1.  Redistributions of source code must retain the above copyright
-     notice, this list of conditions and the following disclaimer.
- 2.  Redistributions in binary form must reproduce the above copyright
-     notice, this list of conditions and the following disclaimer in the
-     documentation and/or other materials provided with the distribution.
- 3.  Neither the name of Apple Inc. ("Apple") nor the names of
-     its contributors may be used to endorse or promote products derived
-     from this software without specific prior written permission.
-
- THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
--->
-<!DOCTYPE html>
-<html>
-<head>
-    <link rel="stylesheet" href="InspectorOverlayPage.css">
-    <script src="InspectorOverlayPage.js"></script>
-</head>
-<body class="fill">
-    <div class="message-line">
-        <span class="message-box" id="paused-in-debugger"></span>
-    </div>
-    <canvas id="canvas" class="fill"></canvas>
-    <canvas id="paintrects-canvas" class="fill"></canvas>
-    <div id="element-title-container"></div>
-    <div id="log"></div>
-</body>
-</html>
diff --git a/Source/WebCore/inspector/InspectorOverlayPage.js b/Source/WebCore/inspector/InspectorOverlayPage.js
deleted file mode 100644 (file)
index a645fa1..0000000
+++ /dev/null
@@ -1,646 +0,0 @@
-const boundsColor = "rgba(255,0,0,0.6)";
-const lightGridColor = "rgba(0,0,0,0.2)";
-const darkGridColor = "rgba(0,0,0,0.5)";
-const transparentColor = "rgba(0, 0, 0, 0)";
-const gridBackgroundColor = "rgba(255, 255, 255, 0.6)";
-
-// CSS Shapes highlight colors
-const shapeHighlightColor = "rgba(96, 82, 127, 0.8)";
-const shapeMarginHighlightColor = "rgba(96, 82, 127, 0.6)";
-
-const paintRectFillColor = "rgba(255, 0, 0, 0.5)";
-
-const elementTitleFillColor = "rgb(255, 255, 194)";
-const elementTitleStrokeColor = "rgb(128, 128, 128)";
-
-let DATA = {};
-
-class Bounds {
-    constructor()
-    {
-        this._minX = Number.MAX_VALUE;
-        this._minY = Number.MAX_VALUE;
-        this._maxX = Number.MIN_VALUE;
-        this._maxY = Number.MIN_VALUE;
-
-        this._offsetX = 0;
-        this._offsetY = 0;
-    }
-
-    // Public
-
-    get minX() { return this._minX + this._offsetX; }
-    get minY() { return this._minY + this._offsetY; }
-    get maxX() { return this._maxX + this._offsetX; }
-    get maxY() { return this._maxY + this._offsetY; }
-
-    update(x, y)
-    {
-        this._minX = Math.min(this._minX, x);
-        this._minY = Math.min(this._minY, y);
-        this._maxX = Math.max(this._maxX, x);
-        this._maxY = Math.max(this._maxY, y);
-    }
-
-    offset(x, y)
-    {
-        this._offsetX = x || 0;
-        this._offsetY = y || 0;
-    }
-}
-
-function drawPausedInDebuggerMessage(message)
-{
-    var pausedInDebugger = document.getElementById("paused-in-debugger");
-    pausedInDebugger.textContent = message;
-    pausedInDebugger.style.visibility = "visible";
-    document.body.classList.add("dimmed");
-}
-
-function drawNodeHighlight(allHighlights)
-{
-    for (let highlight of allHighlights) {
-        let bounds = new Bounds;
-        bounds.offset(-highlight.scrollOffset.x, -highlight.scrollOffset.y);
-
-        _isolateActions(() => {
-            context.translate(-highlight.scrollOffset.x, -highlight.scrollOffset.y);
-
-            for (let fragment of highlight.fragments)
-                _drawFragmentHighlight(fragment, bounds);
-
-            if (highlight.elementData && highlight.elementData.shapeOutsideData)
-                _drawShapeHighlight(highlight.elementData.shapeOutsideData, bounds);
-        });
-
-        if (DATA.showRulers)
-            _drawBounds(bounds);
-    }
-
-    if (allHighlights.length === 1) {
-        for (let fragment of allHighlights[0].fragments)
-            _drawElementTitle(allHighlights[0].elementData, fragment, allHighlights[0].scrollOffset);
-    }
-}
-
-function drawQuadHighlight(highlight)
-{
-    let bounds = new Bounds;
-
-    _isolateActions(() => {
-        _drawOutlinedQuad(highlight.quads[0], highlight.contentColor, highlight.contentOutlineColor, bounds);
-    });
-
-    if (DATA.showRulers)
-        _drawBounds(bounds);
-}
-
-function quadEquals(quad1, quad2)
-{
-    return quad1[0].x === quad2[0].x && quad1[0].y === quad2[0].y &&
-        quad1[1].x === quad2[1].x && quad1[1].y === quad2[1].y &&
-        quad1[2].x === quad2[2].x && quad1[2].y === quad2[2].y &&
-        quad1[3].x === quad2[3].x && quad1[3].y === quad2[3].y;
-}
-
-function updatePaintRects(paintRectList)
-{
-    var context = paintRectsCanvas.getContext("2d");
-    context.save();
-    context.scale(window.devicePixelRatio, window.devicePixelRatio);
-
-    context.clearRect(0, 0, paintRectsCanvas.width, paintRectsCanvas.height);
-
-    context.fillStyle = paintRectFillColor;
-
-    for (var rectObject of paintRectList)
-        context.fillRect(rectObject.x, rectObject.y, rectObject.width, rectObject.height);
-
-    context.restore();
-}
-
-function drawRulers()
-{
-    const gridLabelSize = 13;
-    const gridSize = 15;
-    const gridStepIncrement = 50;
-    const gridStepLength = 8;
-    const gridSubStepIncrement = 5;
-    const gridSubStepLength = 5;
-
-
-    let pageFactor = DATA.pageZoomFactor * DATA.pageScaleFactor;
-    let scrollX = DATA.scrollOffset.x * DATA.pageScaleFactor;
-    let scrollY = DATA.scrollOffset.y * DATA.pageScaleFactor;
-
-    function zoom(value) {
-        return value * pageFactor;
-    }
-
-    function unzoom(value) {
-        return value / pageFactor;
-    }
-
-    function multipleBelow(value, step) {
-        return value - (value % step);
-    }
-
-    let width = DATA.viewportSize.width / pageFactor;
-    let height = DATA.viewportSize.height / pageFactor;
-    let minX = unzoom(scrollX);
-    let minY = unzoom(scrollY);
-    let maxX = minX + width;
-    let maxY = minY + height;
-
-    // Draw backgrounds
-    _isolateActions(() => {
-        let offsetX = DATA.contentInset.width + gridSize;
-        let offsetY = DATA.contentInset.height + gridSize;
-
-        context.fillStyle = gridBackgroundColor;
-        context.fillRect(DATA.contentInset.width, DATA.contentInset.height, gridSize, gridSize);
-        context.fillRect(offsetX, DATA.contentInset.height, zoom(width) - offsetX, gridSize);
-        context.fillRect(DATA.contentInset.width, offsetY, gridSize, zoom(height) - offsetY);
-    });
-
-    // Ruler styles
-    _isolateActions(() => {
-        context.lineWidth = 1;
-        context.fillStyle = darkGridColor;
-
-        // Draw labels
-        _isolateActions(() => {
-            context.translate(DATA.contentInset.width - scrollX, DATA.contentInset.height - scrollY);
-
-            for (let x = multipleBelow(minX, gridStepIncrement * 2); x < maxX; x += gridStepIncrement * 2) {
-                if (!x && !scrollX)
-                    continue;
-
-                _isolateActions(() => {
-                    context.translate(zoom(x) + 0.5, scrollY);
-                    context.fillText(x, 2, gridLabelSize);
-                });
-            }
-
-            for (let y = multipleBelow(minY, gridStepIncrement * 2); y < maxY; y += gridStepIncrement * 2) {
-                if (!y && !scrollY)
-                    continue;
-
-                _isolateActions(() => {
-                    context.translate(scrollX, zoom(y) + 0.5);
-                    context.rotate(-Math.PI / 2);
-                    context.fillText(y, 2, gridLabelSize);
-                });
-            }
-        });
-
-        // Draw horizontal grid
-        _isolateActions(() => {
-            context.translate(DATA.contentInset.width - scrollX + 0.5, DATA.contentInset.height - scrollY);
-
-            for (let x = multipleBelow(minX, gridSubStepIncrement); x < maxX; x += gridSubStepIncrement) {
-                if (!x && !scrollX)
-                    continue;
-
-                context.beginPath();
-                context.moveTo(zoom(x), scrollY);
-
-                if (x % gridStepIncrement) {
-                    context.strokeStyle = lightGridColor;
-                    context.lineTo(zoom(x), scrollY + gridSubStepLength);
-                } else {
-                    context.strokeStyle = darkGridColor;
-                    context.lineTo(zoom(x), scrollY + ((x % (gridStepIncrement * 2)) ? gridSubStepLength : gridStepLength));
-                }
-
-                context.stroke();
-            }
-        });
-
-        // Draw vertical grid
-        _isolateActions(() => {
-            context.translate(DATA.contentInset.width - scrollX, DATA.contentInset.height - scrollY + 0.5);
-
-            for (let y = multipleBelow(minY, gridSubStepIncrement); y < maxY; y += gridSubStepIncrement) {
-                if (!y && !scrollY)
-                    continue;
-
-                context.beginPath();
-                context.moveTo(scrollX, zoom(y));
-
-                if (y % gridStepIncrement) {
-                    context.strokeStyle = lightGridColor;
-                    context.lineTo(scrollX + gridSubStepLength, zoom(y));
-                } else {
-                    context.strokeStyle = darkGridColor;
-                    context.lineTo(scrollX + ((y % (gridStepIncrement * 2)) ? gridSubStepLength : gridStepLength), zoom(y));
-                }
-
-                context.stroke();
-            }
-        });
-    });
-}
-
-function reset(payload)
-{
-    DATA.viewportSize = payload.viewportSize;
-    DATA.deviceScaleFactor = payload.deviceScaleFactor;
-    DATA.pageScaleFactor = payload.pageScaleFactor;
-    DATA.pageZoomFactor = payload.pageZoomFactor;
-    DATA.scrollOffset = payload.scrollOffset;
-    DATA.contentInset = payload.contentInset;
-    DATA.showRulers = payload.showRulers;
-
-    window.canvas = document.getElementById("canvas");
-    window.paintRectsCanvas = document.getElementById("paintrects-canvas");
-
-    window.context = canvas.getContext("2d");
-
-    canvas.width = DATA.deviceScaleFactor * DATA.viewportSize.width;
-    canvas.height = DATA.deviceScaleFactor * DATA.viewportSize.height;
-    canvas.style.width = DATA.viewportSize.width + "px";
-    canvas.style.height = DATA.viewportSize.height + "px";
-    context.scale(DATA.deviceScaleFactor, DATA.deviceScaleFactor);
-    context.clearRect(0, 0, canvas.width, canvas.height);
-
-    // We avoid getting the context for the paint rects canvas until we need to paint, to avoid backing store allocation.
-    paintRectsCanvas.width = DATA.deviceScaleFactor * DATA.viewportSize.width;
-    paintRectsCanvas.height = DATA.deviceScaleFactor * DATA.viewportSize.height;
-    paintRectsCanvas.style.width = DATA.viewportSize.width + "px";
-    paintRectsCanvas.style.height = DATA.viewportSize.height + "px";
-
-    document.getElementById("paused-in-debugger").style.visibility = "hidden";
-    document.getElementById("element-title-container").textContent = "";
-    document.body.classList.remove("dimmed");
-
-    document.getElementById("log").style.setProperty("top", DATA.contentInset.height + "px");
-}
-
-function DOMBuilder(tagName, className)
-{
-    this.element = document.createElement(tagName);
-    this.element.className = className;
-}
-
-DOMBuilder.prototype.appendTextNode = function(content)
-{
-    let node = document.createTextNode(content);
-    this.element.appendChild(node);
-    return node;
-}
-
-DOMBuilder.prototype.appendSpan = function(className, value)
-{
-    var span = document.createElement("span");
-    span.className = className;
-    span.textContent = value;
-    this.element.appendChild(span);
-    return span;
-}
-
-DOMBuilder.prototype.appendSpanIfNotNull = function(className, value, prefix)
-{
-    return value ? this.appendSpan(className, (prefix ? prefix : "") + value) : null;
-}
-
-DOMBuilder.prototype.appendProperty = function(className, propertyName, value)
-{
-    var builder = new DOMBuilder("div", className);
-    builder.appendSpan("css-property", propertyName);
-    builder.appendTextNode(" ");
-    builder.appendSpan("value", value);
-    this.element.appendChild(builder.element);
-    return builder.element;
-}
-
-DOMBuilder.prototype.appendPropertyIfNotNull = function(className, propertyName, value)
-{
-    return value ? this.appendProperty(className, propertyName, value) : null;
-}
-
-function _truncateString(value, maxLength)
-{
-    return value && value.length > maxLength ? value.substring(0, 50) + "\u2026" : value;
-}
-
-function _isolateActions(func) {
-    context.save();
-    func();
-    context.restore();
-}
-
-function _quadToPath(quad, bounds)
-{
-    function parseQuadPoint(point) {
-        bounds.update(point.x, point.y);
-        return [point.x, point.y];
-    }
-
-    context.beginPath();
-    context.moveTo(...parseQuadPoint(quad[0]));
-    context.lineTo(...parseQuadPoint(quad[1]));
-    context.lineTo(...parseQuadPoint(quad[2]));
-    context.lineTo(...parseQuadPoint(quad[3]));
-    context.closePath();
-    return context;
-}
-
-function _drawOutlinedQuad(quad, fillColor, outlineColor, bounds)
-{
-    _isolateActions(() => {
-        context.lineWidth = 2;
-        _quadToPath(quad, bounds);
-        context.clip();
-        context.fillStyle = fillColor;
-        context.fill();
-        if (outlineColor) {
-            context.strokeStyle = outlineColor;
-            context.stroke();
-        }
-    });
-}
-
-function _drawPath(context, commands, fillColor, bounds)
-{
-    let commandsIndex = 0;
-
-    function parsePoints(count) {
-        let parsed = [];
-        for (let i = 0; i < count; ++i) {
-            let x = commands[commandsIndex++];
-            parsed.push(x);
-
-            let y = commands[commandsIndex++];
-            parsed.push(y);
-
-            bounds.update(x, y);
-        }
-        return parsed;
-    }
-
-    _isolateActions(() => {
-        context.beginPath();
-
-        while (commandsIndex < commands.length) {
-            switch (commands[commandsIndex++]) {
-            case 'M':
-                context.moveTo(...parsePoints(1));
-                break;
-            case 'L':
-                context.lineTo(...parsePoints(1));
-                break;
-            case 'C':
-                context.bezierCurveTo(...parsePoints(3));
-                break;
-            case 'Q':
-                context.quadraticCurveTo(...parsePoints(2));
-                break;
-            case 'Z':
-                context.closePath();
-                break;
-            }
-        }
-
-        context.closePath();
-        context.fillStyle = fillColor;
-        context.fill();
-    });
-}
-
-function _drawOutlinedQuadWithClip(quad, clipQuad, fillColor, bounds)
-{
-    _isolateActions(() => {
-        context.fillStyle = fillColor;
-        context.lineWidth = 0;
-        _quadToPath(quad, bounds);
-        context.fill();
-
-        context.globalCompositeOperation = "destination-out";
-        context.fillStyle = "red";
-        _quadToPath(clipQuad, bounds);
-        context.fill();
-    });
-}
-
-function _drawBounds(bounds)
-{
-    _isolateActions(() => {
-        let minX = DATA.contentInset.width;
-        let maxX = DATA.viewportSize.width;
-        let minY = DATA.contentInset.height;
-        let maxY = DATA.viewportSize.height;
-
-        context.beginPath();
-
-        if (bounds.minY > minY) {
-            context.moveTo(bounds.minX, bounds.minY);
-            context.lineTo(bounds.minX, minY);
-
-            context.moveTo(bounds.maxX, bounds.minY);
-            context.lineTo(bounds.maxX, minY);
-        }
-
-        if (bounds.maxY < maxY) {
-            context.moveTo(bounds.minX, bounds.maxY);
-            context.lineTo(bounds.minX, maxY);
-
-            context.moveTo(bounds.maxX, bounds.maxY);
-            context.lineTo(bounds.maxX, maxY);
-        }
-
-        if (bounds.minX > minX) {
-            context.moveTo(bounds.minX, bounds.minY);
-            context.lineTo(minX, bounds.minY);
-
-            context.moveTo(bounds.minX, bounds.maxY);
-            context.lineTo(minX, bounds.maxY);
-        }
-
-        if (bounds.maxX < maxX) {
-            context.moveTo(bounds.maxX, bounds.minY);
-            context.lineTo(maxX, bounds.minY);
-
-            context.moveTo(bounds.maxX, bounds.maxY);
-            context.lineTo(maxX, bounds.maxY);
-        }
-
-        context.lineWidth = 1;
-        context.strokeStyle = boundsColor;
-        context.stroke();
-    });
-}
-
-function _createElementTitle(elementData)
-{
-    let builder = new DOMBuilder("div", "element-title");
-
-    builder.appendSpanIfNotNull("tag-name", elementData.tagName);
-    builder.appendSpanIfNotNull("node-id", CSS.escape(elementData.idValue), "#");
-
-    let classes = elementData.classes;
-    if (classes && classes.length)
-        builder.appendSpan("class-name", _truncateString(classes.map((className) => "." + CSS.escape(className)).join(""), 50));
-
-    builder.appendSpanIfNotNull("pseudo-type", elementData.pseudoElement, "::");
-
-    builder.appendTextNode(" ");
-    builder.appendSpan("node-width", elementData.size.width);
-    // \xd7 is the code for the &times; HTML entity.
-    builder.appendSpan("px", "px \xd7 ");
-    builder.appendSpan("node-height", elementData.size.height);
-    builder.appendSpan("px", "px");
-
-    builder.appendPropertyIfNotNull("role-name", "Role", elementData.role);
-
-    document.getElementById("element-title-container").appendChild(builder.element);
-
-    return builder.element;
-}
-
-function _drawElementTitle(elementData, fragmentHighlight, scroll)
-{
-    if (!elementData || !fragmentHighlight.quads.length)
-        return;
-
-    var elementTitle = _createElementTitle(elementData);
-
-    var marginQuad = fragmentHighlight.quads[0];
-
-    var titleWidth = elementTitle.offsetWidth + 6;
-    var titleHeight = elementTitle.offsetHeight + 4;
-
-    var anchorTop = marginQuad[0].y;
-    var anchorBottom = marginQuad[3].y;
-
-    const arrowHeight = 7;
-    var renderArrowUp = false;
-    var renderArrowDown = false;
-
-    var boxX = marginQuad[0].x;
-
-    boxX = Math.max(2, boxX - scroll.x);
-    anchorTop -= scroll.y;
-    anchorBottom -= scroll.y;
-
-    var viewportWidth = DATA.viewportSize.width;
-    if (boxX + titleWidth > viewportWidth)
-        boxX = viewportWidth - titleWidth - 2;
-
-    var viewportHeight = DATA.viewportSize.height;
-    var viewportTop = DATA.contentInset.height;
-
-    var boxY;
-    if (anchorTop > viewportHeight) {
-        boxY = canvas.height - titleHeight - arrowHeight;
-        renderArrowDown = true;
-    } else if (anchorBottom < viewportTop) {
-        boxY = arrowHeight;
-        renderArrowUp = true;
-    } else if (anchorBottom + titleHeight + arrowHeight < viewportHeight) {
-        boxY = anchorBottom + arrowHeight - 4;
-        renderArrowUp = true;
-    } else if (anchorTop - titleHeight - arrowHeight > viewportTop) {
-        boxY = anchorTop - titleHeight - arrowHeight + 3;
-        renderArrowDown = true;
-    } else
-        boxY = arrowHeight;
-
-    _isolateActions(() => {
-        context.translate(0.5, 0.5);
-        context.beginPath();
-        context.moveTo(boxX, boxY);
-        if (renderArrowUp) {
-            context.lineTo(boxX + (2 * arrowHeight), boxY);
-            context.lineTo(boxX + (3 * arrowHeight), boxY - arrowHeight);
-            context.lineTo(boxX + (4 * arrowHeight), boxY);
-        }
-        context.lineTo(boxX + titleWidth, boxY);
-        context.lineTo(boxX + titleWidth, boxY + titleHeight);
-        if (renderArrowDown) {
-            context.lineTo(boxX + (4 * arrowHeight), boxY + titleHeight);
-            context.lineTo(boxX + (3 * arrowHeight), boxY + titleHeight + arrowHeight);
-            context.lineTo(boxX + (2 * arrowHeight), boxY + titleHeight);
-        }
-        context.lineTo(boxX, boxY + titleHeight);
-        context.closePath();
-        context.fillStyle = elementTitleFillColor;
-        context.fill();
-        context.strokeStyle = elementTitleStrokeColor;
-        context.stroke();
-    });
-
-    elementTitle.style.top = (boxY + 3) + "px";
-    elementTitle.style.left = (boxX + 3) + "px";
-}
-
-function _drawShapeHighlight(shapeInfo, bounds)
-{
-    if (shapeInfo.marginShape)
-        _drawPath(context, shapeInfo.marginShape, shapeMarginHighlightColor, bounds);
-
-    if (shapeInfo.shape)
-        _drawPath(context, shapeInfo.shape, shapeHighlightColor, bounds);
-
-    if (!(shapeInfo.shape || shapeInfo.marginShape))
-        _drawOutlinedQuad(shapeInfo.bounds, shapeHighlightColor, shapeHighlightColor, bounds);
-}
-
-function _drawFragmentHighlight(highlight, bounds)
-{
-    if (!highlight.quads.length)
-        return;
-
-    _isolateActions(() => {
-        let quads = highlight.quads.slice();
-        let contentQuad = quads.pop();
-        let paddingQuad = quads.pop();
-        let borderQuad = quads.pop();
-        let marginQuad = quads.pop();
-
-        let hasContent = contentQuad && highlight.contentColor !== transparentColor || highlight.contentOutlineColor !== transparentColor;
-        let hasPadding = paddingQuad && highlight.paddingColor !== transparentColor;
-        let hasBorder = borderQuad && highlight.borderColor !== transparentColor;
-        let hasMargin = marginQuad && highlight.marginColor !== transparentColor;
-
-        if (hasMargin && (!hasBorder || !quadEquals(marginQuad, borderQuad)))
-            _drawOutlinedQuadWithClip(marginQuad, borderQuad, highlight.marginColor, bounds);
-
-        if (hasBorder && (!hasPadding || !quadEquals(borderQuad, paddingQuad)))
-            _drawOutlinedQuadWithClip(borderQuad, paddingQuad, highlight.borderColor, bounds);
-
-        if (hasPadding && (!hasContent || !quadEquals(paddingQuad, contentQuad)))
-            _drawOutlinedQuadWithClip(paddingQuad, contentQuad, highlight.paddingColor, bounds);
-
-        if (hasContent)
-            _drawOutlinedQuad(contentQuad, highlight.contentColor, highlight.contentOutlineColor, bounds);
-    });
-}
-
-function showPageIndication()
-{
-    document.body.classList.add("indicate");
-}
-
-function hidePageIndication()
-{
-    document.body.classList.remove("indicate");
-}
-
-function setPlatform(platform)
-{
-    document.body.classList.add("platform-" + platform);
-}
-
-function dispatch(message)
-{
-    var functionName = message.shift();
-    window[functionName].apply(null, message);
-}
-
-function log(text)
-{
-    var logEntry = document.createElement("div");
-    logEntry.textContent = text;
-    document.getElementById("log").appendChild(logEntry);
-}
index 1333aa9..a1aeffc 100644 (file)
@@ -324,6 +324,7 @@ void InspectorPageAgent::disable(ErrorString&)
 
     ErrorString unused;
     setShowPaintRects(unused, false);
+    setShowRulers(unused, false);
     overrideUserAgent(unused, nullptr);
     setEmulatedMedia(unused, emptyString());
     setForcedAppearance(unused, emptyString());
@@ -633,7 +634,7 @@ void InspectorPageAgent::setShowPaintRects(ErrorString&, bool show)
     if (m_client->overridesShowPaintRects())
         return;
 
-    m_overlay->setShowingPaintRects(show);
+    m_overlay->setShowPaintRects(show);
 }
 
 void InspectorPageAgent::domContentEventFired()
index 12e201c..6e24d02 100644 (file)
@@ -37,7 +37,6 @@
 #include "EventListener.h"
 #include "EventTarget.h"
 #include "Frame.h"
-#include "InspectorOverlay.h"
 #include "InspectorPageAgent.h"
 #include "InstrumentingAgents.h"
 #include "Page.h"
@@ -57,11 +56,10 @@ namespace WebCore {
 
 using namespace Inspector;
 
-PageDebuggerAgent::PageDebuggerAgent(PageAgentContext& context, InspectorPageAgent* pageAgent, InspectorOverlay* overlay)
+PageDebuggerAgent::PageDebuggerAgent(PageAgentContext& context, InspectorPageAgent* pageAgent)
     : WebDebuggerAgent(context)
     , m_page(context.inspectedPage)
     , m_pageAgent(pageAgent)
-    , m_overlay(overlay)
 {
 }
 
@@ -135,11 +133,6 @@ InjectedScript PageDebuggerAgent::injectedScriptForEval(ErrorString& errorString
     return injectedScript;
 }
 
-void PageDebuggerAgent::setOverlayMessage(ErrorString&, const String* message)
-{
-    m_overlay->setPausedInDebuggerMessage(message);
-}
-
 void PageDebuggerAgent::didClearMainFrameWindowObject()
 {
     didClearGlobalObject();
index 8943d9a..e8122a9 100644 (file)
@@ -38,7 +38,6 @@ namespace WebCore {
 class Document;
 class EventListener;
 class EventTarget;
-class InspectorOverlay;
 class InspectorPageAgent;
 class Page;
 class RegisteredEventListener;
@@ -48,7 +47,7 @@ class PageDebuggerAgent final : public WebDebuggerAgent {
     WTF_MAKE_NONCOPYABLE(PageDebuggerAgent);
     WTF_MAKE_FAST_ALLOCATED;
 public:
-    PageDebuggerAgent(PageAgentContext&, InspectorPageAgent*, InspectorOverlay*);
+    PageDebuggerAgent(PageAgentContext&, InspectorPageAgent*);
     virtual ~PageDebuggerAgent() = default;
 
     void didClearMainFrameWindowObject();
@@ -85,12 +84,10 @@ private:
     void breakpointActionLog(JSC::ExecState&, const String&) override;
 
     Inspector::InjectedScript injectedScriptForEval(ErrorString&, const int* executionContextId) override;
-    void setOverlayMessage(ErrorString&, const String*) final;
 
     Page& m_page;
 
     InspectorPageAgent* m_pageAgent;
-    InspectorOverlay* m_overlay { nullptr };
 
     HashMap<const RegisteredEventListener*, int> m_registeredEventListeners;
     HashMap<const TimerBase*, int> m_postMessageTimers;
index 73b6776..77a6071 100644 (file)
@@ -1543,15 +1543,6 @@ ExceptionOr<Ref<DOMRectList>> Internals::inspectorHighlightRects()
     return DOMRectList::create(highlight.quads);
 }
 
-ExceptionOr<String> Internals::inspectorHighlightObject()
-{
-    Document* document = contextDocument();
-    if (!document || !document->page())
-        return Exception { InvalidAccessError };
-
-    return document->page()->inspectorController().buildObjectForHighlightedNodes()->toJSONString();
-}
-
 ExceptionOr<unsigned> Internals::markerCountForNode(Node& node, const String& markerType)
 {
     OptionSet<DocumentMarker::MarkerType> markerTypes;
index 8430fd9..da3fe1d 100644 (file)
@@ -225,7 +225,6 @@ public:
     Ref<DOMRect> boundingBox(Element&);
 
     ExceptionOr<Ref<DOMRectList>> inspectorHighlightRects();
-    ExceptionOr<String> inspectorHighlightObject();
 
     ExceptionOr<unsigned> markerCountForNode(Node&, const String&);
     ExceptionOr<RefPtr<Range>> markerRangeForNode(Node&, const String& markerType, unsigned index);
index 3bc508d..cb7d2a4 100644 (file)
@@ -243,7 +243,6 @@ enum CompositingPolicy {
     DOMRect boundingBox(Element element);
 
     [MayThrowException] DOMRectList inspectorHighlightRects();
-    [MayThrowException] DOMString inspectorHighlightObject();
 
     [MayThrowException] unsigned long markerCountForNode(Node node, DOMString markerType);
     [MayThrowException] Range? markerRangeForNode(Node node, DOMString markerType, unsigned long index);
index 623fe33..d5957de 100644 (file)
@@ -1,5 +1,36 @@
 2019-02-24  Devin Rousso  <drousso@apple.com>
 
+        Web Inspector: Change the InspectorOverlay to use native rather than canvas
+        https://bugs.webkit.org/show_bug.cgi?id=105023
+        <rdar://problem/13443692>
+
+        Reviewed by Brian Burg.
+
+        * UserInterface/Base/Main.js:
+        (WI.initializeTarget):
+
+        * UserInterface/Protocol/Legacy/10.0/InspectorBackendCommands.js:
+        * UserInterface/Protocol/Legacy/10.3/InspectorBackendCommands.js:
+        * UserInterface/Protocol/Legacy/11.0/InspectorBackendCommands.js:
+        * UserInterface/Protocol/Legacy/11.3/InspectorBackendCommands.js:
+        * UserInterface/Protocol/Legacy/12.0/InspectorBackendCommands.js:
+        * UserInterface/Protocol/Legacy/12.2/InspectorBackendCommands.js:
+        * UserInterface/Protocol/Legacy/8.0/InspectorBackendCommands.js:
+        * UserInterface/Protocol/Legacy/9.0/InspectorBackendCommands.js:
+        * UserInterface/Protocol/Legacy/9.3/InspectorBackendCommands.js:
+        * Versions/Inspector-iOS-10.0.json:
+        * Versions/Inspector-iOS-10.3.json:
+        * Versions/Inspector-iOS-11.0.json:
+        * Versions/Inspector-iOS-11.3.json:
+        * Versions/Inspector-iOS-12.0.json:
+        * Versions/Inspector-iOS-12.2.json:
+        * Versions/Inspector-iOS-8.0.json:
+        * Versions/Inspector-iOS-9.0.json:
+        * Versions/Inspector-iOS-9.3.json:
+        Remove `Debugger.setOverlayMessage` command as it hasn't been used and is no longer supported.
+
+2019-02-24  Devin Rousso  <drousso@apple.com>
+
         Web Inspector: provide a way to make searches case sensitive or use a regular expression
         https://bugs.webkit.org/show_bug.cgi?id=192527
 
index 8063d0d..45e993c 100644 (file)
@@ -621,6 +621,10 @@ WI.initializeTarget = function(target)
                 target.PageAgent.overrideSetting(setting, value);
         }
 
+        // COMPATIBILITY (iOS 11.3)
+        if (target.PageAgent.setShowRulers && WI.settings.showRulers.value)
+            target.PageAgent.setShowRulers(true);
+
         // COMPATIBILITY (iOS 8): Page.setShowPaintRects did not exist.
         if (target.PageAgent.setShowPaintRects && WI.settings.showPaintRects.value)
             target.PageAgent.setShowPaintRects(true);
index 90504d0..796ca43 100644 (file)
@@ -197,7 +197,6 @@ InspectorBackend.registerCommand("Debugger.getScriptSource", [{"name": "scriptId
 InspectorBackend.registerCommand("Debugger.getFunctionDetails", [{"name": "functionId", "type": "string", "optional": false}], ["details"]);
 InspectorBackend.registerCommand("Debugger.setPauseOnExceptions", [{"name": "state", "type": "string", "optional": false}], []);
 InspectorBackend.registerCommand("Debugger.evaluateOnCallFrame", [{"name": "callFrameId", "type": "string", "optional": false}, {"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}, {"name": "saveResult", "type": "boolean", "optional": true}], ["result", "wasThrown", "savedResultIndex"]);
-InspectorBackend.registerCommand("Debugger.setOverlayMessage", [{"name": "message", "type": "string", "optional": true}], []);
 InspectorBackend.activateDomain("Debugger");
 
 // Heap.
index c361e69..fc3d843 100644 (file)
@@ -202,7 +202,6 @@ InspectorBackend.registerCommand("Debugger.getFunctionDetails", [{"name": "funct
 InspectorBackend.registerCommand("Debugger.setPauseOnExceptions", [{"name": "state", "type": "string", "optional": false}], []);
 InspectorBackend.registerCommand("Debugger.setPauseOnAssertions", [{"name": "enabled", "type": "boolean", "optional": false}], []);
 InspectorBackend.registerCommand("Debugger.evaluateOnCallFrame", [{"name": "callFrameId", "type": "string", "optional": false}, {"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}, {"name": "saveResult", "type": "boolean", "optional": true}], ["result", "wasThrown", "savedResultIndex"]);
-InspectorBackend.registerCommand("Debugger.setOverlayMessage", [{"name": "message", "type": "string", "optional": true}], []);
 InspectorBackend.activateDomain("Debugger");
 
 // Heap.
index 6a15738..c3d984a 100644 (file)
@@ -214,7 +214,6 @@ InspectorBackend.registerCommand("Debugger.getFunctionDetails", [{"name": "funct
 InspectorBackend.registerCommand("Debugger.setPauseOnExceptions", [{"name": "state", "type": "string", "optional": false}], []);
 InspectorBackend.registerCommand("Debugger.setPauseOnAssertions", [{"name": "enabled", "type": "boolean", "optional": false}], []);
 InspectorBackend.registerCommand("Debugger.evaluateOnCallFrame", [{"name": "callFrameId", "type": "string", "optional": false}, {"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}, {"name": "saveResult", "type": "boolean", "optional": true}], ["result", "wasThrown", "savedResultIndex"]);
-InspectorBackend.registerCommand("Debugger.setOverlayMessage", [{"name": "message", "type": "string", "optional": true}], []);
 InspectorBackend.activateDomain("Debugger");
 
 // Heap.
index ccdabb3..0e62f4b 100644 (file)
@@ -241,7 +241,6 @@ InspectorBackend.registerCommand("Debugger.getFunctionDetails", [{"name": "funct
 InspectorBackend.registerCommand("Debugger.setPauseOnExceptions", [{"name": "state", "type": "string", "optional": false}], []);
 InspectorBackend.registerCommand("Debugger.setPauseOnAssertions", [{"name": "enabled", "type": "boolean", "optional": false}], []);
 InspectorBackend.registerCommand("Debugger.evaluateOnCallFrame", [{"name": "callFrameId", "type": "string", "optional": false}, {"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}, {"name": "saveResult", "type": "boolean", "optional": true}], ["result", "wasThrown", "savedResultIndex"]);
-InspectorBackend.registerCommand("Debugger.setOverlayMessage", [{"name": "message", "type": "string", "optional": true}], []);
 InspectorBackend.activateDomain("Debugger");
 
 // Heap.
index 3337f2d..ee6925a 100644 (file)
@@ -243,7 +243,6 @@ InspectorBackend.registerCommand("Debugger.setPauseOnExceptions", [{"name": "sta
 InspectorBackend.registerCommand("Debugger.setPauseOnAssertions", [{"name": "enabled", "type": "boolean", "optional": false}], []);
 InspectorBackend.registerCommand("Debugger.setPauseForInternalScripts", [{"name": "shouldPause", "type": "boolean", "optional": false}], []);
 InspectorBackend.registerCommand("Debugger.evaluateOnCallFrame", [{"name": "callFrameId", "type": "string", "optional": false}, {"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}, {"name": "saveResult", "type": "boolean", "optional": true}], ["result", "wasThrown", "savedResultIndex"]);
-InspectorBackend.registerCommand("Debugger.setOverlayMessage", [{"name": "message", "type": "string", "optional": true}], []);
 InspectorBackend.activateDomain("Debugger");
 
 // Heap.
index 7dca52d..8ac5c10 100644 (file)
@@ -249,7 +249,6 @@ InspectorBackend.registerCommand("Debugger.setPauseOnExceptions", [{"name": "sta
 InspectorBackend.registerCommand("Debugger.setPauseOnAssertions", [{"name": "enabled", "type": "boolean", "optional": false}], []);
 InspectorBackend.registerCommand("Debugger.setPauseForInternalScripts", [{"name": "shouldPause", "type": "boolean", "optional": false}], []);
 InspectorBackend.registerCommand("Debugger.evaluateOnCallFrame", [{"name": "callFrameId", "type": "string", "optional": false}, {"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}, {"name": "saveResult", "type": "boolean", "optional": true}], ["result", "wasThrown", "savedResultIndex"]);
-InspectorBackend.registerCommand("Debugger.setOverlayMessage", [{"name": "message", "type": "string", "optional": true}], []);
 InspectorBackend.activateDomain("Debugger");
 
 // Heap.
index 598f58d..1f8e667 100644 (file)
@@ -73,7 +73,6 @@ InspectorBackend.registerCommand("Debugger.getScriptSource", [{"name": "scriptId
 InspectorBackend.registerCommand("Debugger.getFunctionDetails", [{"name": "functionId", "type": "string", "optional": false}], ["details"]);
 InspectorBackend.registerCommand("Debugger.setPauseOnExceptions", [{"name": "state", "type": "string", "optional": false}], []);
 InspectorBackend.registerCommand("Debugger.evaluateOnCallFrame", [{"name": "callFrameId", "type": "string", "optional": false}, {"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
-InspectorBackend.registerCommand("Debugger.setOverlayMessage", [{"name": "message", "type": "string", "optional": true}], []);
 InspectorBackend.activateDomain("Debugger");
 
 // Inspector.
index bec4b80..50b0d96 100644 (file)
@@ -187,7 +187,6 @@ InspectorBackend.registerCommand("Debugger.getScriptSource", [{"name": "scriptId
 InspectorBackend.registerCommand("Debugger.getFunctionDetails", [{"name": "functionId", "type": "string", "optional": false}], ["details"]);
 InspectorBackend.registerCommand("Debugger.setPauseOnExceptions", [{"name": "state", "type": "string", "optional": false}], []);
 InspectorBackend.registerCommand("Debugger.evaluateOnCallFrame", [{"name": "callFrameId", "type": "string", "optional": false}, {"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}, {"name": "saveResult", "type": "boolean", "optional": true}], ["result", "wasThrown", "savedResultIndex"]);
-InspectorBackend.registerCommand("Debugger.setOverlayMessage", [{"name": "message", "type": "string", "optional": true}], []);
 InspectorBackend.activateDomain("Debugger");
 
 // IndexedDB.
index eed207d..b386699 100644 (file)
@@ -194,7 +194,6 @@ InspectorBackend.registerCommand("Debugger.getScriptSource", [{"name": "scriptId
 InspectorBackend.registerCommand("Debugger.getFunctionDetails", [{"name": "functionId", "type": "string", "optional": false}], ["details"]);
 InspectorBackend.registerCommand("Debugger.setPauseOnExceptions", [{"name": "state", "type": "string", "optional": false}], []);
 InspectorBackend.registerCommand("Debugger.evaluateOnCallFrame", [{"name": "callFrameId", "type": "string", "optional": false}, {"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}, {"name": "saveResult", "type": "boolean", "optional": true}], ["result", "wasThrown", "savedResultIndex"]);
-InspectorBackend.registerCommand("Debugger.setOverlayMessage", [{"name": "message", "type": "string", "optional": true}], []);
 InspectorBackend.activateDomain("Debugger");
 
 // IndexedDB.
index 153920a..cdd0ddf 100644 (file)
                 { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the result was saved, this is the $n index that can be used to access the value." }
             ],
             "description": "Evaluates expression on a given call frame."
-        },
-        {
-            "name": "setOverlayMessage",
-            "parameters": [
-                { "name": "message", "type": "string", "optional": true, "description": "Overlay message to display when paused in debugger." }
-            ],
-            "description": "Sets overlay message."
         }
     ],
     "events": [
index 5b47f07..bde29b6 100644 (file)
                 { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the result was saved, this is the $n index that can be used to access the value." }
             ],
             "description": "Evaluates expression on a given call frame."
-        },
-        {
-            "name": "setOverlayMessage",
-            "parameters": [
-                { "name": "message", "type": "string", "optional": true, "description": "Overlay message to display when paused in debugger." }
-            ],
-            "description": "Sets overlay message."
         }
     ],
     "events": [
index 7fd3acf..e8c923a 100644 (file)
                 { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
                 { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the result was saved, this is the $n index that can be used to access the value." }
             ]
-        },
-        {
-            "name": "setOverlayMessage",
-            "description": "Sets overlay message.",
-            "parameters": [
-                { "name": "message", "type": "string", "optional": true, "description": "Overlay message to display when paused in debugger." }
-            ]
         }
     ],
     "events": [
index 3e692bb..bed20b4 100644 (file)
                 { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
                 { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the result was saved, this is the $n index that can be used to access the value." }
             ]
-        },
-        {
-            "name": "setOverlayMessage",
-            "description": "Sets overlay message.",
-            "parameters": [
-                { "name": "message", "type": "string", "optional": true, "description": "Overlay message to display when paused in debugger." }
-            ]
         }
     ],
     "events": [
index 9892776..26a81c4 100644 (file)
                 { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
                 { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the result was saved, this is the $n index that can be used to access the value." }
             ]
-        },
-        {
-            "name": "setOverlayMessage",
-            "description": "Sets overlay message.",
-            "parameters": [
-                { "name": "message", "type": "string", "optional": true, "description": "Overlay message to display when paused in debugger." }
-            ]
         }
     ],
     "events": [
index 9f012f8..9d52dbe 100644 (file)
                 { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
                 { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the result was saved, this is the $n index that can be used to access the value." }
             ]
-        },
-        {
-            "name": "setOverlayMessage",
-            "description": "Sets overlay message.",
-            "parameters": [
-                { "name": "message", "type": "string", "optional": true, "description": "Overlay message to display when paused in debugger." }
-            ]
         }
     ],
     "events": [
index 74af1e9..68aab79 100644 (file)
                 { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." }
             ],
             "description": "Evaluates expression on a given call frame."
-        },
-        {
-            "name": "setOverlayMessage",
-            "parameters": [
-                { "name": "message", "type": "string", "optional": true, "description": "Overlay message to display when paused in debugger." }
-            ],
-            "description": "Sets overlay message."
         }
     ],
     "events": [
index c3ef70a..a28bc38 100644 (file)
                 { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the result was saved, this is the $n index that can be used to access the value." }
             ],
             "description": "Evaluates expression on a given call frame."
-        },
-        {
-            "name": "setOverlayMessage",
-            "parameters": [
-                { "name": "message", "type": "string", "optional": true, "description": "Overlay message to display when paused in debugger." }
-            ],
-            "description": "Sets overlay message."
         }
     ],
     "events": [
index fc7cb00..2738440 100644 (file)
                 { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the result was saved, this is the $n index that can be used to access the value." }
             ],
             "description": "Evaluates expression on a given call frame."
-        },
-        {
-            "name": "setOverlayMessage",
-            "parameters": [
-                { "name": "message", "type": "string", "optional": true, "description": "Overlay message to display when paused in debugger." }
-            ],
-            "description": "Sets overlay message."
         }
     ],
     "events": [