Web Inspector: Preview Canvas path when viewing a recording
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 7 Aug 2017 23:55:36 +0000 (23:55 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 7 Aug 2017 23:55:36 +0000 (23:55 +0000)
https://bugs.webkit.org/show_bug.cgi?id=174967

Reviewed by Brian Burg.

Source/WebCore:

Tests: fast/canvas/2d.currentPoint.html
       fast/canvas/2d.getPath.modification.html
       fast/canvas/2d.getPath.newobject.html
       fast/canvas/2d.setPath.html

* html/canvas/CanvasPath.idl:
* html/canvas/CanvasPath.h:
* html/canvas/CanvasPath.cpp:
(WebCore::CanvasPath::currentX const):
(WebCore::CanvasPath::currentY const):

* html/canvas/CanvasRenderingContext2D.idl:
* html/canvas/CanvasRenderingContext2D.h:
* html/canvas/CanvasRenderingContext2D.cpp:
(WebCore::CanvasRenderingContext2D::setPath):
(WebCore::CanvasRenderingContext2D::getPath const):

* page/RuntimeEnabledFeatures.h:
(WebCore::RuntimeEnabledFeatures::setInspectorAdditionsEnabled):
(WebCore::RuntimeEnabledFeatures::inspectorAdditionsEnabled const):
Add runtime flag for added IDL items above so that they are only usable within the inspector
process. The runtime flag is not enabled from anywhere else as of now.

* inspector/InspectorCanvas.cpp:
(WebCore::InspectorCanvas::buildInitialState):
Send current path as part of the InitialState.
Drive-by: deduplicate more string values.
Source/WebInspectorUI:

* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Base/Setting.js:

* UserInterface/Views/RecordingContentView.js:
(WI.RecordingContentView):
(WI.RecordingContentView.supportsCanvasPathDebugging):
(WI.RecordingContentView.prototype.get navigationItems):
(WI.RecordingContentView.prototype.shown):
(WI.RecordingContentView.prototype._generateContentCanvas2D):
(WI.RecordingContentView.prototype._actionModifiesPath):
(WI.RecordingContentView.prototype._updateCanvasPath):
(WI.RecordingContentView.prototype._showPathButtonClicked):
Show each segment of the current path as an overlay when the setting is enabled.
Drive-by: fix forgotten function rename.
* UserInterface/Views/RecordingContentView.css:
(.content-view:not(.tab).recording canvas.path):

* UserInterface/Views/RecordingStateDetailsSidebarPanel.js:
(WI.RecordingStateDetailsSidebarPanel.prototype._generateDetailsCanvas2D):
Show the currentX/currentY in the current state.

* UserInterface/Models/RecordingAction.js:
(WI.RecordingAction.isFunctionForType):
(WI.RecordingAction.prototype.swizzle):
Use Sets for better performance.

Source/WebKit:

* Shared/WebPreferencesDefinitions.h:
* UIProcess/API/C/WKPreferencesRefPrivate.h:
* UIProcess/API/C/WKPreferences.cpp:
(WKPreferencesSetInspectorAdditionsEnabled):
(WKPreferencesGetInspectorAdditionsEnabled):
* WebProcess/WebPage/WebPage.cpp:
(WebKit::WebPage::updatePreferences):
Add plumbing for new InspectorAdditions runtime flag.

* WebProcess/WebPage/WebInspectorUI.cpp:
(WebKit::WebInspectorUI::WebInspectorUI):
Enable InspectorAdditions by default in the WebInspector page.

Source/WebKitLegacy/mac:

* WebView/WebPreferenceKeysPrivate.h:
* WebView/WebPreferences.mm:
(+[WebPreferences initialize]):
(-[WebPreferences inspectorAdditionsEnabled]):
(-[WebPreferences setInspectorAdditionsEnabled:]):
* WebView/WebPreferencesPrivate.h:
* WebView/WebView.mm:
(-[WebView _preferencesChanged:]):
Add plumbing for new InspectorAdditions runtime flag.

Tools:

* DumpRenderTree/TestOptions.h:
* DumpRenderTree/TestOptions.mm:
(TestOptions::TestOptions):
* DumpRenderTree/mac/DumpRenderTree.mm:
(setWebPreferencesForTestOptions):
* WebKitTestRunner/TestController.cpp:
(WTR::TestController::resetPreferencesToConsistentValues):
(WTR::updateTestOptionsFromTestHeader):
* WebKitTestRunner/TestOptions.h:
(WTR::TestOptions::hasSameInitializationOptions const):
Add plumbing for new InspectorAdditions runtime flag.

LayoutTests:

* fast/canvas/2d.currentPoint-expected.txt: Added.
* fast/canvas/2d.currentPoint.html: Added.
* fast/canvas/2d.getPath.modification-expected.txt: Added.
* fast/canvas/2d.getPath.modification.html: Added.
* fast/canvas/2d.getPath.newobject-expected.txt: Added.
* fast/canvas/2d.getPath.newobject.html: Added.
* fast/canvas/2d.setPath-expected.txt: Added.
* fast/canvas/2d.setPath.html: Added.

* inspector/canvas/recording-2d-expected.txt:
* inspector/canvas/recording-2d.html:
Updated for additional deduplication in InitialState.

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

44 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/canvas/2d.currentPoint-expected.txt [new file with mode: 0644]
LayoutTests/fast/canvas/2d.currentPoint.html [new file with mode: 0644]
LayoutTests/fast/canvas/2d.getPath.modification-expected.txt [new file with mode: 0644]
LayoutTests/fast/canvas/2d.getPath.modification.html [new file with mode: 0644]
LayoutTests/fast/canvas/2d.getPath.newobject-expected.txt [new file with mode: 0644]
LayoutTests/fast/canvas/2d.getPath.newobject.html [new file with mode: 0644]
LayoutTests/fast/canvas/2d.setPath-expected.txt [new file with mode: 0644]
LayoutTests/fast/canvas/2d.setPath.html [new file with mode: 0644]
LayoutTests/inspector/canvas/recording-2d-expected.txt
LayoutTests/inspector/canvas/recording-2d.html
Source/WebCore/ChangeLog
Source/WebCore/html/canvas/CanvasPath.cpp
Source/WebCore/html/canvas/CanvasPath.h
Source/WebCore/html/canvas/CanvasPath.idl
Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp
Source/WebCore/html/canvas/CanvasRenderingContext2D.h
Source/WebCore/html/canvas/CanvasRenderingContext2D.idl
Source/WebCore/inspector/InspectorCanvas.cpp
Source/WebCore/page/RuntimeEnabledFeatures.h
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Base/Setting.js
Source/WebInspectorUI/UserInterface/Models/RecordingAction.js
Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css
Source/WebInspectorUI/UserInterface/Views/RecordingContentView.js
Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.js
Source/WebKit/ChangeLog
Source/WebKit/Shared/WebPreferencesDefinitions.h
Source/WebKit/UIProcess/API/C/WKPreferences.cpp
Source/WebKit/UIProcess/API/C/WKPreferencesRefPrivate.h
Source/WebKit/WebProcess/WebPage/WebInspectorUI.cpp
Source/WebKit/WebProcess/WebPage/WebPage.cpp
Source/WebKitLegacy/mac/ChangeLog
Source/WebKitLegacy/mac/WebView/WebPreferenceKeysPrivate.h
Source/WebKitLegacy/mac/WebView/WebPreferences.mm
Source/WebKitLegacy/mac/WebView/WebPreferencesPrivate.h
Source/WebKitLegacy/mac/WebView/WebView.mm
Tools/ChangeLog
Tools/DumpRenderTree/TestOptions.h
Tools/DumpRenderTree/TestOptions.mm
Tools/DumpRenderTree/mac/DumpRenderTree.mm
Tools/WebKitTestRunner/TestController.cpp
Tools/WebKitTestRunner/TestOptions.h

index 50a8e86492c3a2034d13b9ac3478bda09add1f8c..6c0321ee3b0926fee3b3ba7fa7e6bb7e0fd7f3e6 100644 (file)
@@ -1,3 +1,23 @@
+2017-08-07  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Preview Canvas path when viewing a recording
+        https://bugs.webkit.org/show_bug.cgi?id=174967
+
+        Reviewed by Brian Burg.
+
+        * fast/canvas/2d.currentPoint-expected.txt: Added.
+        * fast/canvas/2d.currentPoint.html: Added.
+        * fast/canvas/2d.getPath.modification-expected.txt: Added.
+        * fast/canvas/2d.getPath.modification.html: Added.
+        * fast/canvas/2d.getPath.newobject-expected.txt: Added.
+        * fast/canvas/2d.getPath.newobject.html: Added.
+        * fast/canvas/2d.setPath-expected.txt: Added.
+        * fast/canvas/2d.setPath.html: Added.
+
+        * inspector/canvas/recording-2d-expected.txt:
+        * inspector/canvas/recording-2d.html:
+        Updated for additional deduplication in InitialState.
+
 2017-08-07  Ryan Haddad  <ryanhaddad@apple.com>
 
         Skip workers/wasm-hashset-many.html and workers/wasm-hashset-many-2.html on El Capitan.
diff --git a/LayoutTests/fast/canvas/2d.currentPoint-expected.txt b/LayoutTests/fast/canvas/2d.currentPoint-expected.txt
new file mode 100644 (file)
index 0000000..c7fe2a5
--- /dev/null
@@ -0,0 +1,31 @@
+The test to ensure that currentX/currentY of Path2D works as expected.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS ctx.currentX is 0
+PASS ctx.currentY is 0
+PASS ctx.currentX is 1
+PASS ctx.currentY is 2
+PASS ctx.currentX is 3
+PASS ctx.currentY is 4
+PASS ctx.currentX is 7
+PASS ctx.currentY is 8
+PASS ctx.currentX is 13
+PASS ctx.currentY is 14
+PASS ctx.currentX is 15
+PASS ctx.currentY is 16
+PASS ctx.currentX is 1
+PASS ctx.currentY is 2
+PASS ctx.currentX is 20
+PASS ctx.currentY is 21
+PASS ctx.currentX is 23
+PASS ctx.currentY is 23
+PASS ctx.currentX is 25
+PASS ctx.currentY is 25
+PASS ctx.currentX is 0
+PASS ctx.currentY is 0
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/canvas/2d.currentPoint.html b/LayoutTests/fast/canvas/2d.currentPoint.html
new file mode 100644 (file)
index 0000000..edb8821
--- /dev/null
@@ -0,0 +1,53 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableInspectorAdditions=true ] -->
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+</head>
+<body>
+<script>
+description("The test to ensure that currentX/currentY of Path2D works as expected.");
+
+var ctx = document.createElement("canvas").getContext("2d");
+
+function shouldHaveCurrentPointEqualTo(x, y) {
+    shouldEvaluateTo("ctx.currentX", x);
+    shouldEvaluateTo("ctx.currentY", y);
+}
+
+shouldHaveCurrentPointEqualTo(0, 0);
+
+ctx.moveTo(1, 2);
+shouldHaveCurrentPointEqualTo(1, 2);
+
+ctx.lineTo(3, 4);
+shouldHaveCurrentPointEqualTo(3, 4);
+
+ctx.quadraticCurveTo(5, 6, 7, 8);
+shouldHaveCurrentPointEqualTo(7, 8);
+
+ctx.bezierCurveTo(9, 10, 11, 12, 13, 14);
+shouldHaveCurrentPointEqualTo(13, 14);
+
+ctx.arcTo(15, 16, 17, 18, 19);
+shouldHaveCurrentPointEqualTo(15, 16);
+
+ctx.closePath();
+shouldHaveCurrentPointEqualTo(1, 2);
+
+ctx.rect(20, 21, 1, 1);
+shouldHaveCurrentPointEqualTo(20, 21);
+
+ctx.arc(22, 23, 1, 0, 2 * Math.PI);
+shouldHaveCurrentPointEqualTo(23, 23);
+
+ctx.ellipse(24, 25, 1, 1, 0, 0, 2 * Math.PI);
+shouldHaveCurrentPointEqualTo(25, 25);
+
+ctx.beginPath();
+shouldHaveCurrentPointEqualTo(0, 0);
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
+
diff --git a/LayoutTests/fast/canvas/2d.getPath.modification-expected.txt b/LayoutTests/fast/canvas/2d.getPath.modification-expected.txt
new file mode 100644 (file)
index 0000000..14e343e
--- /dev/null
@@ -0,0 +1,17 @@
+The test to ensure that modifying the result of getPath doesn't affect the context.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS copiedPath.currentX is 0
+PASS copiedPath.currentY is 0
+PASS newPath.currentX is 1
+PASS newPath.currentY is 1
+PASS modifiedPath.currentX is 2
+PASS modifiedPath.currentY is 2
+PASS ctx1Path.currentX is ctx2Path.currentX
+PASS ctx1Path.currentY is ctx2Path.currentY
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/canvas/2d.getPath.modification.html b/LayoutTests/fast/canvas/2d.getPath.modification.html
new file mode 100644 (file)
index 0000000..c942db3
--- /dev/null
@@ -0,0 +1,40 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableInspectorAdditions=true ] -->
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+</head>
+<body>
+<script>
+description("The test to ensure that modifying the result of getPath doesn't affect the context.");
+
+function shouldHaveCurrentPointEqualTo(path, expected) {
+    shouldEvaluateTo(path + ".currentX", expected[0]);
+    shouldEvaluateTo(path + ".currentY", expected[1]);
+}
+
+var ctx1 = document.createElement("canvas").getContext("2d");
+
+var copiedPath = ctx1.getPath();
+ctx1.moveTo(1, 1);
+shouldHaveCurrentPointEqualTo("copiedPath", [0, 0]);
+
+copiedPath.moveTo(2, 2);
+var newPath = ctx1.getPath();
+shouldHaveCurrentPointEqualTo("newPath", [1, 1]);
+
+ctx1.setPath(copiedPath);
+var modifiedPath = ctx1.getPath();
+shouldHaveCurrentPointEqualTo("modifiedPath", [2, 2]);
+
+var ctx2 = document.createElement("canvas").getContext("2d");
+ctx2.moveTo(2, 2);
+
+var ctx1Path = ctx1.getPath();
+var ctx2Path = ctx2.getPath();
+shouldBe("ctx1Path.currentX", "ctx2Path.currentX");
+shouldBe("ctx1Path.currentY", "ctx2Path.currentY");
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/LayoutTests/fast/canvas/2d.getPath.newobject-expected.txt b/LayoutTests/fast/canvas/2d.getPath.newobject-expected.txt
new file mode 100644 (file)
index 0000000..ec074a5
--- /dev/null
@@ -0,0 +1,12 @@
+The test to ensure that each call to getPath returns a new object.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS path1 is not path2
+PASS path1.currentX is path2.currentX
+PASS path1.currentY is path2.currentY
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/canvas/2d.getPath.newobject.html b/LayoutTests/fast/canvas/2d.getPath.newobject.html
new file mode 100644 (file)
index 0000000..c51f395
--- /dev/null
@@ -0,0 +1,21 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableInspectorAdditions=true ] -->
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+</head>
+<body>
+<script>
+description("The test to ensure that each call to getPath returns a new object.");
+
+var ctx = document.createElement("canvas").getContext("2d");
+var path1 = ctx.getPath();
+var path2 = ctx.getPath();
+
+shouldNotBe("path1", "path2");
+shouldBe("path1.currentX", "path2.currentX");
+shouldBe("path1.currentY", "path2.currentY");
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/LayoutTests/fast/canvas/2d.setPath-expected.txt b/LayoutTests/fast/canvas/2d.setPath-expected.txt
new file mode 100644 (file)
index 0000000..982ba86
--- /dev/null
@@ -0,0 +1,15 @@
+The test to ensure that calling setPath with a Path2D works as expected.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS originalPath.currentX is 0
+PASS originalPath.currentY is 0
+PASS newPathFromPath2D.currentX is 1
+PASS newPathFromPath2D.currentY is 2
+PASS newPathFromEmptyPath2D.currentX is 0
+PASS newPathFromEmptyPath2D.currentY is 0
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/canvas/2d.setPath.html b/LayoutTests/fast/canvas/2d.setPath.html
new file mode 100644 (file)
index 0000000..85e851a
--- /dev/null
@@ -0,0 +1,34 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableInspectorAdditions=true ] -->
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+</head>
+<body>
+<script>
+description("The test to ensure that calling setPath with a Path2D works as expected.");
+
+function shouldHaveCurrentPointEqualTo(path, expected) {
+    shouldEvaluateTo(path + ".currentX", expected[0]);
+    shouldEvaluateTo(path + ".currentY", expected[1]);
+}
+
+var ctx = document.createElement("canvas").getContext("2d");
+var originalPath = ctx.getPath();
+shouldHaveCurrentPointEqualTo("originalPath", [0, 0]);
+
+ctx.beginPath();
+ctx.setPath(new Path2D("M 1 2"));
+var newPathFromPath2D = ctx.getPath();
+shouldHaveCurrentPointEqualTo("newPathFromPath2D", [1, 2]);
+
+ctx.beginPath();
+ctx.moveTo(1, 2);
+ctx.setPath(new Path2D);
+var newPathFromEmptyPath2D = ctx.getPath();
+shouldHaveCurrentPointEqualTo("newPathFromEmptyPath2D", [0, 0]);
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
+
index 90b33c7377a8ad002393fa081b7e74633fa7b681..f36c76dc39be6a829b7edb1dc882fe3c0fb9caa0 100644 (file)
@@ -19,27 +19,30 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
         0
       ],
       "globalAlpha": 1,
