Web Inspector: add stack trace information for each RecordingAction
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 3 Aug 2017 06:18:08 +0000 (06:18 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 3 Aug 2017 06:18:08 +0000 (06:18 +0000)
https://bugs.webkit.org/show_bug.cgi?id=174663

Reviewed by Joseph Pecoraro.

Source/JavaScriptCore:

* inspector/ScriptCallFrame.h:
Add `operator==` so that when a ScriptCallFrame object is held in a Vector, calling `find`
with an existing value doesn't need require a functor and can use existing code.

* interpreter/StackVisitor.h:
* interpreter/StackVisitor.cpp:
(JSC::StackVisitor::Frame::isWasmFrame const): Inlined in header.

Source/WebCore:

Tests: inspector/canvas/recording-2d.html
       inspector/model/recording.html

* inspector/InspectorCanvas.h:
* inspector/InspectorCanvas.cpp:
(WebCore::InspectorCanvas::indexForData):
(WebCore::InspectorCanvas::buildAction):

Source/WebInspectorUI:

* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Main.html:

* UserInterface/Models/Recording.js:
(WI.Recording.prototype.swizzle):
Add Array type for swizzling array values.

* UserInterface/Models/RecordingAction.js:
(WI.RecordingAction):
(WI.RecordingAction.fromPayload):
(WI.RecordingAction.prototype.get trace):
(WI.RecordingAction.prototype.swizzle):
(WI.RecordingAction.prototype.toJSON):

* UserInterface/Views/RecordingTraceDetailsSidebarPanel.js: Added.
(WI.RecordingTraceDetailsSidebarPanel):
(WI.RecordingTraceDetailsSidebarPanel.disallowInstanceForClass):
(WI.RecordingTraceDetailsSidebarPanel.prototype.inspect):
(WI.RecordingTraceDetailsSidebarPanel.prototype.set recording):
(WI.RecordingTraceDetailsSidebarPanel.prototype.updateActionIndex):
* UserInterface/Views/RecordingTraceDetailsSidebarPanel.css: Added.
(.sidebar > .panel.details.recording-trace > .content > .call-frame):
(.sidebar > .details.recording-trace > .content > .no-trace-data):
(.sidebar > .details.recording-trace > .content > .no-trace-data > .message):

* UserInterface/Views/RecordingTabContentView.js:
(WI.RecordingTabContentView):

* UserInterface/Views/RecordingActionTreeElement.js:
(WI.RecordingActionTreeElement.prototype.populateContextMenu):

* UserInterface/Views/CallFrameView.css:
(.call-frame):
(body[dir=ltr] .call-frame .icon):
(body[dir=rtl] .call-frame .icon):
Apply the same trailing margin for CallFrameView icons as TreeElement.

LayoutTests:

* inspector/canvas/recording-2d-expected.txt:
* inspector/canvas/recording-2d.html:
* inspector/model/recording-expected.txt:
* inspector/model/recording.html:

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

22 files changed:
LayoutTests/ChangeLog
LayoutTests/inspector/canvas/recording-2d-expected.txt
LayoutTests/inspector/canvas/recording-2d.html
LayoutTests/inspector/model/recording-expected.txt
LayoutTests/inspector/model/recording.html
Source/JavaScriptCore/ChangeLog
Source/JavaScriptCore/inspector/ScriptCallFrame.h
Source/JavaScriptCore/interpreter/StackVisitor.cpp
Source/JavaScriptCore/interpreter/StackVisitor.h
Source/WebCore/ChangeLog
Source/WebCore/inspector/InspectorCanvas.cpp
Source/WebCore/inspector/InspectorCanvas.h
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Models/Recording.js
Source/WebInspectorUI/UserInterface/Models/RecordingAction.js
Source/WebInspectorUI/UserInterface/Views/CallFrameView.css
Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js
Source/WebInspectorUI/UserInterface/Views/RecordingTabContentView.js
Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.css [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.js [new file with mode: 0644]

index 7660402d334ac61ae130ca2171a7222c22fd6f83..6ad804aed602b355df90ff6577182feb5f5190bd 100644 (file)
@@ -1,3 +1,15 @@
+2017-08-02  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: add stack trace information for each RecordingAction
+        https://bugs.webkit.org/show_bug.cgi?id=174663
+
+        Reviewed by Joseph Pecoraro.
+
+        * inspector/canvas/recording-2d-expected.txt:
+        * inspector/canvas/recording-2d.html:
+        * inspector/model/recording-expected.txt:
+        * inspector/model/recording.html:
+
 2017-08-02  Chris Dumez  <cdumez@apple.com>
 
         NetworkResourceLoader::setDefersLoading() may cause start() to be called multiple times
index f1c0ea78b718ba88d44ab2ec06c7d222144c9861..90b33c7377a8ad002393fa081b7e74633fa7b681 100644 (file)
@@ -55,6 +55,17 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             4,
             5,
             0
+          ],
+          [
+            4,
+            6,
+            7,
+            9,
+            11,
+            13,
+            16,
+            18,
+            20
           ]
         ],
         [
@@ -66,6 +77,17 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             9,
             10,
             1
+          ],
+          [
+            21,
+            6,
+            22,
+            9,
+            11,
+            13,
+            16,
+            18,
+            20
           ]
         ]
       ]
@@ -73,7 +95,83 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
   ],
   "data": [
     "#000000",
-    "arc"
+    "arc",
+    "",
+    "inspector/canvas/recording-2d.html",
+    [
+      2,
+      3,
+      58,
+      42
+    ],
+    "ignoreException",
+    [
+      5,
+      3,
+      45,
+      10
+    ],
+    [
+      2,
+      3,
+      58,
+      28
+    ],
+    "f",
+    [
+      8,
+      3,
+      378,
+      24
+    ],
+    "performActions",
+    [
+      10,
+      3,
+      382,
+      6
+    ],
+    "global code",
+    [
+      12,
+      2,
+      1,
+      15
+    ],
+    "evaluateWithScopeExtension",
+    "[native code]",
+    [
+      14,
+      15,
+      0,
+      0
+    ],
+    "_evaluateOn",
+    [
+      17,
+      2,
+      128,
+      29
+    ],
+    "_evaluateAndWrap",
+    [
+      19,
+      2,
+      122,
+      108
+    ],
+    [
+      2,
+      3,
+      59,
+      42
+    ],
+    [
+      2,
+      3,
+      59,
+      28
+    ]
   ]
 }
 
@@ -130,6 +228,17 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             4,
             5,
             0
+          ],
+          [
+            4,
+            6,
+            7,
+            9,
+            11,
+            13,
+            16,
+            18,
+            20
           ]
         ],
         [
@@ -141,6 +250,17 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             9,
             10,
             1
+          ],
+          [
+            21,
+            6,
+            22,
+            9,
+            11,
+            13,
+            16,
+            18,
+            20
           ]
         ]
       ]
@@ -148,13 +268,19 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          2,
+          23,
           [
             1,
             2,
             3,
             4,
             5
+          ],
+          [
+            24,
+            6,
+            25,
+            9
           ]
         ]
       ]
@@ -162,15 +288,19 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          3,
-          []
+          26,
+          [],
+          [
+            27,
+            9
+          ]
         ]
       ]
     },
     {
       "actions": [
         [
-          4,
+          28,
           [
             1,
             2,
@@ -178,6 +308,10 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             4,
             5,
             6
+          ],
+          [
+            29,
+            9
           ]
         ]
       ]
@@ -185,20 +319,28 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          5,
-          []
+          30,
+          [],
+          [
+            31,
+            9
+          ]
         ]
       ]
     },
     {
       "actions": [
         [
-          6,
+          32,
           [
             1,
             2,
             3,
             4
+          ],
+          [
+            33,
+            9
           ]
         ]
       ]
@@ -206,37 +348,57 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          7,
-          []
+          34,
+          [],
+          [
+            35,
+            9
+          ]
         ]
       ]
     },
     {
       "actions": [
         [
-          8,
+          36,
+          [
+            37
+          ],
           [
+            38,
             9
           ]
         ],
         [
-          8,
+          36,
           [
-            10
+            39
+          ],
+          [
+            40,
+            9
           ]
         ],
         [
-          8,
+          36,
           [
-            11,
+            41,
+            37
+          ],
+          [
+            42,
             9
           ]
         ],
         [
-          8,
+          36,
           [
-            12,
-            10
+            43,
+            39
+          ],
+          [
+            44,
+            9
           ]
         ]
       ]
@@ -244,32 +406,52 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          13,
-          []
+          45,
+          [],
+          [
+            46,
+            9
+          ]
         ]
       ]
     },
     {
       "actions": [
         [
-          14,
-          []
+          47,
+          [],
+          [
+            48,
+            9
+          ]
         ]
       ]
     },
     {
       "actions": [
         [
-          15,
+          49,
           [
-            16
+            50
+          ],
+          [
+            51,
+            6,
+            52,
+            9
           ]
         ],
         [
-          15,
+          49,
           [
             2,
             3
+          ],
+          [
+            53,
+            6,
+            54,
+            9
           ]
         ]
       ]
@@ -277,12 +459,18 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          17,
+          55,
           [
             1,
             2,
             3,
             4
+          ],
+          [
+            56,
+            6,
+            57,
+            9
           ]
         ]
       ]
