Web Inspector: create a navigation item for toggling the overlay rulers/guides
authorwebkit@devinrousso.com <webkit@devinrousso.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 17 May 2018 01:37:33 +0000 (01:37 +0000)
committerwebkit@devinrousso.com <webkit@devinrousso.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 17 May 2018 01:37:33 +0000 (01:37 +0000)
https://bugs.webkit.org/show_bug.cgi?id=185644

Reviewed by Matt Baker.

Source/JavaScriptCore:

* inspector/protocol/OverlayTypes.json:
* inspector/protocol/Page.json:

Source/WebCore:

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.

Source/WebInspectorUI:

* 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.

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

13 files changed:
Source/JavaScriptCore/ChangeLog
Source/JavaScriptCore/inspector/protocol/OverlayTypes.json
Source/JavaScriptCore/inspector/protocol/Page.json
Source/WebCore/ChangeLog
Source/WebCore/inspector/InspectorOverlay.cpp
Source/WebCore/inspector/InspectorOverlay.h
Source/WebCore/inspector/InspectorOverlayPage.js
Source/WebCore/inspector/agents/InspectorPageAgent.cpp
Source/WebCore/inspector/agents/InspectorPageAgent.h
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Base/Setting.js
Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js

index 0a3d077..5cf240d 100644 (file)
@@ -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 Matt Baker.
+
+        * inspector/protocol/OverlayTypes.json:
+        * inspector/protocol/Page.json:
+
 2018-05-16  Commit Queue  <commit-queue@webkit.org>
 
         Unreviewed, rolling out r231845.
index e8e4539..813fb60 100644 (file)
@@ -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" }
             ]
         }
     ]
index 6e8b09f..8f22c53 100644 (file)
             ]
         },
         {
+            "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",
             "parameters": [
index 9ca5091..c59b643 100644 (file)
@@ -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 Matt Baker.
+
+        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-16  Michael Catanzaro  <mcatanzaro@igalia.com>
 
         [GTK] SoupNetworkSession.h:68:62: error: unknown type name 'URL'
index 6e6655e..e5c8902 100644 (file)
@@ -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));
 }
index 38ba850..a24becd 100644 (file)
@@ -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
index d9215fe..f42c394 100644 (file)
@@ -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");
@@ -442,128 +599,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);
index aee9f58..58b7b6e 100644 (file)
@@ -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;
index 10296b3..6709f52 100644 (file)
@@ -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;
index 1784a0c..c736e20 100644 (file)
@@ -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 Matt Baker.
+
+        * 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
index 803d9d4..56b699a 100644 (file)
@@ -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";
index 09a73be..1fbc251 100644 (file)
@@ -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", false),
 
     // Experimental
     experimentalEnableLayersTab: new WI.Setting("experimental-enable-layers-tab", false),
index a680984..8d99ffc 100644 (file)
@@ -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);