-      "globalCompositeOperation": "source-over",
+      "globalCompositeOperation": 0,
       "lineWidth": 1,
-      "lineCap": "butt",
-      "lineJoin": "miter",
+      "lineCap": 1,
+      "lineJoin": 2,
       "miterLimit": 10,
       "shadowOffsetX": 0,
       "shadowOffsetY": 0,
       "shadowBlur": 0,
-      "shadowColor": "rgba(0, 0, 0, 0)",
+      "shadowColor": 3,
       "setLineDash": [
         []
       ],
       "lineDashOffset": 0,
-      "font": "10px sans-serif",
-      "textAlign": "start",
-      "textBaseline": "alphabetic",
-      "direction": "ltr",
-      "strokeStyle": 0,
-      "fillStyle": 0,
+      "font": 4,
+      "textAlign": 5,
+      "textBaseline": 6,
+      "direction": 7,
+      "strokeStyle": 8,
+      "fillStyle": 8,
       "imageSmoothingEnabled": true,
-      "imageSmoothingQuality": "low"
+      "imageSmoothingQuality": 9,
+      "setPath": [
+        10
+      ]
     },
     "content": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAAtJREFUCB1jYEAHAAASAAGAFMrMAAAAAElFTkSuQmCC"
   },
@@ -47,7 +50,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          1,
+          11,
           [
             1,
             2,
@@ -57,19 +60,19 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             0
           ],
           [
-            4,
-            6,
-            7,
-            9,
-            11,
             13,
+            15,
             16,
             18,
-            20
+            20,
+            22,
+            25,
+            27,
+            29
           ]
         ],
         [
-          1,
+          11,
           [
             6,
             7,
@@ -79,97 +82,106 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             1
           ],
           [
-            21,
-            6,
-            22,
-            9,
-            11,
-            13,
-            16,
+            30,
+            15,
+            31,
             18,
-            20
+            20,
+            22,
+            25,
+            27,
+            29
           ]
         ]
       ]
     }
   ],
   "data": [
+    "source-over",
+    "butt",
+    "miter",
+    "rgba(0, 0, 0, 0)",
+    "10px sans-serif",
+    "start",
+    "alphabetic",
+    "ltr",
     "#000000",
-    "arc",
+    "low",
     "",
+    "arc",
     "inspector/canvas/recording-2d.html",
     [
-      2,
-      3,
-      58,
+      10,
+      12,
+      77,
       42
     ],
     "ignoreException",
     [
-      5,
-      3,
-      45,
+      14,
+      12,
+      48,
       10
     ],
     [
-      2,
-      3,
-      58,
+      10,
+      12,
+      77,
       28
     ],
     "f",
     [
-      8,
-      3,
-      378,
+      17,
+      12,
+      399,
       24
     ],
     "performActions",
     [
-      10,
-      3,
-      382,
+      19,
+      12,
+      403,
       6
     ],
     "global code",
     [
-      12,
-      2,
+      21,
+      10,
       1,
       15
     ],
     "evaluateWithScopeExtension",
     "[native code]",
     [
-      14,
-      15,
+      23,
+      24,
       0,
       0
     ],
     "_evaluateOn",
     [
-      17,
-      2,
+      26,
+      10,
       128,
       29
     ],
     "_evaluateAndWrap",
     [
-      19,
-      2,
+      28,
+      10,
       122,
       108
     ],
     [
-      2,
-      3,
-      59,
+      10,
+      12,
+      78,
       42
     ],
     [
-      2,
-      3,
-      59,
+      10,
+      12,
+      78,
       28
     ]
   ]
@@ -192,27 +204,30 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
         0
       ],
       "globalAlpha": 1,
-      "globalCompositeOperation": "source-over",
+      "globalCompositeOperation": 0,
       "lineWidth": 1,
-      "lineCap": "butt",
-      "lineJoin": "miter",
+      "lineCap": 1,
+      "lineJoin": 2,
       "miterLimit": 10,
       "shadowOffsetX": 0,
       "shadowOffsetY": 0,
       "shadowBlur": 0,
-      "shadowColor": "rgba(0, 0, 0, 0)",
+      "shadowColor": 3,
       "setLineDash": [
         []
       ],
       "lineDashOffset": 0,
-      "font": "10px sans-serif",
-      "textAlign": "start",
-      "textBaseline": "alphabetic",
-      "direction": "ltr",
-      "strokeStyle": 0,
-      "fillStyle": 0,
+      "font": 4,
+      "textAlign": 5,
+      "textBaseline": 6,
+      "direction": 7,
+      "strokeStyle": 8,
+      "fillStyle": 8,
       "imageSmoothingEnabled": true,
-      "imageSmoothingQuality": "low"
+      "imageSmoothingQuality": 9,
+      "setPath": [
+        10
+      ]
     },
     "content": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAAtJREFUCB1jYEAHAAASAAGAFMrMAAAAAElFTkSuQmCC"
   },
@@ -220,7 +235,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          1,
+          11,
           [
             1,
             2,
@@ -230,19 +245,19 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             0
           ],
           [
-            4,
-            6,
-            7,
-            9,
-            11,
             13,
+            15,
             16,
             18,
-            20
+            20,
+            22,
+            25,
+            27,
+            29
           ]
         ],
         [
-          1,
+          11,
           [
             6,
             7,
@@ -252,15 +267,15 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             1
           ],
           [
-            21,
-            6,
-            22,
-            9,
-            11,
-            13,
-            16,
+            30,
+            15,
+            31,
             18,
-            20
+            20,
+            22,
+            25,
+            27,
+            29
           ]
         ]
       ]
@@ -268,7 +283,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          23,
+          32,
           [
             1,
             2,
@@ -277,10 +292,10 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             5
           ],
           [
-            24,
-            6,
-            25,
-            9
+            33,
+            15,
+            34,
+            18
           ]
         ]
       ]
@@ -288,11 +303,11 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          26,
+          35,
           [],
           [
-            27,
-            9
+            36,
+            18
           ]
         ]
       ]
@@ -300,7 +315,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          28,
+          37,
           [
             1,
             2,
@@ -310,8 +325,8 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             6
           ],
           [
-            29,
-            9
+            38,
+            18
           ]
         ]
       ]
@@ -319,11 +334,11 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          30,
+          39,
           [],
           [
-            31,
-            9
+            40,
+            18
           ]
         ]
       ]
@@ -331,7 +346,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          32,
+          41,
           [
             1,
             2,
@@ -339,8 +354,8 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             4
           ],
           [
-            33,
-            9
+            42,
+            18
           ]
         ]
       ]
@@ -348,11 +363,11 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          34,
+          43,
           [],
           [
-            35,
-            9
+            44,
+            18
           ]
         ]
       ]
@@ -360,45 +375,45 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          36,
+          45,
           [
-            37
+            46
           ],
           [
-            38,
-            9
+            47,
+            18
           ]
         ],
         [
-          36,
+          45,
           [
-            39
+            48
           ],
           [
-            40,
-            9
+            49,
+            18
           ]
         ],
         [
-          36,
+          45,
           [
-            41,
-            37
+            50,
+            46
           ],
           [
-            42,
-            9
+            51,
+            18
           ]
         ],
         [
-          36,
+          45,
           [
-            43,
-            39
+            52,
+            48
           ],
           [
-            44,
-            9
+            53,
+            18
           ]
         ]
       ]
@@ -406,11 +421,11 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          45,
+          54,
           [],
           [
-            46,
-            9
+            55,
+            18
           ]
         ]
       ]
@@ -418,11 +433,11 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          47,
+          56,
           [],
           [
-            48,
-            9
+            57,
+            18
           ]
         ]
       ]
@@ -430,28 +445,28 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          49,
+          58,
           [
-            50
+            59
           ],
           [
-            51,
-            6,
-            52,
-            9
+            60,
+            15,
+            61,
+            18
           ]
         ],
         [
-          49,
+          58,
           [
             2,
             3
           ],
           [
-            53,
-            6,
-            54,
-            9
+            62,
+            15,
+            63,
+            18
           ]
         ]
       ]
@@ -459,7 +474,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          55,
+          64,
           [
             1,
             2,
@@ -467,10 +482,10 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             4
           ],
           [
-            56,
-            6,
-            57,
-            9
+            65,
+            15,
+            66,
+            18
           ]
         ]
       ]
@@ -478,42 +493,42 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          58,
+          67,
           [
-            59,
-            60
+            68,
+            69
           ],
           [
-            61,
-            6,
-            62,
-            9
+            70,
+            15,
+            71,
+            18
           ]
         ],
         [
-          58,
+          67,
           [
-            63,
-            64
+            72,
+            73
           ],
           [
-            65,
-            6,
-            66,
-            9
+            74,
+            15,
+            75,
+            18
           ]
         ],
         [
-          58,
+          67,
           [
-            67,
-            68
+            76,
+            77
           ],
           [
-            69,
-            6,
-            70,
-            9
+            78,
+            15,
+            79,
+            18
           ]
         ]
       ]
@@ -521,7 +536,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          71,
+          80,
           [
             1,
             2,
@@ -531,10 +546,10 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             6
           ],
           [
-            72,
-            6,
-            73,
-            9
+            81,
+            15,
+            82,
+            18
           ]
         ]
       ]
@@ -542,21 +557,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          74,
+          83,
           [],
           [
-            75,
-            9
+            84,
+            18
           ]
         ],
         [
-          74,
+          83,
           [
-            76
+            85
           ],
           [
-            77,
-            9
+            86,
+            18
           ]
         ]
       ]
@@ -564,24 +579,24 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          78,
+          87,
           [
-            79
+            88
           ],
           [
-            80,
-            9
+            89,
+            18
           ]
         ],
         [
-          78,
+          87,
           [
-            41,
-            79
+            50,
+            88
           ],
           [
-            81,
-            9
+            90,
+            18
           ]
         ]
       ]
@@ -589,99 +604,99 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          82,
+          91,
           [
-            59,
+            68,
             1,
             2
           ],
           [
-            83,
-            6,
-            84,
-            9
+            92,
+            15,
+            93,
+            18
           ]
         ],
         [
-          82,
+          91,
           [
-            63,
+            72,
             3,
             4
           ],
           [
-            85,
-            6,
-            86,
-            9
+            94,
+            15,
+            95,
+            18
           ]
         ],
         [
-          82,
+          91,
           [
-            67,
+            76,
             5,
             6
           ],
           [
-            87,
-            6,
-            88,
-            9
+            96,
+            15,
+            97,
+            18
           ]
         ],
         [
-          82,
+          91,
           [
-            59,
+            68,
             7,
             8,
             9,
             10
           ],
           [
-            89,
-            6,
-            90,
-            9
+            98,
+            15,
+            99,
+            18
           ]
         ],
         [
-          82,
+          91,
           [
-            63,
+            72,
             11,
             12,
             13,
             14
           ],
           [
-            91,
-            6,
-            92,
-            9
+            100,
+            15,
+            101,
+            18
           ]
         ],
         [
-          82,
+          91,
           [
-            67,
+            76,
             15,
             16,
             17,
             18
           ],
           [
-            93,
-            6,
-            94,
-            9
+            102,
+            15,
+            103,
+            18
           ]
         ],
         [
-          82,
+          91,
           [
-            59,
+            68,
             19,
             20,
             21,
@@ -692,16 +707,16 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             26
           ],
           [
-            95,
-            6,
-            96,
-            9
+            104,
+            15,
+            105,
+            18
           ]
         ],
         [
-          82,
+          91,
           [
-            63,
+            72,
             27,
             28,
             29,
@@ -712,16 +727,16 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             34
           ],
           [
-            97,
-            6,
-            98,
-            9
+            106,
+            15,
+            107,
+            18
           ]
         ],
         [
-          82,
+          91,
           [
-            67,
+            76,
             35,
             36,
             37,
@@ -732,10 +747,10 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             42
           ],
           [
-            99,
-            6,
-            100,
-            9
+            108,
+            15,
+            109,
+            18
           ]
         ]
       ]
@@ -743,9 +758,9 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          101,
+          110,
           [
-            59,
+            68,
             1,
             2,
             3,
@@ -754,17 +769,17 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             6,
             7,
             8,
-            2
+            10
           ],
           [
-            102,
-            9
+            111,
+            18
           ]
         ],
         [
-          101,
+          110,
           [
-            59,
+            68,
             9,
             10,
             11,
@@ -773,11 +788,11 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             14,
             15,
             16,
-            76
+            85
           ],
           [
-            103,
-            9
+            112,
+            18
           ]
         ]
       ]
@@ -785,7 +800,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          104,
+          113,
           [
             1,
             2,
@@ -797,14 +812,14 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             0
           ],
           [
-            105,
-            6,
-            106,
-            9
+            114,
+            15,
+            115,
+            18
           ]
         ],
         [
-          104,
+          113,
           [
             8,
             9,
@@ -816,10 +831,10 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             1
           ],
           [
-            107,
-            6,
-            108,
-            9
+            116,
+            15,
+            117,
+            18
           ]
         ]
       ]
@@ -827,45 +842,45 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          109,
+          118,
           [
-            37
+            46
           ],
           [
-            110,
-            9
+            119,
+            18
           ]
         ],
         [
-          109,
+          118,
           [
-            39
+            48
           ],
           [
-            111,
-            9
+            120,
+            18
           ]
         ],
         [
-          109,
+          118,
           [
-            41,
-            37
+            50,
+            46
           ],
           [
-            112,
-            9
+            121,
+            18
           ]
         ],
         [
-          109,
+          118,
           [
-            43,
-            39
+            52,
+            48
           ],
           [
-            113,
-            9
+            122,
+            18
           ]
         ]
       ]