@@ -290,24 +478,42 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          18,
+          58,
           [
-            19,
-            20
+            59,
+            60
+          ],
+          [
+            61,
+            6,
+            62,
+            9
           ]
         ],
         [
-          18,
+          58,
           [
-            21,
-            22
+            63,
+            64
+          ],
+          [
+            65,
+            6,
+            66,
+            9
           ]
         ],
         [
-          18,
+          58,
           [
-            23,
-            24
+            67,
+            68
+          ],
+          [
+            69,
+            6,
+            70,
+            9
           ]
         ]
       ]
@@ -315,7 +521,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          25,
+          71,
           [
             1,
             2,
@@ -323,6 +529,12 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             4,
             5,
             6
+          ],
+          [
+            72,
+            6,
+            73,
+            9
           ]
         ]
       ]
@@ -330,13 +542,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          26,
-          []
+          74,
+          [],
+          [
+            75,
+            9
+          ]
         ],
         [
-          26,
+          74,
+          [
+            76
+          ],
           [
-            27
+            77,
+            9
           ]
         ]
       ]
@@ -344,16 +564,24 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          28,
+          78,
           [
-            29
+            79
+          ],
+          [
+            80,
+            9
           ]
         ],
         [
-          28,
+          78,
           [
-            11,
-            29
+            41,
+            79
+          ],
+          [
+            81,
+            9
           ]
         ]
       ]
@@ -361,63 +589,99 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          30,
+          82,
           [
-            19,
+            59,
             1,
             2
+          ],
+          [
+            83,
+            6,
+            84,
+            9
           ]
         ],
         [
-          30,
+          82,
           [
-            21,
+            63,
             3,
             4
+          ],
+          [
+            85,
+            6,
+            86,
+            9
           ]
         ],
         [
-          30,
+          82,
           [
-            23,
+            67,
             5,
             6
+          ],
+          [
+            87,
+            6,
+            88,
+            9
           ]
         ],
         [
-          30,
+          82,
           [
-            19,
+            59,
             7,
             8,
             9,
             10
+          ],
+          [
+            89,
+            6,
+            90,
+            9
           ]
         ],
         [
-          30,
+          82,
           [
-            21,
+            63,
             11,
             12,
             13,
             14
+          ],
+          [
+            91,
+            6,
+            92,
+            9
           ]
         ],
         [
-          30,
+          82,
           [
-            23,
+            67,
             15,
             16,
             17,
             18
+          ],
+          [
+            93,
+            6,
+            94,
+            9
           ]
         ],
         [
-          30,
+          82,
           [
-            19,
+            59,
             19,
             20,
             21,
@@ -426,12 +690,18 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             24,
             25,
             26
+          ],
+          [
+            95,
+            6,
+            96,
+            9
           ]
         ],
         [
-          30,
+          82,
           [
-            21,
+            63,
             27,
             28,
             29,
@@ -440,12 +710,18 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             32,
             33,
             34
+          ],
+          [
+            97,
+            6,
+            98,
+            9
           ]
         ],
         [
-          30,
+          82,
           [
-            23,
+            67,
             35,
             36,
             37,
@@ -454,6 +730,12 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             40,
             41,
             42
+          ],
+          [
+            99,
+            6,
+            100,
+            9
           ]
         ]
       ]
@@ -461,9 +743,9 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          31,
+          101,
           [
-            19,
+            59,
             1,
             2,
             3,
@@ -472,13 +754,17 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             6,
             7,
             8,
-            32
+            2
+          ],
+          [
+            102,
+            9
           ]
         ],
         [
-          31,
+          101,
           [
-            19,
+            59,
             9,
             10,
             11,
@@ -487,7 +773,11 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             14,
             15,
             16,
-            27
+            76
+          ],
+          [
+            103,
+            9
           ]
         ]
       ]
@@ -495,7 +785,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          33,
+          104,
           [
             1,
             2,
@@ -505,10 +795,16 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             6,
             7,
             0
+          ],
+          [
+            105,
+            6,
+            106,
+            9
           ]
         ],
         [
-          33,
+          104,
           [
             8,
             9,
@@ -518,6 +814,12 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             13,
             14,
             1
+          ],
+          [
+            107,
+            6,
+            108,
+            9
           ]
         ]
       ]
@@ -525,29 +827,45 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          34,
+          109,
+          [
+            37
+          ],
           [
+            110,
             9
           ]
         ],
         [
-          34,
+          109,
           [
-            10
+            39
+          ],
+          [
+            111,
+            9
           ]
         ],
         [
-          34,
+          109,
           [
-            11,
+            41,
+            37
+          ],
+          [
+            112,
             9
           ]
         ],
         [
-          34,
+          109,
           [
-            12,
-            10
+            43,
+            39
+          ],
+          [
+            113,
+            9
           ]
         ]
       ]
@@ -555,12 +873,16 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          35,
+          114,
           [
             1,
             2,
             3,
             4
+          ],
+          [
+            115,
+            9
           ]
         ]
       ]
@@ -568,31 +890,51 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          36,
-          []
+          116,
+          [],
+          [
+            117,
+            9
+          ]
         ],
         [
-          36,
+          116,
+          [
+            76
+          ],
           [
-            27
+            118,
+            9
           ]
         ],
         [
-          36,
+          116,
           [
-            38
+            120
+          ],
+          [
+            121,
+            9
           ]
         ],
         [
-          36,
+          116,
+          [
+            123
+          ],
           [
-            40
+            124,
+            9
           ]
         ],
         [
-          36,
+          116,
           [
-            44
+            128
+          ],
+          [
+            129,
+            9
           ]
         ]
       ]
@@ -600,20 +942,28 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          45,
+          130,
           [
-            20,
+            60,
             1,
             2
+          ],
+          [
+            131,
+            9
           ]
         ],
         [
-          45,
+          130,
           [
-            22,
+            64,
             3,
             4,
             5
+          ],
+          [
+            132,
+            9
           ]
         ]
       ]
@@ -621,13 +971,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          46,
-          []
+          133,
+          [],
+          [
+            134,
+            9
+          ]
         ],
         [
-          46,
+          133,
+          [
+            76
+          ],
           [
-            27
+            135,
+            9
           ]
         ]
       ]
@@ -635,12 +993,18 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          47,
+          136,
           [
             1,
             2,
             3,
             4
+          ],
+          [
+            137,
+            6,
+            138,
+            9
           ]
         ]
       ]
@@ -648,29 +1012,45 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          48,
-          []
+          139,
+          [],
+          [
+            140,
+            9
+          ]
         ]
       ]
     },
     {
       "actions": [
         [
-          49,
-          []
+          141,
+          [],
+          [
+            142,
+            9
+          ]
         ]
       ]
     },
     {
       "actions": [
         [
-          50,
-          []
+          143,
+          [],
+          [
+            144,
+            9
+          ]
         ],
         [
-          50,
+          143,
           [
             0
+          ],
+          [
+            145,
+            9
           ]
         ]
       ]
@@ -678,13 +1058,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          51,
-          []
+          146,
+          [],
+          [
+            147,
+            9
+          ]
         ],
         [
-          51,
+          146,
+          [
+            76
+          ],
           [
-            27
+            148,
+            9
           ]
         ]
       ]
@@ -692,13 +1080,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          52,
-          []
+          149,
+          [],
+          [
+            150,
+            9
+          ]
         ],
         [
-          52,
+          149,
           [
             1
+          ],
+          [
+            151,
+            9
           ]
         ]
       ]
@@ -706,13 +1102,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          53,
-          []
+          152,
+          [],
+          [
+            153,
+            9
+          ]
         ],
         [
-          53,
+          152,
           [
-            54
+            154
+          ],
+          [
+            155,
+            9
           ]
         ]
       ]
@@ -720,37 +1124,53 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          55,
+          156,
           [
-            11,
+            41,
             5,
             6,
+            37
+          ],
+          [
+            157,
             9
           ]
         ],
         [
-          55,
+          156,
           [
-            12,
+            43,
             7,
             8,
-            10
+            39
+          ],
+          [
+            158,
+            9
           ]
         ],
         [
-          55,
+          156,
           [
             9,
             10,
+            37
+          ],
+          [
+            159,
             9
           ]
         ],
         [
-          55,
+          156,
           [
             11,
             12,
-            10
+            39
+          ],
+          [
+            160,
+            9
           ]
         ]
       ]
@@ -758,18 +1178,26 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          56,
+          161,
           [
-            11,
+            41,
             3,
             4
+          ],
+          [
+            162,
+            9
           ]
         ],
         [
-          56,
+          161,
           [
             5,
             6
+          ],
+          [
+            163,
+            9
           ]
         ]
       ]
@@ -777,13 +1205,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          57,
-          []
+          164,
+          [],
+          [
+            165,
+            9
+          ]
         ],
         [
-          57,
+          164,
           [
-            27
+            76
+          ],
+          [
+            166,
+            9
           ]
         ]
       ]
