Web Inspector: provide a way to capture a screenshot of a node from within the page
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 15 Mar 2019 08:12:21 +0000 (08:12 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 15 Mar 2019 08:12:21 +0000 (08:12 +0000)
commit488138213f53d75510a7738ce351b308fef425f2
tree668c6ded3f6a6e69c072314e8ad7cba3ef60cce4
parent079d968dbcfc74cd929cede8553a51f5f747e1d0
Web Inspector: provide a way to capture a screenshot of a node from within the page
https://bugs.webkit.org/show_bug.cgi?id=194279
<rdar://problem/10731573>

Reviewed by Joseph Pecoraro.

Source/JavaScriptCore:

Add `console.screenshot` functionality, which displays a screenshot of a given object (if
able) within Web Inspector's Console tab. From there, it can be viewed and saved.

Currently, `console.screenshot` will
 - capture an image of a `Node` (if provided)
 - capture an image of the viewport if nothing is provided

* inspector/protocol/Console.json:
Add `Image` enum value to `ConsoleMessage` type.
* runtime/ConsoleTypes.h:
* inspector/ConsoleMessage.h:
* inspector/ConsoleMessage.cpp:
(Inspector::messageTypeValue):

* runtime/ConsoleClient.h:
* runtime/ConsoleObject.cpp:
(JSC::ConsoleObject::finishCreation):
(JSC::consoleProtoFuncScreenshot): Added.

* inspector/JSGlobalObjectConsoleClient.h:
* inspector/JSGlobalObjectConsoleClient.cpp:
(Inspector::JSGlobalObjectConsoleClient::screenshot): Added.

Source/WebCore:

Test: inspector/console/console-screenshot.html

Add `console.screenshot` functionality, which displays a screenshot of a given object (if
able) within Web Inspector's Console tab. From there, it can be viewed and saved.

Currently, `console.screenshot` will
 - capture an image of a `Node` (if provided)
 - capture an image of the viewport if nothing is provided

* page/PageConsoleClient.h:
* page/PageConsoleClient.cpp:
(WebCore::PageConsoleClient::addMessage):
(WebCore::PageConsoleClient::screenshot): Added.

* workers/WorkerConsoleClient.h:
* workers/WorkerConsoleClient.cpp:
(WebCore::WorkerConsoleClient::screenshot): Added.
* worklets/WorkletConsoleClient.h:
* worklets/WorkletConsoleClient.cpp:
(WebCore::WorkletConsoleClient::screenshot): Added.

* inspector/CommandLineAPIModuleSource.js:
(CommandLineAPIImpl.prototype.screenshot): Added.

* inspector/InspectorInstrumentation.h:

Source/WebInspectorUI:

Add `console.screenshot` functionality, which displays a screenshot of a given object (if
able) within Web Inspector's Console tab. From there, it can be viewed and saved.

Currently, `console.screenshot` will
 - capture an image of a `Node` (if provided)
 - capture an image of the viewport if nothing is provided

* UserInterface/Models/ConsoleMessage.js:
(WI.ConsoleMessage):
* UserInterface/Views/ConsoleCommandView.js:
(WI.ConsoleCommandView.prototype.render):
* UserInterface/Views/ConsoleMessageView.js:
(WI.ConsoleMessageView.prototype.render):
(WI.ConsoleMessageView.prototype.toClipboardString):
(WI.ConsoleMessageView.prototype._appendMessageTextAndArguments):
(WI.ConsoleMessageView.prototype._appendSavedResultIndex):
(WI.ConsoleMessageView.prototype._appendStackTrace):
(WI.ConsoleMessageView.prototype._makeExpandable):
(WI.ConsoleMessageView.prototype._handleContextMenu): Added.
* UserInterface/Views/ConsoleMessageView.css:
(.console-user-command.special-user-log > .console-message-body): Added.
(.console-message-body): Added.
(.console-message-body > span): Added.
(.console-message-body > span > :matches(.console-message-enclosed, .console-message-preview, .console-message-preview-divider)): Added.
(.console-message-body > .console-image): Added.
(.console-message-body > .show-grid): Added.
(.console-error-level .console-message-body): Added.
(.console-warning-level .console-message-body): Added.
(.console-log-level.console-image-container::before): Added.
(.console-user-command > .console-message-body): Added.
(.console-warning-level .console-message-body): Added.
(.console-error-level .console-message-body): Added.
(.console-user-command > .console-message-body): Added.
(.console-user-command.special-user-log > .console-message-text): Deleted.
(.console-message-text): Deleted.
(.console-message-text > span): Deleted.
(.console-message-text > span > :matches(.console-message-enclosed, .console-message-preview, .console-message-preview-divider)): Deleted.
(.console-error-level .console-message-text): Deleted.
(.console-warning-level .console-message-text): Deleted.
(.console-user-command > .console-message-text): Deleted.
(.console-warning-level .console-message-text): Deleted.
(.console-error-level .console-message-text): Deleted.
(.console-user-command > .console-message-text): Deleted.
* UserInterface/Views/LogContentView.css:
(.search-in-progress .console-item:not(.filtered-out-by-search).special-user-log .console-message-text .highlighted): Added.
(.search-in-progress .console-item:not(.filtered-out-by-search).special-user-log .console-message-body .highlighted): Deleted.
Renamed variables/classes to be more semantically correct when the content is an image.
 - `_messageTextElement` to `_messageBodyElement` (JS)
 - `.console-message-text` to `.console-message-body` (CSS)

* UserInterface/Controllers/JavaScriptLogViewController.js:
(WI.JavaScriptLogViewController.prototype.renderPendingMessages):

* UserInterface/Views/Main.css:
(:matches(img, canvas).show-grid):
(@media (prefers-color-scheme: dark) :matches(img, canvas).show-grid):

* UserInterface/Base/FileUtilities.js:
(WI.FileUtilities.screenshotString): Added.

* UserInterface/Models/NativeFunctionParameters.js:
* UserInterface/Controllers/JavaScriptRuntimeCompletionProvider.js:

* UserInterface/Images/ConsoleImage.svg: Copied from UserInterface/Images/Canvas.svg.
* Localizations/en.lproj/localizedStrings.js:

LayoutTests:

* js/console.html:
* js/console-expected.txt:
* inspector/console/console-screenshot.html: Added.
* inspector/console/console-screenshot-expected.txt: Added.
* http/tests/inspector/dom/cross-domain-inspected-node-access-expected.txt:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@242992 268f45cc-cd09-0410-ab3c-d52691b4dbfc
38 files changed:
LayoutTests/ChangeLog
LayoutTests/http/tests/inspector/dom/cross-domain-inspected-node-access-expected.txt
LayoutTests/inspector/console/console-screenshot-expected.txt [new file with mode: 0644]
LayoutTests/inspector/console/console-screenshot.html [new file with mode: 0644]
LayoutTests/js/console-expected.txt
LayoutTests/js/console.html
Source/JavaScriptCore/ChangeLog
Source/JavaScriptCore/inspector/ConsoleMessage.cpp
Source/JavaScriptCore/inspector/ConsoleMessage.h
Source/JavaScriptCore/inspector/JSGlobalObjectConsoleClient.cpp
Source/JavaScriptCore/inspector/JSGlobalObjectConsoleClient.h
Source/JavaScriptCore/inspector/protocol/Console.json
Source/JavaScriptCore/runtime/ConsoleClient.h
Source/JavaScriptCore/runtime/ConsoleObject.cpp
Source/JavaScriptCore/runtime/ConsoleTypes.h
Source/WebCore/ChangeLog
Source/WebCore/inspector/CommandLineAPIModuleSource.js
Source/WebCore/inspector/InspectorInstrumentation.h
Source/WebCore/page/PageConsoleClient.cpp
Source/WebCore/page/PageConsoleClient.h
Source/WebCore/workers/WorkerConsoleClient.cpp
Source/WebCore/workers/WorkerConsoleClient.h
Source/WebCore/worklets/WorkletConsoleClient.cpp
Source/WebCore/worklets/WorkletConsoleClient.h
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Base/FileUtilities.js
Source/WebInspectorUI/UserInterface/Controllers/JavaScriptLogViewController.js
Source/WebInspectorUI/UserInterface/Controllers/JavaScriptRuntimeCompletionProvider.js
Source/WebInspectorUI/UserInterface/Images/ConsoleImage.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Models/ConsoleMessage.js
Source/WebInspectorUI/UserInterface/Models/NativeFunctionParameters.js
Source/WebInspectorUI/UserInterface/Views/ConsoleCommandView.js
Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css
Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.js
Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js
Source/WebInspectorUI/UserInterface/Views/LogContentView.css
Source/WebInspectorUI/UserInterface/Views/Main.css