@@ -873,7 +888,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          114,
+          123,
           [
             1,
             2,
@@ -881,8 +896,8 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             4
           ],
           [
-            115,
-            9
+            124,
+            18
           ]
         ]
       ]
@@ -890,51 +905,51 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          116,
+          125,
           [],
           [
-            117,
-            9
+            126,
+            18
           ]
         ],
         [
-          116,
+          125,
           [
-            76
+            85
           ],
           [
-            118,
-            9
+            127,
+            18
           ]
         ],
         [
-          116,
+          125,
           [
-            120
+            129
           ],
           [
-            121,
-            9
+            130,
+            18
           ]
         ],
         [
-          116,
+          125,
           [
-            123
+            132
           ],
           [
-            124,
-            9
+            133,
+            18
           ]
         ],
         [
-          116,
+          125,
           [
-            128
+            137
           ],
           [
-            129,
-            9
+            138,
+            18
           ]
         ]
       ]
@@ -942,28 +957,28 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          130,
+          139,
           [
-            60,
+            69,
             1,
             2
           ],
           [
-            131,
-            9
+            140,
+            18
           ]
         ],
         [
-          130,
+          139,
           [
-            64,
+            73,
             3,
             4,
             5
           ],
           [
-            132,
-            9
+            141,
+            18
           ]
         ]
       ]
@@ -971,21 +986,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          133,
+          142,
           [],
           [
-            134,
-            9
+            143,
+            18
           ]
         ],
         [
-          133,
+          142,
           [
-            76
+            85
           ],
           [
-            135,
-            9
+            144,
+            18
           ]
         ]
       ]
@@ -993,7 +1008,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          136,
+          145,
           [
             1,
             2,
@@ -1001,10 +1016,10 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             4
           ],
           [
-            137,
-            6,
-            138,
-            9
+            146,
+            15,
+            147,
+            18
           ]
         ]
       ]
@@ -1012,11 +1027,11 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          139,
+          148,
           [],
           [
-            140,
-            9
+            149,
+            18
           ]
         ]
       ]
@@ -1024,11 +1039,11 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          141,
+          150,
           [],
           [
-            142,
-            9
+            151,
+            18
           ]
         ]
       ]
@@ -1036,21 +1051,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          143,
+          152,
           [],
           [
-            144,
-            9
+            153,
+            18
           ]
         ],
         [
-          143,
+          152,
           [
             0
           ],
           [
-            145,
-            9
+            154,
+            18
           ]
         ]
       ]
@@ -1058,21 +1073,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          146,
+          155,
           [],
           [
-            147,
-            9
+            156,
+            18
           ]
         ],
         [
-          146,
+          155,
           [
-            76
+            85
           ],
           [
-            148,
-            9
+            157,
+            18
           ]
         ]
       ]
@@ -1080,21 +1095,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          149,
+          158,
           [],
           [
-            150,
-            9
+            159,
+            18
           ]
         ],
         [
-          149,
+          158,
           [
             1
           ],
           [
-            151,
-            9
+            160,
+            18
           ]
         ]
       ]
@@ -1102,21 +1117,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          152,
+          161,
           [],
           [
-            153,
-            9
+            162,
+            18
           ]
         ],
         [
-          152,
+          161,
           [
-            154
+            9
           ],
           [
-            155,
-            9
+            163,
+            18
           ]
         ]
       ]
@@ -1124,53 +1139,53 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          156,
+          164,
           [
-            41,
+            50,
             5,
             6,
-            37
+            46
           ],
           [
-            157,
-            9
+            165,
+            18
           ]
         ],
         [
-          156,
+          164,
           [
-            43,
+            52,
             7,
             8,
-            39
+            48
           ],
           [
-            158,
-            9
+            166,
+            18
           ]
         ],
         [
-          156,
+          164,
           [
             9,
             10,
-            37
+            46
           ],
           [
-            159,
-            9
+            167,
+            18
           ]
         ],
         [
-          156,
+          164,
           [
             11,
             12,
-            39
+            48
           ],
           [
-            160,
-            9
+            168,
+            18
           ]
         ]
       ]
@@ -1178,26 +1193,26 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          161,
+          169,
           [
-            41,
+            50,
             3,
             4
           ],
           [
-            162,
-            9
+            170,
+            18
           ]
         ],
         [
-          161,
+          169,
           [
             5,
             6
           ],
           [
-            163,
-            9
+            171,
+            18
           ]
         ]
       ]
@@ -1205,21 +1220,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          164,
+          172,
           [],
           [
-            165,
-            9
+            173,
+            18
           ]
         ],
         [
-          164,
+          172,
           [
-            76
+            85
           ],
           [
-            166,
-            9
+            174,
+            18
           ]
         ]
       ]
@@ -1227,21 +1242,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          167,
+          175,
           [],
           [
-            168,
-            9
+            176,
+            18
           ]
         ],
         [
-          167,
+          175,
           [
             1
           ],
           [
-            169,
-            9
+            177,
+            18
           ]
         ]
       ]
@@ -1249,21 +1264,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          170,
+          178,
           [],
           [
-            171,
-            9
+            179,
+            18
           ]
         ],
         [
-          170,
+          178,
           [
-            76
+            85
           ],
           [
-            172,
-            9
+            180,
+            18
           ]
         ]
       ]
@@ -1271,14 +1286,14 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          173,
+          181,
           [
             1,
             2
           ],
           [
-            174,
-            9
+            182,
+            18
           ]
         ]
       ]
@@ -1286,21 +1301,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          175,
+          183,
           [],
           [
-            176,
-            9
+            184,
+            18
           ]
         ],
         [
-          175,
+          183,
           [
             1
           ],
           [
-            177,
-            9
+            185,
+            18
           ]
         ]
       ]
@@ -1308,13 +1323,13 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          178,
+          186,
           [
-            76
+            85
           ],
           [
-            179,
-            9
+            187,
+            18
           ]
         ]
       ]
@@ -1322,21 +1337,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          180,
+          188,
           [],
           [
-            181,
-            9
+            189,
+            18
           ]
         ],
         [
-          180,
+          188,
           [
             1
           ],
           [
-            182,
-            9
+            190,
+            18
           ]
         ]
       ]
@@ -1344,14 +1359,14 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          183,
+          191,
           [
             1,
             2
           ],
           [
-            184,
-            9
+            192,
+            18
           ]
         ]
       ]
@@ -1359,21 +1374,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          185,
+          193,
           [
-            50,
+            59,
             5,
             6
           ],
           [
-            186,
-            9
+            194,
+            18
           ]
         ],
         [
-          185,
+          193,
           [
-            187,
+            195,
             7,
             8,
             9,
@@ -1382,8 +1397,8 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             12
           ],
           [
-            188,
-            9
+            196,
+            18
           ]
         ]
       ]
@@ -1391,7 +1406,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          189,
+          197,
           [
             1,
             2,
@@ -1399,8 +1414,8 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             4
           ],
           [
-            190,
-            9
+            198,
+            18
           ]
         ]
       ]
@@ -1408,7 +1423,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          191,
+          199,
           [
             1,
             2,
@@ -1416,8 +1431,8 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             4
           ],
           [
-            192,
-            9
+            200,
+            18
           ]
         ]
       ]
@@ -1425,11 +1440,11 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          193,
+          201,
           [],
           [
-            194,
-            9
+            202,
+            18
           ]
         ]
       ]
@@ -1437,11 +1452,11 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          195,
+          203,
           [],
           [
-            196,
-            9
+            204,
+            18
           ]
         ]
       ]
@@ -1449,13 +1464,13 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          197,
+          205,
           [
             1
           ],
           [
-            198,
-            9
+            206,
+            18
           ]
         ]
       ]
@@ -1463,11 +1478,11 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          199,
+          207,
           [],
           [
-            200,
-            9
+            208,
+            18
           ]
         ]
       ]
@@ -1475,14 +1490,14 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          201,
+          209,
           [
             1,
             2
           ],
           [
-            202,
-            9
+            210,
+            18
           ]
         ]
       ]
@@ -1490,23 +1505,23 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          203,
+          211,
           [
             null
           ],
           [
-            204,
-            9
+            212,
+            18
           ]
         ],
         [
-          203,
+          211,
           [
             1
           ],
           [
-            205,
-            9
+            213,
+            18
           ]
         ]
       ]
@@ -1514,23 +1529,23 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          206,
+          214,
           [
-            207
+            215
           ],
           [
-            208,
-            9
+            216,
+            18
           ]
         ],
         [
-          206,
+          214,
           [
-            76
+            85
           ],
           [
-            209,
-            9
+            217,
+            18
           ]
         ]
       ]
@@ -1538,50 +1553,50 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          210,
+          218,
           [
-            60
+            69
           ],
           [
-            211,
-            9
+            219,
+            18
           ]
         ],
         [
-          210,
+          218,
           [
-            64,
+            73,
             1
           ],
           [
-            212,
-            9
+            220,
+            18
           ]
         ],
         [
-          210,
+          218,
           [
             2,
             1
           ],
           [
-            213,
-            9
+            221,
+            18
           ]
         ],
         [
-          210,
+          218,
           [
             3,
             4
           ],
           [
-            214,
-            9
+            222,
+            18
           ]
         ],
         [
-          210,
+          218,
           [
             5,
             6,
@@ -1589,12 +1604,12 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             8
           ],
           [
-            215,
-            9
+            223,
+            18
           ]
         ],
         [
-          210,
+          218,
           [
             9,
             10,
@@ -1603,8 +1618,8 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             13
           ],
           [
-            216,
-            9
+            224,
+            18
           ]
         ]
       ]
@@ -1612,23 +1627,23 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          217,
+          225,
           [
-            207
+            215
           ],
           [
-            218,
-            9
+            226,
+            18
           ]
         ],
         [
-          217,
+          225,
           [
-            76
+            85
           ],
           [
-            219,
-            9
+            227,
+            18
           ]
         ]
       ]
@@ -1636,7 +1651,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          220,
+          228,
           [
             [
               1,
@@ -1644,8 +1659,8 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             ]
           ],
           [
-            221,
-            9
+            229,
+            18
           ]
         ]
       ]
@@ -1653,23 +1668,23 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          222,
+          230,
           [
-            207
+            215
           ],
           [
-            223,
-            9
+            231,
+            18
           ]
         ],
         [
-          222,
+          230,
           [
-            76
+            85
           ],
           [
-            224,
-            9
+            232,
+            18
           ]
         ]
       ]
@@ -1677,23 +1692,23 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          225,
+          233,
           [
             null
           ],
           [
-            226,
-            9
+            234,
+            18
           ]
         ],
         [
-          225,
+          233,
           [
             1
           ],
           [
-            227,
-            9
+            235,
+            18
           ]
         ]
       ]
@@ -1701,23 +1716,23 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          228,
+          236,
           [
             null
           ],
           [
-            229,
-            9
+            237,
+            18
           ]
         ],
         [
-          228,
+          236,
           [
             1
           ],
           [
-            230,
-            9
+            238,
+            18
           ]
         ]
       ]
@@ -1725,34 +1740,34 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          231,
+          239,
           [
             1,
             2,
             3,
-            232
+            240
           ],
           [
-            233,
-            9
+            241,
+            18
           ]
         ],
         [
-          231,
+          239,
           [
             4,
             5,
             6,
-            76,
+            85,
             7
           ],
           [
-            234,
-            9
+            242,
+            18
           ]
         ],
         [
-          231,
+          239,
           [
             8,
             9,
@@ -1761,12 +1776,12 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             1
           ],
           [
-            235,
-            9
+            243,
+            18
           ]
         ],
         [
-          231,
+          239,
           [
             12,
             13,
@@ -1775,12 +1790,12 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             16
           ],
           [
-            236,
-            9
+            244,
+            18
           ]
         ],
         [
-          231,
+          239,
           [
             17,
             18,
@@ -1791,12 +1806,12 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             23
           ],
           [
-            237,
-            9
+            245,
+            18
           ]
         ],
         [
-          231,
+          239,
           [
             24,
             25,
@@ -1808,8 +1823,8 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             31
           ],
           [
-            238,
-            9
+            246,
+            18
           ]
         ]
       ]
@@ -1817,50 +1832,50 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          239,
+          247,
           [
-            60
+            69
           ],
           [
-            240,
-            9
+            248,
+            18
           ]
         ],
         [
-          239,
+          247,
           [
-            64,
+            73,
             1
           ],
           [
-            241,
-            9
+            249,
+            18
           ]
         ],
         [
-          239,
+          247,
           [
             2,
             1
           ],
           [
-            242,
-            9
+            250,
+            18
           ]
         ],
         [
-          239,
+          247,
           [
             3,
             4
           ],
           [
-            243,
-            9
+            251,
+            18
           ]
         ],
         [
-          239,
+          247,
           [
             5,
             6,
@@ -1868,12 +1883,12 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             8
           ],
           [
-            244,
-            9
+            252,
+            18
           ]
         ],
         [
-          239,
+          247,
           [
             9,
             10,
@@ -1882,8 +1897,8 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             13
           ],
           [
-            245,
-            9
+            253,
+            18
           ]
         ]
       ]
@@ -1891,7 +1906,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          246,
+          254,
           [
             1,
             2,
@@ -1901,12 +1916,12 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             6
           ],
           [
-            247,
-            9
+            255,
+            18
           ]
         ],
         [
-          246,
+          254,
           [
             [
               1,
@@ -1918,14 +1933,14 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             ]
           ],
           [
-            248,
-            6,
-            249,
-            9
+            256,
+            15,
+            257,
+            18
           ]
         ],
         [
-          246,
+          254,
           [
             [
               7,
@@ -1937,10 +1952,10 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             ]
           ],
           [
-            250,
-            6,
-            251,
-            9
+            258,
+            15,
+            259,
+            18
           ]
         ]
       ]
@@ -1948,21 +1963,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          252,
+          260,
           [],
           [
-            253,
-            9
+            261,
+            18
           ]
         ],
         [
-          252,
+          260,
           [
             1
           ],
           [
-            254,
-            9
+            262,
+            18
           ]
         ]
       ]
@@ -1970,21 +1985,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          255,
+          263,
           [],
           [
-            256,
-            9
+            264,
+            18
           ]
         ],
         [
-          255,
+          263,
           [
-            76
+            85
           ],
           [
-            257,
-            9
+            265,
+            18
           ]
         ]
       ]
@@ -1992,21 +2007,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          258,
+          266,
           [],
           [
-            259,
-            9
+            267,
+            18
           ]
         ],
         [
-          258,
+          266,
           [
             1
           ],
           [
-            260,
-            9
+            268,
+            18
           ]
         ]
       ]
@@ -2014,21 +2029,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          261,
+          269,
           [],
           [
-            262,
-            9
+            270,
+            18
           ]
         ],
         [
-          261,
+          269,
           [
             1
           ],
           [
-            263,
-            9
+            271,
+            18
           ]
         ]
       ]
@@ -2036,21 +2051,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          264,
+          272,
           [],
           [
-            265,
-            9
+            273,
+            18
           ]
         ],
         [
-          264,
+          272,
           [
-            41
+            50
           ],
           [
-            266,
-            9
+            274,
+            18
           ]
         ]
       ]
@@ -2058,7 +2073,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          267,
+          275,
           [
             1,
             2,
@@ -2066,8 +2081,8 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             4
           ],
           [
-            268,
-            9
+            276,
+            18
           ]
         ]
       ]