@@ -791,13 +1227,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          58,
-          []
+          167,
+          [],
+          [
+            168,
+            9
+          ]
         ],
         [
-          58,
+          167,
           [
             1
+          ],
+          [
+            169,
+            9
           ]
         ]
       ]
@@ -805,13 +1249,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          59,
-          []
+          170,
+          [],
+          [
+            171,
+            9
+          ]
         ],
         [
-          59,
+          170,
+          [
+            76
+          ],
           [
-            27
+            172,
+            9
           ]
         ]
       ]
@@ -819,10 +1271,14 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          60,
+          173,
           [
             1,
             2
+          ],
+          [
+            174,
+            9
           ]
         ]
       ]
@@ -830,13 +1286,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          61,
-          []
+          175,
+          [],
+          [
+            176,
+            9
+          ]
         ],
         [
-          61,
+          175,
           [
             1
+          ],
+          [
+            177,
+            9
           ]
         ]
       ]
@@ -844,9 +1308,13 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          62,
+          178,
+          [
+            76
+          ],
           [
-            27
+            179,
+            9
           ]
         ]
       ]
@@ -854,13 +1322,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          63,
-          []
+          180,
+          [],
+          [
+            181,
+            9
+          ]
         ],
         [
-          63,
+          180,
           [
             1
+          ],
+          [
+            182,
+            9
           ]
         ]
       ]
@@ -868,10 +1344,14 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          64,
+          183,
           [
             1,
             2
+          ],
+          [
+            184,
+            9
           ]
         ]
       ]
@@ -879,23 +1359,31 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          65,
+          185,
           [
-            16,
+            50,
             5,
             6
+          ],
+          [
+            186,
+            9
           ]
         ],
         [
-          65,
+          185,
           [
-            66,
+            187,
             7,
             8,
             9,
             10,
             11,
             12
+          ],
+          [
+            188,
+            9
           ]
         ]
       ]
@@ -903,12 +1391,16 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          67,
+          189,
           [
             1,
             2,
             3,
             4
+          ],
+          [
+            190,
+            9
           ]
         ]
       ]
@@ -916,12 +1408,16 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          68,
+          191,
           [
             1,
             2,
             3,
             4
+          ],
+          [
+            192,
+            9
           ]
         ]
       ]
@@ -929,25 +1425,37 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          69,
-          []
+          193,
+          [],
+          [
+            194,
+            9
+          ]
         ]
       ]
     },
     {
       "actions": [
         [
-          70,
-          []
+          195,
+          [],
+          [
+            196,
+            9
+          ]
         ]
       ]
     },
     {
       "actions": [
         [
-          71,
+          197,
           [
             1
+          ],
+          [
+            198,
+            9
           ]
         ]
       ]
@@ -955,18 +1463,26 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          72,
-          []
+          199,
+          [],
+          [
+            200,
+            9
+          ]
         ]
       ]
     },
     {
       "actions": [
         [
-          73,
+          201,
           [
             1,
             2
+          ],
+          [
+            202,
+            9
           ]
         ]
       ]
@@ -974,15 +1490,23 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          74,
+          203,
           [
             null
+          ],
+          [
+            204,
+            9
           ]
         ],
         [
-          74,
+          203,
           [
             1
+          ],
+          [
+            205,
+            9
           ]
         ]
       ]
@@ -990,15 +1514,23 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          75,
+          206,
           [
-            76
+            207
+          ],
+          [
+            208,
+            9
           ]
         ],
         [
-          75,
+          206,
+          [
+            76
+          ],
           [
-            27
+            209,
+            9
           ]
         ]
       ]
@@ -1006,49 +1538,73 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          77,
+          210,
           [
-            20
+            60
+          ],
+          [
+            211,
+            9
           ]
         ],
         [
-          77,
+          210,
           [
-            22,
+            64,
             1
+          ],
+          [
+            212,
+            9
           ]
         ],
         [
-          77,
+          210,
           [
             2,
             1
+          ],
+          [
+            213,
+            9
           ]
         ],
         [
-          77,
+          210,
           [
             3,
             4
+          ],
+          [
+            214,
+            9
           ]
         ],
         [
-          77,
+          210,
           [
             5,
             6,
             7,
             8
+          ],
+          [
+            215,
+            9
           ]
         ],
         [
-          77,
+          210,
           [
             9,
             10,
             11,
             12,
             13
+          ],
+          [
+            216,
+            9
           ]
         ]
       ]
@@ -1056,15 +1612,23 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          78,
+          217,
           [
-            76
+            207
+          ],
+          [
+            218,
+            9
           ]
         ],
         [
-          78,
+          217,
           [
-            27
+            76
+          ],
+          [
+            219,
+            9
           ]
         ]
       ]
@@ -1072,12 +1636,16 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          79,
+          220,
           [
             [
               1,
               2
             ]
+          ],
+          [
+            221,
+            9
           ]
         ]
       ]
@@ -1085,15 +1653,23 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          80,
+          222,
           [
-            76
+            207
+          ],
+          [
+            223,
+            9
           ]
         ],
         [
-          80,
+          222,
           [
-            27
+            76
+          ],
+          [
+            224,
+            9
           ]
         ]
       ]
@@ -1101,15 +1677,23 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          81,
+          225,
           [
             null
+          ],
+          [
+            226,
+            9
           ]
         ],
         [
-          81,
+          225,
           [
             1
+          ],
+          [
+            227,
+            9
           ]
         ]
       ]
@@ -1117,15 +1701,23 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          82,
+          228,
           [
             null
+          ],
+          [
+            229,
+            9
           ]
         ],
         [
-          82,
+          228,
           [
             1
+          ],
+          [
+            230,
+            9
           ]
         ]
       ]
@@ -1133,46 +1725,62 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          83,
+          231,
           [
             1,
             2,
             3,
-            84
+            232
+          ],
+          [
+            233,
+            9
           ]
         ],
         [
-          83,
+          231,
           [
             4,
             5,
             6,
-            27,
+            76,
             7
+          ],
+          [
+            234,
+            9
           ]
         ],
         [
-          83,
+          231,
           [
             8,
             9,
             10,
             11,
             1
+          ],
+          [
+            235,
+            9
           ]
         ],
         [
-          83,
+          231,
           [
             12,
             13,
             14,
             15,
             16
+          ],
+          [
+            236,
+            9
           ]
         ],
         [
-          83,
+          231,
           [
             17,
             18,
@@ -1181,10 +1789,14 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             21,
             22,
             23
+          ],
+          [
+            237,
+            9
           ]
         ],
         [
-          83,
+          231,
           [
             24,
             25,
@@ -1194,6 +1806,10 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             29,
             30,
             31
+          ],
+          [
+            238,
+            9
           ]
         ]
       ]
@@ -1201,49 +1817,73 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          85,
+          239,
           [
-            20
+            60
+          ],
+          [
+            240,
+            9
           ]
         ],
         [
-          85,
+          239,
           [
-            22,
+            64,
             1
+          ],
+          [
+            241,
+            9
           ]
         ],
         [
-          85,
+          239,
           [
             2,
             1
+          ],
+          [
+            242,
+            9
           ]
         ],
         [
-          85,
+          239,
           [
             3,
             4
+          ],
+          [
+            243,
+            9
           ]
         ],
         [
-          85,
+          239,
           [
             5,
             6,
             7,
             8
+          ],
+          [
+            244,
+            9
           ]
         ],
         [
-          85,
+          239,
           [
             9,
             10,
             11,
             12,
             13
+          ],
+          [
+            245,
+            9
           ]
         ]
       ]
@@ -1251,7 +1891,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          86,
+          246,
           [
             1,
             2,
@@ -1259,10 +1899,14 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             4,
             5,
             6
+          ],
+          [
+            247,
+            9
           ]
         ],
         [
-          86,
+          246,
           [
             [
               1,
@@ -1272,10 +1916,16 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
               0,
               0
             ]
+          ],
+          [
+            248,
+            6,
+            249,
+            9
           ]
         ],
         [
-          86,
+          246,
           [
             [
               7,
@@ -1285,6 +1935,12 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
               11,
               12
             ]
+          ],
+          [
+            250,
+            6,
+            251,
+            9
           ]
         ]
       ]
@@ -1292,13 +1948,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          87,
-          []
+          252,
+          [],
+          [
+            253,
+            9
+          ]
         ],
         [
-          87,
+          252,
           [
             1
+          ],
+          [
+            254,
+            9
           ]
         ]
       ]
@@ -1306,13 +1970,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          88,
-          []
+          255,
+          [],
+          [
+            256,
+            9
+          ]
         ],
         [
-          88,
+          255,
           [
-            27
+            76
+          ],
+          [
+            257,
+            9
           ]
         ]
       ]
@@ -1320,13 +1992,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          89,
-          []
-        ],
+          258,
+          [],
+          [
+            259,
+            9
+          ]
+        ],
         [
-          89,
+          258,
           [
             1
+          ],
+          [
+            260,
+            9
           ]
         ]
       ]
@@ -1334,13 +2014,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          90,
-          []
+          261,
+          [],
+          [
+            262,
+            9
+          ]
         ],
         [
-          90,
+          261,
           [
             1
+          ],
+          [
+            263,
+            9
           ]
         ]
       ]
