Attachment 340480 Details for Bug 185644 – Patch

[patch] Patch

bug-185644-20180516014339.patch (text/plain), 27.56 KB, created by Devin Rousso on 2018-05-16 01:43:39 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2018-05-16 01:43:39 PDT

Size: 27.56 KB

patch

obsolete

>diff --git a/Source/JavaScriptCore/ChangeLog b/Source/JavaScriptCore/ChangeLog
>index 2c26de374c6f9a0b26f8cc64b9bb18217db0f65c..2274110d34b7ef3482a8ebf13ca13f0a634af1eb 100644
>--- a/Source/JavaScriptCore/ChangeLog
>+++ b/Source/JavaScriptCore/ChangeLog
>@@ -1,3 +1,13 @@
>+2018-05-16  Devin Rousso  <webkit@devinrousso.com>
>+
>+        Web Inspector: create a navigation item for toggling the overlay rulers/guides
>+        https://bugs.webkit.org/show_bug.cgi?id=185644
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * inspector/protocol/OverlayTypes.json:
>+        * inspector/protocol/Page.json:
>+
> 2018-05-15  Devin Rousso  <webkit@devinrousso.com>
> 
>         Web Inspector: Add rulers and guides
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index 38451d4f5b7216e91411520ee3799cf6eec4ff3a..285b6ac7337eabf14bee019262716bb9d30edad7 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,32 @@
>+2018-05-16  Devin Rousso  <webkit@devinrousso.com>
>+
>+        Web Inspector: create a navigation item for toggling the overlay rulers/guides
>+        https://bugs.webkit.org/show_bug.cgi?id=185644
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        This patch is purely a visual change for WebInspector, and doesn't affect anything else.
>+
>+        * inspector/agents/InspectorPageAgent.h:
>+        * inspector/agents/InspectorPageAgent.cpp:
>+        (WebCore::InspectorPageAgent::setShowRulers): Added.
>+
>+        * inspector/InspectorOverlay.h:
>+        * inspector/InspectorOverlay.cpp:
>+        (WebCore::InspectorOverlay::shouldShowOverlay):
>+        (WebCore::InspectorOverlay::update):
>+        (WebCore::InspectorOverlay::setShowRulers): Added.
>+        (WebCore::InspectorOverlay::drawRulers): Added.
>+        (WebCore::InspectorOverlay::reset):
>+
>+        * inspector/InspectorOverlayPage.js:
>+        (drawNodeHighlight):
>+        (drawQuadHighlight):
>+        (drawRulers): Added.
>+        (_drawBounds): Added.
>+        (reset):
>+        (_drawRulers): Deleted.
>+
> 2018-05-15  Devin Rousso  <webkit@devinrousso.com>
> 
>         Web Inspector: Add rulers and guides
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 1784a0cd63dfe0d57a2f973b014ccb62fc96a2fd..a6bd538d5fe89594aa9b03897dce057361c3ffcd 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,19 @@
>+2018-05-16  Devin Rousso  <webkit@devinrousso.com>
>+
>+        Web Inspector: create a navigation item for toggling the overlay rulers/guides
>+        https://bugs.webkit.org/show_bug.cgi?id=185644
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * Localizations/en.lproj/localizedStrings.js:
>+        * UserInterface/Base/Setting.js:
>+        * UserInterface/Views/DOMTreeContentView.js:
>+        (WI.DOMTreeContentView):
>+        (WI.DOMTreeContentView.prototype.get navigationItems):
>+        (WI.DOMTreeContentView.prototype.closed):
>+        (WI.DOMTreeContentView.prototype._showRulersChanged): Added.
>+        (WI.DOMTreeContentView.prototype._toggleShowRulers): Added.
>+
> 2018-05-14  Nikita Vasilyev  <nvasilyev@apple.com>
> 
>         Web Inspector: Canvas: Remove unused --value-visual-highlight CSS variable
>diff --git a/Source/JavaScriptCore/inspector/protocol/OverlayTypes.json b/Source/JavaScriptCore/inspector/protocol/OverlayTypes.json
>index e8e453978392ce6423c6c9a094e06e75aa7a8978..813fb60796e174f388690bec934ab8402082b2e3 100644
>--- a/Source/JavaScriptCore/inspector/protocol/OverlayTypes.json
>+++ b/Source/JavaScriptCore/inspector/protocol/OverlayTypes.json
>@@ -97,7 +97,8 @@
>                 { "name": "pageScaleFactor", "type": "number" },
>                 { "name": "pageZoomFactor", "type": "number" },
>                 { "name": "scrollOffset", "$ref": "Point" },
>-                { "name": "contentInset", "$ref": "Size" }
>+                { "name": "contentInset", "$ref": "Size" },
>+                { "name": "showRulers", "type": "boolean" }
>             ]
>         }
>     ]
>diff --git a/Source/JavaScriptCore/inspector/protocol/Page.json b/Source/JavaScriptCore/inspector/protocol/Page.json
>index 6e8b09f5355dab74496294cae51ef8758c7a508f..8f22c5315ca45db8d5a3f1a964fc12eae4135786 100644
>--- a/Source/JavaScriptCore/inspector/protocol/Page.json
>+++ b/Source/JavaScriptCore/inspector/protocol/Page.json
>@@ -165,6 +165,13 @@
>                 { "name": "result", "type": "array", "items": { "$ref": "SearchResult" }, "description": "List of search results." }
>             ]
>         },
>+        {
>+            "name": "setShowRulers",
>+            "description": "Requests that backend draw rulers in the inspector overlay",
>+            "parameters": [
>+                { "name": "result", "type": "boolean", "description": "True for showing rulers" }
>+            ]
>+        },
>         {
>             "name": "setShowPaintRects",
>             "description": "Requests that backend shows paint rectangles",
>diff --git a/Source/WebCore/inspector/InspectorOverlay.cpp b/Source/WebCore/inspector/InspectorOverlay.cpp
>index 6e6655ed67c1c7cc8bc957b0cbe814e11e57fb7e..e5c890214c9c49035d01331463b6df1d003eba91 100644
>--- a/Source/WebCore/inspector/InspectorOverlay.cpp
>+++ b/Source/WebCore/inspector/InspectorOverlay.cpp
>@@ -268,7 +268,7 @@ void InspectorOverlay::setIndicating(bool indicating)
> 
> bool InspectorOverlay::shouldShowOverlay() const
> {
>-    return m_highlightNode || m_highlightNodeList || m_highlightQuad || m_indicating || m_showingPaintRects || !m_pausedInDebuggerMessage.isNull();
>+    return m_highlightNode || m_highlightNodeList || m_highlightQuad || m_indicating || m_showingPaintRects || m_showRulers || !m_pausedInDebuggerMessage.isNull();
> }
> 
> void InspectorOverlay::update()
>@@ -297,6 +297,9 @@ void InspectorOverlay::update()
>     drawPausedInDebuggerMessage();
>     drawPaintRects();
> 
>+    if (m_showRulers)
>+        drawRulers();
>+
>     // Position DOM elements.
>     overlayPage()->mainFrame().document()->resolveStyle(Document::ResolveStyleType::Rebuild);
>     if (overlayView->needsLayout())
>@@ -392,6 +395,16 @@ void InspectorOverlay::showPaintRect(const FloatRect& rect)
>     forcePaint();
> }
> 
>+void InspectorOverlay::setShowRulers(bool showRulers)
>+{
>+    if (m_showRulers == showRulers)
>+        return;
>+
>+    m_showRulers = showRulers;
>+
>+    update();
>+}
>+
> void InspectorOverlay::updatePaintRectsTimerFired()
> {
>     MonotonicTime now = MonotonicTime::now();
>@@ -419,6 +432,11 @@ void InspectorOverlay::drawPaintRects()
>     evaluateInOverlay(ASCIILiteral("updatePaintRects"), WTFMove(arrayOfRects));
> }
> 
>+void InspectorOverlay::drawRulers()
>+{
>+    evaluateInOverlay(ASCIILiteral("drawRulers"));
>+}
>+
> static RefPtr<JSON::ArrayOf<Inspector::Protocol::OverlayTypes::FragmentHighlightData>> buildArrayForRendererFragments(RenderObject* renderer, const HighlightConfig& config)
> {
>     auto arrayOfFragments = JSON::ArrayOf<Inspector::Protocol::OverlayTypes::FragmentHighlightData>::create();
>@@ -742,6 +760,7 @@ void InspectorOverlay::reset(const IntSize& viewportSize, const IntPoint& scroll
>         .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));
> }
>diff --git a/Source/WebCore/inspector/InspectorOverlay.h b/Source/WebCore/inspector/InspectorOverlay.h
>index 38ba850f46e09522702817854cdb9a0c8ae7879f..a24becdd27125ab3aa0e2971c1708f3d3f5cbfef 100644
>--- a/Source/WebCore/inspector/InspectorOverlay.h
>+++ b/Source/WebCore/inspector/InspectorOverlay.h
>@@ -115,6 +115,8 @@ public:
>     
>     void setShowingPaintRects(bool);
>     void showPaintRect(const FloatRect&);
>+
>+    void setShowRulers(bool);
>     
>     Node* highlightedNode() const;
> 
>@@ -132,6 +134,7 @@ private:
>     void drawQuadHighlight();
>     void drawPausedInDebuggerMessage();
>     void drawPaintRects();
>+    void drawRulers();
>     void updatePaintRectsTimerFired();
> 
>     Page* overlayPage();
>@@ -157,6 +160,7 @@ private:
>     Timer m_paintRectUpdateTimer;
>     bool m_indicating {false};
>     bool m_showingPaintRects {false};
>+    bool m_showRulers {false};
> };
> 
> } // namespace WebCore
>diff --git a/Source/WebCore/inspector/InspectorOverlayPage.js b/Source/WebCore/inspector/InspectorOverlayPage.js
>index bf7d56dbe8bad176efc4c793da3bfb32187fafcc..11ee1fa75899c0c44d3d52684768dfb85bc8e450 100644
>--- a/Source/WebCore/inspector/InspectorOverlayPage.js
>+++ b/Source/WebCore/inspector/InspectorOverlayPage.js
>@@ -1,3 +1,4 @@
>+const boundsColor = "rgba(0,0,0,0.4)";
> const lightGridColor = "rgba(0,0,0,0.2)";
> const darkGridColor = "rgba(0,0,0,0.5)";
> const transparentColor = "rgba(0, 0, 0, 0)";
>@@ -63,7 +64,8 @@ function drawNodeHighlight(allHighlights)
>         });
>     }
> 
>-    _drawRulers();
>+    if (DATA.showRulers)
>+        _drawBounds(bounds);
> 
>     if (allHighlights.length === 1) {
>         for (let fragment of allHighlights[0].fragments)
>@@ -79,7 +81,8 @@ function drawQuadHighlight(highlight)
>         _drawOutlinedQuad(highlight.quads[0], highlight.contentColor, highlight.contentOutlineColor, bounds);
>     });
> 
>-    _drawRulers();
>+    if (DATA.showRulers)
>+        _drawBounds(bounds);
> }
> 
> function quadEquals(quad1, quad2)
>@@ -106,6 +109,129 @@ function updatePaintRects(paintRectList)
>     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;
>@@ -114,6 +240,7 @@ function reset(payload)
>     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");
>@@ -286,6 +413,36 @@ function _drawOutlinedQuadWithClip(quad, clipQuad, fillColor, bounds)
>     });
> }
> 
>+function _drawBounds(bounds)
>+{
>+    _isolateActions(() => {
>+        let startX = DATA.contentInset.width;
>+        let startY = DATA.contentInset.height;
>+
>+        context.beginPath();
>+
>+        if (bounds.minY - startY > 0) {
>+            context.moveTo(bounds.minX, bounds.minY);
>+            context.lineTo(bounds.minX, startY);
>+
>+            context.moveTo(bounds.maxX, bounds.minY);
>+            context.lineTo(bounds.maxX, startY);
>+        }
>+
>+        if (bounds.minX - startX > 0) {
>+            context.moveTo(bounds.minX, bounds.minY);
>+            context.lineTo(startX, bounds.minY);
>+
>+            context.moveTo(bounds.minX, bounds.maxY);
>+            context.lineTo(startX, bounds.maxY);
>+        }
>+
>+        context.lineWidth = 1;
>+        context.strokeStyle = boundsColor;
>+        context.stroke();
>+    });
>+}
>+
> function _createElementTitle(elementData)
> {
>     let builder = new DOMBuilder("div", "element-title");
>@@ -438,128 +595,6 @@ function hidePageIndication()
>     document.body.classList.remove("indicate");
> }
> 
>-function _drawRulers(options = {})
>-{
>-    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 setPlatform(platform)
> {
>     document.body.classList.add("platform-" + platform);
>diff --git a/Source/WebCore/inspector/agents/InspectorPageAgent.cpp b/Source/WebCore/inspector/agents/InspectorPageAgent.cpp
>index aee9f585699dbfb80c628315a9e29ad7fb086d97..58b7b6e441946ff840cbecb579061c3e30bd2db7 100644
>--- a/Source/WebCore/inspector/agents/InspectorPageAgent.cpp
>+++ b/Source/WebCore/inspector/agents/InspectorPageAgent.cpp
>@@ -542,6 +542,11 @@ void InspectorPageAgent::searchInResources(ErrorString&, const String& text, con
>         networkAgent->searchOtherRequests(regex, result);
> }
> 
>+void InspectorPageAgent::setShowRulers(ErrorString&, bool showRulers)
>+{
>+    m_overlay->setShowRulers(showRulers);
>+}
>+
> void InspectorPageAgent::setShowPaintRects(ErrorString&, bool show)
> {
>     m_showPaintRects = show;
>diff --git a/Source/WebCore/inspector/agents/InspectorPageAgent.h b/Source/WebCore/inspector/agents/InspectorPageAgent.h
>index 10296b38c7db2b9e9ce13cd384a108e9fe909bd7..6709f52be03432b2c55eb9471bc4c0db25d086c7 100644
>--- a/Source/WebCore/inspector/agents/InspectorPageAgent.h
>+++ b/Source/WebCore/inspector/agents/InspectorPageAgent.h
>@@ -97,6 +97,7 @@ public:
>     void getResourceContent(ErrorString&, const String& frameId, const String& url, String* content, bool* base64Encoded) final;
>     void searchInResource(ErrorString&, const String& frameId, const String& url, const String& query, const bool* optionalCaseSensitive, const bool* optionalIsRegex, const String* optionalRequestId, RefPtr<JSON::ArrayOf<Inspector::Protocol::GenericTypes::SearchMatch>>&) final;
>     void searchInResources(ErrorString&, const String&, const bool* caseSensitive, const bool* isRegex, RefPtr<JSON::ArrayOf<Inspector::Protocol::Page::SearchResult>>&) final;
>+    void setShowRulers(ErrorString&, bool) final;
>     void setShowPaintRects(ErrorString&, bool show) final;
>     void setEmulatedMedia(ErrorString&, const String&) final;
>     void getCompositingBordersVisible(ErrorString&, bool* out_param) final;
>diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
>index 803d9d41e85cb5cd2e84e6958dd2e794d051f16c..56b699ae26b46c31551d9b29f0cbf31a77efe6ea 100644
>--- a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
>+++ b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
>@@ -481,6 +481,7 @@ localizedStrings["Hide Console"] = "Hide Console";
> localizedStrings["Hide Console (%s)"] = "Hide Console (%s)";
> localizedStrings["Hide Grid"] = "Hide Grid";
> localizedStrings["Hide Path"] = "Hide Path";
>+localizedStrings["Hide Rulers"] = "Hide Rulers";
> localizedStrings["Hide compositing borders"] = "Hide compositing borders";
> localizedStrings["Hide shadow DOM nodes"] = "Hide shadow DOM nodes";
> localizedStrings["Hide the details sidebar (%s)"] = "Hide the details sidebar (%s)";
>@@ -868,6 +869,7 @@ localizedStrings["Show Console tab"] = "Show Console tab";
> localizedStrings["Show Grid"] = "Show Grid";
> localizedStrings["Show Path"] = "Show Path";
> localizedStrings["Show Remaining (%d)"] = "Show Remaining (%d)";
>+localizedStrings["Show Rulers"] = "Show Rulers";
> localizedStrings["Show Scope Chain on pause"] = "Show Scope Chain on pause";
> localizedStrings["Show Source"] = "Show Source";
> localizedStrings["Show all actions"] = "Show all actions";
>diff --git a/Source/WebInspectorUI/UserInterface/Base/Setting.js b/Source/WebInspectorUI/UserInterface/Base/Setting.js
>index 09a73be2eb3b5a75b952621f2dcf3407c190a219..68f0600314b9cfb3cc5cacfdf112dbad855c9918 100644
>--- a/Source/WebInspectorUI/UserInterface/Base/Setting.js
>+++ b/Source/WebInspectorUI/UserInterface/Base/Setting.js
>@@ -121,6 +121,7 @@ WI.settings = {
>     showImageGrid: new WI.Setting("show-image-grid", false),
>     showCanvasPath: new WI.Setting("show-canvas-path", false),
>     selectedNetworkDetailContentViewIdentifier: new WI.Setting("network-detail-content-view-identifier", "preview"),
>+    showRulers: new WI.Setting("show-rulers", true),
> 
>     // Experimental
>     experimentalEnableLayersTab: new WI.Setting("experimental-enable-layers-tab", false),
>diff --git a/Source/WebInspectorUI/UserInterface/Images/Rulers.svg b/Source/WebInspectorUI/UserInterface/Images/Rulers.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..65f1b0bc4f9c8c7a7c47d39e7f2fd51001b552db
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/Rulers.svg
>@@ -0,0 +1,11 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <polygon points="1.5 1.5 14.5 1.5 14.5 5.5 5.5 5.5 5.5 14.5 1.5 14.5 1.5 1.5" fill="none" stroke="currentColor"/>
>+    <line x1="8.5" y1="3" x2="8.5" y2="5" stroke="currentColor"/>
>+    <line x1="11.5" y1="3" x2="11.5" y2="5" stroke="currentColor"/>
>+    <line x1="5.5" y1="3" x2="5.5" y2="5" stroke="currentColor"/>
>+    <line x1="3" y1="11.5" x2="5" y2="11.5" stroke="currentColor"/>
>+    <line x1="3" y1="8.5" x2="5" y2="8.5" stroke="currentColor"/>
>+    <line x1="3" y1="5.5" x2="5" y2="5.5" stroke="currentColor"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js
>index a680984816755d822586fc197f3436ea7625fbcd..8d99ffc04723d50a4fb3198a6dc0ed0c41e1174f 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js
>@@ -54,6 +54,12 @@ WI.DOMTreeContentView = class DOMTreeContentView extends WI.ContentView
>         this._showPrintStylesButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
>         this._showPrintStylesChanged();
> 
>+        WI.settings.showRulers.addEventListener(WI.Setting.Event.Changed, this._showRulersChanged, this);
>+        this._showRulersButtonNavigationItem = new WI.ActivateButtonNavigationItem("show-rulers", WI.UIString("Show Rulers"), WI.UIString("Hide Rulers"), "Images/Rulers.svg", 16, 16);
>+        this._showRulersButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._toggleShowRulers, this);
>+        this._showRulersButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
>+        this._showRulersChanged();
>+
>         this.element.classList.add("dom-tree");
>         this.element.addEventListener("click", this._mouseWasClicked.bind(this), false);
> 
>@@ -93,6 +99,11 @@ WI.DOMTreeContentView = class DOMTreeContentView extends WI.ContentView
>     get navigationItems()
>     {
>         let items = [this._showPrintStylesButtonNavigationItem, this._showsShadowDOMButtonNavigationItem];
>+
>+        // COMPATIBILITY (iOS 11.3)
>+        if (PageAgent.setShowRulers)
>+            items.unshift(this._showRulersButtonNavigationItem);
>+
>         if (!WI.settings.experimentalEnableLayersTab.value)
>             items.push(this._compositingBordersButtonNavigationItem, this._paintFlashingButtonNavigationItem);
> 
>@@ -150,6 +161,7 @@ WI.DOMTreeContentView = class DOMTreeContentView extends WI.ContentView
> 
>         WI.showPaintRectsSetting.removeEventListener(null, null, this);
>         WI.showShadowDOMSetting.removeEventListener(null, null, this);
>+        WI.settings.showRulers.removeEventListener(null, null, this);
>         WI.debuggerManager.removeEventListener(null, null, this);
>         WI.domTreeManager.removeEventListener(null, null, this);
>         WI.domDebuggerManager.removeEventListener(null, null, this);
>@@ -567,6 +579,24 @@ WI.DOMTreeContentView = class DOMTreeContentView extends WI.ContentView
>         this._showPrintStylesChanged();
>     }
> 
>+    _showRulersChanged()
>+    {
>+        this._showRulersButtonNavigationItem.activated = WI.settings.showRulers.value;
>+
>+        // COMPATIBILITY (iOS 11.3)
>+        if (!PageAgent.setShowRulers)
>+            return;
>+
>+        PageAgent.setShowRulers(this._showRulersButtonNavigationItem.activated);
>+    }
>+
>+    _toggleShowRulers(event)
>+    {
>+        WI.settings.showRulers.value = !WI.settings.showRulers.value;
>+
>+        this._showRulersChanged();
>+    }
>+
>     _showSearchHighlights()
>     {
>         console.assert(this._searchIdentifier);

Actions: View | Formatted Diff | Diff

Attachments on bug 185644: 340397 | 340454 | 340456 | 340480 | 340544