Changeset 231881 in webkit


Ignore:
Timestamp:
May 16, 2018 6:37:33 PM (6 years ago)
Author:
webkit@devinrousso.com
Message:

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.

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.

Location:
trunk/Source
Files:
13 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/JavaScriptCore/ChangeLog

    r231878 r231881  
     12018-05-16  Devin Rousso  <webkit@devinrousso.com>
     2
     3        Web Inspector: create a navigation item for toggling the overlay rulers/guides
     4        https://bugs.webkit.org/show_bug.cgi?id=185644
     5
     6        Reviewed by Matt Baker.
     7
     8        * inspector/protocol/OverlayTypes.json:
     9        * inspector/protocol/Page.json:
     10
    1112018-05-16  Commit Queue  <commit-queue@webkit.org>
    212

  • trunk/Source/JavaScriptCore/inspector/protocol/OverlayTypes.json

    r231819 r231881  
    9898                { "name": "pageZoomFactor", "type": "number" },
    9999                { "name": "scrollOffset", "$ref": "Point" },
    100                 { "name": "contentInset", "$ref": "Size" }
     100                { "name": "contentInset", "$ref": "Size" },
     101                { "name": "showRulers", "type": "boolean" }
    101102            ]
    102103        }

  • trunk/Source/JavaScriptCore/inspector/protocol/Page.json

    r224634 r231881  
    167167        },
    168168        {
     169            "name": "setShowRulers",
     170            "description": "Requests that backend draw rulers in the inspector overlay",
     171            "parameters": [
     172                { "name": "result", "type": "boolean", "description": "True for showing rulers" }
     173            ]
     174        },
     175        {
    169176            "name": "setShowPaintRects",
    170177            "description": "Requests that backend shows paint rectangles",

  • trunk/Source/WebCore/ChangeLog

    r231876 r231881  
     12018-05-16  Devin Rousso  <webkit@devinrousso.com>
     2
     3        Web Inspector: create a navigation item for toggling the overlay rulers/guides
     4        https://bugs.webkit.org/show_bug.cgi?id=185644
     5
     6        Reviewed by Matt Baker.
     7
     8        This patch is purely a visual change for WebInspector, and doesn't affect anything else.
     9
     10        * inspector/agents/InspectorPageAgent.h:
     11        * inspector/agents/InspectorPageAgent.cpp:
     12        (WebCore::InspectorPageAgent::setShowRulers): Added.
     13
     14        * inspector/InspectorOverlay.h:
     15        * inspector/InspectorOverlay.cpp:
     16        (WebCore::InspectorOverlay::shouldShowOverlay):
     17        (WebCore::InspectorOverlay::update):
     18        (WebCore::InspectorOverlay::setShowRulers): Added.
     19        (WebCore::InspectorOverlay::drawRulers): Added.
     20        (WebCore::InspectorOverlay::reset):
     21
     22        * inspector/InspectorOverlayPage.js:
     23        (drawNodeHighlight):
     24        (drawQuadHighlight):
     25        (drawRulers): Added.
     26        (_drawBounds): Added.
     27        (reset):
     28        (_drawRulers): Deleted.
     29
    1302018-05-16  Michael Catanzaro  <mcatanzaro@igalia.com>
    231

  • trunk/Source/WebCore/inspector/InspectorOverlay.cpp

    r231819 r231881  
    269269bool InspectorOverlay::shouldShowOverlay() const
    270270{
    271     return m_highlightNode || m_highlightNodeList || m_highlightQuad || m_indicating || m_showingPaintRects || !m_pausedInDebuggerMessage.isNull();
     271    return m_highlightNode || m_highlightNodeList || m_highlightQuad || m_indicating || m_showingPaintRects || m_showRulers || !m_pausedInDebuggerMessage.isNull();
    272272}
    273273
    … …  
    297297    drawPausedInDebuggerMessage();
    298298    drawPaintRects();
     299
     300    if (m_showRulers)
     301        drawRulers();
    299302
    300303    // Position DOM elements.
    … …  
    393396}
    394397
     398void InspectorOverlay::setShowRulers(bool showRulers)
     399{
     400    if (m_showRulers == showRulers)
     401        return;
     402
     403    m_showRulers = showRulers;
     404
     405    update();
     406}
     407
    395408void InspectorOverlay::updatePaintRectsTimerFired()
    396409{
    … …  
    418431
    419432    evaluateInOverlay(ASCIILiteral("updatePaintRects"), WTFMove(arrayOfRects));
     433}
     434
     435void InspectorOverlay::drawRulers()
     436{
     437    evaluateInOverlay(ASCIILiteral("drawRulers"));
    420438}
    421439
    … …  
    743761        .setScrollOffset(buildObjectForPoint(scrollOffset))
    744762        .setContentInset(buildObjectForSize(IntSize(0, m_page.mainFrame().view()->topContentInset(ScrollView::TopContentInsetType::WebCoreOrPlatformContentInset))))
     763        .setShowRulers(m_showRulers)
    745764        .release();
    746765    evaluateInOverlay("reset", WTFMove(configObject));

  • trunk/Source/WebCore/inspector/InspectorOverlay.h

    r231819 r231881  
    116116    void setShowingPaintRects(bool);
    117117    void showPaintRect(const FloatRect&);
     118
     119    void setShowRulers(bool);
    118120   
    119121    Node* highlightedNode() const;
    … …  
    133135    void drawPausedInDebuggerMessage();
    134136    void drawPaintRects();
     137    void drawRulers();
    135138    void updatePaintRectsTimerFired();
    136139
    … …  
    158161    bool m_indicating {false};
    159162    bool m_showingPaintRects {false};
     163    bool m_showRulers {false};
    160164};
    161165

  • trunk/Source/WebCore/inspector/InspectorOverlayPage.js

    r231838 r231881  
     1const boundsColor = "rgba(0,0,0,0.4)";
    12const lightGridColor = "rgba(0,0,0,0.2)";
    23const darkGridColor = "rgba(0,0,0,0.5)";
    … …  
    6465    }
    6566
    66     _drawRulers();
     67    if (DATA.showRulers)
     68        _drawBounds(bounds);
    6769
    6870    if (allHighlights.length === 1) {
    … …  
    8082    });
    8183
    82     _drawRulers();
     84    if (DATA.showRulers)
     85        _drawBounds(bounds);
    8386}
    8487
    … …  
    105108
    106109    context.restore();
     110}
     111
     112function drawRulers()
     113{
     114    const gridLabelSize = 13;
     115    const gridSize = 15;
     116    const gridStepIncrement = 50;
     117    const gridStepLength = 8;
     118    const gridSubStepIncrement = 5;
     119    const gridSubStepLength = 5;
     120
     121
     122    let pageFactor = DATA.pageZoomFactor * DATA.pageScaleFactor;
     123    let scrollX = DATA.scrollOffset.x * DATA.pageScaleFactor;
     124    let scrollY = DATA.scrollOffset.y * DATA.pageScaleFactor;
     125
     126    function zoom(value) {
     127        return value * pageFactor;
     128    }
     129
     130    function unzoom(value) {
     131        return value / pageFactor;
     132    }
     133
     134    function multipleBelow(value, step) {
     135        return value - (value % step);
     136    }
     137
     138    let width = DATA.viewportSize.width / pageFactor;
     139    let height = DATA.viewportSize.height / pageFactor;
     140    let minX = unzoom(scrollX);
     141    let minY = unzoom(scrollY);
     142    let maxX = minX + width;
     143    let maxY = minY + height;
     144
     145    // Draw backgrounds
     146    _isolateActions(() => {
     147        let offsetX = DATA.contentInset.width + gridSize;
     148        let offsetY = DATA.contentInset.height + gridSize;
     149
     150        context.fillStyle = gridBackgroundColor;
     151        context.fillRect(DATA.contentInset.width, DATA.contentInset.height, gridSize, gridSize);
     152        context.fillRect(offsetX, DATA.contentInset.height, zoom(width) - offsetX, gridSize);
     153        context.fillRect(DATA.contentInset.width, offsetY, gridSize, zoom(height) - offsetY);
     154    });
     155
     156    // Ruler styles
     157    _isolateActions(() => {
     158        context.lineWidth = 1;
     159        context.fillStyle = darkGridColor;
     160
     161        // Draw labels
     162        _isolateActions(() => {
     163            context.translate(DATA.contentInset.width - scrollX, DATA.contentInset.height - scrollY);
     164
     165            for (let x = multipleBelow(minX, gridStepIncrement * 2); x < maxX; x += gridStepIncrement * 2) {
     166                if (!x && !scrollX)
     167                    continue;
     168
     169                _isolateActions(() => {
     170                    context.translate(zoom(x) + 0.5, scrollY);
     171                    context.fillText(x, 2, gridLabelSize);
     172                });
     173            }
     174
     175            for (let y = multipleBelow(minY, gridStepIncrement * 2); y < maxY; y += gridStepIncrement * 2) {
     176                if (!y && !scrollY)
     177                    continue;
     178
     179                _isolateActions(() => {
     180                    context.translate(scrollX, zoom(y) + 0.5);
     181                    context.rotate(-Math.PI / 2);
     182                    context.fillText(y, 2, gridLabelSize);
     183                });
     184            }
     185        });
     186
     187        // Draw horizontal grid
     188        _isolateActions(() => {
     189            context.translate(DATA.contentInset.width - scrollX + 0.5, DATA.contentInset.height - scrollY);
     190
     191            for (let x = multipleBelow(minX, gridSubStepIncrement); x < maxX; x += gridSubStepIncrement) {
     192                if (!x && !scrollX)
     193                    continue;
     194
     195                context.beginPath();
     196                context.moveTo(zoom(x), scrollY);
     197
     198                if (x % gridStepIncrement) {
     199                    context.strokeStyle = lightGridColor;
     200                    context.lineTo(zoom(x), scrollY + gridSubStepLength);
     201                } else {
     202                    context.strokeStyle = darkGridColor;
     203                    context.lineTo(zoom(x), scrollY + ((x % (gridStepIncrement * 2)) ? gridSubStepLength : gridStepLength));
     204                }
     205
     206                context.stroke();
     207            }
     208        });
     209
     210        // Draw vertical grid
     211        _isolateActions(() => {
     212            context.translate(DATA.contentInset.width - scrollX, DATA.contentInset.height - scrollY + 0.5);
     213
     214            for (let y = multipleBelow(minY, gridSubStepIncrement); y < maxY; y += gridSubStepIncrement) {
     215                if (!y && !scrollY)
     216                    continue;
     217
     218                context.beginPath();
     219                context.moveTo(scrollX, zoom(y));
     220
     221                if (y % gridStepIncrement) {
     222                    context.strokeStyle = lightGridColor;
     223                    context.lineTo(scrollX + gridSubStepLength, zoom(y));
     224                } else {
     225                    context.strokeStyle = darkGridColor;
     226                    context.lineTo(scrollX + ((y % (gridStepIncrement * 2)) ? gridSubStepLength : gridStepLength), zoom(y));
     227                }
     228
     229                context.stroke();
     230            }
     231        });
     232    });
    107233}
    108234
    … …  
    115241    DATA.scrollOffset = payload.scrollOffset;
    116242    DATA.contentInset = payload.contentInset;
     243    DATA.showRulers = payload.showRulers;
    117244
    118245    window.canvas = document.getElementById("canvas");
    … …  
    284411        _quadToPath(clipQuad, bounds);
    285412        context.fill();
     413    });
     414}
     415
     416function _drawBounds(bounds)
     417{
     418    _isolateActions(() => {
     419        let startX = DATA.contentInset.width;
     420        let startY = DATA.contentInset.height;
     421
     422        context.beginPath();
     423
     424        if (bounds.minY - startY > 0) {
     425            context.moveTo(bounds.minX, bounds.minY);
     426            context.lineTo(bounds.minX, startY);
     427
     428            context.moveTo(bounds.maxX, bounds.minY);
     429            context.lineTo(bounds.maxX, startY);
     430        }
     431
     432        if (bounds.minX - startX > 0) {
     433            context.moveTo(bounds.minX, bounds.minY);
     434            context.lineTo(startX, bounds.minY);
     435
     436            context.moveTo(bounds.minX, bounds.maxY);
     437            context.lineTo(startX, bounds.maxY);
     438        }
     439
     440        context.lineWidth = 1;
     441        context.strokeStyle = boundsColor;
     442        context.stroke();
    286443    });
    287444}
    … …  
    443600}
    444601
    445 function _drawRulers(options = {})
    446 {
    447     const gridLabelSize = 13;
    448     const gridSize = 15;
    449     const gridStepIncrement = 50;
    450     const gridStepLength = 8;
    451     const gridSubStepIncrement = 5;
    452     const gridSubStepLength = 5;
    453 
    454     let pageFactor = DATA.pageZoomFactor * DATA.pageScaleFactor;
    455     let scrollX = DATA.scrollOffset.x * DATA.pageScaleFactor;
    456     let scrollY = DATA.scrollOffset.y * DATA.pageScaleFactor;
    457 
    458     function zoom(value) {
    459         return value * pageFactor;
    460     }
    461 
    462     function unzoom(value) {
    463         return value / pageFactor;
    464     }
    465 
    466     function multipleBelow(value, step) {
    467         return value - (value % step);
    468     }
    469 
    470     let width = DATA.viewportSize.width / pageFactor;
    471     let height = DATA.viewportSize.height / pageFactor;
    472     let minX = unzoom(scrollX);
    473     let minY = unzoom(scrollY);
    474     let maxX = minX + width;
    475     let maxY = minY + height;
    476 
    477     // Draw backgrounds
    478     _isolateActions(() => {
    479         let offsetX = DATA.contentInset.width + gridSize;
    480         let offsetY = DATA.contentInset.height + gridSize;
    481 
    482         context.fillStyle = gridBackgroundColor;
    483         context.fillRect(DATA.contentInset.width, DATA.contentInset.height, gridSize, gridSize);
    484         context.fillRect(offsetX, DATA.contentInset.height, zoom(width) - offsetX, gridSize);
    485         context.fillRect(DATA.contentInset.width, offsetY, gridSize, zoom(height) - offsetY);
    486     });
    487 
    488     // Ruler styles
    489     _isolateActions(() => {
    490         context.lineWidth = 1;
    491         context.fillStyle = darkGridColor;
    492 
    493         // Draw labels
    494         _isolateActions(() => {
    495             context.translate(DATA.contentInset.width - scrollX, DATA.contentInset.height - scrollY);
    496 
    497             for (let x = multipleBelow(minX, gridStepIncrement * 2); x < maxX; x += gridStepIncrement * 2) {
    498                 if (!x && !scrollX)
    499                     continue;
    500 
    501                 _isolateActions(() => {
    502                     context.translate(zoom(x) + 0.5, scrollY);
    503                     context.fillText(x, 2, gridLabelSize);
    504                 });
    505             }
    506 
    507             for (let y = multipleBelow(minY, gridStepIncrement * 2); y < maxY; y += gridStepIncrement * 2) {
    508                 if (!y && !scrollY)
    509                     continue;
    510 
    511                 _isolateActions(() => {
    512                     context.translate(scrollX, zoom(y) + 0.5);
    513                     context.rotate(-Math.PI / 2);
    514                     context.fillText(y, 2, gridLabelSize);
    515                 });
    516             }
    517         });
    518 
    519         // Draw horizontal grid
    520         _isolateActions(() => {
    521             context.translate(DATA.contentInset.width - scrollX + 0.5, DATA.contentInset.height - scrollY);
    522 
    523             for (let x = multipleBelow(minX, gridSubStepIncrement); x < maxX; x += gridSubStepIncrement) {
    524                 if (!x && !scrollX)
    525                     continue;
    526 
    527                 context.beginPath();
    528                 context.moveTo(zoom(x), scrollY);
    529 
    530                 if (x % gridStepIncrement) {
    531                     context.strokeStyle = lightGridColor;
    532                     context.lineTo(zoom(x), scrollY + gridSubStepLength);
    533                 } else {
    534                     context.strokeStyle = darkGridColor;
    535                     context.lineTo(zoom(x), scrollY + ((x % (gridStepIncrement * 2)) ? gridSubStepLength : gridStepLength));
    536                 }
    537 
    538                 context.stroke();
    539             }
    540         });
    541 
    542         // Draw vertical grid
    543         _isolateActions(() => {
    544             context.translate(DATA.contentInset.width - scrollX, DATA.contentInset.height - scrollY + 0.5);
    545 
    546             for (let y = multipleBelow(minY, gridSubStepIncrement); y < maxY; y += gridSubStepIncrement) {
    547                 if (!y && !scrollY)
    548                     continue;
    549 
    550                 context.beginPath();
    551                 context.moveTo(scrollX, zoom(y));
    552 
    553                 if (y % gridStepIncrement) {
    554                     context.strokeStyle = lightGridColor;
    555                     context.lineTo(scrollX + gridSubStepLength, zoom(y));
    556                 } else {
    557                     context.strokeStyle = darkGridColor;
    558                     context.lineTo(scrollX + ((y % (gridStepIncrement * 2)) ? gridSubStepLength : gridStepLength), zoom(y));
    559                 }
    560 
    561                 context.stroke();
    562             }
    563         });
    564     });
    565 }
    566 
    567602function setPlatform(platform)
    568603{

  • trunk/Source/WebCore/inspector/agents/InspectorPageAgent.cpp

    r230267 r231881  
    543543}
    544544
     545void InspectorPageAgent::setShowRulers(ErrorString&, bool showRulers)
     546{
     547    m_overlay->setShowRulers(showRulers);
     548}
     549
    545550void InspectorPageAgent::setShowPaintRects(ErrorString&, bool show)
    546551{

  • trunk/Source/WebCore/inspector/agents/InspectorPageAgent.h

    r230211 r231881  
    9898    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;
    9999    void searchInResources(ErrorString&, const String&, const bool* caseSensitive, const bool* isRegex, RefPtr<JSON::ArrayOf<Inspector::Protocol::Page::SearchResult>>&) final;
     100    void setShowRulers(ErrorString&, bool) final;
    100101    void setShowPaintRects(ErrorString&, bool show) final;
    101102    void setEmulatedMedia(ErrorString&, const String&) final;

  • trunk/Source/WebInspectorUI/ChangeLog

    r231782 r231881  
     12018-05-16  Devin Rousso  <webkit@devinrousso.com>
     2
     3        Web Inspector: create a navigation item for toggling the overlay rulers/guides
     4        https://bugs.webkit.org/show_bug.cgi?id=185644
     5
     6        Reviewed by Matt Baker.
     7
     8        * Localizations/en.lproj/localizedStrings.js:
     9        * UserInterface/Base/Setting.js:
     10        * UserInterface/Views/DOMTreeContentView.js:
     11        (WI.DOMTreeContentView):
     12        (WI.DOMTreeContentView.prototype.get navigationItems):
     13        (WI.DOMTreeContentView.prototype.closed):
     14        (WI.DOMTreeContentView.prototype._showRulersChanged): Added.
     15        (WI.DOMTreeContentView.prototype._toggleShowRulers): Added.
     16
    1172018-05-14  Nikita Vasilyev  <nvasilyev@apple.com>
    218

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r231218 r231881  
    482482localizedStrings["Hide Grid"] = "Hide Grid";
    483483localizedStrings["Hide Path"] = "Hide Path";
     484localizedStrings["Hide Rulers"] = "Hide Rulers";
    484485localizedStrings["Hide compositing borders"] = "Hide compositing borders";
    485486localizedStrings["Hide shadow DOM nodes"] = "Hide shadow DOM nodes";
    … …  
    869870localizedStrings["Show Path"] = "Show Path";
    870871localizedStrings["Show Remaining (%d)"] = "Show Remaining (%d)";
     872localizedStrings["Show Rulers"] = "Show Rulers";
    871873localizedStrings["Show Scope Chain on pause"] = "Show Scope Chain on pause";
    872874localizedStrings["Show Source"] = "Show Source";

  • trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js

    r230228 r231881  
    122122    showCanvasPath: new WI.Setting("show-canvas-path", false),
    123123    selectedNetworkDetailContentViewIdentifier: new WI.Setting("network-detail-content-view-identifier", "preview"),
     124    showRulers: new WI.Setting("show-rulers", false),
    124125
    125126    // Experimental

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js

    r229686 r231881  
    5555        this._showPrintStylesChanged();
    5656
     57        WI.settings.showRulers.addEventListener(WI.Setting.Event.Changed, this._showRulersChanged, this);
     58        this._showRulersButtonNavigationItem = new WI.ActivateButtonNavigationItem("show-rulers", WI.UIString("Show Rulers"), WI.UIString("Hide Rulers"), "Images/Rulers.svg", 16, 16);
     59        this._showRulersButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._toggleShowRulers, this);
     60        this._showRulersButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
     61        this._showRulersChanged();
     62
    5763        this.element.classList.add("dom-tree");
    5864        this.element.addEventListener("click", this._mouseWasClicked.bind(this), false);
    … …  
    94100    {
    95101        let items = [this._showPrintStylesButtonNavigationItem, this._showsShadowDOMButtonNavigationItem];
     102
     103        // COMPATIBILITY (iOS 11.3)
     104        if (PageAgent.setShowRulers)
     105            items.unshift(this._showRulersButtonNavigationItem);
     106
    96107        if (!WI.settings.experimentalEnableLayersTab.value)
    97108            items.push(this._compositingBordersButtonNavigationItem, this._paintFlashingButtonNavigationItem);
    … …  
    151162        WI.showPaintRectsSetting.removeEventListener(null, null, this);
    152163        WI.showShadowDOMSetting.removeEventListener(null, null, this);
     164        WI.settings.showRulers.removeEventListener(null, null, this);
    153165        WI.debuggerManager.removeEventListener(null, null, this);
    154166        WI.domTreeManager.removeEventListener(null, null, this);
    … …  
    568580    }
    569581
     582    _showRulersChanged()
     583    {
     584        this._showRulersButtonNavigationItem.activated = WI.settings.showRulers.value;
     585
     586        // COMPATIBILITY (iOS 11.3)
     587        if (!PageAgent.setShowRulers)
     588            return;
     589
     590        PageAgent.setShowRulers(this._showRulersButtonNavigationItem.activated);
     591    }
     592
     593    _toggleShowRulers(event)
     594    {
     595        WI.settings.showRulers.value = !WI.settings.showRulers.value;
     596
     597        this._showRulersChanged();
     598    }
     599
    570600    _showSearchHighlights()
    571601    {
Note: See TracChangeset for help on using the changeset viewer.