Attachment 340395 Details for Bug 32263 – Patch

[patch] Patch

bug-32263-20180515004631.patch (text/plain), 32.89 KB, created by Devin Rousso on 2018-05-15 00:46:32 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2018-05-15 00:46:32 PDT

Size: 32.89 KB

patch

obsolete

>diff --git a/Source/JavaScriptCore/ChangeLog b/Source/JavaScriptCore/ChangeLog
>index 088cc11dd416ca1f6e0f389885c8603b2d612757..44947af03a8963103f4e0b4b3a7fb6990b2c959d 100644
>--- a/Source/JavaScriptCore/ChangeLog
>+++ b/Source/JavaScriptCore/ChangeLog
>@@ -1,3 +1,13 @@
>+2018-05-15  Devin Rousso  <webkit@devinrousso.com>
>+
>+        Web Inspector: Add rulers and guides
>+        https://bugs.webkit.org/show_bug.cgi?id=32263
>+        <rdar://problem/19281564>
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * inspector/protocol/OverlayTypes.json:
>+
> 2018-05-14  Andy VanWagoner  <andy@vanwagoner.family>
> 
>         [INTL] Handle error in defineProperty for supported locales length
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index 01d58a32f829b8c00667e125ab0846e7cd30aace..d9acc2349fd7b4fa48a097458d87c7892fe6cdc3 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,53 @@
>+2018-05-15  Devin Rousso  <webkit@devinrousso.com>
>+
>+        Web Inspector: Add rulers and guides
>+        https://bugs.webkit.org/show_bug.cgi?id=32263
>+        <rdar://problem/19281564>
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        This patch is purely a visual change for WebInspector, and doesn't affect anything else.
>+
>+        * inspector/InspectorOverlay.h:
>+        * inspector/InspectorOverlay.cpp:
>+        (WebCore::InspectorOverlay::update):
>+        (WebCore::InspectorOverlay::reset):
>+        (WebCore::InspectorOverlay::drawGutter): Deleted.
>+
>+        * inspector/InspectorOverlayPage.html:
>+        * inspector/InspectorOverlayPage.js:
>+        (Bounds): Added.
>+        (Bounds.prototype.get minX): Added.
>+        (Bounds.prototype.get minY): Added.
>+        (Bounds.prototype.get maxX): Added.
>+        (Bounds.prototype.get maxY): Added.
>+        (Bounds.prototype.update): Added.
>+        (drawNodeHighlight):
>+        (drawQuadHighlight):
>+        (reset):
>+        (_isolateActions): Added.
>+        (_quadToPath): Added.
>+        (_quadToPath.parseQuadPoint): Added.
>+        (_drawOutlinedQuad): Added.
>+        (_drawPath): Added.
>+        (_drawPath.parsePoints): Added.
>+        (_drawOutlinedQuadWithClip): Added.
>+        (_drawElementTitle):
>+        (_drawShapeHighlight):
>+        (_drawFragmentHighlight):
>+        (_drawRulers): Added.
>+        (quadToPath): Deleted.
>+        (drawOutlinedQuad): Deleted.
>+        (pathCommand): Deleted.
>+        (drawPath): Deleted.
>+        (drawOutlinedQuadWithClip): Deleted.
>+        (drawGutter): Deleted.
>+        * inspector/InspectorOverlayPage.css:
>+        (#log):
>+        (.css-property):
>+        (#right-gutter): Deleted.
>+        (#bottom-gutter): Deleted.
>+
> 2018-05-14  Antoine Quint  <graouts@apple.com>
> 
>         [Web Animations] Tests using the new animation engine may crash under WebCore::FrameView::didDestroyRenderTree when using internals methods
>diff --git a/Source/JavaScriptCore/inspector/protocol/OverlayTypes.json b/Source/JavaScriptCore/inspector/protocol/OverlayTypes.json
>index 9bb70dcbecef0977f06bb269d8592fd751094649..e8e453978392ce6423c6c9a094e06e75aa7a8978 100644
>--- a/Source/JavaScriptCore/inspector/protocol/OverlayTypes.json
>+++ b/Source/JavaScriptCore/inspector/protocol/OverlayTypes.json
>@@ -94,7 +94,10 @@
>             "properties": [
>                 { "name": "deviceScaleFactor", "type": "number" },
>                 { "name": "viewportSize", "$ref": "Size" },
>-                { "name": "frameViewFullSize", "$ref": "Size" }
>+                { "name": "pageScaleFactor", "type": "number" },
>+                { "name": "pageZoomFactor", "type": "number" },
>+                { "name": "scrollOffset", "$ref": "Point" },
>+                { "name": "contentInset", "$ref": "Size" }
>             ]
>         }
>     ]
>diff --git a/Source/WebCore/inspector/InspectorOverlay.cpp b/Source/WebCore/inspector/InspectorOverlay.cpp
>index 9384d0821249026fd5b70078eb1e5b71b0a4b448..6e6655ed67c1c7cc8bc957b0cbe814e11e57fb7e 100644
>--- a/Source/WebCore/inspector/InspectorOverlay.cpp
>+++ b/Source/WebCore/inspector/InspectorOverlay.cpp
>@@ -283,16 +283,15 @@ void InspectorOverlay::update()
>         return;
> 
>     FrameView* overlayView = overlayPage()->mainFrame().view();
>-    IntSize viewportSize = view->sizeForVisibleContent();
>     IntSize frameViewFullSize = view->sizeForVisibleContent(ScrollableArea::IncludeScrollbars);
>     overlayView->resize(frameViewFullSize);
> 
>     // Clear canvas and paint things.
>-    // FIXME: Remove extra parameter?
>-    reset(viewportSize, IntSize());
>+    IntSize viewportSize = view->sizeForVisibleContent();
>+    IntPoint scrollOffset = view->scrollPosition();
>+    reset(viewportSize, scrollOffset);
> 
>     // Include scrollbars to avoid masking them by the gutter.
>-    drawGutter();
>     drawNodeHighlight();
>     drawQuadHighlight();
>     drawPausedInDebuggerMessage();
>@@ -420,11 +419,6 @@ void InspectorOverlay::drawPaintRects()
>     evaluateInOverlay(ASCIILiteral("updatePaintRects"), WTFMove(arrayOfRects));
> }
> 
>-void InspectorOverlay::drawGutter()
>-{
>-    evaluateInOverlay(ASCIILiteral("drawGutter"));
>-}
>-
> static RefPtr<JSON::ArrayOf<Inspector::Protocol::OverlayTypes::FragmentHighlightData>> buildArrayForRendererFragments(RenderObject* renderer, const HighlightConfig& config)
> {
>     auto arrayOfFragments = JSON::ArrayOf<Inspector::Protocol::OverlayTypes::FragmentHighlightData>::create();
>@@ -739,12 +733,15 @@ void InspectorOverlay::forcePaint()
>     m_client->highlight();
> }
> 
>-void InspectorOverlay::reset(const IntSize& viewportSize, const IntSize& frameViewFullSize)
>+void InspectorOverlay::reset(const IntSize& viewportSize, const IntPoint& scrollOffset)
> {
>     auto configObject = Inspector::Protocol::OverlayTypes::OverlayConfiguration::create()
>         .setDeviceScaleFactor(m_page.deviceScaleFactor())
>         .setViewportSize(buildObjectForSize(viewportSize))
>-        .setFrameViewFullSize(buildObjectForSize(frameViewFullSize))
>+        .setPageScaleFactor(m_page.pageScaleFactor())
>+        .setPageZoomFactor(m_page.mainFrame().pageZoomFactor())
>+        .setScrollOffset(buildObjectForPoint(scrollOffset))
>+        .setContentInset(buildObjectForSize(IntSize(0, m_page.mainFrame().view()->topContentInset(ScrollView::TopContentInsetType::WebCoreOrPlatformContentInset))))
>         .release();
>     evaluateInOverlay("reset", WTFMove(configObject));
> }
>diff --git a/Source/WebCore/inspector/InspectorOverlay.h b/Source/WebCore/inspector/InspectorOverlay.h
>index 1d6bbc1c878d8018d8385eae427964bf08631081..38ba850f46e09522702817854cdb9a0c8ae7879f 100644
>--- a/Source/WebCore/inspector/InspectorOverlay.h
>+++ b/Source/WebCore/inspector/InspectorOverlay.h
>@@ -128,7 +128,6 @@ public:
>     void freePage();
> private:
>     bool shouldShowOverlay() const;
>-    void drawGutter();
>     void drawNodeHighlight();
>     void drawQuadHighlight();
>     void drawPausedInDebuggerMessage();
>@@ -138,7 +137,7 @@ private:
>     Page* overlayPage();
> 
>     void forcePaint();
>-    void reset(const IntSize& viewportSize, const IntSize& frameViewFullSize);
>+    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);
>diff --git a/Source/WebCore/inspector/InspectorOverlayPage.css b/Source/WebCore/inspector/InspectorOverlayPage.css
>index de6c53ff83ef8eaad69bf8b612ac83d58be538a8..d07b88234495abb5439714269f94e3a86d60122e 100644
>--- a/Source/WebCore/inspector/InspectorOverlayPage.css
>+++ b/Source/WebCore/inspector/InspectorOverlayPage.css
>@@ -18,6 +18,10 @@ body.platform-linux {
>     font-family: dejavu sans mono;
> }
> 
>+#log {
>+    position: absolute;
>+}
>+
> .fill {
>     position: absolute;
>     top: 0;
>@@ -78,21 +82,3 @@ body.platform-linux {
> .css-property {
>     color: rgb(170, 13, 145);
> }
>-
>-#right-gutter {
>-    display: none;
>-    right: 0;
>-    top: 0;
>-    bottom: 0;
>-    position: absolute;
>-    background-color: darkgray;
>-}
>-
>-#bottom-gutter {
>-    display: none;
>-    left: 0;
>-    right: 0;
>-    bottom: 0;
>-    position: absolute;
>-    background-color: darkgray;
>-}
>diff --git a/Source/WebCore/inspector/InspectorOverlayPage.html b/Source/WebCore/inspector/InspectorOverlayPage.html
>index c56178117de4b1fdde82cdd8ea33a2546a35bc37..2977905fee7914d87ddcc6fbf7921bec31dfb5f2 100644
>--- a/Source/WebCore/inspector/InspectorOverlayPage.html
>+++ b/Source/WebCore/inspector/InspectorOverlayPage.html
>@@ -28,16 +28,16 @@
> <!DOCTYPE html>
> <html>
> <head>
>-<link rel="stylesheet" href="InspectorOverlayPage.css">
>-<script src="InspectorOverlayPage.js"></script>
>+    <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="right-gutter"></div>
>-<div id="bottom-gutter"></div>
>-<div id="log"></div>
>+    <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
>index 336a590b34141d799963f2297dddee6d143bbe00..714d8a66ab3c07c0e4abd8eeb2a274797dc0e82e 100644
>--- a/Source/WebCore/inspector/InspectorOverlayPage.js
>+++ b/Source/WebCore/inspector/InspectorOverlayPage.js
>@@ -1,3 +1,7 @@
>+const gridSize = 15;
>+const gridStep = 50;
>+const gridSubStep = 5;
>+
> const lightGridColor = "rgba(0,0,0,0.2)";
> const darkGridColor = "rgba(0,0,0,0.5)";
> const transparentColor = "rgba(0, 0, 0, 0)";
>@@ -9,6 +13,33 @@ const shapeMarginHighlightColor = "rgba(96, 82, 127, 0.6)";
> 
> const paintRectFillColor = "rgba(255, 0, 0, 0.5)";
> 
>+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;
>+    }
>+
>+    // Public
>+
>+    get minX() { return this._minX; }
>+    get minY() { return this._minY; }
>+    get maxX() { return this._maxX; }
>+    get maxY() { return this._maxY; }
>+
>+    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);
>+    }
>+}
>+
> function drawPausedInDebuggerMessage(message)
> {
>     var pausedInDebugger = document.getElementById("paused-in-debugger");
>@@ -17,94 +48,45 @@ function drawPausedInDebuggerMessage(message)
>     document.body.classList.add("dimmed");
> }
> 
>-function quadToPath(quad)
>-{
>-    context.beginPath();
>-    context.moveTo(quad[0].x, quad[0].y);
>-    context.lineTo(quad[1].x, quad[1].y);
>-    context.lineTo(quad[2].x, quad[2].y);
>-    context.lineTo(quad[3].x, quad[3].y);
>-    context.closePath();
>-    return context;
>-}
>-
>-function drawOutlinedQuad(quad, fillColor, outlineColor)
>+function drawNodeHighlight(allHighlights)
> {
>-    context.save();
>-    context.lineWidth = 2;
>-    quadToPath(quad).clip();
>-    context.fillStyle = fillColor;
>-    context.fill();
>-    if (outlineColor) {
>-        context.strokeStyle = outlineColor;
>-        context.stroke();
>-    }
>-    context.restore();
>-}
>+    let bounds = new Bounds;
> 
>-function pathCommand(context, commands, name, index, length) {
>-    context[name].apply(context, commands.slice(index + 1, index + length + 1));
>-    return index + length + 1;
>-}
>+    for (let highlight of allHighlights) {
>+        _isolateActions(() => {
>+            context.translate(-highlight.scrollOffset.x, -highlight.scrollOffset.y);
> 
>-function drawPath(context, commands, fillColor, outlineColor)
>-{
>-    context.save();
>-    context.beginPath();
>+            for (let fragment of highlight.fragments)
>+                _drawFragmentHighlight(fragment, bounds);
> 
>-    var commandsIndex = 0;
>-    var commandsLength = commands.length;
>-    while(commandsIndex < commandsLength) {
>-        switch(commands[commandsIndex]) {
>-        // 1 point
>-        case 'M':
>-            commandsIndex = pathCommand(context, commands, "moveTo", commandsIndex, 2);
>-            break;
>-        // 1 point
>-        case 'L':
>-            commandsIndex = pathCommand(context, commands, "lineTo", commandsIndex, 2);
>-            break;
>-        // 3 points
>-        case 'C':
>-            commandsIndex = pathCommand(context, commands, "bezierCurveTo", commandsIndex, 6);
>-            break;
>-        // 2 points
>-        case 'Q':
>-            commandsIndex = pathCommand(context, commands, "quadraticCurveTo", commandsIndex, 2);
>-            break;
>-        // 0 points
>-        case 'Z':
>-            commandsIndex = pathCommand(context, commands, "closePath", commandsIndex, 0);
>-            break;
>-        default:
>-            commandsIndex++;
>-        }
>+            if (highlight.elementData && highlight.elementData.shapeOutsideData)
>+                _drawShapeHighlight(highlight.elementData.shapeOutsideData, bounds);
>+        });
>     }
> 
>-    context.closePath();
>-    context.fillStyle = fillColor;
>-    context.fill();
>+    _drawRulers({
>+        mirrorX: bounds.minY < DATA.contentInset.height + gridSize && bounds.maxY < DATA.viewportSize.height - gridSize,
>+        mirrorY: bounds.minX < DATA.contentInset.width + gridSize && bounds.maxX < DATA.viewportSize.width - gridSize,
>+    });
> 
>-    if (outlineColor) {
>-        context.lineWidth = 2;
>-        context.strokeStyle = outlineColor;
>-        context.stroke();
>+    if (allHighlights.length === 1) {
>+        for (let fragment of allHighlights[0].fragments)
>+            _drawElementTitle(allHighlights[0].elementData, fragment, allHighlights[0].scrollOffset);
>     }
>-
>-    context.restore();
> }
> 
>-function drawOutlinedQuadWithClip(quad, clipQuad, fillColor)
>+function drawQuadHighlight(highlight)
> {
>-    var canvas = document.getElementById("canvas");
>-    context.fillStyle = fillColor;
>-    context.save();
>-    context.lineWidth = 0;
>-    quadToPath(quad).fill();
>-    context.globalCompositeOperation = "destination-out";
>-    context.fillStyle = "red";
>-    quadToPath(clipQuad).fill();
>-    context.restore();
>+    let bounds = new Bounds;
>+
>+    _isolateActions(() => {
>+        _drawOutlinedQuad(highlight.quads[0], highlight.contentColor, highlight.contentOutlineColor, bounds);
>+    });
>+
>+    _drawRulers({
>+        mirrorX: bounds.minY < DATA.contentInset.height + gridSize && bounds.maxY < DATA.viewportSize.height - gridSize,
>+        mirrorY: bounds.minX < DATA.contentInset.width + gridSize && bounds.maxX < DATA.viewportSize.width - gridSize,
>+    });
> }
> 
> function quadEquals(quad1, quad2)
>@@ -115,28 +97,6 @@ function quadEquals(quad1, quad2)
>         quad1[3].x === quad2[3].x && quad1[3].y === quad2[3].y;
> }
> 
>-function drawGutter()
>-{
>-    var frameWidth = frameViewFullSize.width;
>-    var frameHeight = frameViewFullSize.height;
>-
>-    if (!frameWidth || document.body.offsetWidth <= frameWidth)
>-        rightGutter.style.removeProperty("display");
>-    else {
>-        rightGutter.style.display = "block";
>-        rightGutter.style.left = frameWidth + "px";
>-    }
>-
>-    if (!frameHeight || document.body.offsetHeight <= frameHeight)
>-        bottomGutter.style.removeProperty("display");
>-    else {
>-        bottomGutter.style.display = "block";
>-        bottomGutter.style.top = frameHeight + "px";
>-    }
>-}
>-
>-var updatePaintRectsIntervalID;
>-
> function updatePaintRects(paintRectList)
> {
>     var context = paintRectsCanvas.getContext("2d");
>@@ -153,34 +113,38 @@ function updatePaintRects(paintRectList)
>     context.restore();
> }
> 
>-function reset(resetData)
>+function reset(payload)
> {
>-    var deviceScaleFactor = resetData.deviceScaleFactor;
>-    var viewportSize = resetData.viewportSize;
>-    window.frameViewFullSize = resetData.frameViewFullSize;
>+    DATA.viewportSize = payload.viewportSize;
>+    DATA.deviceScaleFactor = payload.deviceScaleFactor;
>+    DATA.pageScaleFactor = payload.pageScaleFactor;
>+    DATA.pageZoomFactor = payload.pageZoomFactor;
>+    DATA.scrollOffset = payload.scrollOffset;
>+    DATA.contentInset = payload.contentInset;
> 
>     window.canvas = document.getElementById("canvas");
>     window.paintRectsCanvas = document.getElementById("paintrects-canvas");
> 
>     window.context = canvas.getContext("2d");
>-    window.rightGutter = document.getElementById("right-gutter");
>-    window.bottomGutter = document.getElementById("bottom-gutter");
> 
>-    canvas.width = deviceScaleFactor * viewportSize.width;
>-    canvas.height = deviceScaleFactor * viewportSize.height;
>-    canvas.style.width = viewportSize.width + "px";
>-    canvas.style.height = viewportSize.height + "px";
>-    context.scale(deviceScaleFactor, deviceScaleFactor);
>+    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 = deviceScaleFactor * viewportSize.width;
>-    paintRectsCanvas.height = deviceScaleFactor * viewportSize.height;
>-    paintRectsCanvas.style.width = viewportSize.width + "px";
>-    paintRectsCanvas.style.height = viewportSize.height + "px";
>+    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").innerHTML = "";
>+    document.getElementById("element-title-container").textContent = "";
>     document.body.classList.remove("dimmed");
>+
>+    document.getElementById("log").style.setProperty("top", DATA.contentInset + "px");
> }
> 
> function DOMBuilder(tagName, className)
>@@ -230,6 +194,105 @@ 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 _createElementTitle(elementData)
> {
>     let builder = new DOMBuilder("div", "element-title");
>@@ -301,95 +364,75 @@ function _drawElementTitle(elementData, fragmentHighlight, scroll)
>     } else
>         boxY = arrowHeight;
> 
>-    context.save();
>-    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 = "rgb(255, 255, 194)";
>-    context.fill();
>-    context.strokeStyle = "rgb(128, 128, 128)";
>-    context.stroke();
>-
>-    context.restore();
>+    _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 = "rgb(255, 255, 194)";
>+        context.fill();
>+        context.strokeStyle = "rgb(128, 128, 128)";
>+        context.stroke();
>+    });
> 
>     elementTitle.style.top = (boxY + 3) + "px";
>     elementTitle.style.left = (boxX + 3) + "px";
> }
> 
>-function _drawShapeHighlight(shapeInfo)
>+function _drawShapeHighlight(shapeInfo, bounds)
> {
>     if (shapeInfo.marginShape)
>-        drawPath(context, shapeInfo.marginShape, shapeMarginHighlightColor);
>+        _drawPath(context, shapeInfo.marginShape, shapeMarginHighlightColor, bounds);
> 
>     if (shapeInfo.shape)
>-        drawPath(context, shapeInfo.shape, shapeHighlightColor);
>+        _drawPath(context, shapeInfo.shape, shapeHighlightColor, bounds);
> 
>     if (!(shapeInfo.shape || shapeInfo.marginShape))
>-        drawOutlinedQuad(shapeInfo.bounds, shapeHighlightColor, shapeHighlightColor);
>+        _drawOutlinedQuad(shapeInfo.bounds, shapeHighlightColor, shapeHighlightColor, bounds);
> }
> 
>-function _drawFragmentHighlight(highlight)
>+function _drawFragmentHighlight(highlight, bounds)
> {
>     if (!highlight.quads.length)
>         return;
> 
>-    context.save();
>+    _isolateActions(() => {
>+        let quads = highlight.quads.slice();
>+        let contentQuad = quads.pop();
>+        let paddingQuad = quads.pop();
>+        let borderQuad = quads.pop();
>+        let marginQuad = quads.pop();
> 
>-    var quads = highlight.quads.slice();
>-    var contentQuad = quads.pop();
>-    var paddingQuad = quads.pop();
>-    var borderQuad = quads.pop();
>-    var marginQuad = quads.pop();
>-
>-    var hasContent = contentQuad && highlight.contentColor !== transparentColor || highlight.contentOutlineColor !== transparentColor;
>-    var hasPadding = paddingQuad && highlight.paddingColor !== transparentColor;
>-    var hasBorder = borderQuad && highlight.borderColor !== transparentColor;
>-    var hasMargin = marginQuad && highlight.marginColor !== transparentColor;
>-
>-    var clipQuad;
>-    if (hasMargin && (!hasBorder || !quadEquals(marginQuad, borderQuad))) {
>-        drawOutlinedQuadWithClip(marginQuad, borderQuad, highlight.marginColor);
>-        clipQuad = borderQuad;
>-    }
>-    if (hasBorder && (!hasPadding || !quadEquals(borderQuad, paddingQuad))) {
>-        drawOutlinedQuadWithClip(borderQuad, paddingQuad, highlight.borderColor);
>-        clipQuad = paddingQuad;
>-    }
>-    if (hasPadding && (!hasContent || !quadEquals(paddingQuad, contentQuad))) {
>-        drawOutlinedQuadWithClip(paddingQuad, contentQuad, highlight.paddingColor);
>-        clipQuad = contentQuad;
>-    }
>-    if (hasContent)
>-        drawOutlinedQuad(contentQuad, highlight.contentColor, highlight.contentOutlineColor);
>-
>-    var width = canvas.width;
>-    var height = canvas.height;
>-    var minX = Number.MAX_VALUE, minY = Number.MAX_VALUE, maxX = Number.MIN_VALUE; maxY = Number.MIN_VALUE;
>-    for (var i = 0; i < highlight.quads.length; ++i) {
>-        var quad = highlight.quads[i];
>-        for (var j = 0; j < quad.length; ++j) {
>-            minX = Math.min(minX, quad[j].x);
>-            maxX = Math.max(maxX, quad[j].x);
>-            minY = Math.min(minY, quad[j].y);
>-            maxY = Math.max(maxY, quad[j].y);
>-        }
>-    }
>+        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;
> 
>-    context.restore();
>+        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()
>@@ -402,36 +445,133 @@ function hidePageIndication()
>     document.body.classList.remove("indicate");
> }
> 
>-function drawNodeHighlight(allHighlights)
>+function _drawRulers(options = {})
> {
>-    var elementTitleContainer = document.getElementById("element-title-container");
>-    while (elementTitleContainer.hasChildNodes())
>-        elementTitleContainer.removeChild(elementTitleContainer.lastChild);
>-
>-    for (var highlight of allHighlights) {
>-        context.save();
>-        context.translate(-highlight.scrollOffset.x, -highlight.scrollOffset.y);
>+    let pageFactor = DATA.pageZoomFactor * DATA.pageScaleFactor;
>+    let scrollX = DATA.scrollOffset.x * DATA.pageScaleFactor;
>+    let scrollY = DATA.scrollOffset.y * DATA.pageScaleFactor;
> 
>-        for (var fragment of highlight.fragments)
>-            _drawFragmentHighlight(fragment);
>-
>-        if (highlight.elementData && highlight.elementData.shapeOutsideData)
>-            _drawShapeHighlight(highlight.elementData.shapeOutsideData);
>+    function zoom(value) {
>+        return value * pageFactor;
>+    }
> 
>-        context.restore();
>+    function unzoom(value) {
>+        return value / pageFactor;
>+    }
> 
>-        if (allHighlights.length === 1) {
>-            for (var fragment of highlight.fragments)
>-                _drawElementTitle(highlight.elementData, fragment, highlight.scrollOffset);
>-        }
>+    function multipleBelow(value, step) {
>+        return value - (value % step);
>     }
>-}
> 
>-function drawQuadHighlight(highlight)
>-{
>-    context.save();
>-    drawOutlinedQuad(highlight.quads[0], highlight.contentColor, highlight.contentOutlineColor);
>-    context.restore();
>+    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;
>+        let startX = options.mirrorY ? zoom(width) - gridSize : DATA.contentInset.width;
>+        let startY = options.mirrorX ? zoom(height) - gridSize : DATA.contentInset.height;
>+
>+        context.fillStyle = gridBackgroundColor;
>+        context.fillRect(startX, startY, gridSize, gridSize);
>+        context.fillRect(offsetX - (options.mirrorY ? gridSize : 0), startY, zoom(width) - offsetX, gridSize);
>+        context.fillRect(startX, offsetY - (options.mirrorX ? gridSize : 0), 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, gridStep * 2); x < maxX; x += gridStep * 2) {
>+                if (!x && !scrollX)
>+                    continue;
>+               
>+                _isolateActions(() => {
>+                    context.translate(zoom(x) + 0.5, scrollY);
>+                    context.fillText(x, 2, options.mirrorX ? zoom(height) - DATA.contentInset.height - 7 : 13);
>+                });
>+            }
>+
>+            for (let y = multipleBelow(minY, gridStep * 2); y < maxY; y += gridStep * 2) {
>+                if (!y && !scrollY)
>+                    continue;
>+
>+                _isolateActions(() => {
>+                    context.translate(scrollX, zoom(y) + 0.5);
>+                    context.rotate(-Math.PI / 2);
>+                    context.fillText(y, 2, options.mirrorY ? zoom(width) - DATA.contentInset.width - 7 : 13);
>+                });
>+            }
>+        });
>+
>+        // Draw horizontal grid
>+        _isolateActions(() => {
>+            if (options.mirrorX) {
>+                context.translate(0, zoom(height));
>+                context.scale(1, -1);
>+            } else
>+                context.translate(0, DATA.contentInset.height);
>+
>+            context.translate(DATA.contentInset.width - scrollX + 0.5, -scrollY);
>+
>+            for (let x = multipleBelow(minX, gridSubStep); x < maxX; x += gridSubStep) {
>+                if (!x && !scrollX)
>+                    continue;
>+
>+                context.beginPath();
>+                context.moveTo(zoom(x), scrollY);
>+
>+                if (x % gridStep) {
>+                    context.strokeStyle = lightGridColor;
>+                    context.lineTo(zoom(x), scrollY + gridSubStep);
>+                } else {
>+                    context.strokeStyle = darkGridColor;
>+                    context.lineTo(zoom(x), scrollY + ((x % (gridStep * 2)) ? 5 : 8));
>+                }
>+
>+                context.stroke();
>+            }
>+        });
>+
>+        // Draw vertical grid
>+        _isolateActions(() => {
>+            if (options.mirrorY) {
>+                context.translate(zoom(width), 0);
>+                context.scale(-1, 1);
>+            } else
>+                context.translate(DATA.contentInset.width, 0);
>+
>+            context.translate(-scrollX, DATA.contentInset.height - scrollY + 0.5);
>+
>+            for (let y = multipleBelow(minY, gridSubStep); y < maxY; y += gridSubStep) {
>+                if (!y && !scrollY)
>+                    continue;
>+
>+                context.beginPath();
>+                context.moveTo(scrollX, zoom(y));
>+
>+                if (y % gridStep) {
>+                    context.strokeStyle = lightGridColor;
>+                    context.lineTo(scrollX + gridSubStep, zoom(y));
>+                } else {
>+                    context.strokeStyle = darkGridColor;
>+                    context.lineTo(scrollX + ((y % (gridStep * 2)) ? 5 : 8), zoom(y));
>+                }
>+
>+                context.stroke();
>+            }
>+        });
>+    });
> }
> 
> function setPlatform(platform)

Actions: View | Formatted Diff | Diff

Attachments on bug 32263: 336565 | 336566 | 340386 | 340387 | 340395 | 340408 | 340437