Skip to content
Permalink
Browse files
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
  • Loading branch information
dcrousso committed May 25, 2022
1 parent 9c74dc2 commit edec03c13009282d8b24b34eb39d89ea79c5d6f4
Showing 19 changed files with 175 additions and 88 deletions.
@@ -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
}

@@ -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) => {

0 comments on commit edec03c

Please sign in to comment.