@@ -2075,51 +2090,51 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          269,
+          277,
           [],
           [
-            270,
-            9
+            278,
+            18
           ]
         ],
         [
-          269,
+          277,
           [
-            76
+            85
           ],
           [
-            271,
-            9
+            279,
+            18
           ]
         ],
         [
-          269,
+          277,
           [
-            120
+            129
           ],
           [
-            272,
-            9
+            280,
+            18
           ]
         ],
         [
-          269,
+          277,
           [
-            123
+            132
           ],
           [
-            273,
-            9
+            281,
+            18
           ]
         ],
         [
-          269,
+          277,
           [
-            128
+            137
           ],
           [
-            274,
-            9
+            282,
+            18
           ]
         ]
       ]
@@ -2127,28 +2142,28 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          275,
+          283,
           [
-            60,
+            69,
             1,
             2
           ],
           [
-            276,
-            9
+            284,
+            18
           ]
         ],
         [
-          275,
+          283,
           [
-            64,
+            73,
             3,
             4,
             5
           ],
           [
-            277,
-            9
+            285,
+            18
           ]
         ]
       ]
@@ -2156,21 +2171,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          278,
+          286,
           [],
           [
-            279,
-            9
+            287,
+            18
           ]
         ],
         [
-          278,
+          286,
           [
-            76
+            85
           ],
           [
-            280,
-            9
+            288,
+            18
           ]
         ]
       ]
@@ -2178,21 +2193,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          281,
+          289,
           [],
           [
-            282,
-            9
+            290,
+            18
           ]
         ],
         [
-          281,
+          289,
           [
-            76
+            85
           ],
           [
-            283,
-            9
+            291,
+            18
           ]
         ]
       ]
@@ -2200,7 +2215,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          284,
+          292,
           [
             1,
             2,
@@ -2210,8 +2225,8 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             6
           ],
           [
-            285,
-            9
+            293,
+            18
           ]
         ]
       ]
@@ -2219,14 +2234,14 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          286,
+          294,
           [
             1,
             2
           ],
           [
-            287,
-            9
+            295,
+            18
           ]
         ]
       ]
@@ -2234,11 +2249,11 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          288,
+          296,
           [],
           [
-            289,
-            9
+            297,
+            18
           ]
         ]
       ]
@@ -2246,7 +2261,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          290,
+          298,
           [
             1,
             2,
@@ -2254,10 +2269,10 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             4
           ],
           [
-            291,
-            6,
-            292,
-            9
+            299,
+            15,
+            300,
+            18
           ]
         ]
       ]
@@ -2265,21 +2280,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          293,
+          301,
           [],
           [
-            294,
-            9
+            302,
+            18
           ]
         ],
         [
-          293,
+          301,
           [
             1
           ],
           [
-            295,
-            9
+            303,
+            18
           ]
         ]
       ]
@@ -2287,15 +2302,15 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          296,
+          304,
           [],
           [
-            297,
-            9
+            305,
+            18
           ]
         ],
         [
-          296,
+          304,
           [
             [
               1,
@@ -2303,8 +2318,8 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             ]
           ],
           [
-            298,
-            9
+            306,
+            18
           ]
         ]
       ]
@@ -2312,21 +2327,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          299,
+          307,
           [],
           [
-            300,
-            9
+            308,
+            18
           ]
         ],
         [
-          299,
+          307,
           [
             1
           ],
           [
-            301,
-            9
+            309,
+            18
           ]
         ]
       ]
@@ -2334,21 +2349,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          302,
+          310,
           [
-            50,
+            59,
             5,
             6
           ],
           [
-            303,
-            9
+            311,
+            18
           ]
         ],
         [
-          302,
+          310,
           [
-            187,
+            195,
             7,
             8,
             9,
@@ -2357,181 +2372,190 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             12
           ],
           [
-            304,
-            9
+            312,
+            18
           ]
         ]
       ]
     }
   ],
   "data": [
+    "source-over",
+    "butt",
+    "miter",
+    "rgba(0, 0, 0, 0)",
+    "10px sans-serif",
+    "start",
+    "alphabetic",
+    "ltr",
     "#000000",
-    "arc",
+    "low",
     "",
+    "arc",
     "inspector/canvas/recording-2d.html",
     [
-      2,
-      3,
-      58,
+      10,
+      12,
+      77,
       42
     ],
     "ignoreException",
     [
-      5,
-      3,
-      45,
+      14,
+      12,
+      48,
       10
     ],
     [
-      2,
-      3,
-      58,
+      10,
+      12,
+      77,
       28
     ],
     "f",
     [
-      8,
-      3,
-      378,
+      17,
+      12,
+      399,
       24
     ],
     "performActions",
     [
-      10,
-      3,
-      382,
+      19,
+      12,
+      403,
       6
     ],
     "global code",
     [
-      12,
-      2,
+      21,
+      10,
       1,
       15
     ],
     "evaluateWithScopeExtension",
     "[native code]",
     [
-      14,
-      15,
+      23,
+      24,
       0,
       0
     ],
     "_evaluateOn",
     [
-      17,
-      2,
+      26,
+      10,
       128,
       29
     ],
     "_evaluateAndWrap",
     [
-      19,
-      2,
+      28,
+      10,
       122,
       108
     ],
     [
-      2,
-      3,
-      59,
+      10,
+      12,
+      78,
       42
     ],
     [
-      2,
-      3,
-      59,
+      10,
+      12,
+      78,
       28
     ],
     "arcTo",
     [
-      2,
-      3,
-      62,
+      10,
+      12,
+      81,
       44
     ],
     [
-      2,
-      3,
-      62,
+      10,
+      12,
+      81,
       28
     ],
     "beginPath",
     [
-      2,
-      3,
-      65,
+      10,
+      12,
+      84,
       26
     ],
     "bezierCurveTo",
     [
-      2,
-      3,
-      68,
+      10,
+      12,
+      87,
       30
     ],
     "canvas",
     [
-      2,
-      3,
-      71,
+      10,
+      12,
+      90,
       16
     ],
     "clearRect",
     [
-      2,
-      3,
-      74,
+      10,
+      12,
+      93,
       26
     ],
     "clearShadow",
     [
-      2,
-      3,
-      77,
+      10,
+      12,
+      96,
       28
     ],
     "clip",
     "nonzero",
     [
-      2,
-      3,
-      80,
+      10,
+      12,
+      99,
       21
     ],
     "evenodd",
     [
-      2,
-      3,
-      81,
+      10,
+      12,
+      100,
       21
     ],
     "M1 2",
     [
-      2,
-      3,
-      82,
+      10,
+      12,
+      101,
       21
     ],
     "M3 4",
     [
-      2,
-      3,
-      83,
+      10,
+      12,
+      102,
       21
     ],
     "closePath",
     [
-      2,
-      3,
-      86,
+      10,
+      12,
+      105,
       26
     ],
     "commit",
     [
-      2,
-      3,
-      89,
+      10,
+      12,
+      108,
       23
     ],
     "createImageData",
@@ -2558,321 +2582,321 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
       4
     ],
     [
-      2,
-      3,
-      92,
+      10,
+      12,
+      111,
       54
     ],
     [
-      2,
-      3,
-      92,
+      10,
+      12,
+      111,
       28
     ],
     [
-      2,
-      3,
-      93,
+      10,
+      12,
+      112,
       54
     ],
     [
-      2,
-      3,
-      93,
+      10,
+      12,
+      112,
       28
     ],
     "createLinearGradient",
     [
-      2,
-      3,
-      96,
+      10,
+      12,
+      115,
       59
     ],
     [
-      2,
-      3,
-      96,
+      10,
+      12,
+      115,
       28
     ],
     "createPattern",
     "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABNJREFUCB1j/M/AAEQMDEwgAgQAHxcCAmtAm/sAAAAASUVORK5CYII=",
     "testA",
     [
-      2,
-      3,
-      99,
+      10,
+      12,
+      118,
       52
     ],
     [
-      2,
-      3,
-      99,
+      10,
+      12,
+      118,
       28
     ],
     "data:,",
     "testB",
     [
-      2,
-      3,
-      100,
+      10,
+      12,
+      119,
       52
     ],
     [
-      2,
-      3,
-      100,
+      10,
+      12,
+      119,
       28
     ],
     "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAAtJREFUCB1jYEAHAAASAAGAFMrMAAAAAElFTkSuQmCC",
     "testC",
     [
-      2,
-      3,
-      101,
+      10,
+      12,
+      120,
       52
     ],
     [
-      2,
-      3,
-      101,
+      10,
+      12,
+      120,
       28
     ],
     "createRadialGradient",
     [
-      2,
-      3,
-      104,
+      10,
+      12,
+      123,
       59
     ],
     [
-      2,
-      3,
-      104,
+      10,
+      12,
+      123,
       28
     ],
     "direction",
     [
-      2,
-      3,
-      107,
+      10,
+      12,
+      126,
       16
     ],
     "test",
     [
-      2,
-      3,
-      108,
+      10,
+      12,
+      127,
       16
     ],
     "drawFocusIfNeeded",
     "element",
     [
-      2,
-      3,
-      111,
+      10,
+      12,
+      130,
       34
     ],
     [
-      2,
-      3,
-      112,
+      10,
+      12,
+      131,
       34
     ],
     "drawImage",
     [
-      2,
-      3,
-      115,
+      10,
+      12,
+      134,
       48
     ],
     [
-      2,
-      3,
-      115,
+      10,
+      12,
+      134,
       28
     ],
     [
-      2,
-      3,
-      116,
+      10,
+      12,
+      135,
       48
     ],
     [
-      2,
-      3,
-      116,
+      10,
+      12,
+      135,
       28
     ],
     [
-      2,
-      3,
-      117,
+      10,
+      12,
+      136,
       48
     ],
     [
-      2,
-      3,
-      117,
+      10,
+      12,
+      136,
       28
     ],
     [
-      2,
-      3,
-      118,
+      10,
+      12,
+      137,
       48
     ],
     [
-      2,
-      3,
-      118,
+      10,
+      12,
+      137,
       28
     ],
     [
-      2,
-      3,
-      119,
+      10,
+      12,
+      138,
       48
     ],
     [
-      2,
-      3,
-      119,
+      10,
+      12,
+      138,
       28
     ],
     [
-      2,
-      3,
-      120,
+      10,
+      12,
+      139,
       48
     ],
     [
-      2,
-      3,
-      120,
+      10,
+      12,
+      139,
       28
     ],
     [
-      2,
-      3,
-      121,
+      10,
+      12,
+      140,
       48
     ],
     [
-      2,
-      3,
-      121,
+      10,
+      12,
+      140,
       28
     ],
     [
-      2,
-      3,
-      122,
+      10,
+      12,
+      141,
       48
     ],
     [
-      2,
-      3,
-      122,
+      10,
+      12,
+      141,
       28
     ],
     [
-      2,
-      3,
-      123,
+      10,
+      12,
+      142,
       48
     ],
     [
-      2,
-      3,
-      123,
+      10,
+      12,
+      142,
       28
     ],
     "drawImageFromRect",
     [
-      2,
-      3,
-      126,
+      10,
+      12,
+      145,
       34
     ],
     [
-      2,
-      3,
-      127,
+      10,
+      12,
+      146,
       34
     ],
     "ellipse",
     [
-      2,
-      3,
-      130,
+      10,
+      12,
+      149,
       46
     ],
     [
-      2,
-      3,
-      130,
+      10,
+      12,
+      149,
       28
     ],
     [
-      2,
-      3,
-      131,
+      10,
+      12,
+      150,
       46
     ],
     [
-      2,
-      3,
-      131,
+      10,
+      12,
+      150,
       28
     ],
     "fill",
     [
-      2,
-      3,
-      134,
+      10,
+      12,
+      153,
       21
     ],
     [
-      2,
-      3,
-      135,
+      10,
+      12,
+      154,
       21
     ],
     [
-      2,
-      3,
-      136,
+      10,
+      12,
+      155,
       21
     ],
     [
-      2,
-      3,
-      137,
+      10,
+      12,
+      156,
       21
     ],
     "fillRect",
     [
-      2,
-      3,
-      140,
+      10,
+      12,
+      159,
       25
     ],
     "fillStyle",
     [
-      2,
-      3,
-      143,
+      10,
+      12,
+      162,
       16
     ],
     [
-      2,
-      3,
-      144,
+      10,
+      12,
+      163,
       16
     ],
     "linear-gradient",
     [
-      119,
+      128,
       [
         1,
         2,
@@ -2882,14 +2906,14 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
       []
     ],
     [
-      2,
-      3,
-      145,
+      10,
+      12,
+      164,
       16
     ],
     "radial-gradient",
     [
-      122,
+      131,
       [
         1,
         2,
@@ -2901,260 +2925,259 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
       []
     ],
     [
-      2,
-      3,
-      146,
+      10,
+      12,
+      165,
       16
     ],
     "pattern",
     "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABNJREFUCB1j/M/AAEQMDEwgAgQAHxcCAmtAm/sAAAAASUVORK5CYII=",
     "no-repeat",
     [
-      125,
-      126,
-      127
+      134,
+      135,
+      136
     ],
     [
-      2,
-      3,
-      147,
+      10,
+      12,
+      166,
       16
     ],
     "fillText",
     [
-      2,
-      3,
-      150,
+      10,
+      12,
+      169,
       25
     ],
     [
-      2,
-      3,
-      151,
+      10,
+      12,
+      170,
       25
     ],
     "font",
     [
-      2,
-      3,
-      154,
+      10,
+      12,
+      173,
       16
     ],
     [
-      2,
-      3,
-      155,
+      10,
+      12,
+      174,
       16
     ],
     "getImageData",
     [
-      2,
-      3,
-      158,
+      10,
+      12,
+      177,
       51
     ],
     [
-      2,
-      3,
-      158,
+      10,
+      12,
+      177,
       28
     ],
     "getLineDash",
     [
-      2,
-      3,
-      161,
+      10,
+      12,
+      180,
       28
     ],
     "getTransform",
     [
-      2,
-      3,
-      164,
+      10,
+      12,
+      183,
       29
     ],
     "globalAlpha",
     [
-      2,
-      3,
-      167,
+      10,
+      12,
+      186,
       16
     ],
     [
-      2,
-      3,
-      168,
+      10,
+      12,
+      187,
       16
     ],
     "globalCompositeOperation",
     [
-      2,
-      3,
-      171,
+      10,
+      12,
+      190,
       16
     ],
     [
-      2,
-      3,
-      172,
+      10,
+      12,
+      191,
       16
     ],
     "imageSmoothingEnabled",
     [
-      2,
-      3,
-      175,
+      10,
+      12,
+      194,
       16
     ],
     [
-      2,
-      3,
-      176,
+      10,
+      12,
+      195,
       16
     ],
     "imageSmoothingQuality",
     [
-      2,
-      3,
-      179,
+      10,
+      12,
+      198,
       16
     ],
-    "low",
     [
-      2,
-      3,
-      180,
+      10,
+      12,
+      199,
       16
     ],
     "isPointInPath",
     [
-      2,
-      3,
-      183,
+      10,
+      12,
+      202,
       30
     ],
     [
-      2,
-      3,
-      184,
+      10,
+      12,
+      203,
       30
     ],
     [
-      2,
-      3,
-      185,
+      10,
+      12,
+      204,
       30
     ],
     [
-      2,
-      3,
-      186,
+      10,
+      12,
+      205,
       30
     ],
     "isPointInStroke",
     [
-      2,
-      3,
-      189,
+      10,
+      12,
+      208,
       32
     ],
     [
-      2,
-      3,
-      190,
+      10,
+      12,
+      209,
       32
     ],
     "lineCap",
     [
-      2,
-      3,
-      193,
+      10,
+      12,
+      212,
       16
     ],
     [
-      2,
-      3,
-      194,
+      10,
+      12,
+      213,
       16
     ],
     "lineDashOffset",
     [
-      2,
-      3,
-      197,
+      10,
+      12,
+      216,
       16
     ],
     [
-      2,
-      3,
-      198,
+      10,
+      12,
+      217,
       16
     ],
     "lineJoin",
     [
-      2,
-      3,
-      201,
+      10,
+      12,
+      220,
       16
     ],
     [
-      2,
-      3,
-      202,
+      10,
+      12,
+      221,
       16
     ],
     "lineTo",
     [
-      2,
-      3,
-      205,
+      10,
+      12,
+      224,
       23
     ],
     "lineWidth",
     [
-      2,
-      3,
-      208,
+      10,
+      12,
+      227,
       16
     ],
     [
-      2,
-      3,
-      209,
+      10,
+      12,
+      228,
       16
     ],
     "measureText",
     [
-      2,
-      3,
-      212,
+      10,
+      12,
+      231,
       28
     ],
     "miterLimit",
     [
-      2,
-      3,
-      215,
+      10,
+      12,
+      234,
       16
     ],
     [
-      2,
-      3,
-      216,
+      10,
+      12,
+      235,
       16
     ],
     "moveTo",
     [
-      2,
-      3,
-      219,
+      10,
+      12,
+      238,
       23
     ],
     "putImageData",
     [
-      2,
-      3,
-      222,
+      10,
+      12,
+      241,
       29
     ],
     [
@@ -3188,515 +3211,515 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
       3
     ],
     [
-      2,
-      3,
-      223,
+      10,
+      12,
+      242,
       29
     ],
     "quadraticCurveTo",
     [
-      2,
-      3,
-      226,
+      10,
+      12,
+      245,
       33
     ],
     "rect",
     [
-      2,
-      3,
-      229,
+      10,
+      12,
+      248,
       21
     ],
     "resetTransform",
     [
-      2,
-      3,
-      232,
+      10,
+      12,
+      251,
       31
     ],
     "restore",
     [
-      2,
-      3,
-      235,
+      10,
+      12,
+      254,
       24
     ],
     "rotate",
     [
-      2,
-      3,
-      238,
+      10,
+      12,
+      259,
       23
     ],
     "save",
     [
-      2,
-      3,
-      241,
+      10,
+      12,
+      262,
       21
     ],
     "scale",
     [
-      2,
-      3,
-      244,
+      10,
+      12,
+      265,
       22
     ],
     "setAlpha",
     [
-      2,
-      3,
-      247,
+      10,
+      12,
+      268,
       25
     ],
     [
-      2,
-      3,
-      248,
+      10,
+      12,
+      269,
       25
     ],
     "setCompositeOperation",
     "undefined",
     [
-      2,
-      3,
-      251,
+      10,
+      12,
+      272,
       38
     ],
     [
-      2,
-      3,
-      252,
+      10,
+      12,
+      273,
       38
     ],
     "setFillColor",
     [
-      2,
-      3,
-      255,
+      10,
+      12,
+      276,
       29
     ],
     [
-      2,
-      3,
-      256,
+      10,
+      12,
+      277,
       29
     ],
     [
-      2,
-      3,
-      257,
+      10,
+      12,
+      278,
       29
     ],
     [
-      2,
-      3,
-      258,
+      10,
+      12,
+      279,
       29
     ],
     [
-      2,
-      3,
-      259,
+      10,
+      12,
+      280,
       29
     ],
     [
-      2,
-      3,
-      260,
+      10,
+      12,
+      281,
       29
     ],
     "setLineCap",
     [
-      2,
-      3,
-      263,
+      10,
+      12,
+      284,
       27
     ],
     [
-      2,
-      3,
-      264,
+      10,
+      12,
+      285,
       27
     ],
     "setLineDash",
     [
-      2,
-      3,
-      267,
+      10,
+      12,
+      288,
       28
     ],
     "setLineJoin",
     [
-      2,
-      3,
-      270,
+      10,
+      12,
+      291,
       28
     ],
     [
-      2,
-      3,
-      271,
+      10,
+      12,
+      292,
       28
     ],
     "setLineWidth",
     [
-      2,
-      3,
-      274,
+      10,
+      12,
+      295,
       29
     ],
     [
-      2,
-      3,
-      275,
+      10,
+      12,
+      296,
       29
     ],
     "setMiterLimit",
     [
-      2,
-      3,
-      278,
+      10,
+      12,
+      299,
       30
     ],
     [
-      2,
-      3,
-      279,
+      10,
+      12,
+      300,
       30
     ],
     "setShadow",
     "",
     [
-      2,
-      3,
-      282,
+      10,
+      12,
+      303,
       26
     ],
     [
-      2,
-      3,
-      283,
+      10,
+      12,
+      304,
       26
     ],
     [
-      2,
-      3,
-      284,
+      10,
+      12,
+      305,
       26
     ],
-    [
-      2,
-      3,
-      285,
+    [
+      10,
+      12,
+      306,
       26
     ],
     [
-      2,
-      3,
-      286,
+      10,
+      12,
+      307,
       26
     ],
     [
-      2,
-      3,
-      287,
+      10,
+      12,
+      308,
       26
     ],
     "setStrokeColor",
     [
-      2,
-      3,
-      290,
+      10,
+      12,
+      311,
       31
     ],
     [
-      2,
-      3,
-      291,
+      10,
+      12,
+      312,
       31
     ],
     [
-      2,
-      3,
-      292,
+      10,
+      12,
+      313,
       31
     ],
     [
-      2,
-      3,
-      293,
+      10,
+      12,
+      314,
       31
     ],
     [
-      2,
-      3,
-      294,
+      10,
+      12,
+      315,
       31
     ],
     [
-      2,
-      3,
-      295,
+      10,
+      12,
+      316,
       31
     ],
     "setTransform",
     [
-      2,
-      3,
-      298,
+      10,
+      12,
+      319,
       29
     ],
     [
-      2,
-      3,
-      299,
+      10,
+      12,
+      320,
       51
     ],
     [
-      2,
-      3,
-      299,
+      10,
+      12,
+      320,
       28
     ],
     [
-      2,
-      3,
-      300,
+      10,
+      12,
+      321,
       51
     ],
     [
-      2,
-      3,
-      300,
+      10,
+      12,
+      321,
       28
     ],
     "shadowBlur",
     [
-      2,
-      3,
-      303,
+      10,
+      12,
+      324,
       16
     ],
     [
-      2,
-      3,
-      304,
+      10,
+      12,
+      325,
       16
     ],
     "shadowColor",
     [
-      2,
-      3,
-      307,
+      10,
+      12,
+      328,
       16
     ],
     [
-      2,
-      3,
-      308,
+      10,
+      12,
+      329,
       16
     ],
     "shadowOffsetX",
     [
-      2,
-      3,
-      311,
+      10,
+      12,
+      332,
       16
     ],
     [
-      2,
-      3,
-      312,
+      10,
+      12,
+      333,
       16
     ],
     "shadowOffsetY",
     [
-      2,
-      3,
-      315,
+      10,
+      12,
+      336,
       16
     ],
     [
-      2,
-      3,
-      316,
+      10,
+      12,
+      337,
       16
     ],
     "stroke",
     [
-      2,
-      3,
-      319,
+      10,
+      12,
+      340,
       23
     ],
     [
-      2,
-      3,
-      320,
+      10,
+      12,
+      341,
       23
     ],
     "strokeRect",
     [
-      2,
-      3,
-      323,
+      10,
+      12,
+      344,
       27
     ],
     "strokeStyle",
     [
-      2,
-      3,
-      326,
+      10,
+      12,
+      347,
       16
     ],
     [
-      2,
-      3,
-      327,
+      10,
+      12,
+      348,
       16
     ],
     [
-      2,
-      3,
-      328,
+      10,
+      12,
+      349,
       16
     ],
     [
-      2,
-      3,
-      329,
+      10,
+      12,
+      350,
       16
     ],
     [
-      2,
-      3,
-      330,
+      10,
+      12,
+      351,
       16
     ],
     "strokeText",
     [
-      2,
-      3,
-      333,
+      10,
+      12,
+      354,
       27
     ],
     [
-      2,
-      3,
-      334,
+      10,
+      12,
+      355,
       27
     ],
     "textAlign",
     [
-      2,
-      3,
-      337,
+      10,
+      12,
+      358,
       16
     ],
     [
-      2,
-      3,
-      338,
+      10,
+      12,
+      359,
       16
     ],
     "textBaseline",
     [
-      2,
-      3,
-      341,
+      10,
+      12,
+      362,
       16
     ],
     [
-      2,
-      3,
-      342,
+      10,
+      12,
+      363,
       16
     ],
     "transform",
     [
-      2,
-      3,
-      345,
+      10,
+      12,
+      366,
       26
     ],
     "translate",
     [
-      2,
-      3,
-      348,
+      10,
+      12,
+      369,
       26
     ],
     "webkitBackingStorePixelRatio",
     [
-      2,
-      3,
-      351,
+      10,
+      12,
+      372,
       16
     ],
     "webkitGetImageDataHD",
     [
-      2,
-      3,
-      354,
+      10,
+      12,
+      375,
       59
     ],
     [
-      2,
-      3,
-      354,
+      10,
+      12,
+      375,
       28
     ],
     "webkitImageSmoothingEnabled",
     [
-      2,
-      3,
-      357,
+      10,
+      12,
+      378,
       16
     ],
     [
-      2,
-      3,
-      358,
+      10,
+      12,
+      379,
       16
     ],
     "webkitLineDash",
     [
-      2,
-      3,
-      361,
+      10,
+      12,
+      382,
       16
     ],
     [
-      2,
-      3,
-      362,
+      10,
+      12,
+      383,
       16
     ],
     "webkitLineDashOffset",
     [
-      2,
-      3,
-      365,
+      10,
+      12,
+      386,
       16
     ],
     [
-      2,
-      3,
-      366,
+      10,
+      12,
+      387,
       16
     ],
     "webkitPutImageDataHD",
     [
-      2,
-      3,
-      369,
+      10,
+      12,
+      390,
       37
     ],
     [
-      2,
-      3,
-      370,
+      10,
+      12,
+      391,
       37
     ]
   ]
@@ -3711,38 +3734,38 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
       "width": 2,
       "height": 2,
       "setTransform": [
-        25,
-        28,
-        57,
-        64,
-        239,
-        268
+        1,
+        0,
+        0,
+        1,
+        0,
+        0
       ],
       "globalAlpha": 1,
-      "globalCompositeOperation": "source-over",
+      "globalCompositeOperation": 0,
       "lineWidth": 1,
-      "lineCap": "butt",
-      "lineJoin": "miter",
-      "miterLimit": 1,
-      "shadowOffsetX": 1,
-      "shadowOffsetY": 1,
-      "shadowBlur": 1,
-      "shadowColor": "#ffffff",
+      "lineCap": 1,
+      "lineJoin": 2,
+      "miterLimit": 10,
+      "shadowOffsetX": 0,
+      "shadowOffsetY": 0,
+      "shadowBlur": 0,
+      "shadowColor": 3,
       "setLineDash": [
-        [
-          1,
-          2
-        ]
+        []
       ],
-      "lineDashOffset": 1,
-      "font": "10px sans-serif",
-      "textAlign": "start",
-      "textBaseline": "alphabetic",
-      "direction": "ltr",
-      "strokeStyle": 3,
-      "fillStyle": 4,
+      "lineDashOffset": 0,
+      "font": 4,
+      "textAlign": 5,
+      "textBaseline": 6,
+      "direction": 7,
+      "strokeStyle": 8,
+      "fillStyle": 8,
       "imageSmoothingEnabled": true,
-      "imageSmoothingQuality": "low"
+      "imageSmoothingQuality": 9,
+      "setPath": [
+        10
+      ]
     },
     "content": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAAtJREFUCB1jYEAHAAASAAGAFMrMAAAAAElFTkSuQmCC"
   },
