Web Inspector: Canvas2D Profiling: highlight expensive context commands in the captur...
authorwebkit@devinrousso.com <webkit@devinrousso.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 3 Nov 2017 07:04:22 +0000 (07:04 +0000)
committerwebkit@devinrousso.com <webkit@devinrousso.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 3 Nov 2017 07:04:22 +0000 (07:04 +0000)
https://bugs.webkit.org/show_bug.cgi?id=178302
<rdar://problem/33158849>

Reviewed by Brian Burg.

Source/JavaScriptCore:

* inspector/protocol/Recording.json:
Add `duration` to each Frame that represents the total time of all the recorded actions.

Source/WebCore:

No new tests, updated existing tests.

* inspector/InspectorCanvas.h:
* inspector/InspectorCanvas.cpp:
(WebCore::InspectorCanvas::recordAction):
(WebCore::InspectorCanvas::finalizeFrame):
(WebCore::InspectorCanvas::markNewFrame): Deleted.

* inspector/InspectorCanvasAgent.cpp:
(WebCore::InspectorCanvasAgent::didFinishRecordingCanvasFrame):

Source/WebInspectorUI:

* UserInterface/Models/RecordingFrame.js:
(WI.RecordingFrame):
(WI.RecordingFrame.fromPayload):
(WI.RecordingFrame.prototype.get duration):
(WI.RecordingFrame.prototype.toJSON):

* UserInterface/Views/RecordingNavigationSidebarPanel.js:
(WI.RecordingNavigationSidebarPanel.prototype.set recording):
* UserInterface/Views/RecordingNavigationSidebarPanel.css:
(.sidebar > .panel.navigation.recording > .content > .tree-outline .item.folder-icon > .status):

LayoutTests:

* inspector/canvas/recording-2d-expected.txt:
* inspector/canvas/recording-webgl-expected.txt:
* inspector/canvas/recording-webgl-snapshots-expected.txt:
* inspector/canvas/resources/recording-utilities.js:
(TestPage.registerInitializer):
* inspector/model/recording-expected.txt:
* inspector/model/recording.html:

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

17 files changed:
LayoutTests/ChangeLog
LayoutTests/inspector/canvas/recording-2d-expected.txt
LayoutTests/inspector/canvas/recording-webgl-expected.txt
LayoutTests/inspector/canvas/recording-webgl-snapshots-expected.txt
LayoutTests/inspector/canvas/resources/recording-utilities.js
LayoutTests/inspector/model/recording-expected.txt
LayoutTests/inspector/model/recording.html
Source/JavaScriptCore/ChangeLog
Source/JavaScriptCore/inspector/protocol/Recording.json
Source/WebCore/ChangeLog
Source/WebCore/inspector/InspectorCanvas.cpp
Source/WebCore/inspector/InspectorCanvas.h
Source/WebCore/inspector/agents/InspectorCanvasAgent.cpp
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Models/RecordingFrame.js
Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.js

index c582966..68d7074 100644 (file)
@@ -1,3 +1,19 @@
+2017-11-03  Devin Rousso  <webkit@devinrousso.com>
+
+        Web Inspector: Canvas2D Profiling: highlight expensive context commands in the captured command log
+        https://bugs.webkit.org/show_bug.cgi?id=178302
+        <rdar://problem/33158849>
+
+        Reviewed by Brian Burg.
+
+        * inspector/canvas/recording-2d-expected.txt:
+        * inspector/canvas/recording-webgl-expected.txt:
+        * inspector/canvas/recording-webgl-snapshots-expected.txt:
+        * inspector/canvas/resources/recording-utilities.js:
+        (TestPage.registerInitializer):
+        * inspector/model/recording-expected.txt:
+        * inspector/model/recording.html:
+
 2017-11-02  Devin Rousso  <webkit@devinrousso.com>
 
         Web Inspector: Canvas Tab: show supported GL extensions for selected canvas
index 161b393..fd123cd 100644 (file)
@@ -32,7 +32,7 @@ initialState:
   parameters:
   content: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAAtJREFUCB1jYEAHAAASAAGAFMrMAAAAAElFTkSuQmCC"
 frames:
-  0:
+  0: (duration)
     0: arc(1, 2, 3, 4, 5, false)
       swizzleTypes: [Number, Number, Number, Number, Number, Boolean]
       trace:
@@ -124,7 +124,7 @@ initialState:
   parameters:
   content: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAAtJREFUCB1jYEAHAAASAAGAFMrMAAAAAElFTkSuQmCC"
 frames:
-  0:
+  0: (duration)
     0: arc(1, 2, 3, 4, 5, false)
       swizzleTypes: [Number, Number, Number, Number, Number, Boolean]
       trace:
@@ -151,7 +151,7 @@ frames:
         7: evaluateWithScopeExtension - [native code] (26)
         8: _evaluateOn (28)
         9: _evaluateAndWrap (30)
-  1:
+  1: (duration)
     0: arcTo(1, 2, 3, 4, 5)
       swizzleTypes: [Number, Number, Number, Number, Number]
       trace:
@@ -160,33 +160,33 @@ frames:
         2: ignoreException - inspector/canvas/recording-2d.html:48:13 (17)
         3: (anonymous function) - inspector/canvas/recording-2d.html:81:28 (36)
         4: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  2:
+  2: (duration)
     0: beginPath()
       trace:
         0: beginPath - [native code] (38)
         1: (anonymous function) - inspector/canvas/recording-2d.html:84:26 (39)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  3:
+  3: (duration)
     0: bezierCurveTo(1, 2, 3, 4, 5, 6)
       swizzleTypes: [Number, Number, Number, Number, Number, Number]
       trace:
         0: bezierCurveTo - [native code] (41)
         1: (anonymous function) - inspector/canvas/recording-2d.html:87:30 (42)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  4:
