Attachment 361060 Details for Bug 105023 – Patch

[patch] Patch

bug-105023-20190204093216.patch (text/plain), 194.08 KB, created by Devin Rousso on 2019-02-04 09:32:22 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2019-02-04 09:32:22 PST

Size: 194.08 KB

patch

obsolete

>diff --git a/Source/JavaScriptCore/ChangeLog b/Source/JavaScriptCore/ChangeLog
>index a9513e25ad9ff1c9a4aa4f6a219f3e766d57fdda..89dacb8f1af70c1504031f877bbd706f19056264 100644
>--- a/Source/JavaScriptCore/ChangeLog
>+++ b/Source/JavaScriptCore/ChangeLog
>@@ -1,3 +1,25 @@
>+2019-02-04  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-01  Yusuke Suzuki  <ysuzuki@apple.com>
> 
>         Unreviewed, follow-up after r240859
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index 70ee09c777eef10d17ffcd8dba8e032466a3ba1e..d24fbb998f5069a6531e2fdecefd435b381e2b6f 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,99 @@
>+2019-02-04  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::inspectorHighlightBase64): Added.
>+        (WebCore::Internals::inspectorHighlightObject): Deleted.
>+        * platform/ScrollView.h:
>+        * platform/graphics/ImageBuffer.h:
>+        Provide a way for tests to get information about what's highlighted, specifically in the
>+        form of a base64 encoded image of the contents of the overlay.
>+
>+        * 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-01  Antti Koivisto  <antti@apple.com>
> 
>         Don't use base layer() as the scroll layer in scrolling tree.
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index b57849c5028c64c56edb6907667b811a4d36f323..d3a57a0d682dfbd60239af56a09b89c572e20137 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,34 @@
>+2019-02-04  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-01-31  Joseph Pecoraro  <pecoraro@apple.com>
> 
>         Web Inspector: Timeline time range selection sometimes shows 0.000, should be just 0
>diff --git a/Source/JavaScriptCore/CMakeLists.txt b/Source/JavaScriptCore/CMakeLists.txt
>index d04740bf141d32996c62f585b28bc4ccb435d800..18fbbb703d920d4cefa8dbb603a01f87c7c90cae 100644
>--- a/Source/JavaScriptCore/CMakeLists.txt
>+++ b/Source/JavaScriptCore/CMakeLists.txt
>@@ -1083,7 +1083,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
>diff --git a/Source/JavaScriptCore/DerivedSources-input.xcfilelist b/Source/JavaScriptCore/DerivedSources-input.xcfilelist
>index 0ab660417cdd40070c311cf551b95d168ef03696..e7f948b3fbe2e2a71dcff16da2d2e9f7b4134c4f 100644
>--- a/Source/JavaScriptCore/DerivedSources-input.xcfilelist
>+++ b/Source/JavaScriptCore/DerivedSources-input.xcfilelist
>@@ -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
>diff --git a/Source/JavaScriptCore/DerivedSources.make b/Source/JavaScriptCore/DerivedSources.make
>index 4d3e429074c12ef54dca25512ac203c593299013..396316d6dd359060f31ba1587cac6cdebefb4bf3 100644
>--- a/Source/JavaScriptCore/DerivedSources.make
>+++ b/Source/JavaScriptCore/DerivedSources.make
>@@ -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 \
>diff --git a/Source/JavaScriptCore/inspector/agents/InspectorDebuggerAgent.cpp b/Source/JavaScriptCore/inspector/agents/InspectorDebuggerAgent.cpp
>index ece5647c9c84596ccbcce9623ae5f6401f30cea0..ca4d70c3ef74c4c88f319b0dd0e7142a58a9e224 100644
>--- a/Source/JavaScriptCore/inspector/agents/InspectorDebuggerAgent.cpp
>+++ b/Source/JavaScriptCore/inspector/agents/InspectorDebuggerAgent.cpp
>@@ -858,10 +858,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)
>diff --git a/Source/JavaScriptCore/inspector/agents/InspectorDebuggerAgent.h b/Source/JavaScriptCore/inspector/agents/InspectorDebuggerAgent.h
>index ca75073990c79dcc2bc182f6e328cedccfe704c5..e657da184f6af1d59bcc2020f71968a442c94a62 100644
>--- a/Source/JavaScriptCore/inspector/agents/InspectorDebuggerAgent.h
>+++ b/Source/JavaScriptCore/inspector/agents/InspectorDebuggerAgent.h
>@@ -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;
>diff --git a/Source/JavaScriptCore/inspector/protocol/Debugger.json b/Source/JavaScriptCore/inspector/protocol/Debugger.json
>index 2ee444254aae10c3b4af7a11646921ee8574d279..a5495ca1103a870728013cfdf4063bff98341189 100644
>--- a/Source/JavaScriptCore/inspector/protocol/Debugger.json
>+++ b/Source/JavaScriptCore/inspector/protocol/Debugger.json
>@@ -286,13 +286,6 @@
>                 { "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
>index 813fb60796e174f388690bec934ab8402082b2e3..0000000000000000000000000000000000000000
>--- a/Source/JavaScriptCore/inspector/protocol/OverlayTypes.json
>+++ /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" }
>-            ]
>-        }
>-    ]
>-}
>diff --git a/Source/WebCore/CMakeLists.txt b/Source/WebCore/CMakeLists.txt
>index 938fe9a5af1ab54ad0156994c33df45c57324566..f14b33fb6df9de0d621fd083433b439d55b7e952 100644
>--- a/Source/WebCore/CMakeLists.txt
>+++ b/Source/WebCore/CMakeLists.txt
>@@ -1757,17 +1757,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(
>diff --git a/Source/WebCore/DerivedSources-input.xcfilelist b/Source/WebCore/DerivedSources-input.xcfilelist
>index 0c5b93d53c137153ec08279dd8668ee864ab7a48..5f1f4ed4557d64a5d0f76fc2d47cbe5d4573868e 100644
>--- a/Source/WebCore/DerivedSources-input.xcfilelist
>+++ b/Source/WebCore/DerivedSources-input.xcfilelist
>@@ -843,9 +843,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
>diff --git a/Source/WebCore/DerivedSources-output.xcfilelist b/Source/WebCore/DerivedSources-output.xcfilelist
>index 275b8c82ba29e7d850eab781c0cb7537e7fcea26..c160c1d27a2f1fa9aa77cc78f97960c73aff2366 100644
>--- a/Source/WebCore/DerivedSources-output.xcfilelist
>+++ b/Source/WebCore/DerivedSources-output.xcfilelist
>@@ -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
>diff --git a/Source/WebCore/DerivedSources.make b/Source/WebCore/DerivedSources.make
>index bc3009ef50c964b6e6784ce82c07649cf7945edd..bf7dfa3b056d8d206912698b9b93153b5ecdd890 100644
>--- a/Source/WebCore/DerivedSources.make
>+++ b/Source/WebCore/DerivedSources.make
>@@ -1719,13 +1719,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
>diff --git a/Source/WebCore/WebCore.xcodeproj/project.pbxproj b/Source/WebCore/WebCore.xcodeproj/project.pbxproj
>index dd9174dee6fa26220479c4a036e1c4efc2383b61..ba1608efad1fc774005061b2d3e9c02eb753762a 100644
>--- a/Source/WebCore/WebCore.xcodeproj/project.pbxproj
>+++ b/Source/WebCore/WebCore.xcodeproj/project.pbxproj
>@@ -9560,7 +9560,6 @@
> 		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>"; };
>@@ -11429,8 +11428,6 @@
> 		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>"; };
>@@ -17056,9 +17053,6 @@
> 				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 */,
>diff --git a/Source/WebCore/inspector/InspectorController.cpp b/Source/WebCore/inspector/InspectorController.cpp
>index be94652efd3ed099b77c2c0ca4eb0956738bd761..0f6134eb14c0d7e8ee89c96f67a042cedf875062 100644
>--- a/Source/WebCore/inspector/InspectorController.cpp
>+++ b/Source/WebCore/inspector/InspectorController.cpp
>@@ -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())
>diff --git a/Source/WebCore/inspector/InspectorController.h b/Source/WebCore/inspector/InspectorController.h
>index 492fc8a407e6ed2200e3c34a99c684b07f8770c6..1a5f2705a5e02ab3bee8449529577a9f5f0e3e99 100644
>--- a/Source/WebCore/inspector/InspectorController.h
>+++ b/Source/WebCore/inspector/InspectorController.h
>@@ -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; }
>diff --git a/Source/WebCore/inspector/InspectorOverlay.cpp b/Source/WebCore/inspector/InspectorOverlay.cpp
>index 3e3bc816ea90c6436313ca5e3c8f0d985e53d9aa..9bad9c3972c98b685033cdb0c400697552af03e4 100644
>--- a/Source/WebCore/inspector/InspectorOverlay.cpp
>+++ b/Source/WebCore/inspector/InspectorOverlay.cpp
>@@ -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
>@@ -29,58 +30,89 @@
> #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);
> 
>-    view->updateLayoutAndStyleIfNeededRecursive();
>-    view->paint(context, IntRect(0, 0, view->width(), view->height()));
>+        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);
>+        }
>+    }
>+
>+    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();
>+    m_client->highlight();
> }
> 
>-static Ref<Inspector::Protocol::OverlayTypes::Point> buildObjectForPoint(const FloatPoint& point)
>+void InspectorOverlay::setShowPaintRects(bool showPaintRects)
> {
>-    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();
>-}
>-
>-void InspectorOverlay::setShowingPaintRects(bool showingPaintRects)
>-{
>-    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;
> 
>-    evaluateInOverlay("updatePaintRects"_s, WTFMove(arrayOfRects));
>+    drawFragmentHighlight(context, node, m_nodeHighlightConfig, bounds);
>+
>+    if (m_nodeHighlightConfig.showInfo)
>+        drawShapeHighlight(context, node, bounds);
>+
>+    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);
>-}
>-
>-static RefPtr<JSON::ArrayOf<Inspector::Protocol::OverlayTypes::FragmentHighlightData>> buildArrayForRendererFragments(RenderObject* renderer, const HighlightConfig& config)
>-{
>-    auto arrayOfFragments = JSON::ArrayOf<Inspector::Protocol::OverlayTypes::FragmentHighlightData>::create();
>-
>     Highlight highlight;
>-    buildRendererHighlight(renderer, config, highlight, InspectorOverlay::CoordinateSystem::View);
>-    arrayOfFragments->addItem(buildObjectForHighlight(highlight));
>+    buildQuadHighlight(quad, m_quadHighlightConfig, highlight);
> 
>-    return WTFMove(arrayOfFragments);
>-}
>+    if (highlight.quads.size() >= 1) {
>+        FloatRect bounds;
> 
>-static FloatPoint localPointToRoot(RenderObject* renderer, const FrameView* mainView, const FrameView* view, const FloatPoint& point)
>-{
>-    FloatPoint result = renderer->localToAbsolute(point);
>-    result = view->contentsToRootView(roundedIntPoint(result));
>-    result += toIntSize(mainView->scrollPosition());
>-    return result;
>-}
>+        drawOutlinedQuad(context, highlight.quads[0], highlight.contentColor, highlight.contentOutlineColor, bounds);
> 
>-struct PathApplyInfo {
>-    FrameView* rootView;
>-    FrameView* view;
>-    Inspector::Protocol::OverlayTypes::DisplayPath* pathArray;
>-    RenderObject* renderer;
>-    const ShapeOutsideInfo* shapeOutsideInfo;
>-};
>-
>-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 (m_showRulers)
>+            drawBounds(context, bounds);
>     }
> }
> 
>-static void appendPathSegment(PathApplyInfo& pathApplyInfo, const PathElement& pathElement)
>+void InspectorOverlay::drawPaintRects(GraphicsContext& context, const Deque<TimeRectPair>& paintRects)
> {
>-    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;
>-    }
>+    GraphicsContextStateSaver stateSaver(context);
>+
>+    const Color paintRectsColor(1.0f, 0.0f, 0.0f, 0.5f);
>+    context.setFillColor(paintRectsColor);
>+
>+    for (const TimeRectPair& pair : paintRects)
>+        context.fillRect(pair.second);
> }
> 
>-static RefPtr<Inspector::Protocol::OverlayTypes::ShapeOutsideData> buildObjectForShapeOutside(Frame* containingFrame, RenderBox* renderer)
>+void InspectorOverlay::drawBounds(GraphicsContext& context, const FloatRect& bounds)
> {
>-    const ShapeOutsideInfo* shapeOutsideInfo = renderer->shapeOutsideInfo();
>-    if (!shapeOutsideInfo)
>-        return nullptr;
>+    FrameView* pageView = m_page.mainFrame().view();
>+    FloatSize viewportSize = pageView->sizeForVisibleContent();
>+    FloatSize contentInset(0, pageView->topContentInset(ScrollView::TopContentInsetType::WebCoreOrPlatformContentInset));
> 
>-    LayoutRect shapeBounds = shapeOutsideInfo->computedShapePhysicalBoundingBox();
>-    FloatQuad shapeQuad = renderer->localToAbsoluteQuad(FloatRect(shapeBounds));
>-    contentsQuadToPage(containingFrame->page()->mainFrame().view(), containingFrame->view(), shapeQuad);
>+    Path path;
> 
>-    auto shapeObject = Inspector::Protocol::OverlayTypes::ShapeOutsideData::create()
>-        .setBounds(buildArrayForQuad(shapeQuad))
>-        .release();
>+    if (bounds.y() > contentInset.height()) {
>+        path.moveTo({ bounds.x(), bounds.y() });
>+        path.addLineTo({ bounds.x(), contentInset.height() });
> 
>-    Shape::DisplayPaths paths;
>-    shapeOutsideInfo->computedShape().buildDisplayPaths(paths);
>+        path.moveTo({ bounds.maxX(), bounds.y() });
>+        path.addLineTo({ bounds.maxX(), contentInset.height() });
>+    }
> 
>-    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;
>+    if (bounds.maxY() < viewportSize.height()) {
>+        path.moveTo({ bounds.x(), viewportSize.height() });
>+        path.addLineTo({ bounds.x(), bounds.maxY() });
> 
>-        paths.shape.apply([&info](const PathElement& pathElement) {
>-            appendPathSegment(info, pathElement);
>-        });
>+        path.moveTo({ bounds.maxX(), viewportSize.height() });
>+        path.addLineTo({ bounds.maxX(), bounds.maxY() });
>+    }
> 
>-        shapeObject->setShape(shapePath.copyRef());
>+    if (bounds.x() > contentInset.width()) {
>+        path.moveTo({ bounds.x(), bounds.y() });
>+        path.addLineTo({ contentInset.width(), bounds.y() });
> 
>-        if (paths.marginShape.length()) {
>-            auto marginShapePath = Inspector::Protocol::OverlayTypes::DisplayPath::create();
>-            info.pathArray = &marginShapePath.get();
>+        path.moveTo({ bounds.x(), bounds.maxY() });
>+        path.addLineTo({ contentInset.width(), bounds.maxY() });
>+    }
> 
>-            paths.marginShape.apply([&info](const PathElement& pathElement) {
>-                appendPathSegment(info, pathElement);
>-            });
>+    if (bounds.maxX() < viewportSize.width()) {
>+        path.moveTo({ bounds.maxX(), bounds.y() });
>+        path.addLineTo({ viewportSize.width(), bounds.y() });
> 
>-            shapeObject->setMarginShape(marginShapePath.copyRef());
>+        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);
>+}
>+
>+void InspectorOverlay::drawRulers(GraphicsContext& context)
>+{
>+    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);
>+
>+    IntPoint scrollOffset;
>+
>+    FrameView* pageView = m_page.mainFrame().view();
>+    if (!pageView->delegatesScrolling())
>+        scrollOffset = pageView->visibleContentRect().location();
>+
>+    FloatSize viewportSize = pageView->sizeForVisibleContent();
>+    FloatSize contentInset(0, pageView->topContentInset(ScrollView::TopContentInsetType::WebCoreOrPlatformContentInset));
>+    float pageScaleFactor = m_page.pageScaleFactor();
>+    float pageZoomFactor = m_page.mainFrame().pageZoomFactor();
>+
>+    float pageFactor = pageZoomFactor * pageScaleFactor;
>+    float scrollX = scrollOffset.x() * pageScaleFactor;
>+    float scrollY = scrollOffset.y() * pageScaleFactor;
>+
>+    const auto zoom = [&] (float value) -> float {
>+        return value * pageFactor;
>+    };
>+
>+    const auto unzoom = [&] (float value) -> float {
>+        return value / pageFactor;
>+    };
>+
>+    const auto multipleBelow = [&] (float value, float step) -> float {
>+        return value - std::fmod(value, step);
>+    };
>+
>+    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;
>+
>+    // Draw backgrounds.
>+    {
>+        GraphicsContextStateSaver backgroundStateSaver(context);
>+
>+        float offsetX = contentInset.width() + rulerSize;
>+        float offsetY = contentInset.height() + rulerSize;
>+
>+        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 });
>+    }
>+
>+    // 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);
>+            }
>+        }
>+
>+        // 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 });
>+            }
>         }
>     }
>-
>-    return WTFMove(shapeObject);
> }
> 
>-static RefPtr<Inspector::Protocol::OverlayTypes::ElementData> buildObjectForElementData(Node* node, HighlightType)
>+void InspectorOverlay::drawElementTitle(GraphicsContext& context, Node& node, const FloatRect& bounds)
> {
>-    if (!is<Element>(node) || !node->document().frame())
>-        return nullptr;
>+    if (bounds.isEmpty())
>+        return;
> 
>-    Element* effectiveElement = downcast<Element>(node);
>-    if (node->isPseudoElement()) {
>-        Element* hostElement = downcast<PseudoElement>(*node).hostElement();
>-        if (!hostElement)
>-            return nullptr;
>-        effectiveElement = hostElement;
>-    }
>+    Element* element = effectiveElementForNode(node);
>+    if (!element)
>+        return;
> 
>-    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);
>-        }
>-        elementData->setClasses(WTFMove(classes));
>-    }
>-
>-    if (node->isPseudoElement()) {
>-        if (node->pseudoId() == PseudoId::Before)
>-            elementData->setPseudoElement("before");
>-        else if (node->pseudoId() == PseudoId::After)
>-            elementData->setPseudoElement("after");
>-    }
>-
>-    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));
>+    const UChar multiplicationSignUChar[] = { 0x00D7, 0 };
> 
>-    if (is<RenderBox>(*renderer)) {
>-        auto& renderBox = downcast<RenderBox>(*renderer);
>-        if (RefPtr<Inspector::Protocol::OverlayTypes::ShapeOutsideData> shapeObject = buildObjectForShapeOutside(containingFrame, &renderBox))
>-            elementData->setShapeOutsideData(WTFMove(shapeObject));
>+    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);
>+
>+    float anchorTop = bounds.y();
>+    float anchorBottom = bounds.maxY();
>+
>+    bool renderArrowUp = false;
>+    bool renderArrowDown = false;
>+
>+    float boxWidth = elementDataWidth + (elementDataSpacing * 2);
>+    float boxHeight = elementDataArrowSize + elementDataHeight + (elementDataSpacing * 2);
>+
>+    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;
>     }
> 
>-    return highlights;
>-}
>+    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();
> 
>-void InspectorOverlay::drawNodeHighlight()
>-{
>-    if (m_highlightNode || m_highlightNodeList)
>-        evaluateInOverlay("drawNodeHighlight", buildObjectForHighlightedNodes());
>-}
>+    GraphicsContextStateSaver stateSaver(context);
> 
>-void InspectorOverlay::drawQuadHighlight()
>-{
>-    if (!m_highlightQuad)
>-        return;
>+    context.translate(elementDataBorderSize / 2.0f, elementDataBorderSize / 2.0f);
> 
>-    Highlight highlight;
>-    buildQuadHighlight(*m_highlightQuad, m_quadHighlightConfig, highlight);
>-    evaluateInOverlay("drawQuadHighlight", buildObjectForHighlight(highlight));
>-}
>+    const Color elementTitleBackgroundColor(255, 255, 194);
>+    context.setFillColor(elementTitleBackgroundColor);
> 
>-void InspectorOverlay::drawPausedInDebuggerMessage()
>-{
>-    if (!m_pausedInDebuggerMessage.isNull())
>-        evaluateInOverlay("drawPausedInDebuggerMessage", m_pausedInDebuggerMessage);
>-}
>+    context.fillPath(path);
> 
>-Page* InspectorOverlay::overlayPage()
>-{
>-#if PLATFORM(IOS_FAMILY)
>-    return nullptr;
>-#else
>-    if (m_overlayPage)
>-        return m_overlayPage.get();
>+    context.setStrokeThickness(elementDataBorderSize);
> 
>-    auto pageConfiguration = pageConfigurationWithEmptyClients();
>-    m_overlayPage = std::make_unique<Page>(WTFMove(pageConfiguration));
>-    m_overlayPage->setDeviceScaleFactor(m_page.deviceScaleFactor());
>+    const Color elementTitleBorderColor(128, 128, 128);
>+    context.setStrokeColor(elementTitleBorderColor);
> 
>-    Settings& settings = m_page.settings();
>-    Settings& overlaySettings = m_overlayPage->settings();
>+    context.strokePath(path);
> 
>-    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);
>+    float textPositionX = boxX + elementDataSpacing;
>+    float textPositionY = boxY - (elementDataSpacing / 2.0f) + fontHeight;
>+    const auto drawText = [&] (const String& text, const Color& color) {
>+        if (text.isEmpty())
>+            return;
> 
>-    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();
>+        context.setFillColor(color);
>+        textPositionX += context.drawText(font, TextRun(text), { textPositionX, textPositionY });
>+    };
> 
>-#if OS(WINDOWS)
>-    evaluateInOverlay("setPlatform", "windows");
>-#elif OS(MAC_OS_X)
>-    evaluateInOverlay("setPlatform", "mac");
>-#elif OS(UNIX)
>-    evaluateInOverlay("setPlatform", "linux");
>-#endif
>+    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);
> 
>-    return m_overlayPage.get();
>-#endif
>-}
>+    if (hasSecondLine) {
>+        textPositionX = boxX + elementDataSpacing;
>+        textPositionY += fontHeight;
> 
>-void InspectorOverlay::forcePaint()
>-{
>-    // This overlay page is very weird and doesn't automatically paint. We have to force paints manually.
>-    m_client->highlight();
>-}
>-
>-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));
>-}
>-
>-static void evaluateCommandInOverlay(Page* page, Ref<JSON::Array>&& command)
>-{
>-    if (!page)
>-        return;
>-
>-    page->mainFrame().script().evaluate(ScriptSourceCode(makeString("dispatch(", command->toJSONString(), ')')));
>-}
>-
>-void InspectorOverlay::evaluateInOverlay(const String& method)
>-{
>-    Ref<JSON::Array> command = JSON::Array::create();
>-    command->pushString(method);
>-
>-    evaluateCommandInOverlay(overlayPage(), WTFMove(command));
>-}
>-
>-void InspectorOverlay::evaluateInOverlay(const String& method, const String& argument)
>-{
>-    Ref<JSON::Array> command = JSON::Array::create();
>-    command->pushString(method);
>-    command->pushString(argument);
>-
>-    evaluateCommandInOverlay(overlayPage(), WTFMove(command));
>-}
>-
>-void InspectorOverlay::evaluateInOverlay(const String& method, RefPtr<JSON::Value>&& argument)
>-{
>-    Ref<JSON::Array> command = JSON::Array::create();
>-    command->pushString(method);
>-    command->pushValue(WTFMove(argument));
>-
>-    evaluateCommandInOverlay(overlayPage(), WTFMove(command));
>-}
>-
>-void InspectorOverlay::freePage()
>-{
>-    m_overlayPage = nullptr;
>+        drawText("Role"_s, Color(170, 13, 145));
>+        drawText(" "_s, Color::black);
>+        drawText(elementRole, Color::black);
>+    }
> }
> 
> } // namespace WebCore
>diff --git a/Source/WebCore/inspector/InspectorOverlay.h b/Source/WebCore/inspector/InspectorOverlay.h
>index a24becdd27125ab3aa0e2971c1708f3d3f5cbfef..e5cea118e85d0dbdee2bf9b72d553bd923f7696d 100644
>--- a/Source/WebCore/inspector/InspectorOverlay.h
>+++ b/Source/WebCore/inspector/InspectorOverlay.h
>@@ -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
>@@ -30,23 +31,20 @@
> 
> #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 drawNodeHighlight(GraphicsContext&, Node&);
>+    void drawQuadHighlight(GraphicsContext&, const FloatQuad&);
>+    void drawPaintRects(GraphicsContext&, const Deque<TimeRectPair>&);
>+    void drawBounds(GraphicsContext&, const FloatRect&);
>+    void drawRulers(GraphicsContext&);
>+
>+    void drawElementTitle(GraphicsContext&, Node&, const FloatRect& bounds);
>+
>     void updatePaintRectsTimerFired();
> 
>-    Page* overlayPage();
>-
>-    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);
>-
>     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
>index d07b88234495abb5439714269f94e3a86d60122e..0000000000000000000000000000000000000000
>--- a/Source/WebCore/inspector/InspectorOverlayPage.css
>+++ /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
>index 2977905fee7914d87ddcc6fbf7921bec31dfb5f2..0000000000000000000000000000000000000000
>--- a/Source/WebCore/inspector/InspectorOverlayPage.html
>+++ /dev/null
>@@ -1,43 +0,0 @@
>-
>-<!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
>index a645fa13391e6bad68c97530349260c1dd59e5f0..0000000000000000000000000000000000000000
>--- a/Source/WebCore/inspector/InspectorOverlayPage.js
>+++ /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);
>-}
>diff --git a/Source/WebCore/inspector/agents/InspectorPageAgent.cpp b/Source/WebCore/inspector/agents/InspectorPageAgent.cpp
>index 1333aa937d4070cbbb77315ec9d76ce3f5323fee..a1aeffc53e7019a7ffd23be78c3da0c5e7d329fd 100644
>--- a/Source/WebCore/inspector/agents/InspectorPageAgent.cpp
>+++ b/Source/WebCore/inspector/agents/InspectorPageAgent.cpp
>@@ -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()
>diff --git a/Source/WebCore/inspector/agents/page/PageDebuggerAgent.cpp b/Source/WebCore/inspector/agents/page/PageDebuggerAgent.cpp
>index 12e201cd0e53a0652193e55c4dde6d6df9aca957..6e24d02433219816ed626f00cdde1627dda40322 100644
>--- a/Source/WebCore/inspector/agents/page/PageDebuggerAgent.cpp
>+++ b/Source/WebCore/inspector/agents/page/PageDebuggerAgent.cpp
>@@ -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();
>diff --git a/Source/WebCore/inspector/agents/page/PageDebuggerAgent.h b/Source/WebCore/inspector/agents/page/PageDebuggerAgent.h
>index 8943d9ad5cb9b85c9e766da6b4340018b1189388..e8122a9f33206176b7085dc7bb4202811cf57f50 100644
>--- a/Source/WebCore/inspector/agents/page/PageDebuggerAgent.h
>+++ b/Source/WebCore/inspector/agents/page/PageDebuggerAgent.h
>@@ -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;
>diff --git a/Source/WebCore/platform/ScrollView.h b/Source/WebCore/platform/ScrollView.h
>index 4675ce9ae3e7ac23c0d3da2c97af66f73415400a..f54910e26572d23fdeae9745e12e5a6d3de21ddd 100644
>--- a/Source/WebCore/platform/ScrollView.h
>+++ b/Source/WebCore/platform/ScrollView.h
>@@ -199,7 +199,7 @@ public:
>     virtual bool inProgrammaticScroll() const { return false; }
> 
>     // Size available for view contents, including content inset areas. Not affected by zooming.
>-    IntSize sizeForVisibleContent(VisibleContentRectIncludesScrollbars = ExcludeScrollbars) const;
>+    WEBCORE_EXPORT IntSize sizeForVisibleContent(VisibleContentRectIncludesScrollbars = ExcludeScrollbars) const;
>     // FIXME: remove this. It's only used for the incorrectly behaving ScrollView::unobscuredContentRectInternal().
>     virtual float visibleContentScaleFactor() const { return 1; }
> 
>diff --git a/Source/WebCore/platform/graphics/ImageBuffer.h b/Source/WebCore/platform/graphics/ImageBuffer.h
>index 0c03055634c75626233de3e1b7d7ca6d031dbbf9..8606587afe3163b9e22880eb887be27d929c8d73 100644
>--- a/Source/WebCore/platform/graphics/ImageBuffer.h
>+++ b/Source/WebCore/platform/graphics/ImageBuffer.h
>@@ -106,7 +106,7 @@ public:
>     
>     void convertToLuminanceMask();
> 
>-    String toDataURL(const String& mimeType, Optional<double> quality = WTF::nullopt, PreserveResolution = PreserveResolution::No) const;
>+    WEBCORE_EXPORT String toDataURL(const String& mimeType, Optional<double> quality = WTF::nullopt, PreserveResolution = PreserveResolution::No) const;
>     Vector<uint8_t> toData(const String& mimeType, Optional<double> quality = WTF::nullopt) const;
>     Vector<uint8_t> toBGRAData() const;
> 
>diff --git a/Source/WebCore/testing/Internals.cpp b/Source/WebCore/testing/Internals.cpp
>index 61cff4d054ee4d7e5d1bfe13a52a87319abadef9..64c5dc3adc211c7e8f7c3ddb423207e36599bd89 100644
>--- a/Source/WebCore/testing/Internals.cpp
>+++ b/Source/WebCore/testing/Internals.cpp
>@@ -93,6 +93,7 @@
> #include "HistoryController.h"
> #include "HistoryItem.h"
> #include "HitTestResult.h"
>+#include "ImageBuffer.h"
> #include "InspectorClient.h"
> #include "InspectorController.h"
> #include "InspectorFrontendClientLocal.h"
>@@ -147,6 +148,7 @@
> #include "SWClientConnection.h"
> #include "SchemeRegistry.h"
> #include "ScriptedAnimationController.h"
>+#include "ScrollView.h"
> #include "ScrollingCoordinator.h"
> #include "ScrollingMomentumCalculator.h"
> #include "SecurityOrigin.h"
>@@ -1534,15 +1536,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;
>diff --git a/Source/WebCore/testing/Internals.h b/Source/WebCore/testing/Internals.h
>index 37c5490d477ff54852a1400bb24975ffed86b429..e5afb93b9cd68349068399f0311c7f216a7f5470 100644
>--- a/Source/WebCore/testing/Internals.h
>+++ b/Source/WebCore/testing/Internals.h
>@@ -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);
>diff --git a/Source/WebCore/testing/Internals.idl b/Source/WebCore/testing/Internals.idl
>index 0e746595da3af637cb7611324f69b8f20f33d04d..f32ff12c967a22393c2c0e216db7a930a6ddd4b5 100644
>--- a/Source/WebCore/testing/Internals.idl
>+++ b/Source/WebCore/testing/Internals.idl
>@@ -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);
>diff --git a/Source/WebInspectorUI/UserInterface/Base/Main.js b/Source/WebInspectorUI/UserInterface/Base/Main.js
>index 8656948e313c1a694ab5a7b4c1d5e00ec7fbbfbd..887cb1e2d0d60138eee7362d3fb0cbf04c6995be 100644
>--- a/Source/WebInspectorUI/UserInterface/Base/Main.js
>+++ b/Source/WebInspectorUI/UserInterface/Base/Main.js
>@@ -616,6 +616,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);
>diff --git a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.0/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.0/InspectorBackendCommands.js
>index 90504d002566ce7e386e18798d7c0697495b25ee..796ca43b12f5b7914ae38339ca169b53f8d4348d 100644
>--- a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.0/InspectorBackendCommands.js
>+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.0/InspectorBackendCommands.js
>@@ -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.
>diff --git a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.3/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.3/InspectorBackendCommands.js
>index c361e69edb402710e01e000267457719615926ac..fc3d8433867578670ce45af49c08841552cf2e20 100644
>--- a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.3/InspectorBackendCommands.js
>+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.3/InspectorBackendCommands.js
>@@ -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.
>diff --git a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/11.0/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/11.0/InspectorBackendCommands.js
>index 6a15738bcf498aba2576df0a890f231bb88d4fad..c3d984a771ac558b38414ea767a5c2a216b24cd6 100644
>--- a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/11.0/InspectorBackendCommands.js
>+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/11.0/InspectorBackendCommands.js
>@@ -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.
>diff --git a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/11.3/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/11.3/InspectorBackendCommands.js
>index ccdabb30d9e3238f53132b9de94d94c968fd8e1a..0e62f4b36045665173dd75e4312e162abc048bfd 100644
>--- a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/11.3/InspectorBackendCommands.js
>+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/11.3/InspectorBackendCommands.js
>@@ -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.
>diff --git a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/12.0/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/12.0/InspectorBackendCommands.js
>index 3337f2dd6edba3c85bf1935801f897de4627786f..ee6925a4abbbcf276c0db1806d02e2f917be00df 100644
>--- a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/12.0/InspectorBackendCommands.js
>+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/12.0/InspectorBackendCommands.js
>@@ -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.
>diff --git a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/12.2/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/12.2/InspectorBackendCommands.js
>index 7dca52db27f6043e827ba87ea32734fee040ab4c..8ac5c10c6af007cbe3360b34a7a57c53b4dec5d9 100644
>--- a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/12.2/InspectorBackendCommands.js
>+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/12.2/InspectorBackendCommands.js
>@@ -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.
>diff --git a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/8.0/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/8.0/InspectorBackendCommands.js
>index 598f58dd8c6a660bdebf4b61213d4dd4efbe8f50..1f8e667886dabaf033a195c41f07a6d3f0e8f780 100644
>--- a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/8.0/InspectorBackendCommands.js
>+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/8.0/InspectorBackendCommands.js
>@@ -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.
>diff --git a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.0/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.0/InspectorBackendCommands.js
>index bec4b80ac37d19c1210a56f88c796d114eaf8c71..50b0d96e36a06c41b67ef1a2f96120d4904e5c47 100644
>--- a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.0/InspectorBackendCommands.js
>+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.0/InspectorBackendCommands.js
>@@ -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.
>diff --git a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.3/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.3/InspectorBackendCommands.js
>index eed207d11e1a10853d74793ac1d704ad239f84ee..b38669955fdfbda16b04761178a5bc3c22d6ee93 100644
>--- a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.3/InspectorBackendCommands.js
>+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.3/InspectorBackendCommands.js
>@@ -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.
>diff --git a/Source/WebInspectorUI/Versions/Inspector-iOS-10.0.json b/Source/WebInspectorUI/Versions/Inspector-iOS-10.0.json
>index 153920a1fff795cb87879c6d26fc9c5b3701e82e..cdd0ddf6b6afb2c14fcdb9dedba36636910b36b4 100644
>--- a/Source/WebInspectorUI/Versions/Inspector-iOS-10.0.json
>+++ b/Source/WebInspectorUI/Versions/Inspector-iOS-10.0.json
>@@ -1611,13 +1611,6 @@
>                 { "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": [
>diff --git a/Source/WebInspectorUI/Versions/Inspector-iOS-10.3.json b/Source/WebInspectorUI/Versions/Inspector-iOS-10.3.json
>index 5b47f079689c6c8ec7e346115fd949c6b4427d6f..bde29b6a8bd7edc5f1e321022a938a6f85426478 100644
>--- a/Source/WebInspectorUI/Versions/Inspector-iOS-10.3.json
>+++ b/Source/WebInspectorUI/Versions/Inspector-iOS-10.3.json
>@@ -1652,13 +1652,6 @@
>                 { "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": [
>diff --git a/Source/WebInspectorUI/Versions/Inspector-iOS-11.0.json b/Source/WebInspectorUI/Versions/Inspector-iOS-11.0.json
>index 7fd3acf8fca6b723d379ef0d049faf65d68a7572..e8c923a2cc746ad4d1249560327703a9c2e7bce8 100644
>--- a/Source/WebInspectorUI/Versions/Inspector-iOS-11.0.json
>+++ b/Source/WebInspectorUI/Versions/Inspector-iOS-11.0.json
>@@ -1729,13 +1729,6 @@
>                 { "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/WebInspectorUI/Versions/Inspector-iOS-11.3.json b/Source/WebInspectorUI/Versions/Inspector-iOS-11.3.json
>index 3e692bba4b28e047ead34170b55d97befd531868..bed20b4c090f3255180ec63eb00805de05a6fa1c 100644
>--- a/Source/WebInspectorUI/Versions/Inspector-iOS-11.3.json
>+++ b/Source/WebInspectorUI/Versions/Inspector-iOS-11.3.json
>@@ -1953,13 +1953,6 @@
>                 { "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/WebInspectorUI/Versions/Inspector-iOS-12.0.json b/Source/WebInspectorUI/Versions/Inspector-iOS-12.0.json
>index 9892776a7c9eded65d43ae9ca02eb8c909ca48ba..26a81c4d3c36f7e92e54cda3b219da8adb6c2530 100644
>--- a/Source/WebInspectorUI/Versions/Inspector-iOS-12.0.json
>+++ b/Source/WebInspectorUI/Versions/Inspector-iOS-12.0.json
>@@ -1968,13 +1968,6 @@
>                 { "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/WebInspectorUI/Versions/Inspector-iOS-12.2.json b/Source/WebInspectorUI/Versions/Inspector-iOS-12.2.json
>index 9f012f88d15262436a3d038b2d79877dc6caedd1..9d52dbef64bd026a7a843f45ef3649e4896db221 100644
>--- a/Source/WebInspectorUI/Versions/Inspector-iOS-12.2.json
>+++ b/Source/WebInspectorUI/Versions/Inspector-iOS-12.2.json
>@@ -2019,13 +2019,6 @@
>                 { "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/WebInspectorUI/Versions/Inspector-iOS-8.0.json b/Source/WebInspectorUI/Versions/Inspector-iOS-8.0.json
>index 74af1e91517419cdc047925e226b259678e87c3d..68aab7988d457f32532000dc5c95843718591c2a 100644
>--- a/Source/WebInspectorUI/Versions/Inspector-iOS-8.0.json
>+++ b/Source/WebInspectorUI/Versions/Inspector-iOS-8.0.json
>@@ -332,13 +332,6 @@
>                 { "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": [
>diff --git a/Source/WebInspectorUI/Versions/Inspector-iOS-9.0.json b/Source/WebInspectorUI/Versions/Inspector-iOS-9.0.json
>index c3ef70aa726f0af6fe9df32f5a4a3e25a2932f23..a28bc3875faec08919e58e01522d6b1315e29eba 100644
>--- a/Source/WebInspectorUI/Versions/Inspector-iOS-9.0.json
>+++ b/Source/WebInspectorUI/Versions/Inspector-iOS-9.0.json
>@@ -1531,13 +1531,6 @@
>                 { "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": [
>diff --git a/Source/WebInspectorUI/Versions/Inspector-iOS-9.3.json b/Source/WebInspectorUI/Versions/Inspector-iOS-9.3.json
>index fc7cb00942bcbf3bcad7ff09884293d05d438888..2738440b86ff374aab11b23bdd9e63c5b9e7fa9f 100644
>--- a/Source/WebInspectorUI/Versions/Inspector-iOS-9.3.json
>+++ b/Source/WebInspectorUI/Versions/Inspector-iOS-9.3.json
>@@ -1590,13 +1590,6 @@
>                 { "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": [
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index 8495db83da9758f0ddf774402a52ffe46bb8abe5..a476cec899cfb51e5e5bfc6e9ac65edb8ee1603c 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,28 @@
>+2019-02-04  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-01  Carlos Garcia Campos  <cgarcia@igalia.com>
> 
>         REGRESSION(r239915): css3/font-feature-font-face-local.html failing on WPE
>diff --git a/LayoutTests/http/tests/inspector/dom/shapes-test.js b/LayoutTests/http/tests/inspector/dom/shapes-test.js
>deleted file mode 100644
>index 048f9e30f6ced331721f01cc53ede922b2993373..0000000000000000000000000000000000000000
>--- a/LayoutTests/http/tests/inspector/dom/shapes-test.js
>+++ /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
>index bbee55bd3c0c409c27ac1bf9b267c67b654d7dc5..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/dom/hideHighlight-expected.txt
>+++ /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
>index 5c43585bc24d04a7617ab73ad6ba3a11bbe5c7a0..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/dom/hideHighlight.html
>+++ /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
>index 3e041e906a925aa1c4944ef1b60b53e2950538a2..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/dom/highlight-shape-outside-expected.txt
>+++ /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
>index 595fbfdaa71ddce7988faf2780fbde4d7f4337c6..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/dom/highlight-shape-outside-margin-expected.txt
>+++ /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
>index 3e98c58c9397fa5c87558611bf183d144a9dbee1..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/dom/highlight-shape-outside-margin.html
>+++ /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
>index 981b3bd8610fd4367551f1ac8154a78542f071d9..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/dom/highlight-shape-outside.html
>+++ /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
>index 04c411a6fb73a18f5ae3f5d519a7e889c13ffde5..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/dom/highlightFrame-expected.txt
>+++ /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
>index 458c53286ac7f2068ca7f08425943548f7404e3f..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/dom/highlightFrame.html
>+++ /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
>index f4171ccde8767213b09030f10d7db286b7de2b52..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/dom/highlightNode-expected.txt
>+++ /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
>index 8e84808613edabfb1f68130ce6d50bd734f53788..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/dom/highlightNode.html
>+++ /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
>index ab2c182d37d7e147525f7df3d61101919fb8865d..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/dom/highlightNodeList-expected.txt
>+++ /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
>index 028dc88bd2bf7eff3b0cfb540fcd86b633c403aa..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/dom/highlightNodeList.html
>+++ /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
>index 7e96716e4cbce192ebc40154060ada6b466ff8ae..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/dom/highlightSelector-expected.txt
>+++ /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
>index 96103225c0714cbfb83111573ede1af76f33a447..0000000000000000000000000000000000000000
>--- a/LayoutTests/inspector/dom/highlightSelector.html
>+++ /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>
>diff --git a/LayoutTests/platform/mac/TestExpectations b/LayoutTests/platform/mac/TestExpectations
>index cad5d121b07a96c89963b256d7fa1d1d128a958d..9d7f7068256c2665259e8e313b470dc1b040fd27 100644
>--- a/LayoutTests/platform/mac/TestExpectations
>+++ b/LayoutTests/platform/mac/TestExpectations
>@@ -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 ]

Actions: View | Formatted Diff | Diff

Attachments on bug 105023: 357882 | 358151 | 358152 | 358153 | 358158 | 358160 | 358161 | 358162 | 358163 | 358165 | 358215 | 358222 | 358223 | 358226 | 360812 | 360821 | 361060 | 361061 | 361062 | 362873 | 362874