@@ -3750,7 +3773,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          5,
+          11,
           [
             1,
             2,
@@ -3760,15 +3783,15 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             0
           ],
           [
-            8,
-            10,
-            11,
             13,
             15,
-            17,
+            16,
+            18,
             20,
             22,
-            24
+            25,
+            27,
+            29
           ]
         ]
       ],
@@ -3776,77 +3799,78 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     }
   ],
   "data": [
-    "pattern",
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABNJREFUCB1j/M/AAEQMDEwgAgQAHxcCAmtAm/sAAAAASUVORK5CYII=",
-    "no-repeat",
-    [
-      0,
-      1,
-      2
-    ],
-    "#ffffff",
-    "arc",
+    "source-over",
+    "butt",
+    "miter",
+    "rgba(0, 0, 0, 0)",
+    "10px sans-serif",
+    "start",
+    "alphabetic",
+    "ltr",
+    "#000000",
+    "low",
     "",
+    "arc",
     "inspector/canvas/recording-2d.html",
     [
-      6,
-      7,
-      58,
+      10,
+      12,
+      77,
       42
     ],
     "ignoreException",
     [
-      9,
-      7,
-      45,
+      14,
+      12,
+      48,
       10
     ],
     [
-      6,
-      7,
-      58,
+      10,
+      12,
+      77,
       28
     ],
     "f",
     [
+      17,
       12,
-      7,
-      378,
+      399,
       24
     ],
     "performActions",
     [
-      14,
-      7,
-      382,
+      19,
+      12,
+      403,
       6
     ],
     "global code",
     [
-      16,
-      6,
+      21,
+      10,
       1,
       15
     ],
     "evaluateWithScopeExtension",
     "[native code]",
     [
-      18,
-      19,
+      23,
+      24,
       0,
       0
     ],
     "_evaluateOn",
     [
-      21,
-      6,
+      26,
+      10,
       128,
       29
     ],
     "_evaluateAndWrap",
     [
-      23,
-      6,
+      28,
+      10,
       122,
       108
     ]
index 6de08f612300721420fc8406e1e9f7f94eb64087..30b714251c534c58df8215d4f05e389b69696b88 100644 (file)
@@ -37,6 +37,9 @@ function load() {
 
     document.body.appendChild(canvas);
 
+    ctx.save();
+    ctx.save(); // This matches the `restore` call in `performActions`.
+
     runTest();
 }
 
@@ -47,9 +50,25 @@ function ignoreException(f){
 }
 
 let timeoutID = NaN;
+let restoreCalled = false;
 
 function cancelActions() {
+    if (!isNaN(timeoutID)) {
+        ctx.restore();
+        if (!restoreCalled)
+            ctx.restore();
+    }
+
     clearTimeout(timeoutID);
+    timeoutID = NaN;
+
+    ctx.save();
+    ctx.save();
+    ctx.resetTransform();
+    ctx.beginPath();
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+    restoreCalled = false;
 }
 
 function performActions() {
@@ -233,6 +252,8 @@ function performActions() {
         },
         () => {
             ctx.restore();
+
+            restoreCalled = true;
         },
         () => {
             ctx.rotate(1);
index fe54866a712295754ae50270f4c2189a7ada28da..e88369142a42496f5e94dc23384d7bcfebaefbad 100644 (file)
@@ -1,3 +1,38 @@
+2017-08-07  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Preview Canvas path when viewing a recording
+        https://bugs.webkit.org/show_bug.cgi?id=174967
+
+        Reviewed by Brian Burg.
+
+        Tests: fast/canvas/2d.currentPoint.html
+               fast/canvas/2d.getPath.modification.html
+               fast/canvas/2d.getPath.newobject.html
+               fast/canvas/2d.setPath.html
+
+        * html/canvas/CanvasPath.idl:
+        * html/canvas/CanvasPath.h:
+        * html/canvas/CanvasPath.cpp:
+        (WebCore::CanvasPath::currentX const):
+        (WebCore::CanvasPath::currentY const):
+
+        * html/canvas/CanvasRenderingContext2D.idl:
+        * html/canvas/CanvasRenderingContext2D.h:
+        * html/canvas/CanvasRenderingContext2D.cpp:
+        (WebCore::CanvasRenderingContext2D::setPath):
+        (WebCore::CanvasRenderingContext2D::getPath const):
+
+        * page/RuntimeEnabledFeatures.h:
+        (WebCore::RuntimeEnabledFeatures::setInspectorAdditionsEnabled):
+        (WebCore::RuntimeEnabledFeatures::inspectorAdditionsEnabled const):
+        Add runtime flag for added IDL items above so that they are only usable within the inspector
+        process. The runtime flag is not enabled from anywhere else as of now.
+
+        * inspector/InspectorCanvas.cpp:
+        (WebCore::InspectorCanvas::buildInitialState):
+        Send current path as part of the InitialState.
+        Drive-by: deduplicate more string values.
+
 2017-08-07  Chris Dumez  <cdumez@apple.com>
 
         Update sendBeacon() to rely on FetchBody instead of the whole FetchRequest
index 125e5c4feb12b1dd4558ff07a11317970bf0deec..78ecc1ea8d89f22dd208355e748a3063c1e93b5a 100644 (file)
@@ -234,4 +234,15 @@ void CanvasPath::rect(float x, float y, float width, float height)
 
     m_path.addRect(FloatRect(x, y, width, height));
 }
+
+float CanvasPath::currentX() const
+{
+    return m_path.currentPoint().x();
+}
+
+float CanvasPath::currentY() const
+{
+    return m_path.currentPoint().y();
+}
+
 }
index e752560b81b933cbe567b798625389adc7dca085..a77abb1eb6f1ade2b0ba82e2c51bbf0c47fe35fa 100644 (file)
@@ -47,6 +47,9 @@ public:
     ExceptionOr<void> ellipse(float x, float y, float radiusX, float radiusY, float rotation, float startAngle, float endAngled, bool anticlockwise);
     void rect(float x, float y, float width, float height);
 
+    float currentX() const;
+    float currentY() const;
+
 protected:
     CanvasPath() { }
     CanvasPath(const Path& path)
index da0cc878b8eac92fdea83df0ab6761bea5183fb6..8a665dc150f07b2ae1c591fe7e6ad0b350f221ed 100644 (file)
@@ -38,4 +38,7 @@
     void rect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
     [MayThrowException] void arc(unrestricted double x, unrestricted double y, unrestricted double radius, unrestricted double startAngle, unrestricted double endAngle, optional boolean anticlockwise = false);
     [MayThrowException] void ellipse(unrestricted double x, unrestricted double y, unrestricted double radiusX, unrestricted double radiusY, unrestricted double rotation, unrestricted double startAngle, unrestricted double endAngle, optional boolean anticlockwise = false);
+
+    [EnabledAtRuntime=InspectorAdditions] readonly attribute float currentX;
+    [EnabledAtRuntime=InspectorAdditions] readonly attribute float currentY;
 };
