Web Inspector: Timelines Tab: Screenshots: include images from `conso…

…le.screenshot`

https://bugs.webkit.org/show_bug.cgi?id=240853

Reviewed by Patrick Angle.

This is nice for developers as it gives them a way to visualize all of their `console.screenshot`,
which can be used to see visual snapshots of particular nodes/areas since it's configurable (instead
of the general "snapshot the viewport after compositing").

* Source/JavaScriptCore/inspector/protocol/Console.json:
* Source/JavaScriptCore/inspector/ConsoleMessage.h:
* Source/JavaScriptCore/inspector/ConsoleMessage.cpp:
(Inspector::ConsoleMessage::ConsoleMessage):
(Inspector::ConsoleMessage::addToFrontend):
* Source/WebInspectorUI/UserInterface/Protocol/ConsoleObserver.js:
(WI.ConsoleObserver.prototype.messageAdded):
* Source/WebInspectorUI/UserInterface/Controllers/ConsoleManager.js:
(WI.ConsoleManager.prototype.messageWasAdded):
* Source/WebInspectorUI/UserInterface/Models/ConsoleMessage.js:
(WI.ConsoleMessage):
(WI.ConsoleMessage.prototype.get timestamp): Added.
Add a `timestamp` to console messages so that the frontend can know when the message was created.

* Source/WebCore/page/PageConsoleClient.cpp:
(WebCore::PageConsoleClient::screenshot):
Capture a `timestamp` before snapshotting so it doesn't skew where it's shown in the Timelines Tab.

* Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js:
(WI.TimelineManager):
(WI.TimelineManager.prototype._processRecord):
(WI.TimelineManager.prototype._handleMessageAdded): Added.
Listen for `WI.ConsoleManager.Event.MessageAdded` to add `console.screenshot` to the Timelines Tab.

* Source/WebCore/inspector/TimelineRecordFactory.h:
* Source/WebCore/inspector/TimelineRecordFactory.cpp:
(WebCore::TimelineRecordFactory::createScreenshotData):
* Source/WebCore/inspector/agents/InspectorTimelineAgent.cpp:
(WebCore::InspectorTimelineAgent::captureScreenshot):
* Source/WebInspectorUI/UserInterface/Models/ScreenshotsTimelineRecord.js:
(WI.ScreenshotsTimelineRecord):
(WI.ScreenshotsTimelineRecord.async fromJSON):
(WI.ScreenshotsTimelineRecord.prototype.toJSON):
(WI.ScreenshotsTimelineRecord.prototype.get width): Deleted.
(WI.ScreenshotsTimelineRecord.prototype.get height): Deleted.
* Source/WebInspectorUI/UserInterface/Views/ScreenshotsTimelineOverviewGraph.js:
(WI.ScreenshotsTimelineOverviewGraph.prototype.layout):
Drop `width`/`height` from screenshot records as the `dataURL` will contain it (after loading).

* LayoutTests/inspector/console/console-api-expected.txt:
* LayoutTests/inspector/console/console-screenshot.html:
* LayoutTests/inspector/console/console-table-expected.txt:
* LayoutTests/inspector/timeline/timeline-event-screenshots.html:
* LayoutTests/inspector/timeline/timeline-event-screenshots-expected.txt:
* LayoutTests/inspector/worker/console-basic-expected.txt:

Canonical link: https://commits.webkit.org/250942@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@294780 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/inspector/console/console-api-expected.txt