@@ -1348,13 +2036,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          91,
-          []
+          264,
+          [],
+          [
+            265,
+            9
+          ]
         ],
         [
-          91,
+          264,
           [
-            11
+            41
+          ],
+          [
+            266,
+            9
           ]
         ]
       ]
@@ -1362,12 +2058,16 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          92,
+          267,
           [
             1,
             2,
             3,
             4
+          ],
+          [
+            268,
+            9
           ]
         ]
       ]
@@ -1375,31 +2075,51 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          93,
-          []
+          269,
+          [],
+          [
+            270,
+            9
+          ]
         ],
         [
-          93,
+          269,
+          [
+            76
+          ],
           [
-            27
+            271,
+            9
           ]
         ],
         [
-          93,
+          269,
           [
-            38
+            120
+          ],
+          [
+            272,
+            9
           ]
         ],
         [
-          93,
+          269,
           [
-            40
+            123
+          ],
+          [
+            273,
+            9
           ]
         ],
         [
-          93,
+          269,
           [
-            44
+            128
+          ],
+          [
+            274,
+            9
           ]
         ]
       ]
@@ -1407,20 +2127,28 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          94,
+          275,
           [
-            20,
+            60,
             1,
             2
+          ],
+          [
+            276,
+            9
           ]
         ],
         [
-          94,
+          275,
           [
-            22,
+            64,
             3,
             4,
             5
+          ],
+          [
+            277,
+            9
           ]
         ]
       ]
@@ -1428,13 +2156,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          95,
-          []
+          278,
+          [],
+          [
+            279,
+            9
+          ]
         ],
         [
-          95,
+          278,
+          [
+            76
+          ],
           [
-            27
+            280,
+            9
           ]
         ]
       ]
@@ -1442,13 +2178,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          96,
-          []
+          281,
+          [],
+          [
+            282,
+            9
+          ]
         ],
         [
-          96,
+          281,
+          [
+            76
+          ],
           [
-            27
+            283,
+            9
           ]
         ]
       ]
@@ -1456,7 +2200,7 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          97,
+          284,
           [
             1,
             2,
@@ -1464,6 +2208,10 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             4,
             5,
             6
+          ],
+          [
+            285,
+            9
           ]
         ]
       ]
@@ -1471,10 +2219,14 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          98,
+          286,
           [
             1,
             2
+          ],
+          [
+            287,
+            9
           ]
         ]
       ]
@@ -1482,20 +2234,30 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          99,
-          []
+          288,
+          [],
+          [
+            289,
+            9
+          ]
         ]
       ]
     },
     {
       "actions": [
         [
-          100,
+          290,
           [
             1,
             2,
             3,
             4
+          ],
+          [
+            291,
+            6,
+            292,
+            9
           ]
         ]
       ]
@@ -1503,13 +2265,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          101,
-          []
+          293,
+          [],
+          [
+            294,
+            9
+          ]
         ],
         [
-          101,
+          293,
           [
             1
+          ],
+          [
+            295,
+            9
           ]
         ]
       ]
@@ -1517,16 +2287,24 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          102,
-          []
+          296,
+          [],
+          [
+            297,
+            9
+          ]
         ],
         [
-          102,
+          296,
           [
             [
               1,
               2
             ]
+          ],
+          [
+            298,
+            9
           ]
         ]
       ]
@@ -1534,13 +2312,21 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          103,
-          []
+          299,
+          [],
+          [
+            300,
+            9
+          ]
         ],
         [
-          103,
+          299,
           [
             1
+          ],
+          [
+            301,
+            9
           ]
         ]
       ]