index 3d4f64ac6ff3eea3e95585a44cad46f1679993b2..cc8cbdc16611414afdceb585ce3727a0615b96b8 100644 (file)
@@ -2654,4 +2654,14 @@ void CanvasRenderingContext2D::setImageSmoothingEnabled(bool enabled)
         c->setImageInterpolationQuality(enabled ? smoothingToInterpolationQuality(state().imageSmoothingQuality) : InterpolationNone);
 }
 
+void CanvasRenderingContext2D::setPath(DOMPath& path)
+{
+    m_path = path.path();
+}
+
+Ref<DOMPath> CanvasRenderingContext2D::getPath() const
+{
+    return DOMPath::create(m_path);
+}
+
 } // namespace WebCore
index 143385d1762327a23370bb7bfffc1239fd5b0720..6923373c7aee2b291b9569e2cea9ab4453dd8caa 100644 (file)
@@ -226,6 +226,9 @@ public:
     ImageSmoothingQuality imageSmoothingQuality() const;
     void setImageSmoothingQuality(ImageSmoothingQuality);
 
+    void setPath(DOMPath&);
+    Ref<DOMPath> getPath() const;
+
     bool usesDisplayListDrawing() const { return m_usesDisplayListDrawing; };
     void setUsesDisplayListDrawing(bool flag) { m_usesDisplayListDrawing = flag; };
 
index d7e683b2c022347fc0671fd0673fb1c751635b2a..5ed0e84b252b5439150a74e6ca3964f5446d9f7f 100644 (file)
@@ -189,6 +189,9 @@ typedef (HTMLImageElement or HTMLCanvasElement) CanvasImageSource;
     attribute boolean imageSmoothingEnabled;
     [ImplementedAs=imageSmoothingEnabled] attribute boolean webkitImageSmoothingEnabled;
     attribute ImageSmoothingQuality imageSmoothingQuality;
+
+    [EnabledAtRuntime=InspectorAdditions] void setPath(DOMPath path);
+    [EnabledAtRuntime=InspectorAdditions, NewObject] DOMPath getPath();
 };
 
 CanvasRenderingContext2D implements CanvasPath;
index 4e8a8c43b393b5b13a3b3b104b7edc3ea88cfb19..0cc682cb3d5296641493599a9c93786fc178d03e 100644 (file)
@@ -338,15 +338,15 @@ RefPtr<Inspector::Protocol::Recording::InitialState> InspectorCanvas::buildIniti
 
         attributes->setArray(ASCIILiteral("setTransform"), buildArrayForAffineTransform(state.transform));
         attributes->setDouble(ASCIILiteral("globalAlpha"), context2d->globalAlpha());
-        attributes->setString(ASCIILiteral("globalCompositeOperation"), context2d->globalCompositeOperation());
+        attributes->setInteger(ASCIILiteral("globalCompositeOperation"), indexForData(context2d->globalCompositeOperation()));
         attributes->setDouble(ASCIILiteral("lineWidth"), context2d->lineWidth());
-        attributes->setString(ASCIILiteral("lineCap"), context2d->lineCap());
-        attributes->setString(ASCIILiteral("lineJoin"), context2d->lineJoin());
+        attributes->setInteger(ASCIILiteral("lineCap"), indexForData(context2d->lineCap()));
+        attributes->setInteger(ASCIILiteral("lineJoin"), indexForData(context2d->lineJoin()));
         attributes->setDouble(ASCIILiteral("miterLimit"), context2d->miterLimit());
         attributes->setDouble(ASCIILiteral("shadowOffsetX"), context2d->shadowOffsetX());
         attributes->setDouble(ASCIILiteral("shadowOffsetY"), context2d->shadowOffsetY());
         attributes->setDouble(ASCIILiteral("shadowBlur"), context2d->shadowBlur());
-        attributes->setString(ASCIILiteral("shadowColor"), context2d->shadowColor());
+        attributes->setInteger(ASCIILiteral("shadowColor"), indexForData(context2d->shadowColor()));
 
         // The parameter to `setLineDash` is itself an array, so we need to wrap the parameters
         // list in an array to allow spreading.
@@ -355,10 +355,10 @@ RefPtr<Inspector::Protocol::Recording::InitialState> InspectorCanvas::buildIniti
         attributes->setArray(ASCIILiteral("setLineDash"), WTFMove(setLineDash));
 
         attributes->setDouble(ASCIILiteral("lineDashOffset"), context2d->lineDashOffset());
-        attributes->setString(ASCIILiteral("font"), context2d->font());
-        attributes->setString(ASCIILiteral("textAlign"), context2d->textAlign());
-        attributes->setString(ASCIILiteral("textBaseline"), context2d->textBaseline());
-        attributes->setString(ASCIILiteral("direction"), context2d->direction());
+        attributes->setInteger(ASCIILiteral("font"), indexForData(context2d->font()));
+        attributes->setInteger(ASCIILiteral("textAlign"), indexForData(context2d->textAlign()));
+        attributes->setInteger(ASCIILiteral("textBaseline"), indexForData(context2d->textBaseline()));
+        attributes->setInteger(ASCIILiteral("direction"), indexForData(context2d->direction()));
 
         int strokeStyleIndex;
         if (CanvasGradient* canvasGradient = state.strokeStyle.canvasGradient())
@@ -379,7 +379,11 @@ RefPtr<Inspector::Protocol::Recording::InitialState> InspectorCanvas::buildIniti
         attributes->setInteger(ASCIILiteral("fillStyle"), fillStyleIndex);
 
         attributes->setBoolean(ASCIILiteral("imageSmoothingEnabled"), context2d->imageSmoothingEnabled());
-        attributes->setString(ASCIILiteral("imageSmoothingQuality"), CanvasRenderingContext2D::stringForImageSmoothingQuality(context2d->imageSmoothingQuality()));
+        attributes->setInteger(ASCIILiteral("imageSmoothingQuality"), indexForData(CanvasRenderingContext2D::stringForImageSmoothingQuality(context2d->imageSmoothingQuality())));
+
+        auto setPath = Inspector::Protocol::Array<InspectorValue>::create();
+        setPath->addItem(indexForData(buildStringFromPath(context2d->getPath()->path())));
+        attributes->setArray(ASCIILiteral("setPath"), WTFMove(setPath));
     }
 
     // <https://webkit.org/b/174483> Web Inspector: Record actions performed on WebGLRenderingContext
index a2ecc29910e08247a255121d53403662c4a9d937..3a8a0bead6c2fe0c8256cf98568d6843041219f3 100644 (file)
@@ -207,6 +207,9 @@ public:
     bool audioEnabled() const;
 #endif
 
+    void setInspectorAdditionsEnabled(bool isEnabled) { m_inspectorAdditionsEnabled = isEnabled; }
+    bool inspectorAdditionsEnabled() const { return m_inspectorAdditionsEnabled; }
+
     WEBCORE_EXPORT static RuntimeEnabledFeatures& sharedFeatures();
 
 private:
@@ -319,6 +322,8 @@ private:
     bool m_serviceWorkerEnabled { false };
 #endif
 
+    bool m_inspectorAdditionsEnabled { false };
+
     friend class WTF::NeverDestroyed<RuntimeEnabledFeatures>;
 };
 
index a58d19bd3a21e5dc6b4da64478d75bb94f5bdfc0..2149c5330f1d96bae7cdde1f00c8165dae0ab48e 100644 (file)
@@ -1,3 +1,37 @@
+2017-08-07  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Preview Canvas path when viewing a recording
+        https://bugs.webkit.org/show_bug.cgi?id=174967
+
+        Reviewed by Brian Burg.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Base/Setting.js:
+
+        * UserInterface/Views/RecordingContentView.js:
+        (WI.RecordingContentView):
+        (WI.RecordingContentView.supportsCanvasPathDebugging):
+        (WI.RecordingContentView.prototype.get navigationItems):
+        (WI.RecordingContentView.prototype.shown):
+        (WI.RecordingContentView.prototype._generateContentCanvas2D):
+        (WI.RecordingContentView.prototype._actionModifiesPath):
+        (WI.RecordingContentView.prototype._updateCanvasPath):
+        (WI.RecordingContentView.prototype._showPathButtonClicked):
+        Show each segment of the current path as an overlay when the setting is enabled.
+        Drive-by: fix forgotten function rename.
+
+        * UserInterface/Views/RecordingContentView.css:
+        (.content-view:not(.tab).recording canvas.path):
+
+        * UserInterface/Views/RecordingStateDetailsSidebarPanel.js:
+        (WI.RecordingStateDetailsSidebarPanel.prototype._generateDetailsCanvas2D):
+        Show the currentX/currentY in the current state.
+
+        * UserInterface/Models/RecordingAction.js:
+        (WI.RecordingAction.isFunctionForType):
+        (WI.RecordingAction.prototype.swizzle):
+        Use Sets for better performance.
+
 2017-08-04  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: add source view for WebGL shader programs
index 4cfa4554460772d22e4c1a83e680093dc789d912..9d9571abc61ef2d4de75de82780e4bb514835883 100644 (file)
@@ -449,6 +449,7 @@ localizedStrings["Heap Snapshot Object (%s)"] = "Heap Snapshot Object (%s)";
 localizedStrings["Height"] = "Height";
 localizedStrings["Hide Console"] = "Hide Console";
 localizedStrings["Hide Grid"] = "Hide Grid";
+localizedStrings["Hide Path"] = "Hide Path";
 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)";
@@ -789,6 +790,7 @@ localizedStrings["Show Console"] = "Show Console";
 localizedStrings["Show Console tab"] = "Show Console tab";
 localizedStrings["Show Contexts in Resources Tab"] = "Show Contexts in Resources Tab";
 localizedStrings["Show Grid"] = "Show Grid";
+localizedStrings["Show Path"] = "Show Path";
 localizedStrings["Show Remaining (%d)"] = "Show Remaining (%d)";
 localizedStrings["Show Scope Chain on pause"] = "Show Scope Chain on pause";
 localizedStrings["Show Source"] = "Show Source";
index 623acd594786aee92238048dd892962feeee104f..03ae56abeba2c7d6b5ca6d5cc70be635c89cc1a4 100644 (file)
@@ -121,6 +121,7 @@ WI.settings = {
     stylesSelectOnFirstClick: new WI.Setting("styles-select-on-first-click", true),
     showScopeChainOnPause: new WI.Setting("show-scope-chain-sidebar", true),
     showImageGrid: new WI.Setting("show-image-grid", false),
+    showCanvasPath: new WI.Setting("show-canvas-path", false),
 
     // Experimental
     experimentalShowCanvasContextsInResources: new WI.Setting("experimental-show-canvas-contexts-in-resources", false),
index 7fc227b8fadcc3823819c9c7239917f741a993d5..5b7ddc8ed1b94f25b72070cf3e6db0f73652936d 100644 (file)
@@ -40,7 +40,7 @@ WI.RecordingAction = class RecordingAction
         this._isFunction = false;
         this._isGetter = false;
         this._isVisual = false;
-        this._stateModifiers = [];
+        this._stateModifiers = new Set;
     }
 
     // Static
@@ -69,7 +69,7 @@ WI.RecordingAction = class RecordingAction
         if (!functionNames)
             return false;
 
-        return functionNames.includes(name);
+        return functionNames.has(name);
     }
 
     // Public
@@ -119,14 +119,14 @@ WI.RecordingAction = class RecordingAction
         this._isGetter = !this._isFunction && !this._parameters.length;
 
         let visualNames = WI.RecordingAction._visualNames[recording.type];
-        this._isVisual = visualNames ? visualNames.includes(this._name) : false;
+        this._isVisual = visualNames ? visualNames.has(this._name) : false;
 
-        this._stateModifiers = [this._name];
+        this._stateModifiers = new Set([this._name]);
         let stateModifiers = WI.RecordingAction._stateModifiers[recording.type];
         if (stateModifiers) {
-            let modifiedByAction = stateModifiers[this._name];
-            if (modifiedByAction)
-                this._stateModifiers = this._stateModifiers.concat(modifiedByAction);
+            let modifiedByAction = stateModifiers[this._name] || [];
+            for (let item of modifiedByAction)
+                this._stateModifiers.add(item);
         }
     }
 