@@ -36,7 +36,8 @@ STEP: console.log('console.log')
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.warn('console.warn')
@@ -58,7 +59,8 @@ STEP: console.warn('console.warn')
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.error('console.error')
@@ -80,7 +82,8 @@ STEP: console.error('console.error')
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.debug('console.debug')
@@ -102,7 +105,8 @@ STEP: console.debug('console.debug')
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.info('console.info')
@@ -124,7 +128,8 @@ STEP: console.info('console.info')
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.assert(false, 'assertion message')
@@ -146,7 +151,8 @@ STEP: console.assert(false, 'assertion message')
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.trace()
@@ -160,7 +166,8 @@ STEP: console.trace()
   "_column": 14,
   "_repeatCount": 1,
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.log('string message', string)
@@ -188,7 +195,8 @@ STEP: console.log('string message', string)
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.log('message', object, object)
@@ -250,7 +258,8 @@ STEP: console.log('message', object, object)
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.error('message', object)
@@ -292,7 +301,8 @@ STEP: console.error('message', object)
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.warn('message', object)
@@ -334,7 +344,8 @@ STEP: console.warn('message', object)
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.debug('message', object)
@@ -376,7 +387,8 @@ STEP: console.debug('message', object)
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.info('message', object)
@@ -418,7 +430,8 @@ STEP: console.info('message', object)
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.dir(object)
@@ -454,7 +467,8 @@ STEP: console.dir(object)
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.dirxml(object)
@@ -490,7 +504,8 @@ STEP: console.dirxml(object)
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.group('groupName')
@@ -512,7 +527,8 @@ STEP: console.group('groupName')
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.groupEnd('groupName')
@@ -534,7 +550,8 @@ STEP: console.groupEnd('groupName')
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.groupCollapsed('collapsedGroupName')
@@ -556,7 +573,8 @@ STEP: console.groupCollapsed('collapsedGroupName')
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.groupEnd('collapsedGroupName')
@@ -578,7 +596,8 @@ STEP: console.groupEnd('collapsedGroupName')
     }
   ],
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.count()
@@ -592,7 +611,8 @@ STEP: console.count()
   "_column": 14,
   "_repeatCount": 1,
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.count()
@@ -606,7 +626,8 @@ STEP: console.count()
   "_column": 14,
   "_repeatCount": 1,
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.count("default")
@@ -620,7 +641,8 @@ STEP: console.count("default")
   "_column": 14,
   "_repeatCount": 1,
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.count('')
@@ -634,7 +656,8 @@ STEP: console.count('')
   "_column": 14,
   "_repeatCount": 1,
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.count('    ')
@@ -648,7 +671,8 @@ STEP: console.count('    ')
   "_column": 14,
   "_repeatCount": 1,
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.count('')
@@ -662,7 +686,8 @@ STEP: console.count('')
   "_column": 14,
   "_repeatCount": 1,
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.count('    ')
@@ -676,7 +701,8 @@ STEP: console.count('    ')
   "_column": 14,
   "_repeatCount": 1,
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.count(string)
@@ -690,7 +716,8 @@ STEP: console.count(string)
   "_column": 14,
   "_repeatCount": 1,
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.count(string)
@@ -704,7 +731,8 @@ STEP: console.count(string)
   "_column": 14,
   "_repeatCount": 1,
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.count(object)
@@ -718,7 +746,8 @@ STEP: console.count(object)
   "_column": 14,
   "_repeatCount": 1,
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.count(object)
@@ -732,7 +761,8 @@ STEP: console.count(object)
   "_column": 14,
   "_repeatCount": 1,
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.count(otherObject)
@@ -746,7 +776,8 @@ STEP: console.count(otherObject)
   "_column": 14,
   "_repeatCount": 1,
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.count(otherObject)
@@ -760,7 +791,8 @@ STEP: console.count(otherObject)
   "_column": 14,
   "_repeatCount": 1,
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.count(number)
@@ -774,7 +806,8 @@ STEP: console.count(number)
   "_column": 14,
   "_repeatCount": 1,
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 
 STEP: console.count(number)
@@ -788,6 +821,7 @@ STEP: console.count(number)
   "_column": 14,
   "_repeatCount": 1,
   "_stackTrace": "<filtered>",
-  "_request": null
+  "_request": null,
+  "_timestamp": null
 }
 

LayoutTests/inspector/console/console-screenshot.html

@@ -83,6 +83,10 @@
                 InspectorTest.expectEqual(message.type, WI.ConsoleMessage.MessageType.Image, "The added message should be an image.");
                 InspectorTest.expectNotEqual(message.messageText, "data:", "The image should not be empty.");
 
+                InspectorTest.assert(message.source === WI.ConsoleMessage.MessageSource.ConsoleAPI, "The added message should be from the console API.");
+                InspectorTest.assert(message.level === WI.ConsoleMessage.MessageLevel.Log, "The added message should be a log.");
+                InspectorTest.assert(message.timestamp, "The message should have a timestamp.");
+
                 try {
                     let image = new Image;
                     await new Promise((resolve, reject) => {