@@ -1548,23 +2334,31 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
     {
       "actions": [
         [
-          104,
+          302,
           [
-            16,
+            50,
             5,
             6
+          ],
+          [
+            303,
+            9
           ]
         ],
         [
-          104,
+          302,
           [
-            66,
+            187,
             7,
             8,
             9,
             10,
             11,
             12
+          ],
+          [
+            304,
+            9
           ]
         ]
       ]
@@ -1573,19 +2367,173 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
   "data": [
     "#000000",
     "arc",
+    "",
+    "inspector/canvas/recording-2d.html",
+    [
+      2,
+      3,
+      58,
+      42
+    ],
+    "ignoreException",
+    [
+      5,
+      3,
+      45,
+      10
+    ],
+    [
+      2,
+      3,
+      58,
+      28
+    ],
+    "f",
+    [
+      8,
+      3,
+      378,
+      24
+    ],
+    "performActions",
+    [
+      10,
+      3,
+      382,
+      6
+    ],
+    "global code",
+    [
+      12,
+      2,
+      1,
+      15
+    ],
+    "evaluateWithScopeExtension",
+    "[native code]",
+    [
+      14,
+      15,
+      0,
+      0
+    ],
+    "_evaluateOn",
+    [
+      17,
+      2,
+      128,
+      29
+    ],
+    "_evaluateAndWrap",
+    [
+      19,
+      2,
+      122,
+      108
+    ],
+    [
+      2,
+      3,
+      59,
+      42
+    ],
+    [
+      2,
+      3,
+      59,
+      28
+    ],
     "arcTo",
+    [
+      2,
+      3,
+      62,
+      44
+    ],
+    [
+      2,
+      3,
+      62,
+      28
+    ],
     "beginPath",
+    [
+      2,
+      3,
+      65,
+      26
+    ],
     "bezierCurveTo",
+    [
+      2,
+      3,
+      68,
+      30
+    ],
     "canvas",
+    [
+      2,
+      3,
+      71,
+      16
+    ],
     "clearRect",
+    [
+      2,
+      3,
+      74,
+      26
+    ],
     "clearShadow",
+    [
+      2,
+      3,
+      77,
+      28
+    ],
     "clip",
     "nonzero",
+    [
+      2,
+      3,
+      80,
+      21
+    ],
     "evenodd",
+    [
+      2,
+      3,
+      81,
+      21
+    ],
     "M1 2",
+    [
+      2,
+      3,
+      82,
+      21
+    ],
     "M3 4",
+    [
+      2,
+      3,
+      83,
+      21
+    ],
     "closePath",
+    [
+      2,
+      3,
+      86,
+      26
+    ],
     "commit",
+    [
+      2,
+      3,
+      89,
+      23
+    ],
     "createImageData",
     [
       [
@@ -1609,81 +2557,608 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
       1,
       4
     ],
+    [
+      2,
+      3,
+      92,
+      54
+    ],
+    [
+      2,
+      3,
+      92,
+      28
+    ],
+    [
+      2,
+      3,
+      93,
+      54
+    ],
+    [
+      2,
+      3,
+      93,
+      28
+    ],
     "createLinearGradient",
+    [
+      2,
+      3,
+      96,
+      59
+    ],
+    [
+      2,
+      3,
+      96,
+      28
+    ],
     "createPattern",
     "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABNJREFUCB1j/M/AAEQMDEwgAgQAHxcCAmtAm/sAAAAASUVORK5CYII=",
     "testA",
+    [
+      2,
+      3,
+      99,
+      52
+    ],
+    [
+      2,
+      3,
+      99,
+      28
+    ],
     "data:,",
     "testB",
+    [
+      2,
+      3,
+      100,
+      52
+    ],
+    [
+      2,
+      3,
+      100,
+      28
+    ],
     "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAAtJREFUCB1jYEAHAAASAAGAFMrMAAAAAElFTkSuQmCC",
     "testC",
+    [
+      2,
+      3,
+      101,
+      52
+    ],
+    [
+      2,
+      3,
+      101,
+      28
+    ],
     "createRadialGradient",
+    [
+      2,
+      3,
+      104,
+      59
+    ],
+    [
+      2,
+      3,
+      104,
+      28
+    ],
     "direction",
+    [
+      2,
+      3,
+      107,
+      16
+    ],
     "test",
+    [
+      2,
+      3,
+      108,
+      16
+    ],
     "drawFocusIfNeeded",
     "element",
-    "drawImage",
-    "drawImageFromRect",
-    "",
-    "ellipse",
-    "fill",
-    "fillRect",
-    "fillStyle",
-    "linear-gradient",
     [
-      37,
-      [
-        1,
-        2,
-        3,
-        4
-      ],
-      []
+      2,
+      3,
+      111,
+      34
     ],
-    "radial-gradient",
     [
-      39,
-      [
-        1,
-        2,
-        3,
-        4,
-        5,
-        6
-      ],
-      []
+      2,
+      3,
+      112,
+      34
     ],
-    "pattern",
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABNJREFUCB1j/M/AAEQMDEwgAgQAHxcCAmtAm/sAAAAASUVORK5CYII=",
-    "no-repeat",
+    "drawImage",
     [
-      41,
-      42,
-      43
+      2,
+      3,
+      115,
+      48
     ],
-    "fillText",
-    "font",
-    "getImageData",
-    "getLineDash",
-    "getTransform",
-    "globalAlpha",
-    "globalCompositeOperation",
-    "imageSmoothingEnabled",
-    "imageSmoothingQuality",
-    "low",
-    "isPointInPath",
-    "isPointInStroke",
-    "lineCap",
-    "lineDashOffset",
-    "lineJoin",
-    "lineTo",
-    "lineWidth",
-    "measureText",
-    "miterLimit",
-    "moveTo",
-    "putImageData",
     [
-      [
+      2,
+      3,
+      115,
+      28
+    ],
+    [
+      2,
+      3,
+      116,
+      48
+    ],
+    [
+      2,
+      3,
+      116,
+      28
+    ],
+    [
+      2,
+      3,
+      117,
+      48
+    ],
+    [
+      2,
+      3,
+      117,
+      28
+    ],
+    [
+      2,
+      3,
+      118,
+      48
+    ],
+    [
+      2,
+      3,
+      118,
+      28
+    ],
+    [
+      2,
+      3,
+      119,
+      48
+    ],
+    [
+      2,
+      3,
+      119,
+      28
+    ],
+    [
+      2,
+      3,
+      120,
+      48
+    ],
+    [
+      2,
+      3,
+      120,
+      28
+    ],
+    [
+      2,
+      3,
+      121,
+      48
+    ],
+    [
+      2,
+      3,
+      121,
+      28
+    ],
+    [
+      2,
+      3,
+      122,
+      48
+    ],
+    [
+      2,
+      3,
+      122,
+      28
+    ],
+    [
+      2,
+      3,
+      123,
+      48
+    ],
+    [
+      2,
+      3,
+      123,
+      28
+    ],
+    "drawImageFromRect",
+    [
+      2,
+      3,
+      126,
+      34
+    ],
+    [
+      2,
+      3,
+      127,
+      34
+    ],
+    "ellipse",
+    [
+      2,
+      3,
+      130,
+      46
+    ],
+    [
+      2,
+      3,
+      130,
+      28
+    ],
+    [
+      2,
+      3,
+      131,
+      46
+    ],
+    [
+      2,
+      3,
+      131,
+      28
+    ],
+    "fill",
+    [
+      2,
+      3,
+      134,
+      21
+    ],
+    [
+      2,
+      3,
+      135,
+      21
+    ],
+    [
+      2,
+      3,
+      136,
+      21
+    ],
+    [
+      2,
+      3,
+      137,
+      21
+    ],
+    "fillRect",
+    [
+      2,
+      3,
+      140,
+      25
+    ],
+    "fillStyle",
+    [
+      2,
+      3,
+      143,
+      16
+    ],
+    [
+      2,
+      3,
+      144,
+      16
+    ],
+    "linear-gradient",
+    [
+      119,
+      [
+        1,
+        2,
+        3,
+        4
+      ],
+      []
+    ],
+    [
+      2,
+      3,
+      145,
+      16
+    ],
+    "radial-gradient",
+    [
+      122,
+      [
+        1,
+        2,
+        3,
+        4,
+        5,
+        6
+      ],
+      []
+    ],
+    [
+      2,
+      3,
+      146,
+      16
+    ],
+    "pattern",
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABNJREFUCB1j/M/AAEQMDEwgAgQAHxcCAmtAm/sAAAAASUVORK5CYII=",
+    "no-repeat",
+    [
+      125,
+      126,
+      127
+    ],
+    [
+      2,
+      3,
+      147,
+      16
+    ],
+    "fillText",
+    [
+      2,
+      3,
+      150,
+      25
+    ],
+    [
+      2,
+      3,
+      151,
+      25
+    ],
+    "font",
+    [
+      2,
+      3,
+      154,
+      16
+    ],
+    [
+      2,
+      3,
+      155,
+      16
+    ],
+    "getImageData",
+    [
+      2,
+      3,
+      158,
+      51
+    ],
+    [
+      2,
+      3,
+      158,
+      28
+    ],
+    "getLineDash",
+    [
+      2,
+      3,
+      161,
+      28
+    ],
+    "getTransform",
+    [
+      2,
+      3,
+      164,
+      29
+    ],
+    "globalAlpha",
+    [
+      2,
+      3,
+      167,
+      16
+    ],
+    [
+      2,
+      3,
+      168,
+      16
+    ],
+    "globalCompositeOperation",
+    [
+      2,
+      3,
+      171,
+      16
+    ],
+    [
+      2,
+      3,
+      172,
+      16
+    ],
+    "imageSmoothingEnabled",
+    [
+      2,
+      3,
+      175,
+      16
+    ],
+    [
+      2,
+      3,
+      176,
+      16
+    ],
+    "imageSmoothingQuality",
+    [
+      2,
+      3,
+      179,
+      16
+    ],
+    "low",
+    [
+      2,
+      3,
+      180,
+      16
+    ],
+    "isPointInPath",
+    [
+      2,
+      3,
+      183,
+      30
+    ],
+    [
+      2,
+      3,
+      184,
+      30
+    ],
+    [
+      2,
+      3,
+      185,
+      30
+    ],
+    [
+      2,
+      3,
+      186,
+      30
+    ],
+    "isPointInStroke",
+    [
+      2,
+      3,
+      189,
+      32
+    ],
+    [
+      2,
+      3,
+      190,
+      32
+    ],
+    "lineCap",
+    [
+      2,
+      3,
+      193,
+      16
+    ],
+    [
+      2,
+      3,
+      194,
+      16
+    ],
+    "lineDashOffset",
+    [
+      2,
+      3,
+      197,
+      16
+    ],
+    [
+      2,
+      3,
+      198,
+      16
+    ],
+    "lineJoin",
+    [
+      2,
+      3,
+      201,
+      16
+    ],
+    [
+      2,
+      3,
+      202,
+      16
+    ],
+    "lineTo",
+    [
+      2,
+      3,
+      205,
+      23
+    ],
+    "lineWidth",
+    [
+      2,
+      3,
+      208,
+      16
+    ],
+    [
+      2,
+      3,
+      209,
+      16
+    ],
+    "measureText",
+    [
+      2,
+      3,
+      212,
+      28
+    ],
+    "miterLimit",
+    [
+      2,
+      3,
+      215,
+      16
+    ],
+    [
+      2,
+      3,
+      216,
+      16
+    ],
+    "moveTo",
+    [
+      2,
+      3,
+      219,
+      23
+    ],
+    "putImageData",
+    [
+      2,
+      3,
+      222,
+      29
+    ],
+    [
+      [
         0,
         0,
         0,
@@ -1712,44 +3187,518 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
       2,
       3
     ],
+    [
+      2,
+      3,
+      223,
+      29
+    ],
     "quadraticCurveTo",
+    [
+      2,
+      3,
+      226,
+      33
+    ],
     "rect",
+    [
+      2,
+      3,
+      229,
+      21
+    ],
     "resetTransform",
+    [
+      2,
+      3,
+      232,
+      31
+    ],
     "restore",
+    [
+      2,
+      3,
+      235,
+      24
+    ],
     "rotate",
+    [
+      2,
+      3,
+      238,
+      23
+    ],
     "save",
+    [
+      2,
+      3,
+      241,
+      21
+    ],
     "scale",
+    [
+      2,
+      3,
+      244,
+      22
+    ],
     "setAlpha",
+    [
+      2,
+      3,
+      247,
+      25
+    ],
+    [
+      2,
+      3,
+      248,
+      25
+    ],
     "setCompositeOperation",
     "undefined",
+    [
+      2,
+      3,
+      251,
+      38
+    ],
+    [
+      2,
+      3,
+      252,
+      38
+    ],
     "setFillColor",
+    [
+      2,
+      3,
+      255,
+      29
+    ],
+    [
+      2,
+      3,
+      256,
+      29
+    ],
+    [
+      2,
+      3,
+      257,
+      29
+    ],
+    [
+      2,
+      3,
+      258,
+      29
+    ],
+    [
+      2,
+      3,
+      259,
+      29
+    ],
+    [
+      2,
+      3,
+      260,
+      29
+    ],
     "setLineCap",
+    [
+      2,
+      3,
+      263,
+      27
+    ],
+    [
+      2,
+      3,
+      264,
+      27
+    ],
     "setLineDash",
+    [
+      2,
+      3,
+      267,
+      28
+    ],
     "setLineJoin",
+    [
+      2,
+      3,
+      270,
+      28
+    ],
+    [
+      2,
+      3,
+      271,
+      28
+    ],
     "setLineWidth",
+    [
+      2,
+      3,
+      274,
+      29
+    ],
+    [
+      2,
+      3,
+      275,
+      29
+    ],
     "setMiterLimit",
+    [
+      2,
+      3,
+      278,
+      30
+    ],
+    [
+      2,
+      3,
+      279,
+      30
+    ],
     "setShadow",
     "",
+    [
+      2,
+      3,
+      282,
+      26
+    ],
+    [
+      2,
+      3,
+      283,
+      26
+    ],
+    [
+      2,
+      3,
+      284,
+      26
+    ],
+    [
+      2,
+      3,
+      285,
+      26
+    ],
+    [
+      2,
+      3,
+      286,
+      26
+    ],
+    [
+      2,
+      3,
+      287,
+      26
+    ],
     "setStrokeColor",
+    [
+      2,
+      3,
+      290,
+      31
+    ],
+    [
+      2,
+      3,
+      291,
+      31
+    ],
+    [
+      2,
+      3,
+      292,
+      31
+    ],
+    [
+      2,
+      3,
+      293,
+      31
+    ],
+    [
+      2,
+      3,
+      294,
+      31
+    ],
+    [
+      2,
+      3,
+      295,
+      31
+    ],
     "setTransform",
+    [
+      2,
+      3,
+      298,
+      29
+    ],
+    [
+      2,
+      3,
+      299,
+      51
+    ],
+    [
+      2,
+      3,
+      299,
+      28
+    ],
+    [
+      2,
+      3,
+      300,
+      51
+    ],
+    [
+      2,
+      3,
+      300,
+      28
+    ],
     "shadowBlur",
+    [
+      2,
+      3,
+      303,
+      16
+    ],
+    [
+      2,
+      3,
+      304,
+      16
+    ],
     "shadowColor",
+    [
+      2,
+      3,
+      307,
+      16
+    ],
+    [
+      2,
+      3,
+      308,
+      16
+    ],
     "shadowOffsetX",
+    [
+      2,
+      3,
+      311,
+      16
+    ],
+    [
+      2,
+      3,
+      312,
+      16
+    ],
     "shadowOffsetY",
+    [
+      2,
+      3,
+      315,
+      16
+    ],
+    [
+      2,
+      3,
+      316,
+      16
+    ],
     "stroke",
+    [
+      2,
+      3,
+      319,
+      23
+    ],
+    [
+      2,
+      3,
+      320,
+      23
+    ],
     "strokeRect",
+    [
+      2,
+      3,
+      323,
+      27
+    ],
     "strokeStyle",
+    [
+      2,
+      3,
+      326,
+      16
+    ],
+    [
+      2,
+      3,
+      327,
+      16
+    ],
+    [
+      2,
+      3,
+      328,
+      16
+    ],
+    [
+      2,
+      3,
+      329,
+      16
+    ],
+    [
+      2,
+      3,
+      330,
+      16
+    ],
     "strokeText",
+    [
+      2,
+      3,
+      333,
+      27
+    ],
+    [
+      2,
+      3,
+      334,
+      27
+    ],
     "textAlign",
+    [
+      2,
+      3,
+      337,
+      16
+    ],
+    [
+      2,
+      3,
+      338,
+      16
+    ],
     "textBaseline",
+    [
+      2,
+      3,
+      341,
+      16
+    ],
+    [
+      2,
+      3,
+      342,
+      16
+    ],
     "transform",
+    [
+      2,
+      3,
+      345,
+      26
+    ],
     "translate",
+    [
+      2,
+      3,
+      348,
+      26
+    ],
     "webkitBackingStorePixelRatio",
+    [
+      2,
+      3,
+      351,
+      16
+    ],
     "webkitGetImageDataHD",
+    [
+      2,
+      3,
+      354,
+      59
+    ],
+    [
+      2,
+      3,
+      354,
+      28
+    ],
     "webkitImageSmoothingEnabled",
+    [
+      2,
+      3,
+      357,
+      16
+    ],
+    [
+      2,
+      3,
+      358,
+      16
+    ],
     "webkitLineDash",
+    [
+      2,
+      3,
+      361,
+      16
+    ],
+    [
+      2,
+      3,
+      362,
+      16
+    ],
     "webkitLineDashOffset",
-    "webkitPutImageDataHD"
+    [
+      2,
+      3,
+      365,
+      16
+    ],
+    [
+      2,
+      3,
+      366,
+      16
+    ],
+    "webkitPutImageDataHD",
+    [
+      2,
+      3,
+      369,
+      37
+    ],
+    [
+      2,
+      3,
+      370,
+      37
+    ]
   ]
 }
 
@@ -1809,6 +3758,17 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
             4,
             5,
             0
+          ],
+          [
+            8,
+            10,
+            11,
+            13,
+            15,
+            17,
+            20,
+            22,
+            24
           ]
         ]
       ],
