Bug 195311

Summary: Web Inspector: Canvas: export recording as HTML
Product: WebKit Reporter: Devin Rousso <hi>
Component: Web InspectorAssignee: Devin Rousso <hi>
Status: RESOLVED FIXED    
Severity: Normal CC: commit-queue, ews-watchlist, hi, inspector-bugzilla-changes, joepeck, rniwa, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
Bug Depends on:    
Bug Blocks: 173807, 175485    
Attachments:
Description Flags
Patch
none
Archive of layout-test-results from ews102 for mac-highsierra
none
Archive of layout-test-results from ews104 for mac-highsierra-wk2
none
Archive of layout-test-results from ews112 for mac-highsierra
none
Archive of layout-test-results from ews123 for ios-simulator-wk2
none
Patch
none
Patch
none
[HTML] Output after Patch is applied
none
Patch
none
Archive of layout-test-results from ews100 for mac-highsierra
none
Archive of layout-test-results from ews112 for mac-highsierra
none
Patch
none
Archive of layout-test-results from ews106 for mac-highsierra-wk2
none
Patch
none
Patch
none
Archive of layout-test-results from ews107 for mac-highsierra-wk2 none

Devin Rousso
Reported 2019-03-04 20:41:14 PST
This would be incredibly useful as a reduction "generator".
Attachments
Patch (35.81 KB, patch)
2019-03-05 01:52 PST, Devin Rousso
no flags
Archive of layout-test-results from ews102 for mac-highsierra (2.46 MB, application/zip)
2019-03-05 02:54 PST, EWS Watchlist
no flags
Archive of layout-test-results from ews104 for mac-highsierra-wk2 (2.83 MB, application/zip)
2019-03-05 03:12 PST, EWS Watchlist
no flags
Archive of layout-test-results from ews112 for mac-highsierra (2.38 MB, application/zip)
2019-03-05 03:23 PST, EWS Watchlist
no flags
Archive of layout-test-results from ews123 for ios-simulator-wk2 (2.96 MB, application/zip)
2019-03-05 04:08 PST, EWS Watchlist
no flags
Patch (42.13 KB, patch)
2019-03-05 11:56 PST, Devin Rousso
no flags
Patch (42.89 KB, patch)
2019-03-05 12:09 PST, Devin Rousso
no flags
[HTML] Output after Patch is applied (1.04 MB, text/html)
2019-03-06 12:11 PST, Devin Rousso
no flags
Patch (43.57 KB, patch)
2019-03-07 01:20 PST, Devin Rousso
no flags
Archive of layout-test-results from ews100 for mac-highsierra (2.44 MB, application/zip)
2019-03-07 02:23 PST, EWS Watchlist
no flags
Archive of layout-test-results from ews112 for mac-highsierra (2.27 MB, application/zip)
2019-03-07 03:06 PST, EWS Watchlist
no flags
Patch (43.22 KB, patch)
2019-03-07 10:25 PST, Devin Rousso
no flags
Archive of layout-test-results from ews106 for mac-highsierra-wk2 (2.57 MB, application/zip)
2019-03-07 11:42 PST, EWS Watchlist
no flags
Patch (44.76 KB, patch)
2019-03-08 10:18 PST, Devin Rousso
no flags
Patch (45.06 KB, patch)
2019-03-08 10:21 PST, Devin Rousso
no flags
Archive of layout-test-results from ews107 for mac-highsierra-wk2 (2.77 MB, application/zip)
2019-03-08 11:39 PST, EWS Watchlist
no flags
Radar WebKit Bug Importer
Comment 1 2019-03-04 20:41:41 PST
Devin Rousso
Comment 2 2019-03-05 01:52:23 PST
EWS Watchlist
Comment 3 2019-03-05 02:54:49 PST Comment hidden (obsolete)
EWS Watchlist
Comment 4 2019-03-05 02:54:51 PST Comment hidden (obsolete)
EWS Watchlist
Comment 5 2019-03-05 03:12:43 PST Comment hidden (obsolete)
EWS Watchlist
Comment 6 2019-03-05 03:12:45 PST Comment hidden (obsolete)
EWS Watchlist
Comment 7 2019-03-05 03:23:09 PST Comment hidden (obsolete)
EWS Watchlist
Comment 8 2019-03-05 03:23:11 PST Comment hidden (obsolete)
EWS Watchlist
Comment 9 2019-03-05 04:08:55 PST Comment hidden (obsolete)
EWS Watchlist
Comment 10 2019-03-05 04:08:56 PST Comment hidden (obsolete)
Devin Rousso
Comment 11 2019-03-05 11:56:09 PST
Devin Rousso
Comment 12 2019-03-05 12:09:49 PST
Devin Rousso
Comment 13 2019-03-06 12:11:21 PST
Created attachment 363770 [details] [HTML] Output after Patch is applied This is an example export from recording <https://devinrousso.com> for about ~200 frames.
Joseph Pecoraro
Comment 14 2019-03-06 22:16:44 PST
Comment on attachment 363668 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=363668&action=review This is awesome! r=me > Source/WebInspectorUI/UserInterface/Models/Recording.js:498 > + return JSON.stringify(value); Nice! This will protect against injection! > Source/WebInspectorUI/UserInterface/Models/Recording.js:514 > + lines.push(`<!DOCTYPE html>`); > + lines.push(`<body>`); > + lines.push(`<style>`); > + lines.push(` body {`); > + lines.push(` margin: 0;`); > + lines.push(` }`); > + lines.push(` canvas {`); > + lines.push(` max-width: calc(100% - 40px);`); > + lines.push(` max-height: calc(100% - 40px);`); > + lines.push(` padding: 20px;`); > + lines.push(` }`); > + lines.push(`</style>`); > + lines.push(`<script>`); > + lines.push(`"use strict";`); Template strings allow newlines, so this could be cleaned up a bit, that said I like when things line up nicely. Lets also make an effort to make this more standard and include a nice title for browser tabs. Maybe: <html> <head> <title>${this._displayName}</title> </head> <body> ... Though you'd want to escape the displayName if it can be user defined to avoid script injection. For example if someone did `console.record(ctx, {name: "</title><script>alert(1);</script>});` > Source/WebInspectorUI/UserInterface/Models/Recording.js:546 > + if (name === "setPath" || name === "currentX" || name === "currentY") > + continue; "getPath" is also an InspectorAddition that may need to be skipped. > Source/WebInspectorUI/UserInterface/Models/Recording.js:566 > + lines.push(` console.record(context, {name: "${this._displayName}"});`); If the displayName is user defined you should probably protect against script injection. You could JSON.stringify it here: lines.push(` console.record(context, {name: ${JSON.stringify(this._displayName)});`); For example if someone did `console.record(ctx, {name: "\"}); alert(1); ({foo:\");`. > Source/WebInspectorUI/UserInterface/Models/Recording.js:584 > + if (!action.valid) > + contextString = `// ` + contextString; Clever! This could move above the call string, next to the other contextString setup. > Source/WebInspectorUI/UserInterface/Models/Recording.js:656 > + lines.push(` createImageBitmap(image).then(function (imageBitmap) {`); Style: It is unusual to have the space after `function` here. > Source/WebInspectorUI/UserInterface/Models/Recording.js:702 > + lines.push(`rebuildDOMMatrix(${index}, ${JSON.stringify(data)});`) How about just passing this as an array: let data = [object.a, object.b, object.c, object.d, object.e, object.f]; Then rebuildDOMMatrix just takes the data: function rebuildDOMMatrix(key, data) { objects[key] = new DOMMatrix(data) } Also interesting, DOMMatrix has a toString() which the constructor takes, so you could alternatively do: let data = object.toString(); But I like the array version better.
Joseph Pecoraro
Comment 15 2019-03-06 22:19:53 PST
Comment on attachment 363668 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=363668&action=review >> Source/WebInspectorUI/UserInterface/Models/Recording.js:702 >> + lines.push(`rebuildDOMMatrix(${index}, ${JSON.stringify(data)});`) > > How about just passing this as an array: > > let data = [object.a, object.b, object.c, object.d, object.e, object.f]; > > Then rebuildDOMMatrix just takes the data: > > function rebuildDOMMatrix(key, data) { > objects[key] = new DOMMatrix(data) > } > > Also interesting, DOMMatrix has a toString() which the constructor takes, so you could alternatively do: > > let data = object.toString(); > > But I like the array version better. Hmm, actually using DOMMatrix's toString would support a 3d matrix. Might be worth doing it that way then!
Devin Rousso
Comment 16 2019-03-07 01:20:57 PST
EWS Watchlist
Comment 17 2019-03-07 02:23:02 PST Comment hidden (obsolete)
EWS Watchlist
Comment 18 2019-03-07 02:23:04 PST Comment hidden (obsolete)
EWS Watchlist
Comment 19 2019-03-07 03:06:02 PST Comment hidden (obsolete)
EWS Watchlist
Comment 20 2019-03-07 03:06:03 PST Comment hidden (obsolete)
Devin Rousso
Comment 21 2019-03-07 10:25:45 PST
EWS Watchlist
Comment 22 2019-03-07 11:42:25 PST Comment hidden (obsolete)
EWS Watchlist
Comment 23 2019-03-07 11:42:26 PST Comment hidden (obsolete)
Devin Rousso
Comment 24 2019-03-08 10:18:48 PST
Devin Rousso
Comment 25 2019-03-08 10:21:08 PST
EWS Watchlist
Comment 26 2019-03-08 11:39:30 PST Comment hidden (obsolete)
EWS Watchlist
Comment 27 2019-03-08 11:39:33 PST Comment hidden (obsolete)
WebKit Commit Bot
Comment 28 2019-03-12 11:59:36 PDT
Comment on attachment 364029 [details] Patch Clearing flags on attachment: 364029 Committed r242809: <https://trac.webkit.org/changeset/242809>
WebKit Commit Bot
Comment 29 2019-03-12 11:59:38 PDT
All reviewed patches have been landed. Closing bug.
Note You need to log in before you can comment on or make changes to this bug.