@@ -296,7 +296,7 @@ WI.RecordingAction = class RecordingAction
 }
 
 WI.RecordingAction._functionNames = {
-    [WI.Recording.Type.Canvas2D]: [
+    [WI.Recording.Type.Canvas2D]: new Set([
         "arc",
         "arcTo",
         "beginPath",
@@ -355,11 +355,11 @@ WI.RecordingAction._functionNames = {
         "translate",
         "webkitGetImageDataHD",
         "webkitPutImageDataHD",
-    ],
+    ]),
 };
 
 WI.RecordingAction._visualNames = {
-    [WI.Recording.Type.Canvas2D]: [
+    [WI.Recording.Type.Canvas2D]: new Set([
         "clearRect",
         "drawFocusIfNeeded",
         "drawImage",
@@ -372,7 +372,7 @@ WI.RecordingAction._visualNames = {
         "strokeRect",
         "strokeText",
         "webkitPutImageDataHD",
-    ],
+    ]),
 };
 
 WI.RecordingAction._stateModifiers = {
index a062eaf65638a5956867ebf1146d7c6ece2cfbc3..42771d6422d9938870cfa5e9b59f12d9aa14693d 100644 (file)
@@ -41,3 +41,8 @@
     max-width: 100%;
     max-height: 100%;
 }
+
+.content-view:not(.tab).recording canvas.path {
+    position: absolute;
+    z-index: 10;
+}
index b707b96f3497f1ef5c2fa05a11c2bbd33313104e..918184419e9862a0161b3a4c5bc4d3cc48305894 100644 (file)
@@ -38,6 +38,14 @@ WI.RecordingContentView = class RecordingContentView extends WI.ContentView
         this.element.classList.add("recording", this.representedObject.type);
 
         if (this.representedObject.type === WI.Recording.Type.Canvas2D) {
+            if (WI.RecordingContentView.supportsCanvasPathDebugging()) {
+                this._pathContext = null;
+
+                this._showPathButtonNavigationItem = new WI.ActivateButtonNavigationItem("show-path", WI.UIString("Show Path"), WI.UIString("Hide Path"), "Images/PaintFlashing.svg", 13, 13);
+                this._showPathButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._showPathButtonClicked, this);
+                this._showPathButtonNavigationItem.activated = !!WI.settings.showCanvasPath.value;
+            }
+
             this._showGridButtonNavigationItem = new WI.ActivateButtonNavigationItem("show-grid", WI.UIString("Show Grid"), WI.UIString("Hide Grid"), "Images/NavigationItemCheckers.svg", 13, 13);
             this._showGridButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._showGridButtonClicked, this);
             this._showGridButtonNavigationItem.activated = !!WI.settings.showImageGrid.value;
@@ -45,14 +53,44 @@ WI.RecordingContentView = class RecordingContentView extends WI.ContentView
 
         this._previewContainer = this.element.appendChild(document.createElement("div"));
         this._previewContainer.classList.add("preview-container");
-}
+    }
+
+    // Static
+
+    static supportsCanvasPathDebugging()
+    {
+        return "currentX" in CanvasRenderingContext2D.prototype && "currentY" in CanvasRenderingContext2D.prototype;
+    }
+
+    static _actionModifiesPath(recordingAction)
+    {
+        switch (recordingAction.name) {
+        case "arc":
+        case "arcTo":
+        case "beginPath":
+        case "bezierCurveTo":
+        case "closePath":
+        case "ellipse":
+        case "lineTo":
+        case "moveTo":
+        case "quadraticCurveTo":
+        case "rect":
+            return true;
+        }
+
+        return false;
+    }
 
     // Public
 
     get navigationItems()
     {
-        if (this.representedObject.type === WI.Recording.Type.Canvas2D)
-            return [this._showGridButtonNavigationItem];
+        if (this.representedObject.type === WI.Recording.Type.Canvas2D) {
+            let navigationItems = [this._showGridButtonNavigationItem];
+            if (WI.RecordingContentView.supportsCanvasPathDebugging())
+                navigationItems.unshift(this._showPathButtonNavigationItem);
+            return navigationItems;
+        }
         return [];
     }
 
@@ -74,8 +112,10 @@ WI.RecordingContentView = class RecordingContentView extends WI.ContentView
     {
         super.shown();
 
-        if (this.representedObject.type === WI.Recording.Type.Canvas2D)
+        if (this.representedObject.type === WI.Recording.Type.Canvas2D) {
+            this._updateCanvasPath();
             this._updateImageGrid();
+        }
     }
 
     get supplementalRepresentedObjects()
@@ -109,6 +149,9 @@ WI.RecordingContentView = class RecordingContentView extends WI.ContentView
         let snapshotIndex = Math.floor(index / WI.RecordingContentView.SnapshotInterval);
         let snapshot = this._snapshots[snapshotIndex];
 
+        let showCanvasPath = WI.RecordingContentView.supportsCanvasPathDebugging() && WI.settings.showCanvasPath.value;
+        let indexOfLastBeginPathAction = Infinity;
+
         let actions = this.representedObject.actions;
         let applyActions = (from, to, callback) => {
             let saveCount = 0;
@@ -124,7 +167,7 @@ WI.RecordingContentView = class RecordingContentView extends WI.ContentView
                     continue;
 
                 try {
-                    if (WI.RecordingAction.functionForType(this.representedObject.type, name))
+                    if (WI.RecordingAction.isFunctionForType(this.representedObject.type, name))
                         snapshot.context[name](...snapshot.state[name]);
                     else
                         snapshot.context[name] = snapshot.state[name];
@@ -133,6 +176,27 @@ WI.RecordingContentView = class RecordingContentView extends WI.ContentView
                 }
             }
 
+            let shouldDrawCanvasPath = showCanvasPath && indexOfLastBeginPathAction <= to;
+            if (shouldDrawCanvasPath) {
+                if (!this._pathContext) {
+                    let pathCanvas = document.createElement("canvas");
+                    pathCanvas.classList.add("path");
+                    this._pathContext = pathCanvas.getContext("2d");
+                }
+
+                this._pathContext.canvas.width = snapshot.element.width;
+                this._pathContext.canvas.height = snapshot.element.height;
+                this._pathContext.clearRect(0, 0, snapshot.element.width, snapshot.element.height);
+
+                this._pathContext.save();
+
+                this._pathContext.fillStyle = "hsla(0, 0%, 100%, 0.75)";
+                this._pathContext.fillRect(0, 0, snapshot.element.width, snapshot.element.height);
+            }
+
+            let lastPathPoint = {};
+            let subPathStartPoint = {};
+
             for (let i = from; i <= to; ++i) {
                 if (actions[i].name === "save")
                     ++saveCount;
@@ -143,8 +207,41 @@ WI.RecordingContentView = class RecordingContentView extends WI.ContentView
                 }
 
                 this._applyAction(snapshot.context, actions[i]);
+
+                if (shouldDrawCanvasPath && i >= indexOfLastBeginPathAction && WI.RecordingContentView._actionModifiesPath(actions[i])) {
+                    lastPathPoint = {x: this._pathContext.currentX, y: this._pathContext.currentY};
+
+                    if (i === indexOfLastBeginPathAction)
+                        this._pathContext.setTransform(snapshot.context.getTransform());
+
+                    let isMoveTo = actions[i].name === "moveTo";
+                    this._pathContext.lineWidth = isMoveTo ? 0.5 : 1;
+                    this._pathContext.setLineDash(isMoveTo ? [5, 5] : []);
+                    this._pathContext.strokeStyle = i === to ? "red" : "black";
+
+                    this._pathContext.beginPath();
+                    if (!isEmptyObject(lastPathPoint))
+                        this._pathContext.moveTo(lastPathPoint.x, lastPathPoint.y);
+
+                    if (actions[i].name === "closePath" && !isEmptyObject(subPathStartPoint)) {
+                        this._pathContext.lineTo(subPathStartPoint.x, subPathStartPoint.y);
+                        subPathStartPoint = {};
+                    } else {
+                        this._applyAction(this._pathContext, actions[i], {nameOverride: isMoveTo ? "lineTo" : null});
+                        if (isMoveTo)
+                            subPathStartPoint = {x: this._pathContext.currentX, y: this._pathContext.currentY};
+                    }
+
+                    this._pathContext.stroke();
+                }
             }
 
+            if (shouldDrawCanvasPath) {
+                this._pathContext.restore();
+                this._previewContainer.appendChild(this._pathContext.canvas);
+            } else if (this._pathContext)
+                this._pathContext.canvas.remove();
+
             callback();
 
             snapshot.context.restore();
@@ -167,7 +264,7 @@ WI.RecordingContentView = class RecordingContentView extends WI.ContentView
 
             let lastSnapshotIndex = snapshotIndex;
             while (--lastSnapshotIndex >= 0) {
-                if (this._snapshots[--lastSnapshotIndex])
+                if (this._snapshots[lastSnapshotIndex])
                     break;
             }
 
@@ -178,10 +275,32 @@ WI.RecordingContentView = class RecordingContentView extends WI.ContentView
 
                 for (let key in initialState.attributes) {
                     let value = initialState.attributes[key];
-                    if (key === "strokeStyle" || key === "fillStyle")
-                        value = this.representedObject.swizzle(value, WI.Recording.Swizzle.CanvasStyle);
 
-                    if (value === WI.Recording.Swizzle.Invalid)
+                    switch (key) {
+                    case "fillStyle":
+                    case "strokeStyle":
+                        value = this.representedObject.swizzle(value, WI.Recording.Swizzle.CanvasStyle);
+                        break;
+
+                    case "direction":
+                    case "font":
+                    case "globalCompositeOperation":
+                    case "imageSmoothingEnabled":
+                    case "imageSmoothingQuality":
+                    case "lineCap":
+                    case "lineJoin":
+                    case "shadowColor":
+                    case "textAlign":
+                    case "textBaseline":
+                        value = this.representedObject.swizzle(value, WI.Recording.Swizzle.String);
+                        break;
+
+                    case "setPath":
+                        value = [this.representedObject.swizzle(value[0], WI.Recording.Swizzle.Path2D)];
+                        break;
+                    }
+
+                    if (value === WI.Recording.Swizzle.Invalid || (Array.isArray(value) && value.includes(WI.Recording.Swizzle.Invalid)))
                         continue;
 
                     snapshot.state[key] = value;
@@ -219,6 +338,9 @@ WI.RecordingContentView = class RecordingContentView extends WI.ContentView
                     webkitLineDash: snapshot.context.webkitLineDash,
                     webkitLineDashOffset: snapshot.context.webkitLineDashOffset,
                 };
+
+                if (WI.RecordingContentView.supportsCanvasPathDebugging())
+                    snapshot.state.setPath = [snapshot.context.getPath()];
             });
 
             snapshot.content = new Image;
@@ -229,6 +351,12 @@ WI.RecordingContentView = class RecordingContentView extends WI.ContentView
 
         this._previewContainer.removeChildren();
 
+        if (showCanvasPath) {
+            indexOfLastBeginPathAction = this._index;
+            while (indexOfLastBeginPathAction > snapshot.index && actions[indexOfLastBeginPathAction].name !== "beginPath")
+                --indexOfLastBeginPathAction;
+        }
+
         applyActions(snapshot.index, this._index, () => {
             if (options.onCompleteCallback)
                 options.onCompleteCallback(snapshot.context);
@@ -263,6 +391,15 @@ WI.RecordingContentView = class RecordingContentView extends WI.ContentView
         }
     }
 
+    _updateCanvasPath()
+    {
+        let activated = WI.settings.showCanvasPath.value;
+        if (this._showPathButtonNavigationItem.activated !== activated)
+            this._generateContentCanvas2D(this._index);
+
+        this._showPathButtonNavigationItem.activated = activated;
+    }
+
     _updateImageGrid()
     {
         let activated = WI.settings.showImageGrid.value;
@@ -273,6 +410,13 @@ WI.RecordingContentView = class RecordingContentView extends WI.ContentView
             this._snapshots[snapshotIndex].element.classList.toggle("show-grid", activated);
     }
 