@@ -1825,7 +3785,71 @@ Test that CanvasManager is able to record actions made to 2D canvas contexts.
       2
     ],
     "#ffffff",
-    "arc"
+    "arc",
+    "",
+    "inspector/canvas/recording-2d.html",
+    [
+      6,
+      7,
+      58,
+      42
+    ],
+    "ignoreException",
+    [
+      9,
+      7,
+      45,
+      10
+    ],
+    [
+      6,
+      7,
+      58,
+      28
+    ],
+    "f",
+    [
+      12,
+      7,
+      378,
+      24
+    ],
+    "performActions",
+    [
+      14,
+      7,
+      382,
+      6
+    ],
+    "global code",
+    [
+      16,
+      6,
+      1,
+      15
+    ],
+    "evaluateWithScopeExtension",
+    "[native code]",
+    [
+      18,
+      19,
+      0,
+      0
+    ],
+    "_evaluateOn",
+    [
+      21,
+      6,
+      128,
+      29
+    ],
+    "_evaluateAndWrap",
+    [
+      23,
+      6,
+      122,
+      108
+    ]
   ]
 }
 
index 7d89339a60c663f2321e242ddfd3df1bb1f8cd12..6de08f612300721420fc8406e1e9f7f94eb64087 100644 (file)
@@ -389,6 +389,10 @@ function performNaNActions() {
 function test() {
     let suite = InspectorTest.createAsyncSuite("Canvas.recording2D");
 
+    function sanitizeURL(url) {
+        return url.replace(/^.*?LayoutTests\//, "");
+    }
+
     function getCanvas() {
         let canvases = WI.canvasManager.canvases.filter((canvas) => canvas.contextType === WI.Canvas.ContextType.Canvas2D);
         InspectorTest.assert(canvases.length === 1, "There should only be one canvas-2d.");
@@ -409,6 +413,12 @@ function test() {
             InspectorTest.evaluateInPage(`cancelActions()`);
 
             let json = event.data.recording.toJSON();
+            json.data = json.data.map((item) => {
+                if (typeof item !== "string")
+                    return item;
+
+                return sanitizeURL(item);
+            });
             InspectorTest.log(JSON.stringify(json, null, 2));
         })
         .then(resolve, reject);
index 450849d1e93ae7122888a64e663885b507ded332..49f0fad5899bbfa8e976872639550eefaaece858 100644 (file)
@@ -70,6 +70,7 @@ null
       "actions": [
         [
           -1,
+          [],
           []
         ]
       ],
@@ -99,6 +100,7 @@ null
       "actions": [
         [
           null,
+          [],
           []
         ]
       ],
@@ -128,6 +130,9 @@ null
       "actions": [
         [
           0,
+          [
+            0
+          ],
           [
             0
           ]
index 300bb63744c71506b8e1dc33ae9b2035d13151d1..6e553b1670f48570e82e73a7495053899dbbcc1e 100644 (file)
@@ -115,6 +115,7 @@ function test()
                             [
                                 null,
                                 null,
+                                null,
                             ],
                         ],
                         incomplete: true,
@@ -141,6 +142,7 @@ function test()
                             [
                                 0,
                                 [0],
+                                [0],
                             ],
                         ],
                         incomplete: true,
index aec7c9916a12cdd49fe9e2af2c8354003cc14195..4f262d83f42f2999da29188763ebf766bbc12c3e 100644 (file)
@@ -1,3 +1,18 @@
+2017-08-02  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: add stack trace information for each RecordingAction
+        https://bugs.webkit.org/show_bug.cgi?id=174663
+
+        Reviewed by Joseph Pecoraro.
+
+        * inspector/ScriptCallFrame.h:
+        Add `operator==` so that when a ScriptCallFrame object is held in a Vector, calling `find`
+        with an existing value doesn't need require a functor and can use existing code.
+
+        * interpreter/StackVisitor.h:
+        * interpreter/StackVisitor.cpp:
+        (JSC::StackVisitor::Frame::isWasmFrame const): Inlined in header.
+
 2017-08-02  Yusuke Suzuki  <utatane.tea@gmail.com>
 
         Merge WTFThreadData to Thread::current
index f80b42638e062d227b31224c08b318fbf7a2a5b0..637be6f22ed8374b7268b528f6481ab94ee6ac95 100644 (file)
@@ -52,6 +52,8 @@ public:
     bool isEqual(const ScriptCallFrame&) const;
     bool isNative() const;
 
+    bool operator==(const ScriptCallFrame& other) const { return isEqual(other); }
+
     Ref<Inspector::Protocol::Console::CallFrame> buildInspectorObject() const;
 
 private:
index 1d64d6ecbbf6809b31594d93f82a4f6a30e47238..175fff31baf3a1a37d49b6e1c3e036f613ec50f4 100644 (file)
@@ -225,11 +225,6 @@ void StackVisitor::readInlinedFrame(CallFrame* callFrame, CodeOrigin* codeOrigin
 }
 #endif // ENABLE(DFG_JIT)
 
-bool StackVisitor::Frame::isWasmFrame() const
-{
-    return m_isWasmFrame;
-}
-
 StackVisitor::Frame::CodeType StackVisitor::Frame::codeType() const
 {
     if (isWasmFrame())
index aa0b332a5e7302c3cd6654c93f2a480bb7a03752..8ad0940415d55a2d088f9c257299e1102e4748f5 100644 (file)
@@ -77,7 +77,7 @@ public:
 
         bool isNativeFrame() const { return !codeBlock() && !isWasmFrame(); }
         bool isInlinedFrame() const { return !!inlineCallFrame(); }
-        bool isWasmFrame() const;
+        bool isWasmFrame() const { return m_isWasmFrame; }
         Wasm::IndexOrName const wasmFunctionIndexOrName()
         {
             ASSERT(isWasmFrame());
@@ -88,7 +88,7 @@ public:
         JS_EXPORT_PRIVATE String sourceURL() const;
         JS_EXPORT_PRIVATE String toString() const;
 
-        intptr_t sourceID();
+        JS_EXPORT_PRIVATE intptr_t sourceID();
 
         CodeType codeType() const;
         bool hasLineAndColumnInfo() const;
index 2359c6f34369d8426471534afb73b2ad893382c7..d7f7081b26bc0fe1b1953ba292bca31bebb57623 100644 (file)
@@ -1,3 +1,18 @@
+2017-08-02  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: add stack trace information for each RecordingAction
+        https://bugs.webkit.org/show_bug.cgi?id=174663
+
+        Reviewed by Joseph Pecoraro.
+
+        Tests: inspector/canvas/recording-2d.html
+               inspector/model/recording.html
+
+        * inspector/InspectorCanvas.h:
+        * inspector/InspectorCanvas.cpp:
+        (WebCore::InspectorCanvas::indexForData):
+        (WebCore::InspectorCanvas::buildAction):
+
 2017-08-02  Yusuke Suzuki  <utatane.tea@gmail.com>
 
         Merge WTFThreadData to Thread::current
index 7640c1bf4a00603d3fd3e5acd33ca50cfc0c038c..4e8a8c43b393b5b13a3b3b104b7edc3ea88cfb19 100644 (file)
@@ -45,6 +45,7 @@
 #include "InspectorDOMAgent.h"
 #include "InspectorPageAgent.h"
 #include "InstrumentingAgents.h"
+#include "JSMainThreadExecState.h"
 #include "Pattern.h"
 #include "SVGPathUtilities.h"
 #include "StringAdaptors.h"
@@ -58,6 +59,8 @@
 #include "WebGPURenderingContext.h"
 #endif
 #include <inspector/IdentifiersFactory.h>
+#include <interpreter/CallFrame.h>
+#include <interpreter/StackVisitor.h>
 
 using namespace Inspector;
 
@@ -276,6 +279,14 @@ int InspectorCanvas::indexForData(DuplicateDataVariant data)
         [&] (const CanvasGradient* canvasGradient) { item = buildArrayForCanvasGradient(*canvasGradient); },
         [&] (const CanvasPattern* canvasPattern) { item = buildArrayForCanvasPattern(*canvasPattern); },
         [&] (const ImageData* imageData) { item = buildArrayForImageData(*imageData); },
+        [&] (const ScriptCallFrame& scriptCallFrame) {
+            auto array = Inspector::Protocol::Array<double>::create();
+            array->addItem(indexForData(scriptCallFrame.functionName()));
+            array->addItem(indexForData(scriptCallFrame.sourceURL()));
+            array->addItem(static_cast<int>(scriptCallFrame.lineNumber()));
+            array->addItem(static_cast<int>(scriptCallFrame.columnNumber()));
+            item = WTFMove(array);
+        },
         [&] (const String& value) { item = InspectorValue::create(value); }
     );
 
@@ -443,6 +454,25 @@ RefPtr<Inspector::Protocol::Array<Inspector::InspectorValue>> InspectorCanvas::b
     }
     action->addItem(WTFMove(parametersData));
 
+    RefPtr<Inspector::Protocol::Array<double>> trace = Inspector::Protocol::Array<double>::create();
+    if (JSC::CallFrame* callFrame = JSMainThreadExecState::currentState()->vm().topCallFrame) {
+        callFrame->iterate([&] (JSC::StackVisitor& visitor) {
+            // Only skip Native frames if they are the first frame (e.g. CanvasRenderingContext2D.prototype.save).
+            if (!trace->length() && visitor->isNativeFrame())
+                return JSC::StackVisitor::Continue;
+
+            unsigned line = 0;
+            unsigned column = 0;
+            visitor->computeLineAndColumn(line, column);
+
+            ScriptCallFrame scriptCallFrame(visitor->functionName(), visitor->sourceURL(), static_cast<JSC::SourceID>(visitor->sourceID()), line, column);
+            trace->addItem(indexForData(scriptCallFrame));
+
+            return JSC::StackVisitor::Continue;
+        });
+    }
+    action->addItem(WTFMove(trace));
+
     return action;
 }
 
index 90760ba212bac5acc7706fe87aaa4c2eabe2da73..42d39faf8f3249276f756d473b5c240363dd13a0 100644 (file)
@@ -28,6 +28,7 @@
 #include "CallTracerTypes.h"
 #include <inspector/InspectorProtocolObjects.h>
 #include <inspector/InspectorValues.h>
+#include <inspector/ScriptCallFrame.h>
 #include <wtf/HashMap.h>
 #include <wtf/Ref.h>
 #include <wtf/RefPtr.h>
@@ -88,6 +89,7 @@ private:
         HTMLVideoElement*,
 #endif
         ImageData*,
+        Inspector::ScriptCallFrame,
         String
     > DuplicateDataVariant;
 
index 59bc872c3b5a144cf5db05f6282ee95675d6f74b..d9de80bd2c51399110cc90f5fed62c4b89977af3 100644 (file)
@@ -1,3 +1,47 @@
+2017-08-02  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: add stack trace information for each RecordingAction
+        https://bugs.webkit.org/show_bug.cgi?id=174663
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Main.html:
+
+        * UserInterface/Models/Recording.js:
+        (WI.Recording.prototype.swizzle):
+        Add Array type for swizzling array values.
+
+        * UserInterface/Models/RecordingAction.js:
+        (WI.RecordingAction):
+        (WI.RecordingAction.fromPayload):
+        (WI.RecordingAction.prototype.get trace):
+        (WI.RecordingAction.prototype.swizzle):
+        (WI.RecordingAction.prototype.toJSON):
+
+        * UserInterface/Views/RecordingTraceDetailsSidebarPanel.js: Added.
+        (WI.RecordingTraceDetailsSidebarPanel):
+        (WI.RecordingTraceDetailsSidebarPanel.disallowInstanceForClass):
+        (WI.RecordingTraceDetailsSidebarPanel.prototype.inspect):
+        (WI.RecordingTraceDetailsSidebarPanel.prototype.set recording):
+        (WI.RecordingTraceDetailsSidebarPanel.prototype.updateActionIndex):
+        * UserInterface/Views/RecordingTraceDetailsSidebarPanel.css: Added.
+        (.sidebar > .panel.details.recording-trace > .content > .call-frame):
+        (.sidebar > .details.recording-trace > .content > .no-trace-data):
+        (.sidebar > .details.recording-trace > .content > .no-trace-data > .message):
+
+        * UserInterface/Views/RecordingTabContentView.js:
+        (WI.RecordingTabContentView):
+
+        * UserInterface/Views/RecordingActionTreeElement.js:
+        (WI.RecordingActionTreeElement.prototype.populateContextMenu):
+
+        * UserInterface/Views/CallFrameView.css:
+        (.call-frame):
+        (body[dir=ltr] .call-frame .icon):
+        (body[dir=rtl] .call-frame .icon):
+        Apply the same trailing margin for CallFrameView icons as TreeElement.
+
 2017-08-02  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: add TreeElement virtualization for the Recording tab
index fbdd57a57f68a0cd914dfae394e0fd70ce819d27..cfb86c6a9b2c04701709a0bd3f675b0ae1bbe528 100644 (file)
@@ -593,6 +593,7 @@ localizedStrings["No Request Headers"] = "No Request Headers";
 localizedStrings["No Response Headers"] = "No Response Headers";
 localizedStrings["No Results Found"] = "No Results Found";
 localizedStrings["No Search Results"] = "No Search Results";
+localizedStrings["No Trace Data"] = "No Trace Data";
 localizedStrings["No Watch Expressions"] = "No Watch Expressions";
 localizedStrings["No matching ARIA role"] = "No matching ARIA role";
 localizedStrings["No preview available"] = "No preview available";
index 980ca253f788cb230b31d1fa165aad32c8968e14..3cc46de09a4e4701180c02ebf02afcf0d9b649e1 100644 (file)
     <link rel="stylesheet" href="Views/RadioButtonNavigationItem.css">
     <link rel="stylesheet" href="Views/RecordingContentView.css">
     <link rel="stylesheet" href="Views/RecordingStateDetailsSidebarPanel.css">
+    <link rel="stylesheet" href="Views/RecordingTraceDetailsSidebarPanel.css">
     <link rel="stylesheet" href="Views/RecordingNavigationSidebarPanel.css">
     <link rel="stylesheet" href="Views/RenderingFrameTimelineOverviewGraph.css">
     <link rel="stylesheet" href="Views/RenderingFrameTimelineView.css">
     <script src="Views/RecordingContentView.js"></script>
     <script src="Views/RecordingNavigationSidebarPanel.js"></script>
     <script src="Views/RecordingStateDetailsSidebarPanel.js"></script>
+    <script src="Views/RecordingTraceDetailsSidebarPanel.js"></script>
     <script src="Views/RenderingFrameTimelineDataGridNode.js"></script>
     <script src="Views/RenderingFrameTimelineOverviewGraph.js"></script>
     <script src="Views/RenderingFrameTimelineView.js"></script>
index 81a4cf9b3fd61480185140327e312aaaf45b0e7e..96471c7813e4344d5cc7d3bf6c9329923928a940 100644 (file)
@@ -129,6 +129,10 @@ WI.Recording = class Recording
             try {
                 let data = this._data[index];
                 switch (type) {
+                case WI.Recording.Swizzle.Array:
+                    if (Array.isArray(data))
+                        this._swizzle[index][type] = data;
+                    break;
                 case WI.Recording.Swizzle.CanvasStyle:
                     if (Array.isArray(data)) {
                         let context = document.createElement("canvas").getContext("2d");
@@ -202,6 +206,7 @@ WI.Recording.Type = {
 };
 
 WI.Recording.Swizzle = {
+    Array: "Array",
     CanvasStyle: "CanvasStyle",
     Element: "Element",
     Image: "Image",
index d744ddc1d58ab7b33a636844ca29f2ba9744dcad..7fc227b8fadcc3823819c9c7239917f741a993d5 100644 (file)
 
 WI.RecordingAction = class RecordingAction
 {
-    constructor(name, parameters)
+    constructor(name, parameters, trace)
     {
         this._payloadName = name;
         this._payloadParameters = parameters;
+        this._payloadTrace = trace;
 
         this._name = "";
         this._parameters = [];
+        this._trace = [];
 
         this._valid = true;
 
@@ -43,7 +45,7 @@ WI.RecordingAction = class RecordingAction
 
     // Static
 
-    // Payload format: [name, parameters]
+    // Payload format: [name, parameters, trace]
     static fromPayload(payload)
     {
         if (!Array.isArray(payload))
@@ -55,6 +57,9 @@ WI.RecordingAction = class RecordingAction
         if (!Array.isArray(payload[1]))
             payload[1] = [];
 
+        if (!Array.isArray(payload[2]))
+            payload[2] = [];
+
         return new WI.RecordingAction(...payload);
     }
 
@@ -71,6 +76,7 @@ WI.RecordingAction = class RecordingAction
 
     get name() { return this._name; }
     get parameters() { return this._parameters; }
+    get trace() { return this._trace; }
 
     get valid() { return this._valid; }
     set valid(valid) { this._valid = !!valid; }
@@ -96,6 +102,19 @@ WI.RecordingAction = class RecordingAction
             return swizzled;
         });
 
+        for (let item of this._payloadTrace) {
+            try {
+                let array = recording.swizzle(item, WI.Recording.Swizzle.Array);
+                let callFrame = WI.CallFrame.fromPayload(WI.mainTarget, {
+                    functionName: recording.swizzle(array[0], WI.Recording.Swizzle.String),
+                    url: recording.swizzle(array[1], WI.Recording.Swizzle.String),
+                    lineNumber: array[2],
+                    columnNumber: array[3],
+                });
+                this._trace.push(callFrame);
+            } catch { }
+        }
+
         this._isFunction = WI.RecordingAction.isFunctionForType(recording.type, this._name);
         this._isGetter = !this._isFunction && !this._parameters.length;
 
@@ -130,7 +149,7 @@ WI.RecordingAction = class RecordingAction
 
     toJSON()
     {
-        return [this._payloadName, this._payloadParameters];
+        return [this._payloadName, this._payloadParameters, this._payloadTrace];
     }
 };
 
index ec6b009dce05d30b9bb3dfd618713d0c7450d503..ed5b811f645fc6ce04b49fd81a112c56ce52f495 100644 (file)
  */
 
 .call-frame {
+    overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
     cursor: pointer;
+
+    --icon-margin-end: 3px;
 }
 
 .call-frame .icon {
     height: 16px;
 }
 
+body[dir=ltr] .call-frame .icon {
+    margin-right: var(--icon-margin-end);
+}
+
+body[dir=rtl] .call-frame .icon {
+    margin-left: var(--icon-margin-end);
+}
+
 .call-frame .titles {
     display: inline-block;
 }
index a82da6b8ca9b0fc642ac424cd9c7c184a38080ad..93f3c7d98ab7262ae77aa6202af2c372094b16ca 100644 (file)
@@ -174,6 +174,18 @@ WI.RecordingActionTreeElement = class RecordingActionTreeElement extends WI.Gene
 
         contextMenu.appendSeparator();
 
+        let callFrame = this.representedObject.trace[0];
+        if (callFrame) {
+            contextMenu.appendItem(WI.UIString("Reveal in Resources Tab"), () => {
+                WI.showSourceCodeLocation(callFrame.sourceCodeLocation, {
+                    ignoreNetworkTab: true,
+                    ignoreSearchTab: true,
+                });
+            });
+
+            contextMenu.appendSeparator();
+        }
+
         super.populateContextMenu(contextMenu, event);
     }
 };
index 745ff8e1a233abd60dedd53af2b6e181a9690030..788d522c3d66e231e5a2e97472975b4dcca68aed 100644 (file)
@@ -31,7 +31,7 @@ WI.RecordingTabContentView = class RecordingTabContentView extends WI.ContentBro
         let tabBarItem = new WI.GeneralTabBarItem(image, title);
 
         const navigationSidebarPanelConstructor = WI.RecordingNavigationSidebarPanel;
-        const detailsSidebarPanelConstructors = [WI.RecordingStateDetailsSidebarPanel, WI.CanvasDetailsSidebarPanel];
+        const detailsSidebarPanelConstructors = [WI.RecordingStateDetailsSidebarPanel, WI.RecordingTraceDetailsSidebarPanel, WI.CanvasDetailsSidebarPanel];
         const disableBackForward = true;
         let flexibleNavigationItem = new WI.ScrubberNavigationItem;
         super("recording", "recording", tabBarItem, navigationSidebarPanelConstructor, detailsSidebarPanelConstructors, disableBackForward, flexibleNavigationItem);
diff --git a/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.css
new file mode 100644 (file)
index 0000000..9fbc862
--- /dev/null
@@ -0,0 +1,54 @@
+/*
+ * Copyright (C) 2017 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.details.recording-trace > .content > .call-frame {
+    height: 20px;
+    padding: 2px 5px;
+}
+
+.sidebar > .details.recording-trace > .content > .no-trace-data {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.sidebar > .details.recording-trace > .content > .no-trace-data > .message {
+    display: inline-block;
+    padding: 5px 15px 6px;
+    font-size: 13px;
+    white-space: nowrap;
+    color: white;
+    text-shadow: hsla(0, 0%, 0%, 0.2) 0 1px 0;
+    background-color: hsla(0, 0%, 0%, 0.15);
+    box-shadow: inset hsla(0, 0%, 0%, 0.2) 0 1px 0, hsla(0, 0%, 100%, 0.4) 0 1px 0;
+    border-radius: 6px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.js
new file mode 100644 (file)
index 0000000..fbfa1e6
--- /dev/null
@@ -0,0 +1,91 @@
+/*
+ * Copyright (C) 2017 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WI.RecordingTraceDetailsSidebarPanel = class RecordingTraceDetailsSidebarPanel extends WI.DetailsSidebarPanel
+{
+    constructor()
+    {
+        super("recording-trace", WI.UIString("Trace"));
+
+        this._recording = null;
+        this._index = NaN;
+    }
+
+    // Static
+
+    static disallowInstanceForClass()
+    {
+        return true;
+    }
+
+    // Public
+
+    inspect(objects)
+    {
+        if (!(objects instanceof Array))
+            objects = [objects];
+
+        this.recording = objects.find((object) => object instanceof WI.Recording);
+
+        return !!this._recording;
+    }
+
+    set recording(recording)
+    {
+        if (recording === this._recording)
+            return;
+
+        this._recording = recording;
+        this._index = NaN;
+
+        this.contentView.element.removeChildren();
+    }
+
+    updateActionIndex(index, context, options = {})
+    {
+        console.assert(!this._recording || (index >= 0 && index < this._recording.actions.length));
+        if (!this._recording || index < 0 || index > this._recording.actions.length || index === this._index)
+            return;
+
+        this._index = index;
+
+        this.contentView.element.removeChildren();
+
+        let trace = this._recording.actions[this._index].trace;
+        if (!trace.length) {
+            let noTraceDataElement = this.contentView.element.appendChild(document.createElement("div"));
+            noTraceDataElement.classList.add("no-trace-data");
+
+            let noTraceDataMessageElement = noTraceDataElement.appendChild(document.createElement("div"));
+            noTraceDataMessageElement.classList.add("message");
+            noTraceDataMessageElement.textContent = WI.UIString("No Trace Data");
+            return;
+        }
+
+        const showFunctionName = true;
+        for (let callFrame of trace)
+            this.contentView.element.appendChild(new WI.CallFrameView(callFrame, showFunctionName));
+    }
+};