+  4: (duration)
     0: clearRect(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
         0: clearRect - [native code] (44)
         1: (anonymous function) - inspector/canvas/recording-2d.html:90:26 (45)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  5:
+  5: (duration)
     0: clearShadow()
       trace:
         0: clearShadow - [native code] (47)
         1: (anonymous function) - inspector/canvas/recording-2d.html:93:28 (48)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  6:
+  6: (duration)
     0: clip("nonzero")
       swizzleTypes: [String (50)]
       trace:
@@ -211,13 +211,13 @@ frames:
         0: clip - [native code] (51)
         1: (anonymous function) - inspector/canvas/recording-2d.html:99:21 (58)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  7:
+  7: (duration)
     0: closePath()
       trace:
         0: closePath - [native code] (60)
         1: (anonymous function) - inspector/canvas/recording-2d.html:102:26 (61)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  8:
+  8: (duration)
     0: createImageData([object ImageData])
       swizzleTypes: [ImageData (63)]
       trace:
@@ -234,7 +234,7 @@ frames:
         2: ignoreException - inspector/canvas/recording-2d.html:48:13 (17)
         3: (anonymous function) - inspector/canvas/recording-2d.html:106:28 (68)
         4: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  9:
+  9: (duration)
     0: createLinearGradient(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
@@ -243,7 +243,7 @@ frames:
         2: ignoreException - inspector/canvas/recording-2d.html:48:13 (17)
         3: (anonymous function) - inspector/canvas/recording-2d.html:109:28 (72)
         4: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  10:
+  10: (duration)
     0: createPattern([object HTMLImageElement], "testA")
       swizzleTypes: [Image (74), String (75)]
       trace:
@@ -268,7 +268,7 @@ frames:
         2: ignoreException - inspector/canvas/recording-2d.html:48:13 (17)
         3: (anonymous function) - inspector/canvas/recording-2d.html:114:28 (86)
         4: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  11:
+  11: (duration)
     0: createRadialGradient(1, 2, 3, 4, 5, 6)
       swizzleTypes: [Number, Number, Number, Number, Number, Number]
       trace:
@@ -277,12 +277,12 @@ frames:
         2: ignoreException - inspector/canvas/recording-2d.html:48:13 (17)
         3: (anonymous function) - inspector/canvas/recording-2d.html:117:28 (90)
         4: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  12:
+  12: (duration)
     0: direction
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:120:16 (92)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  13:
+  13: (duration)
     0: drawFocusIfNeeded("Element")
       swizzleTypes: [None (94)]
       trace:
@@ -295,7 +295,7 @@ frames:
         0: drawFocusIfNeeded - [native code] (95)
         1: (anonymous function) - inspector/canvas/recording-2d.html:125:34 (97)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  14:
+  14: (duration)
     0: drawImage([object HTMLImageElement], 1, 2)
       swizzleTypes: [Image (74), Number, Number]
       trace:
@@ -368,7 +368,7 @@ frames:
         2: ignoreException - inspector/canvas/recording-2d.html:48:13 (17)
         3: (anonymous function) - inspector/canvas/recording-2d.html:136:28 (117)
         4: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  15:
+  15: (duration)
     0: drawImageFromRect([object HTMLImageElement], 1, 2, 3, 4, 5, 6, 7, 8, "")
       swizzleTypes: [Image (74), Number, Number, Number, Number, Number, Number, Number, Number, String (10)]
       trace:
@@ -381,7 +381,7 @@ frames:
         0: drawImageFromRect - [native code] (119)
         1: (anonymous function) - inspector/canvas/recording-2d.html:140:34 (122)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  16:
+  16: (duration)
     0: ellipse(1, 2, 3, 4, 5, 6, 7, false)
       swizzleTypes: [Number, Number, Number, Number, Number, Number, Number, Boolean]
       trace:
@@ -398,7 +398,7 @@ frames:
         2: ignoreException - inspector/canvas/recording-2d.html:48:13 (17)
         3: (anonymous function) - inspector/canvas/recording-2d.html:144:28 (128)
         4: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  17:
+  17: (duration)
     0: fill("nonzero")
       swizzleTypes: [String (50)]
       trace:
@@ -423,14 +423,14 @@ frames:
         0: fill - [native code] (130)
         1: (anonymous function) - inspector/canvas/recording-2d.html:150:21 (134)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  18:
+  18: (duration)
     0: fillRect(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
         0: fillRect - [native code] (136)
         1: (anonymous function) - inspector/canvas/recording-2d.html:153:25 (137)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  19:
+  19: (duration)
     0: fillStyle
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:156:16 (139)
@@ -455,7 +455,7 @@ frames:
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:160:16 (150)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  20:
+  20: (duration)
     0: fillText("testA", 1, 2)
       swizzleTypes: [String (75), Number, Number]
       trace:
@@ -468,7 +468,7 @@ frames:
         0: fillText - [native code] (152)
         1: (anonymous function) - inspector/canvas/recording-2d.html:164:25 (154)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  21:
+  21: (duration)
     0: font
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:167:16 (156)
@@ -478,7 +478,7 @@ frames:
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:168:16 (157)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  22:
+  22: (duration)
     0: getImageData(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
@@ -487,19 +487,19 @@ frames:
         2: ignoreException - inspector/canvas/recording-2d.html:48:13 (17)
         3: (anonymous function) - inspector/canvas/recording-2d.html:171:28 (161)
         4: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  23:
+  23: (duration)
     0: getLineDash()
       trace:
         0: getLineDash - [native code] (163)
         1: (anonymous function) - inspector/canvas/recording-2d.html:174:28 (164)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  24:
+  24: (duration)
     0: getTransform
       trace:
         0: getTransform - [native code] (166)
         1: (anonymous function) - inspector/canvas/recording-2d.html:177:29 (167)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  25:
+  25: (duration)
     0: globalAlpha
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:180:16 (169)
@@ -509,7 +509,7 @@ frames:
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:181:16 (170)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  26:
+  26: (duration)
     0: globalCompositeOperation
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:184:16 (172)
@@ -519,7 +519,7 @@ frames:
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:185:16 (173)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  27:
+  27: (duration)
     0: imageSmoothingEnabled
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:188:16 (175)
@@ -529,7 +529,7 @@ frames:
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:189:16 (176)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  28:
+  28: (duration)
     0: imageSmoothingQuality
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:192:16 (178)
@@ -539,7 +539,7 @@ frames:
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:193:16 (179)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  29:
+  29: (duration)
     0: isPointInPath([object Path2D], 5, 6, "nonzero")
       swizzleTypes: [Path2D (55), Number, Number, String (50)]
       trace:
@@ -564,7 +564,7 @@ frames:
         0: isPointInPath - [native code] (181)
         1: (anonymous function) - inspector/canvas/recording-2d.html:199:30 (185)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  30:
+  30: (duration)
     0: isPointInStroke([object Path2D], 3, 4)
       swizzleTypes: [Path2D (55), Number, Number]
       trace:
@@ -577,12 +577,12 @@ frames:
         0: isPointInStroke - [native code] (187)
         1: (anonymous function) - inspector/canvas/recording-2d.html:203:32 (189)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  31:
+  31: (duration)
     0: lineCap
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:206:16 (191)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  32:
+  32: (duration)
     0: lineDashOffset
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:210:16 (193)
@@ -592,19 +592,19 @@ frames:
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:211:16 (194)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  33:
+  33: (duration)
     0: lineJoin
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:214:16 (196)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  34:
+  34: (duration)
     0: lineTo(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: lineTo - [native code] (198)
         1: (anonymous function) - inspector/canvas/recording-2d.html:218:23 (199)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  35:
+  35: (duration)
     0: lineWidth
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:221:16 (201)
@@ -614,14 +614,14 @@ frames:
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:222:16 (202)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  36:
+  36: (duration)
     0: measureText("test")
       swizzleTypes: [String (121)]
       trace:
         0: measureText - [native code] (204)
         1: (anonymous function) - inspector/canvas/recording-2d.html:225:28 (205)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  37:
+  37: (duration)
     0: miterLimit
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:228:16 (207)
@@ -631,14 +631,14 @@ frames:
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:229:16 (208)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  38:
+  38: (duration)
     0: moveTo(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: moveTo - [native code] (210)
         1: (anonymous function) - inspector/canvas/recording-2d.html:232:23 (211)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  39:
+  39: (duration)
     0: putImageData([object ImageData], 5, 6)
       swizzleTypes: [ImageData (63), Number, Number]
       trace:
@@ -651,53 +651,53 @@ frames:
         0: putImageData - [native code] (213)
         1: (anonymous function) - inspector/canvas/recording-2d.html:236:29 (216)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  40:
+  40: (duration)
     0: quadraticCurveTo(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
         0: quadraticCurveTo - [native code] (218)
         1: (anonymous function) - inspector/canvas/recording-2d.html:239:33 (219)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  41:
+  41: (duration)
     0: rect(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
         0: rect - [native code] (221)
         1: (anonymous function) - inspector/canvas/recording-2d.html:242:21 (222)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  42:
+  42: (duration)
     0: resetTransform()
       trace:
         0: resetTransform - [native code] (224)
         1: (anonymous function) - inspector/canvas/recording-2d.html:245:31 (225)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  43:
+  43: (duration)
     0: restore()
       trace:
         0: restore - [native code] (227)
         1: (anonymous function) - inspector/canvas/recording-2d.html:248:24 (228)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  44:
+  44: (duration)
     0: rotate(1)
       swizzleTypes: [Number]
       trace:
         0: rotate - [native code] (230)
         1: (anonymous function) - inspector/canvas/recording-2d.html:253:23 (231)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  45:
+  45: (duration)
     0: save()
       trace:
         0: save - [native code] (233)
         1: (anonymous function) - inspector/canvas/recording-2d.html:256:21 (234)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  46:
+  46: (duration)
     0: scale(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: scale - [native code] (236)
         1: (anonymous function) - inspector/canvas/recording-2d.html:259:22 (237)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  47:
+  47: (duration)
     0: setAlpha(null)
       swizzleTypes: [Number]
       trace:
@@ -710,7 +710,7 @@ frames:
         0: setAlpha - [native code] (239)
         1: (anonymous function) - inspector/canvas/recording-2d.html:263:25 (241)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  48:
+  48: (duration)
     0: setCompositeOperation("undefined")
       swizzleTypes: [String (243)]
       trace:
@@ -723,7 +723,7 @@ frames:
         0: setCompositeOperation - [native code] (244)
         1: (anonymous function) - inspector/canvas/recording-2d.html:267:38 (246)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  49:
+  49: (duration)
     0: setFillColor("testA")
       swizzleTypes: [String (75)]
       trace:
@@ -760,7 +760,7 @@ frames:
         0: setFillColor - [native code] (248)
         1: (anonymous function) - inspector/canvas/recording-2d.html:275:29 (254)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  50:
+  50: (duration)
     0: setLineCap("undefined")
       swizzleTypes: [String (243)]
       trace:
@@ -773,14 +773,14 @@ frames:
         0: setLineCap - [native code] (256)
         1: (anonymous function) - inspector/canvas/recording-2d.html:279:27 (258)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  51:
+  51: (duration)
     0: setLineDash([1,2])
       swizzleTypes: [Array]
       trace:
         0: setLineDash - [native code] (260)
         1: (anonymous function) - inspector/canvas/recording-2d.html:282:28 (261)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  52:
+  52: (duration)
     0: setLineJoin("undefined")
       swizzleTypes: [String (243)]
       trace:
@@ -793,7 +793,7 @@ frames:
         0: setLineJoin - [native code] (263)
         1: (anonymous function) - inspector/canvas/recording-2d.html:286:28 (265)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  53:
+  53: (duration)
     0: setLineWidth(null)
       swizzleTypes: [Number]
       trace:
@@ -806,7 +806,7 @@ frames:
         0: setLineWidth - [native code] (267)
         1: (anonymous function) - inspector/canvas/recording-2d.html:290:29 (269)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  54:
+  54: (duration)
     0: setMiterLimit(null)
       swizzleTypes: [Number]
       trace:
@@ -819,7 +819,7 @@ frames:
         0: setMiterLimit - [native code] (271)
         1: (anonymous function) - inspector/canvas/recording-2d.html:294:30 (273)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  55:
+  55: (duration)
     0: setShadow(1, 2, 3, "")
       swizzleTypes: [Number, Number, Number, String (275)]
       trace:
@@ -856,7 +856,7 @@ frames:
         0: setShadow - [native code] (276)
         1: (anonymous function) - inspector/canvas/recording-2d.html:302:26 (282)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  56:
+  56: (duration)
     0: setStrokeColor("testA")
       swizzleTypes: [String (75)]
       trace:
@@ -893,7 +893,7 @@ frames:
         0: setStrokeColor - [native code] (284)
         1: (anonymous function) - inspector/canvas/recording-2d.html:310:31 (290)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  57:
+  57: (duration)
     0: setTransform(1, 2, 3, 4, 5, 6)
       swizzleTypes: [Number, Number, Number, Number, Number, Number]
       trace:
@@ -916,7 +916,7 @@ frames:
         2: ignoreException - inspector/canvas/recording-2d.html:48:13 (17)
         3: (anonymous function) - inspector/canvas/recording-2d.html:315:28 (297)
         4: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  58:
+  58: (duration)
     0: shadowBlur
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:318:16 (299)
@@ -926,7 +926,7 @@ frames:
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:319:16 (300)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  59:
+  59: (duration)
     0: shadowColor
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:322:16 (302)
@@ -936,7 +936,7 @@ frames:
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:323:16 (303)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  60:
+  60: (duration)
     0: shadowOffsetX
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:326:16 (305)
@@ -946,7 +946,7 @@ frames:
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:327:16 (306)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  61:
+  61: (duration)
     0: shadowOffsetY
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:330:16 (308)
@@ -956,7 +956,7 @@ frames:
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:331:16 (309)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  62:
+  62: (duration)
     0: stroke()
       trace:
         0: stroke - [native code] (311)
@@ -968,14 +968,14 @@ frames:
         0: stroke - [native code] (311)
         1: (anonymous function) - inspector/canvas/recording-2d.html:335:23 (313)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  63:
+  63: (duration)
     0: strokeRect(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
         0: strokeRect - [native code] (315)
         1: (anonymous function) - inspector/canvas/recording-2d.html:338:27 (316)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  64:
+  64: (duration)
     0: strokeStyle
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:341:16 (318)
@@ -1000,7 +1000,7 @@ frames:
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:345:16 (322)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  65:
+  65: (duration)
     0: strokeText("testA", 1, 2)
       swizzleTypes: [String (75), Number, Number]
       trace:
@@ -1013,31 +1013,31 @@ frames:
         0: strokeText - [native code] (324)
         1: (anonymous function) - inspector/canvas/recording-2d.html:349:27 (326)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  66:
+  66: (duration)
     0: textAlign
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:352:16 (328)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  67:
+  67: (duration)
     0: textBaseline
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:356:16 (330)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  68:
+  68: (duration)
     0: transform(1, 2, 3, 4, 5, 6)
       swizzleTypes: [Number, Number, Number, Number, Number, Number]
       trace:
         0: transform - [native code] (332)
         1: (anonymous function) - inspector/canvas/recording-2d.html:360:26 (333)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  69:
+  69: (duration)
     0: translate(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: translate - [native code] (335)
         1: (anonymous function) - inspector/canvas/recording-2d.html:363:26 (336)
         2: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  70:
+  70: (duration)
     0: webkitGetImageDataHD(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
@@ -1046,7 +1046,7 @@ frames:
         2: ignoreException - inspector/canvas/recording-2d.html:48:13 (17)
         3: (anonymous function) - inspector/canvas/recording-2d.html:366:28 (340)
         4: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  71:
+  71: (duration)
     0: webkitImageSmoothingEnabled
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:369:16 (342)
@@ -1056,7 +1056,7 @@ frames:
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:370:16 (343)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  72:
+  72: (duration)
     0: webkitLineDash
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:373:16 (345)
@@ -1066,7 +1066,7 @@ frames:
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:374:16 (346)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  73:
+  73: (duration)
     0: webkitLineDashOffset
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:377:16 (348)
@@ -1076,7 +1076,7 @@ frames:
       trace:
         0: (anonymous function) - inspector/canvas/recording-2d.html:378:16 (349)
         1: executeFrameFunction - inspector/canvas/recording-2d.html:390:24 (20)
-  74:
+  74: (duration)
     0: webkitPutImageDataHD([object ImageData], 5, 6)
       swizzleTypes: [ImageData (63), Number, Number]
       trace:
@@ -1475,7 +1475,7 @@ initialState:
   parameters:
   content: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAAtJREFUCB1jYEAHAAASAAGAFMrMAAAAAElFTkSuQmCC"
 frames:
-  0: (incomplete)
+  0: (duration) (incomplete)
     0: arc(1, 2, 3, 4, 5, false)
       swizzleTypes: [Number, Number, Number, Number, Number, Boolean]
       trace:
index 333b9c4..a7f30b7 100644 (file)
@@ -11,7 +11,7 @@ initialState:
     0: {"alpha":true,"depth":true,"stencil":false,"antialias":true,"premultipliedAlpha":true,"preserveDrawingBuffer":false,"failIfMajorPerformanceCaveat":false}
   content: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAAAylJREFUeAHt0DEBAAAAwqD1T20IX4hAYcCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYOAdGL/UAAEPpnR6AAAAAElFTkSuQmCC"
 frames:
-  0:
+  0: (duration)
     0: activeTexture(1)
       swizzleTypes: [Number]
       trace:
@@ -52,7 +52,7 @@ initialState:
     0: {"alpha":true,"depth":true,"stencil":false,"antialias":true,"premultipliedAlpha":true,"preserveDrawingBuffer":false,"failIfMajorPerformanceCaveat":false}
   content: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAAAylJREFUeAHt0DEBAAAAwqD1T20IX4hAYcCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYOAdGL/UAAEPpnR6AAAAAElFTkSuQmCC"
 frames:
-  0:
+  0: (duration)
     0: activeTexture(1)
       swizzleTypes: [Number]
       trace:
@@ -64,84 +64,84 @@ frames:
         5: evaluateWithScopeExtension - [native code] (13)
         6: _evaluateOn (15)
         7: _evaluateAndWrap (17)
-  1:
+  1: (duration)
     0: attachShader(0, 0)
       swizzleTypes: [WebGLProgram, WebGLShader]
       trace:
         0: attachShader - [native code] (19)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:75:33 (20)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  2:
+  2: (duration)
     0: bindAttribLocation(0, 1, "test")
       swizzleTypes: [WebGLProgram, Number, String (22)]
       trace:
         0: bindAttribLocation - [native code] (23)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:78:39 (24)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  3:
+  3: (duration)
     0: bindBuffer(1, 0)
       swizzleTypes: [Number, WebGLBuffer]
       trace:
         0: bindBuffer - [native code] (26)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:81:31 (27)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  4:
+  4: (duration)
     0: bindFramebuffer(1, 0)
       swizzleTypes: [Number, WebGLFramebuffer]
       trace:
         0: bindFramebuffer - [native code] (29)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:84:36 (30)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  5:
+  5: (duration)
     0: bindRenderbuffer(1, 0)
       swizzleTypes: [Number, WebGLRenderbuffer]
       trace:
         0: bindRenderbuffer - [native code] (32)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:87:37 (33)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  6:
+  6: (duration)
     0: bindTexture(1, 0)
       swizzleTypes: [Number, WebGLTexture]
       trace:
         0: bindTexture - [native code] (35)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:90:32 (36)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  7:
+  7: (duration)
     0: blendColor(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
         0: blendColor - [native code] (38)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:93:31 (39)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  8:
+  8: (duration)
     0: blendEquation(1)
       swizzleTypes: [Number]
       trace:
         0: blendEquation - [native code] (41)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:96:34 (42)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  9:
+  9: (duration)
     0: blendEquationSeparate(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: blendEquationSeparate - [native code] (44)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:99:42 (45)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  10:
+  10: (duration)
     0: blendFunc(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: blendFunc - [native code] (47)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:102:30 (48)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  11:
+  11: (duration)
     0: blendFuncSeparate(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
         0: blendFuncSeparate - [native code] (50)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:105:38 (51)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  12:
+  12: (duration)
     0: bufferData(1, 0, 2)
       swizzleTypes: [Number, TypedArray, Number]
       trace:
@@ -154,21 +154,21 @@ frames:
         0: bufferData - [native code] (53)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:109:31 (55)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  13:
+  13: (duration)
     0: bufferSubData(1, 2, 0)
       swizzleTypes: [Number, Number, TypedArray]
       trace:
         0: bufferSubData - [native code] (57)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:112:34 (58)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  14:
+  14: (duration)
     0: checkFramebufferStatus(1)
       swizzleTypes: [Number]
       trace:
         0: checkFramebufferStatus - [native code] (60)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:115:43 (61)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  15:
+  15: (duration)
     0: clear(1)
       swizzleTypes: [Number]
       trace:
@@ -176,198 +176,198 @@ frames:
         1: (anonymous function) - inspector/canvas/recording-webgl.html:118:26 (64)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
       snapshot: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAAAylJREFUeAHt0DEBAAAAwqD1T20IX4hAYcCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYOAdGL/UAAEPpnR6AAAAAElFTkSuQmCC" (65)
-  16:
+  16: (duration)
     0: clearColor(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
         0: clearColor - [native code] (67)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:121:31 (68)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  17:
+  17: (duration)
     0: clearDepth(1)
       swizzleTypes: [Number]
       trace:
         0: clearDepth - [native code] (70)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:124:31 (71)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  18:
+  18: (duration)
     0: clearStencil(1)
       swizzleTypes: [Number]
       trace:
         0: clearStencil - [native code] (73)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:127:33 (74)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  19:
+  19: (duration)
     0: colorMask(true, false, true, false)
       swizzleTypes: [Boolean, Boolean, Boolean, Boolean]
       trace:
         0: colorMask - [native code] (76)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:130:30 (77)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  20:
+  20: (duration)
     0: compileShader(0)
       swizzleTypes: [WebGLShader]
       trace:
         0: compileShader - [native code] (79)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:133:34 (80)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  21:
+  21: (duration)
     0: compressedTexImage2D(1, 2, 3, 4, 5, 6, 0)
       swizzleTypes: [Number, Number, Number, Number, Number, Number, TypedArray]
       trace:
         0: compressedTexImage2D - [native code] (82)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:136:41 (83)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  22:
+  22: (duration)
     0: compressedTexSubImage2D(1, 2, 3, 4, 5, 6, 7, 0)
       swizzleTypes: [Number, Number, Number, Number, Number, Number, Number, TypedArray]
       trace:
         0: compressedTexSubImage2D - [native code] (85)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:139:44 (86)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  23:
+  23: (duration)
     0: copyTexImage2D(1, 2, 3, 4, 5, 6, 7, 8)
       swizzleTypes: [Number, Number, Number, Number, Number, Number, Number, Number]
       trace:
         0: copyTexImage2D - [native code] (88)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:142:35 (89)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  24:
+  24: (duration)
     0: copyTexSubImage2D(1, 2, 3, 4, 5, 6, 7, 8)
       swizzleTypes: [Number, Number, Number, Number, Number, Number, Number, Number]
       trace:
         0: copyTexSubImage2D - [native code] (91)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:145:38 (92)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  25:
+  25: (duration)
     0: createBuffer()
       trace:
         0: createBuffer - [native code] (94)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:148:33 (95)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  26:
+  26: (duration)
     0: createFramebuffer()
       trace:
         0: createFramebuffer - [native code] (97)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:151:38 (98)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  27:
+  27: (duration)
     0: createProgram()
       trace:
         0: createProgram - [native code] (100)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:154:34 (101)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  28:
+  28: (duration)
     0: createRenderbuffer()
       trace:
         0: createRenderbuffer - [native code] (103)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:157:39 (104)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  29:
+  29: (duration)
     0: createShader(1)
       swizzleTypes: [Number]
       trace:
         0: createShader - [native code] (106)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:160:33 (107)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  30:
+  30: (duration)
     0: createTexture()
       trace:
         0: createTexture - [native code] (109)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:163:34 (110)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  31:
+  31: (duration)
     0: cullFace(1)
       swizzleTypes: [Number]
       trace:
         0: cullFace - [native code] (112)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:166:29 (113)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  32:
+  32: (duration)
     0: deleteBuffer(0)
       swizzleTypes: [WebGLBuffer]
       trace:
         0: deleteBuffer - [native code] (115)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:169:33 (116)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  33:
+  33: (duration)
     0: deleteFramebuffer(0)
       swizzleTypes: [WebGLFramebuffer]
       trace:
         0: deleteFramebuffer - [native code] (118)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:172:38 (119)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  34:
+  34: (duration)
     0: deleteProgram(0)
       swizzleTypes: [WebGLProgram]
       trace:
         0: deleteProgram - [native code] (121)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:175:34 (122)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  35:
+  35: (duration)
     0: deleteRenderbuffer(0)
       swizzleTypes: [WebGLRenderbuffer]
       trace:
         0: deleteRenderbuffer - [native code] (124)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:178:39 (125)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  36:
+  36: (duration)
     0: deleteShader(0)
       swizzleTypes: [WebGLShader]
       trace:
         0: deleteShader - [native code] (127)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:181:33 (128)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  37:
+  37: (duration)
     0: deleteTexture(0)
       swizzleTypes: [WebGLTexture]
       trace:
         0: deleteTexture - [native code] (130)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:184:34 (131)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  38:
+  38: (duration)
     0: depthFunc(1)
       swizzleTypes: [Number]
       trace:
         0: depthFunc - [native code] (133)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:187:30 (134)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  39:
+  39: (duration)
     0: depthMask(true)
       swizzleTypes: [Boolean]
       trace:
         0: depthMask - [native code] (136)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:190:30 (137)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  40:
+  40: (duration)
     0: depthRange(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: depthRange - [native code] (139)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:193:31 (140)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  41:
+  41: (duration)
     0: detachShader(0, 0)
       swizzleTypes: [WebGLProgram, WebGLShader]
       trace:
         0: detachShader - [native code] (142)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:196:33 (143)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  42:
+  42: (duration)
     0: disable(1)
       swizzleTypes: [Number]
       trace:
         0: disable - [native code] (145)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:199:28 (146)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  43:
+  43: (duration)
     0: disableVertexAttribArray(1)
       swizzleTypes: [Number]
       trace:
         0: disableVertexAttribArray - [native code] (148)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:202:45 (149)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  44:
+  44: (duration)
     0: drawArrays(1, 2, 3)
       swizzleTypes: [Number, Number, Number]
       trace:
@@ -375,7 +375,7 @@ frames:
         1: (anonymous function) - inspector/canvas/recording-webgl.html:205:31 (152)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
       snapshot: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAAAylJREFUeAHt0DEBAAAAwqD1T20IX4hAYcCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYOAdGL/UAAEPpnR6AAAAAElFTkSuQmCC" (65)
-  45:
+  45: (duration)
     0: drawElements(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
@@ -383,392 +383,392 @@ frames:
         1: (anonymous function) - inspector/canvas/recording-webgl.html:208:33 (155)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
       snapshot: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAAAylJREFUeAHt0DEBAAAAwqD1T20IX4hAYcCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYOAdGL/UAAEPpnR6AAAAAElFTkSuQmCC" (65)
-  46:
+  46: (duration)
     0: enable(1)
       swizzleTypes: [Number]
       trace:
         0: enable - [native code] (157)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:211:27 (158)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  47:
+  47: (duration)
     0: enableVertexAttribArray(1)
       swizzleTypes: [Number]
       trace:
         0: enableVertexAttribArray - [native code] (160)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:214:44 (161)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  48:
+  48: (duration)
     0: finish()
       trace:
         0: finish - [native code] (163)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:217:27 (164)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  49:
+  49: (duration)
     0: flush()
       trace:
         0: flush - [native code] (166)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:220:26 (167)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  50:
+  50: (duration)
     0: framebufferRenderbuffer(1, 2, 3, 0)
       swizzleTypes: [Number, Number, Number, WebGLRenderbuffer]
       trace:
         0: framebufferRenderbuffer - [native code] (169)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:223:44 (170)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  51:
+  51: (duration)
     0: framebufferTexture2D(1, 2, 3, 0, 4)
       swizzleTypes: [Number, Number, Number, WebGLTexture, Number]
       trace:
         0: framebufferTexture2D - [native code] (172)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:226:41 (173)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  52:
+  52: (duration)
     0: frontFace(1)
       swizzleTypes: [Number]
       trace:
         0: frontFace - [native code] (175)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:229:30 (176)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  53:
+  53: (duration)
     0: generateMipmap(1)
       swizzleTypes: [Number]
       trace:
         0: generateMipmap - [native code] (178)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:232:35 (179)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  54:
+  54: (duration)
     0: getActiveAttrib(0, 1)
       swizzleTypes: [WebGLProgram, Number]
       trace:
         0: getActiveAttrib - [native code] (181)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:235:36 (182)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  55:
+  55: (duration)
     0: getActiveUniform(0, 1)
       swizzleTypes: [WebGLProgram, Number]
       trace:
         0: getActiveUniform - [native code] (184)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:238:37 (185)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  56:
+  56: (duration)
     0: getAttachedShaders(0)
       swizzleTypes: [WebGLProgram]
       trace:
         0: getAttachedShaders - [native code] (187)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:241:39 (188)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  57:
+  57: (duration)
     0: getAttribLocation(0, "test")
       swizzleTypes: [WebGLProgram, String (22)]
       trace:
         0: getAttribLocation - [native code] (190)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:244:38 (191)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  58:
+  58: (duration)
     0: getBufferParameter(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: getBufferParameter - [native code] (193)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:247:39 (194)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  59:
+  59: (duration)
     0: getContextAttributes()
       trace:
         0: getContextAttributes - [native code] (196)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:250:41 (197)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  60:
+  60: (duration)
     0: getError()
       trace:
         0: getError - [native code] (199)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:253:29 (200)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  61:
+  61: (duration)
     0: getExtension("test")
       swizzleTypes: [String (22)]
       trace:
         0: getExtension - [native code] (202)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:256:33 (203)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  62:
+  62: (duration)
     0: getFramebufferAttachmentParameter(1, 2, 3)
       swizzleTypes: [Number, Number, Number]
       trace:
         0: getFramebufferAttachmentParameter - [native code] (205)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:259:54 (206)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  63:
+  63: (duration)
     0: getParameter(1)
       swizzleTypes: [Number]
       trace:
         0: getParameter - [native code] (208)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:262:33 (209)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  64:
+  64: (duration)
     0: getProgramInfoLog(0)
       swizzleTypes: [WebGLProgram]
       trace:
         0: getProgramInfoLog - [native code] (211)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:265:38 (212)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  65:
+  65: (duration)
     0: getProgramParameter(0, 1)
       swizzleTypes: [WebGLProgram, Number]
       trace:
         0: getProgramParameter - [native code] (214)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:268:40 (215)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  66:
+  66: (duration)
     0: getRenderbufferParameter(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: getRenderbufferParameter - [native code] (217)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:271:45 (218)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  67:
+  67: (duration)
     0: getShaderInfoLog(0)
       swizzleTypes: [WebGLShader]
       trace:
         0: getShaderInfoLog - [native code] (220)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:274:37 (221)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  68:
+  68: (duration)
     0: getShaderParameter(0, 1)
       swizzleTypes: [WebGLShader, Number]
       trace:
         0: getShaderParameter - [native code] (223)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:277:39 (224)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  69:
+  69: (duration)
     0: getShaderPrecisionFormat(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: getShaderPrecisionFormat - [native code] (226)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:280:45 (227)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  70:
+  70: (duration)
     0: getShaderSource(0)
       swizzleTypes: [WebGLShader]
       trace:
         0: getShaderSource - [native code] (229)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:283:36 (230)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  71:
+  71: (duration)
     0: getSupportedExtensions()
       trace:
         0: getSupportedExtensions - [native code] (232)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:286:43 (233)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  72:
+  72: (duration)
     0: getTexParameter(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: getTexParameter - [native code] (235)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:289:36 (236)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  73:
+  73: (duration)
     0: getUniform(0)
       swizzleTypes: [WebGLProgram]
       trace:
         0: getUniform - [native code] (238)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:292:31 (239)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  74:
+  74: (duration)
     0: getUniformLocation(0, "test")
       swizzleTypes: [WebGLProgram, String (22)]
       trace:
         0: getUniformLocation - [native code] (241)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:295:39 (242)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  75:
+  75: (duration)
     0: getVertexAttrib(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: getVertexAttrib - [native code] (244)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:298:36 (245)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  76:
+  76: (duration)
     0: getVertexAttribOffset(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: getVertexAttribOffset - [native code] (247)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:301:42 (248)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  77:
+  77: (duration)
     0: hint(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: hint - [native code] (250)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:304:25 (251)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  78:
+  78: (duration)
     0: isBuffer(0)
       swizzleTypes: [WebGLBuffer]
       trace:
         0: isBuffer - [native code] (253)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:307:29 (254)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  79:
+  79: (duration)
     0: isContextLost()
       trace:
         0: isContextLost - [native code] (256)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:310:34 (257)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  80:
+  80: (duration)
     0: isEnabled(1)
       swizzleTypes: [Number]
       trace:
         0: isEnabled - [native code] (259)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:313:30 (260)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  81:
+  81: (duration)
     0: isFramebuffer(0)
       swizzleTypes: [WebGLFramebuffer]
       trace:
         0: isFramebuffer - [native code] (262)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:316:34 (263)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  82:
+  82: (duration)
     0: isProgram(0)
       swizzleTypes: [WebGLProgram]
       trace:
         0: isProgram - [native code] (265)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:319:30 (266)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  83:
+  83: (duration)
     0: isRenderbuffer(0)
       swizzleTypes: [WebGLRenderbuffer]
       trace:
         0: isRenderbuffer - [native code] (268)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:322:35 (269)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  84:
+  84: (duration)
     0: isShader(0)
       swizzleTypes: [WebGLShader]
       trace:
         0: isShader - [native code] (271)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:325:29 (272)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  85:
+  85: (duration)
     0: isTexture(0)
       swizzleTypes: [WebGLTexture]
       trace:
         0: isTexture - [native code] (274)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:328:30 (275)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  86:
+  86: (duration)
     0: lineWidth(1)
       swizzleTypes: [Number]
       trace:
         0: lineWidth - [native code] (277)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:331:30 (278)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  87:
+  87: (duration)
     0: linkProgram(0)
       swizzleTypes: [WebGLProgram]
       trace:
         0: linkProgram - [native code] (280)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:334:32 (281)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  88:
+  88: (duration)
     0: pixelStorei(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: pixelStorei - [native code] (283)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:337:32 (284)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  89:
+  89: (duration)
     0: polygonOffset(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: polygonOffset - [native code] (286)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:340:34 (287)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  90:
+  90: (duration)
     0: readPixels(1, 2, 3, 4, 5, 6, 0)
       swizzleTypes: [Number, Number, Number, Number, Number, Number, TypedArray]
       trace:
         0: readPixels - [native code] (289)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:343:31 (290)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  91:
+  91: (duration)
     0: releaseShaderCompiler()
       trace:
         0: releaseShaderCompiler - [native code] (292)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:346:42 (293)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  92:
+  92: (duration)
     0: renderbufferStorage(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
         0: renderbufferStorage - [native code] (295)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:349:40 (296)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  93:
+  93: (duration)
     0: sampleCoverage(1, true)
       swizzleTypes: [Number, Boolean]
       trace:
         0: sampleCoverage - [native code] (298)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:352:35 (299)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  94:
+  94: (duration)
     0: scissor(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
         0: scissor - [native code] (301)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:355:28 (302)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  95:
+  95: (duration)
     0: shaderSource(0, "test")
       swizzleTypes: [WebGLShader, String (22)]
       trace:
         0: shaderSource - [native code] (304)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:358:33 (305)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  96:
+  96: (duration)
     0: stencilFunc(1, 2, 3)
       swizzleTypes: [Number, Number, Number]
       trace:
         0: stencilFunc - [native code] (307)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:361:32 (308)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  97:
+  97: (duration)
     0: stencilFuncSeparate(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
         0: stencilFuncSeparate - [native code] (310)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:364:40 (311)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  98:
+  98: (duration)
     0: stencilMask(1)
       swizzleTypes: [Number]
       trace:
         0: stencilMask - [native code] (313)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:367:32 (314)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  99:
+  99: (duration)
     0: stencilMaskSeparate(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: stencilMaskSeparate - [native code] (316)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:370:40 (317)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  100:
+  100: (duration)
     0: stencilOp(1, 2, 3)
       swizzleTypes: [Number, Number, Number]
       trace:
         0: stencilOp - [native code] (319)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:373:30 (320)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  101:
+  101: (duration)
     0: stencilOpSeparate(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
         0: stencilOpSeparate - [native code] (322)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:376:38 (323)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  102:
+  102: (duration)
     0: texImage2D(1, 2, 3, 4, 5, [object HTMLImageElement])
       swizzleTypes: [Number, Number, Number, Number, Number, Image (325)]
       trace:
@@ -781,21 +781,21 @@ frames:
         0: texImage2D - [native code] (326)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:380:31 (328)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  103:
+  103: (duration)
     0: texParameterf(1, 2, 3)
       swizzleTypes: [Number, Number, Number]
       trace:
         0: texParameterf - [native code] (330)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:383:34 (331)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  104:
+  104: (duration)
     0: texParameteri(1, 2, 3)
       swizzleTypes: [Number, Number, Number]
       trace:
         0: texParameteri - [native code] (333)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:386:34 (334)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  105:
+  105: (duration)
     0: texSubImage2D(1, 2, 3, 4, 5, 6, [object HTMLImageElement])
       swizzleTypes: [Number, Number, Number, Number, Number, Number, Image (325)]
       trace:
@@ -808,217 +808,217 @@ frames:
         0: texSubImage2D - [native code] (336)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:390:34 (338)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  106:
+  106: (duration)
     0: uniform1f(1)
       swizzleTypes: [Number]
       trace:
         0: uniform1f - [native code] (340)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:393:30 (341)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  107:
+  107: (duration)
     0: uniform1fv(0)
       swizzleTypes: [TypedArray]
       trace:
         0: uniform1fv - [native code] (343)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:396:31 (344)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  108:
+  108: (duration)
     0: uniform1i(1)
       swizzleTypes: [Number]
       trace:
         0: uniform1i - [native code] (346)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:399:30 (347)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  109:
+  109: (duration)
     0: uniform1iv(0)
       swizzleTypes: [TypedArray]
       trace:
         0: uniform1iv - [native code] (349)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:402:31 (350)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  110:
+  110: (duration)
     0: uniform2f(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: uniform2f - [native code] (352)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:405:30 (353)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  111:
+  111: (duration)
     0: uniform2fv(0)
       swizzleTypes: [TypedArray]
       trace:
         0: uniform2fv - [native code] (355)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:408:31 (356)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  112:
+  112: (duration)
     0: uniform2i(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: uniform2i - [native code] (358)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:411:30 (359)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  113:
+  113: (duration)
     0: uniform2iv(0)
       swizzleTypes: [TypedArray]
       trace:
         0: uniform2iv - [native code] (361)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:414:31 (362)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  114:
+  114: (duration)
     0: uniform3f(1, 2, 3)
       swizzleTypes: [Number, Number, Number]
       trace:
         0: uniform3f - [native code] (364)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:417:30 (365)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  115:
+  115: (duration)
     0: uniform3fv(0)
       swizzleTypes: [TypedArray]
       trace:
         0: uniform3fv - [native code] (367)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:420:31 (368)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  116:
+  116: (duration)
     0: uniform3i(1, 2, 3)
       swizzleTypes: [Number, Number, Number]
       trace:
         0: uniform3i - [native code] (370)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:423:30 (371)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  117:
+  117: (duration)
     0: uniform3iv(0)
       swizzleTypes: [TypedArray]
       trace:
         0: uniform3iv - [native code] (373)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:426:31 (374)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  118:
+  118: (duration)
     0: uniform4f(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
         0: uniform4f - [native code] (376)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:429:30 (377)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  119:
+  119: (duration)
     0: uniform4fv(0)
       swizzleTypes: [TypedArray]
       trace:
         0: uniform4fv - [native code] (379)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:432:31 (380)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  120:
+  120: (duration)
     0: uniform4i(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
         0: uniform4i - [native code] (382)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:435:30 (383)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  121:
+  121: (duration)
     0: uniform4iv(0)
       swizzleTypes: [TypedArray]
       trace:
         0: uniform4iv - [native code] (385)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:438:31 (386)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  122:
+  122: (duration)
     0: uniformMatrix2fv(true, 0)
       swizzleTypes: [Boolean, TypedArray]
       trace:
         0: uniformMatrix2fv - [native code] (388)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:441:37 (389)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  123:
+  123: (duration)
     0: uniformMatrix3fv(true, 0)
       swizzleTypes: [Boolean, TypedArray]
       trace:
         0: uniformMatrix3fv - [native code] (391)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:444:37 (392)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  124:
+  124: (duration)
     0: uniformMatrix4fv(true, 0)
       swizzleTypes: [Boolean, TypedArray]
       trace:
         0: uniformMatrix4fv - [native code] (394)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:447:37 (395)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  125:
+  125: (duration)
     0: useProgram(0)
       swizzleTypes: [WebGLProgram]
       trace:
         0: useProgram - [native code] (397)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:450:31 (398)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  126:
+  126: (duration)
     0: validateProgram(0)
       swizzleTypes: [WebGLProgram]
       trace:
         0: validateProgram - [native code] (400)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:453:36 (401)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  127:
+  127: (duration)
     0: vertexAttrib1f(1, 2)
       swizzleTypes: [Number, Number]
       trace:
         0: vertexAttrib1f - [native code] (403)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:456:35 (404)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  128:
+  128: (duration)
     0: vertexAttrib1fv(1, 0)
       swizzleTypes: [Number, TypedArray]
       trace:
         0: vertexAttrib1fv - [native code] (406)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:459:36 (407)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  129:
+  129: (duration)
     0: vertexAttrib2f(1, 2, 3)
       swizzleTypes: [Number, Number, Number]
       trace:
         0: vertexAttrib2f - [native code] (409)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:462:35 (410)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  130:
+  130: (duration)
     0: vertexAttrib2fv(1, 0)
       swizzleTypes: [Number, TypedArray]
       trace:
         0: vertexAttrib2fv - [native code] (412)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:465:36 (413)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  131:
+  131: (duration)
     0: vertexAttrib3f(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
         0: vertexAttrib3f - [native code] (415)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:468:35 (416)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  132:
+  132: (duration)
     0: vertexAttrib3fv(1, 0)
       swizzleTypes: [Number, TypedArray]
       trace:
         0: vertexAttrib3fv - [native code] (418)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:471:36 (419)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  133:
+  133: (duration)
     0: vertexAttrib4f(1, 2, 3, 4, 5)
       swizzleTypes: [Number, Number, Number, Number, Number]
       trace:
         0: vertexAttrib4f - [native code] (421)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:474:35 (422)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  134:
+  134: (duration)
     0: vertexAttrib4fv(1, 0)
       swizzleTypes: [Number, TypedArray]
       trace:
         0: vertexAttrib4fv - [native code] (424)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:477:36 (425)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  135:
+  135: (duration)
     0: vertexAttribPointer(1, 2, 3, true, 5, 6)
       swizzleTypes: [Number, Number, Number, Boolean, Number, Number]
       trace:
         0: vertexAttribPointer - [native code] (427)
         1: (anonymous function) - inspector/canvas/recording-webgl.html:480:40 (428)
         2: executeFrameFunction - inspector/canvas/recording-webgl.html:491:24 (7)
-  136:
+  136: (duration)
     0: viewport(1, 2, 3, 4)
       swizzleTypes: [Number, Number, Number, Number]
       trace:
@@ -1468,7 +1468,7 @@ initialState:
     0: {"alpha":true,"depth":true,"stencil":false,"antialias":true,"premultipliedAlpha":true,"preserveDrawingBuffer":false,"failIfMajorPerformanceCaveat":false}
   content: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAAAylJREFUeAHt0DEBAAAAwqD1T20IX4hAYcCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYOAdGL/UAAEPpnR6AAAAAElFTkSuQmCC"
 frames:
-  0: (incomplete)
+  0: (duration) (incomplete)
     0: activeTexture(1)
       swizzleTypes: [Number]
       trace:
index dd5f9c7..a093b78 100644 (file)
@@ -11,7 +11,7 @@ initialState:
     0: {"alpha":true,"depth":true,"stencil":false,"antialias":true,"premultipliedAlpha":true,"preserveDrawingBuffer":false,"failIfMajorPerformanceCaveat":false}
   content: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAAAylJREFUeAHt0DEBAAAAwqD1T20IX4hAYcCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYOAdGL/UAAEPpnR6AAAAAElFTkSuQmCC"
 frames:
-  0:
+  0: (duration)
     0: useProgram(0)
       swizzleTypes: [WebGLProgram]
       trace:
index 4070ab9..d7a164d 100644 (file)
@@ -26,7 +26,13 @@ TestPage.registerInitializer(() => {
         InspectorTest.log("frames:");
         for (let i = 0; i < recording.frames.length; ++i) {
             let frame = recording.frames[i];
-            InspectorTest.log(`  ${i}:` + (frame.incomplete ? " (incomplete)" : ""));
+
+            let frameText = `  ${i}:`;
+            if (!isNaN(frame.duration))
+                frameText += " (duration)";
+            if (frame.incomplete)
+                frameText += " (incomplete)";
+            InspectorTest.log(frameText);
 
             for (let j = 0; j < frame.actions.length; ++j) {
                 let action = frame.actions[j];
index 53154d0..3f76fcd 100644 (file)
@@ -75,6 +75,7 @@ null
           []
         ]
       ],
+      "duration": 1,
       "incomplete": true
     }
   ],
@@ -106,6 +107,7 @@ null
           []
         ]
       ],
+      "duration": 1,
       "incomplete": true
     }
   ],
@@ -143,6 +145,7 @@ null
           ]
         ]
       ],
+      "duration": 1,
       "incomplete": true
     }
   ],
index f56331f..80174b6 100644 (file)
@@ -70,6 +70,7 @@ function test()
                 frames: [
                     {
                         actions: null,
+                        duration: null,
                         incomplete: null,
                     },
                 ],
@@ -91,6 +92,7 @@ function test()
                 frames: [
                     {
                         actions: [null],
+                        duration: 1,
                         incomplete: true,
                     },
                 ],
@@ -119,6 +121,7 @@ function test()
                                 null,
                             ],
                         ],
+                        duration: 1,
                         incomplete: true,
                     },
                 ],
@@ -147,6 +150,7 @@ function test()
                                 [0],
                             ],
                         ],
+                        duration: 1,
                         incomplete: true,
                     },
                 ],
index c7a1c8c..ba7113d 100644 (file)
@@ -1,3 +1,14 @@
+2017-11-03  Devin Rousso  <webkit@devinrousso.com>
+
+        Web Inspector: Canvas2D Profiling: highlight expensive context commands in the captured command log
+        https://bugs.webkit.org/show_bug.cgi?id=178302
+        <rdar://problem/33158849>
+
+        Reviewed by Brian Burg.
+
+        * inspector/protocol/Recording.json:
+        Add `duration` to each Frame that represents the total time of all the recorded actions.
+
 2017-11-02  Devin Rousso  <webkit@devinrousso.com>
 
         Web Inspector: Canvas Tab: show supported GL extensions for selected canvas
index d9d72ab..c841bfc 100644 (file)
@@ -23,7 +23,8 @@
             "type": "object",
             "description": "Container object for a single frame of the recording.",
             "properties": [
-                { "name": "actions", "type": "array", "items": { "type": "any" }, "description": "Information about an action made to the recorded object. Follows the structure [name, parameters, trace], where name is a string, parameters is an array, and trace is an array."},
+                { "name": "actions", "type": "array", "items": { "type": "any" }, "description": "Information about an action made to the recorded object. Follows the structure [name, parameters, swizzleTypes, trace], where name is a string, parameters is an array, swizzleTypes is an array, and trace is an array."},
+                { "name": "duration", "type": "number", "optional": true, "description": "Total execution time of all actions recorded in this frame in milliseconds. " },
                 { "name": "incomplete", "type": "boolean", "optional": true, "description": "Flag indicating if the recording was stopped before this frame ended." }
             ]
         },
index ef2e11f..32ae44b 100644 (file)
@@ -1,3 +1,22 @@
+2017-11-03  Devin Rousso  <webkit@devinrousso.com>
+
+        Web Inspector: Canvas2D Profiling: highlight expensive context commands in the captured command log
+        https://bugs.webkit.org/show_bug.cgi?id=178302
+        <rdar://problem/33158849>
+
+        Reviewed by Brian Burg.
+
+        No new tests, updated existing tests.
+
+        * inspector/InspectorCanvas.h:
+        * inspector/InspectorCanvas.cpp:
+        (WebCore::InspectorCanvas::recordAction):
+        (WebCore::InspectorCanvas::finalizeFrame):
+        (WebCore::InspectorCanvas::markNewFrame): Deleted.
+
+        * inspector/InspectorCanvasAgent.cpp:
+        (WebCore::InspectorCanvasAgent::didFinishRecordingCanvasFrame):
+
 2017-11-02  Maciej Stachowiak  <mjs@apple.com>
 
         Don't try to guess plugin MIME type from a file extension in a URL (no observable effect)
index 0b5aaff..86e01a7 100644 (file)
@@ -70,6 +70,7 @@
 #include <inspector/IdentifiersFactory.h>
 #include <inspector/ScriptCallStack.h>
 #include <inspector/ScriptCallStackFactory.h>
+#include <wtf/CurrentTime.h>
 
 
 namespace WebCore {
@@ -136,6 +137,8 @@ void InspectorCanvas::recordAction(const String& name, Vector<RecordCanvasAction
             .release();
 
         m_frames->addItem(WTFMove(frame));
+
+        m_currentFrameStartTime = monotonicallyIncreasingTimeMS();
     }
 
     appendActionSnapshotIfNeeded();
@@ -168,8 +171,15 @@ RefPtr<Inspector::Protocol::Array<InspectorValue>>&& InspectorCanvas::releaseDat
     return WTFMove(m_serializedDuplicateData);
 }
 
-void InspectorCanvas::markNewFrame()
+void InspectorCanvas::finalizeFrame()
 {
+    if (m_frames->length() && !std::isnan(m_currentFrameStartTime)) {
+        auto currentFrame = static_cast<Inspector::Protocol::Recording::Frame*>(m_frames->get(m_frames->length() - 1).get());
+        currentFrame->setDuration(monotonicallyIncreasingTimeMS() - m_currentFrameStartTime);
+
+        m_currentFrameStartTime = NAN;
+    }
+
     m_currentActions = nullptr;
 }
 
index 41c9efa..b29456b 100644 (file)
@@ -65,7 +65,7 @@ public:
     RefPtr<Inspector::Protocol::Array<Inspector::Protocol::Recording::Frame>>&& releaseFrames();
     RefPtr<Inspector::Protocol::Array<Inspector::InspectorValue>>&& releaseData();
 
-    void markNewFrame();
+    void finalizeFrame();
     void markCurrentFrameIncomplete();
 
     void setBufferLimit(long);
@@ -115,6 +115,7 @@ private:
     RefPtr<Inspector::Protocol::Array<Inspector::InspectorValue>> m_actionNeedingSnapshot;
     RefPtr<Inspector::Protocol::Array<Inspector::InspectorValue>> m_serializedDuplicateData;
     Vector<DuplicateDataVariant> m_indexedDuplicateData;
+    double m_currentFrameStartTime { NAN };
     size_t m_bufferLimit { 100 * 1024 * 1024 };
     size_t m_bufferUsed { 0 };
     bool m_singleFrame { true };
index 0e2a92d..1bbff97 100644 (file)
@@ -486,14 +486,13 @@ void InspectorCanvasAgent::didFinishRecordingCanvasFrame(HTMLCanvasElement& canv
         return;
     }
 
-    if (!forceDispatch && !inspectorCanvas->singleFrame()) {
-        inspectorCanvas->markNewFrame();
-        return;
-    }
-
     if (forceDispatch)
         inspectorCanvas->markCurrentFrameIncomplete();
 
+    inspectorCanvas->finalizeFrame();
+    if (!forceDispatch && !inspectorCanvas->singleFrame())
+        return;
+
     // FIXME: <https://webkit.org/b/176008> Web Inspector: Record actions performed on WebGL2RenderingContext
 
     Inspector::Protocol::Recording::Type type;
index f820f03..64f754c 100644 (file)
@@ -1,3 +1,22 @@
+2017-11-03  Devin Rousso  <webkit@devinrousso.com>
+
+        Web Inspector: Canvas2D Profiling: highlight expensive context commands in the captured command log
+        https://bugs.webkit.org/show_bug.cgi?id=178302
+        <rdar://problem/33158849>
+
+        Reviewed by Brian Burg.
+
+        * UserInterface/Models/RecordingFrame.js:
+        (WI.RecordingFrame):
+        (WI.RecordingFrame.fromPayload):
+        (WI.RecordingFrame.prototype.get duration):
+        (WI.RecordingFrame.prototype.toJSON):
+
+        * UserInterface/Views/RecordingNavigationSidebarPanel.js:
+        (WI.RecordingNavigationSidebarPanel.prototype.set recording):
+        * UserInterface/Views/RecordingNavigationSidebarPanel.css:
+        (.sidebar > .panel.navigation.recording > .content > .tree-outline .item.folder-icon > .status):
+
 2017-11-02  Devin Rousso  <webkit@devinrousso.com>
 
         Web Inspector: Canvas Tab: show supported GL extensions for selected canvas
index b534113..6a2a620 100644 (file)
 
 WI.RecordingFrame = class RecordingFrame
 {
-    constructor(actions, {incomplete} = {})
+    constructor(actions, {duration, incomplete} = {})
     {
         this._actions = actions;
-        this._incomplete = incomplete;
+        this._duration = duration || NaN;
+        this._incomplete = incomplete || false;
     }
 
     // Static
@@ -43,6 +44,7 @@ WI.RecordingFrame = class RecordingFrame
 
         let actions = payload.actions.map(WI.RecordingAction.fromPayload);
         return new WI.RecordingFrame(actions, {
+            duration: payload.duration || NaN,
             incomplete: !!payload.incomplete,
         });
     }
@@ -50,6 +52,7 @@ WI.RecordingFrame = class RecordingFrame
     // Public
 
     get actions() { return this._actions; }
+    get duration() { return this._duration; }
     get incomplete() { return this._incomplete; }
 
     toJSON()
@@ -57,6 +60,8 @@ WI.RecordingFrame = class RecordingFrame
         let json = {
             actions: this._actions.map((action) => action.toJSON()),
         };
+        if (!isNaN(this._duration))
+            json.duration = this._duration;
         if (this._incomplete)
             json.incomplete = this._incomplete;
         return json;
index dfa7b8c..5e88c74 100644 (file)
 .sidebar > .panel.navigation.recording > .content > .tree-outline {
     min-height: 100%;
 }
+
 .sidebar > .panel.navigation.recording > .content > .tree-outline .item.folder-icon > .icon {
     content: url(../Images/RenderingFrame.svg);
 }
+
+.sidebar > .panel.navigation.recording > .content > .tree-outline .item.folder-icon > .status {
+    line-height: 16px;
+}
index 491eb3f..c718902 100644 (file)
@@ -71,6 +71,11 @@ WI.RecordingNavigationSidebarPanel = class RecordingNavigationSidebarPanel exten
                 for (let i = 0; i < frame.actions.length; ++i)
                     folder.appendChild(new WI.RecordingActionTreeElement(frame.actions[i], cumulativeActionIndex + i, this._recording.type));
 
+                if (!isNaN(frame.duration)) {
+                    const higherResolution = true;
+                    folder.status = Number.secondsToString(frame.duration / 1000, higherResolution);
+                }
+
                 if (frame.incomplete)
                     folder.subtitle = WI.UIString("Incomplete");