+    _showPathButtonClicked(event)
+    {
+        WI.settings.showCanvasPath.value = !this._showPathButtonNavigationItem.activated;
+
+        this._updateCanvasPath();
+    }
+
     _showGridButtonClicked(event)
     {
         WI.settings.showImageGrid.value = !this._showGridButtonNavigationItem.activated;
index 5cd41108a2384056eb94e33d06879f30db6aa6ad..6fbaa588d799a3cbf811d041036f37fcb8c75bf2 100644 (file)
@@ -98,32 +98,37 @@ WI.RecordingStateDetailsSidebarPanel = class RecordingStateDetailsSidebarPanel e
         if (!context)
             return;
 
-        let state = {
-            direction: context.direction,
-            fillStyle: context.fillStyle,
-            font: context.font,
-            globalAlpha: context.globalAlpha,
-            globalCompositeOperation: context.globalCompositeOperation,
-            imageSmoothingEnabled: context.imageSmoothingEnabled,
-            imageSmoothingQuality: context.imageSmoothingQuality,
-            lineCap: context.lineCap,
-            lineDash: context.getLineDash(),
-            lineDashOffset: context.lineDashOffset,
-            lineJoin: context.lineJoin,
-            lineWidth: context.lineWidth,
-            miterLimit: context.miterLimit,
-            shadowBlur: context.shadowBlur,
-            shadowColor: context.shadowColor,
-            shadowOffsetX: context.shadowOffsetX,
-            shadowOffsetY: context.shadowOffsetY,
-            strokeStyle: context.strokeStyle,
-            textAlign: context.textAlign,
-            textBaseline: context.textBaseline,
-            transform: context.getTransform(),
-            webkitImageSmoothingEnabled: context.webkitImageSmoothingEnabled,
-            webkitLineDash: context.webkitLineDash,
-            webkitLineDashOffset: context.webkitLineDashOffset,
-        };
+        let state = {};
+
+        if (WI.RecordingContentView.supportsCanvasPathDebugging()) {
+            state.currentX = context.currentX;
+            state.currentY = context.currentY;
+        }
+
+        state.direction = context.direction;
+        state.fillStyle = context.fillStyle;
+        state.font = context.font;
+        state.globalAlpha = context.globalAlpha;
+        state.globalCompositeOperation = context.globalCompositeOperation;
+        state.imageSmoothingEnabled = context.imageSmoothingEnabled;
+        state.imageSmoothingQuality = context.imageSmoothingQuality;
+        state.lineCap = context.lineCap;
+        state.lineDash = context.getLineDash();
+        state.lineDashOffset = context.lineDashOffset;
+        state.lineJoin = context.lineJoin;
+        state.lineWidth = context.lineWidth;
+        state.miterLimit = context.miterLimit;
+        state.shadowBlur = context.shadowBlur;
+        state.shadowColor = context.shadowColor;
+        state.shadowOffsetX = context.shadowOffsetX;
+        state.shadowOffsetY = context.shadowOffsetY;
+        state.strokeStyle = context.strokeStyle;
+        state.textAlign = context.textAlign;
+        state.textBaseline = context.textBaseline;
+        state.transform = context.getTransform();
+        state.webkitImageSmoothingEnabled = context.webkitImageSmoothingEnabled;
+        state.webkitLineDash = context.webkitLineDash;
+        state.webkitLineDashOffset = context.webkitLineDashOffset;
 
         let action = this._recording.actions[this._index];
         for (let name in state) {
@@ -147,7 +152,7 @@ WI.RecordingStateDetailsSidebarPanel = class RecordingStateDetailsSidebarPanel e
             }
 
             let classNames = [];
-            if (!action.isGetter && action.stateModifiers.includes(name))
+            if (!action.isGetter && action.stateModifiers.has(name))
                 classNames.push("modified");
             if (name.startsWith("webkit"))
                 classNames.push("non-standard");
index 983b94d035c50ad0105a35fde66124a29f85372f..bc38b6c5005446cf7205abc928a008b9901d78ac 100644 (file)
@@ -1,3 +1,23 @@
+2017-08-07  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Preview Canvas path when viewing a recording
+        https://bugs.webkit.org/show_bug.cgi?id=174967
+
+        Reviewed by Brian Burg.
+
+        * Shared/WebPreferencesDefinitions.h:
+        * UIProcess/API/C/WKPreferencesRefPrivate.h:
+        * UIProcess/API/C/WKPreferences.cpp:
+        (WKPreferencesSetInspectorAdditionsEnabled):
+        (WKPreferencesGetInspectorAdditionsEnabled):
+        * WebProcess/WebPage/WebPage.cpp:
+        (WebKit::WebPage::updatePreferences):
+        Add plumbing for new InspectorAdditions runtime flag.
+
+        * WebProcess/WebPage/WebInspectorUI.cpp:
+        (WebKit::WebInspectorUI::WebInspectorUI):
+        Enable InspectorAdditions by default in the WebInspector page.
+
 2017-08-07  Filip Pizlo  <fpizlo@apple.com>
 
         Baseline JIT should do caging
index 8d61caad1d5a9ac1adabf5b2dcd03c19c135b3a5..00c5578e4403e3c4e9f2796c92a3d07cafec3097 100644 (file)
     macro(UserTimingEnabled, userTimingEnabled, Bool, bool, true, "User Timing", "Enable UserTiming API") \
     macro(LegacyEncryptedMediaAPIEnabled, legacyEncryptedMediaAPIEnabled, Bool, bool, DEFAULT_LEGACY_ENCRYPTED_MEDIA_API_ENABLED, "Enable Legacy EME API", "Enable legacy EME API") \
     macro(AllowMediaContentTypesRequiringHardwareSupportAsFallback, allowMediaContentTypesRequiringHardwareSupportAsFallback, Bool, bool, DEFAULT_ALLOW_MEDIA_CONTENT_TYPES_REQUIRING_HARDWARE_SUPPORT_AS_FALLBACK, "Allow Media Content Types Requirining Hardware As Fallback", "Allow Media Content Types Requirining Hardware As Fallback") \
+    macro(InspectorAdditionsEnabled, inspectorAdditionsEnabled, Bool, bool, false, "Web Inspector Additions", "Enable additional page APIs used by the Web Inspector frontend page") \
     \
 
 #define FOR_EACH_WEBKIT_DOUBLE_PREFERENCE(macro) \
index 1a4687b5ba80b51d1bb14d2ab029232202c1df3f..1e46cf2946bc49a2658fd10bbbf5fd4d1f76f440 100644 (file)
@@ -1823,3 +1823,12 @@ void WKPreferencesSetAllowMediaContentTypesRequiringHardwareSupportAsFallback(WK
     return toImpl(preferencesRef)->setAllowMediaContentTypesRequiringHardwareSupportAsFallback(allow);
 }
 
+void WKPreferencesSetInspectorAdditionsEnabled(WKPreferencesRef preferencesRef, bool flag)
+{
+    toImpl(preferencesRef)->setInspectorAdditionsEnabled(flag);
+}
+
+bool WKPreferencesGetInspectorAdditionsEnabled(WKPreferencesRef preferencesRef)
+{
+    return toImpl(preferencesRef)->inspectorAdditionsEnabled();
+}
index b913c7121b0aa5e128902f576276cf947c231b99..793d85cd2726fe8104edc899c2b2896eddae4bbf 100644 (file)
@@ -509,6 +509,10 @@ WK_EXPORT WKStringRef WKPreferencesCopyMediaContentTypesRequiringHardwareSupport
 WK_EXPORT void WKPreferencesSetIsSecureContextAttributeEnabled(WKPreferencesRef, bool flag);
 WK_EXPORT bool WKPreferencesGetIsSecureContextAttributeEnabled(WKPreferencesRef);
 
+// Defaults to false.
+WK_EXPORT void WKPreferencesSetInspectorAdditionsEnabled(WKPreferencesRef, bool flag);
+WK_EXPORT bool WKPreferencesGetInspectorAdditionsEnabled(WKPreferencesRef);
+
 #ifdef __cplusplus
 }
 #endif
index 02490e7c2399d5adfe8f51c5befcba1a5b9db224..dba68e1cca30edff8d10dd65756bf6582ebad8ce 100644 (file)
@@ -34,6 +34,7 @@
 #include <WebCore/DOMWrapperWorld.h>
 #include <WebCore/InspectorController.h>
 #include <WebCore/NotImplemented.h>
+#include <WebCore/RuntimeEnabledFeatures.h>
 
 using namespace WebCore;
 
@@ -48,6 +49,7 @@ WebInspectorUI::WebInspectorUI(WebPage& page)
     : m_page(page)
     , m_frontendAPIDispatcher(page)
 {
+    RuntimeEnabledFeatures::sharedFeatures().setInspectorAdditionsEnabled(true);
 }
 
 void WebInspectorUI::establishConnection(IPC::Attachment encodedConnectionIdentifier, uint64_t inspectedPageIdentifier, bool underTest, unsigned inspectionLevel)
index f0605d2c4a4d9c3f78fe51d69d3df9a67a61f4e0..60ae396296ee879b58d9dc42636db0c46d4db440 100644 (file)
@@ -3384,6 +3384,8 @@ void WebPage::updatePreferences(const WebPreferencesStore& store)
 #if ENABLE(LEGACY_ENCRYPTED_MEDIA)
     RuntimeEnabledFeatures::sharedFeatures().setLegacyEncryptedMediaAPIEnabled(store.getBoolValueForKey(WebPreferencesKey::legacyEncryptedMediaAPIEnabledKey()));
 #endif
+
+    RuntimeEnabledFeatures::sharedFeatures().setInspectorAdditionsEnabled(store.getBoolValueForKey(WebPreferencesKey::inspectorAdditionsEnabledKey()));
 }
 
 #if ENABLE(DATA_DETECTION)
index 54bf32c3bb5d3b127247db9163903992565a8ec4..7817d0b85cf7a85e8d1af07ee872e7f9feef22a3 100644 (file)
@@ -1,3 +1,20 @@
+2017-08-07  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Preview Canvas path when viewing a recording
+        https://bugs.webkit.org/show_bug.cgi?id=174967
+
+        Reviewed by Brian Burg.
+
+        * WebView/WebPreferenceKeysPrivate.h:
+        * WebView/WebPreferences.mm:
+        (+[WebPreferences initialize]):
+        (-[WebPreferences inspectorAdditionsEnabled]):
+        (-[WebPreferences setInspectorAdditionsEnabled:]):
+        * WebView/WebPreferencesPrivate.h:
+        * WebView/WebView.mm:
+        (-[WebView _preferencesChanged:]):
+        Add plumbing for new InspectorAdditions runtime flag.
+
 2017-08-07  Brian Burg  <bburg@apple.com>
 
         Remove CANVAS_PATH compilation guard
index 994ad4fcfd793b63eeb4a29b3908b50931fa0916..8097f828c9815aabd1e1b348de464b3e8dc8f418 100644 (file)
 #define WebKitMediaContentTypesRequiringHardwareSupportPreferenceKey @"WebKitMediaContentTypesRequiringHardwareSupport"
 #define WebKitLegacyEncryptedMediaAPIEnabledKey @"WebKitLegacyEncryptedMediaAPIEnabled"
 #define WebKitAllowMediaContentTypesRequiringHardwareSupportAsFallbackKey @"WebKitAllowMediaContentTypesRequiringHardwareSupportAsFallback"
+#define WebKitInspectorAdditionsEnabledPreferenceKey @"WebKitInspectorAdditionsEnabled"
index 0658dea69c6b75709ce5a94a48477b8a0775df83..b03d5b06abe95d569f153f91a3ad75a89146cc09 100644 (file)
@@ -679,6 +679,7 @@ public:
         @YES, WebKitViewportFitEnabledPreferenceKey,
         @YES, WebKitConstantPropertiesEnabledPreferenceKey,
         @YES, WebKitAllowMediaContentTypesRequiringHardwareSupportAsFallbackKey,
+        @NO, WebKitInspectorAdditionsEnabledPreferenceKey,
         (NSString *)Settings::defaultMediaContentTypesRequiringHardwareSupport(), WebKitMediaContentTypesRequiringHardwareSupportPreferenceKey,
         nil];
 
@@ -3206,6 +3207,16 @@ static NSString *classIBCreatorID = nil;
     [self _setBoolValue:flag forKey:WebKitAllowMediaContentTypesRequiringHardwareSupportAsFallbackKey];
 }
 
+- (BOOL)inspectorAdditionsEnabled
+{
+    return [self _boolValueForKey:WebKitInspectorAdditionsEnabledPreferenceKey];
+}
+
+- (void)setInspectorAdditionsEnabled:(BOOL)flag
+{
+    [self _setBoolValue:flag forKey:WebKitInspectorAdditionsEnabledPreferenceKey];
+}
+
 @end
 
 @implementation WebPreferences (WebInternal)
index 265da5d474d6ac2d016776c8122e2287e2262e3b..36c7b37a9e654b73386d80d202aba0821a7eb702 100644 (file)
@@ -585,6 +585,7 @@ extern NSString *WebPreferencesCacheModelChangedInternalNotification;
 @property (nonatomic) BOOL legacyEncryptedMediaAPIEnabled;
 @property (nonatomic) BOOL viewportFitEnabled;
 @property (nonatomic) BOOL constantPropertiesEnabled;
+@property (nonatomic) BOOL inspectorAdditionsEnabled;
 @property (nonatomic) BOOL allowMediaContentTypesRequiringHardwareSupportAsFallback;
 
 #if TARGET_OS_IPHONE
index d9bf3ced4f942a46a676e4d4f5ad33b0a046dc9a..3b63f76437320f368d1219bdb38a400d971b66ff 100644 (file)
@@ -3038,6 +3038,8 @@ static bool needsSelfRetainWhileLoadingQuirk()
     RuntimeEnabledFeatures::sharedFeatures().setLegacyEncryptedMediaAPIEnabled(preferences.legacyEncryptedMediaAPIEnabled);
 #endif
 
+    RuntimeEnabledFeatures::sharedFeatures().setInspectorAdditionsEnabled(preferences.inspectorAdditionsEnabled);
+
     settings.setAllowMediaContentTypesRequiringHardwareSupportAsFallback(preferences.allowMediaContentTypesRequiringHardwareSupportAsFallback);
 
     NSTimeInterval timeout = [preferences incrementalRenderingSuppressionTimeoutInSeconds];
index ab570d42cfdf77a6ab522de3ef08a49d1487f9af..b22479698758b3dafee42e5508d2b4c985633c43 100644 (file)
@@ -1,3 +1,22 @@
+2017-08-07  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Preview Canvas path when viewing a recording
+        https://bugs.webkit.org/show_bug.cgi?id=174967
+
+        Reviewed by Brian Burg.
+
+        * DumpRenderTree/TestOptions.h:
+        * DumpRenderTree/TestOptions.mm:
+        (TestOptions::TestOptions):
+        * DumpRenderTree/mac/DumpRenderTree.mm:
+        (setWebPreferencesForTestOptions):
+        * WebKitTestRunner/TestController.cpp:
+        (WTR::TestController::resetPreferencesToConsistentValues):
+        (WTR::updateTestOptionsFromTestHeader):
+        * WebKitTestRunner/TestOptions.h:
+        (WTR::TestOptions::hasSameInitializationOptions const):
+        Add plumbing for new InspectorAdditions runtime flag.
+
 2017-08-07  obinna obike  <oobike@apple.com>
 
         Sorted EWS Queues on Patch page
index 09245209212ce8cc13c16914105b24118165c453..4646eebbec3bb82ce940c965e4b1fcc93e895236 100644 (file)
@@ -36,6 +36,7 @@ struct TestOptions {
     bool enableDragDestinationActionLoad { false };
     bool layerBackedWebView { false };
     bool enableIsSecureContextAttribute { true };
+    bool enableInspectorAdditions { false };
 
     TestOptions(NSURL*, const TestCommand&);
     bool webViewIsCompatibleWithOptions(const TestOptions&) const;
index bb9ca840af2802905b30b9859721547462ae995e..0c7a7c708c92475da0e0b6f27fef0dcacf6f9e10 100644 (file)
@@ -92,6 +92,8 @@ TestOptions::TestOptions(NSURL *testURL, const TestCommand& command)
             this->layerBackedWebView = parseBooleanTestHeaderValue(value);
         else if (key == "enableIsSecureContextAttribute")
             this->enableIsSecureContextAttribute = parseBooleanTestHeaderValue(value);
+        else if (key == "enableInspectorAdditions")
+            this->enableInspectorAdditions = parseBooleanTestHeaderValue(value);
         pairStart = pairEnd + 1;
     }
 }
index a980d17bce81a5219be51eb037401ace49de987c..a2f134ad99968d36ad2c34d165f6b97fd20a727e 100644 (file)
@@ -982,6 +982,7 @@ static void setWebPreferencesForTestOptions(const TestOptions& options)
     preferences.modernMediaControlsEnabled = options.enableModernMediaControls;
     preferences.credentialManagementEnabled = options.enableCredentialManagement;
     preferences.isSecureContextAttributeEnabled = options.enableIsSecureContextAttribute;
+    preferences.inspectorAdditionsEnabled = options.enableInspectorAdditions;
 }
 
 // Called once on DumpRenderTree startup.
index 0f4a4a6702b0599f0df07e0a17b0c0ccfa2d841c..a35a70d3642aed959e765e7f5b06cfdbaa73fe18 100644 (file)
@@ -728,6 +728,8 @@ void TestController::resetPreferencesToConsistentValues(const TestOptions& optio
     
     WKPreferencesSetLargeImageAsyncDecodingEnabled(preferences, false);
 
+    WKPreferencesSetInspectorAdditionsEnabled(preferences, options.enableInspectorAdditions);
+
     platformResetPreferencesToConsistentValues();
 }
 
@@ -1021,6 +1023,8 @@ static void updateTestOptionsFromTestHeader(TestOptions& testOptions, const std:
             testOptions.enableCredentialManagement = parseBooleanTestHeaderValue(value);
         if (key == "enableIsSecureContextAttribute")
             testOptions.enableIsSecureContextAttribute = parseBooleanTestHeaderValue(value);
+        if (key == "enableInspectorAdditions")
+            testOptions.enableInspectorAdditions = parseBooleanTestHeaderValue(value);
         pairStart = pairEnd + 1;
     }
 }
index 1c4179d4e76b761cdc88b50a92df59c37d70fc71..99ea15e23f85ed4ecc858e5ab7e78cb0984d6673 100644 (file)
@@ -48,6 +48,7 @@ struct TestOptions {
     bool enablePointerLock { false };
     bool enableCredentialManagement { false };
     bool enableIsSecureContextAttribute { true };
+    bool enableInspectorAdditions { false };
 
     float deviceScaleFactor { 1 };
     Vector<String> overrideLanguages;
@@ -69,7 +70,8 @@ struct TestOptions {
             || enableModernMediaControls != options.enableModernMediaControls
             || enablePointerLock != options.enablePointerLock
             || enableCredentialManagement != options.enableCredentialManagement
-            || enableIsSecureContextAttribute != options.enableIsSecureContextAttribute)
+            || enableIsSecureContextAttribute != options.enableIsSecureContextAttribute
+            || enableInspectorAdditions != options.enableInspectorAdditions)
             return false;
 
         return true;