Skip to content

Commit 4ef84b2

Browse files
committed
Enable "Capture screenshot" command for React Native targets
Remove the `canDock` condition gate on the capture screenshot action so it is available for React Native targets. When the DeviceModeWrapper is not instantiated, capture the screenshot directly via the ScreenCaptureModel and trigger a download.
1 parent 571dc30 commit 4ef84b2

2 files changed

Lines changed: 25 additions & 2 deletions

File tree

front_end/panels/emulation/DeviceModeWrapper.ts

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,11 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
110110
handleAction(context: UI.Context.Context, actionId: string): boolean {
111111
switch (actionId) {
112112
case 'emulation.capture-screenshot':
113-
return DeviceModeWrapper.instance().captureScreenshot();
113+
if (deviceModeWrapperInstance) {
114+
return DeviceModeWrapper.instance().captureScreenshot();
115+
}
116+
void captureScreenshotDirect();
117+
return true;
114118

115119
case 'emulation.capture-node-screenshot': {
116120
const node = context.flavor(SDK.DOMModel.DOMNode);
@@ -164,3 +168,21 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
164168
return false;
165169
}
166170
}
171+
172+
async function captureScreenshotDirect(): Promise<void> {
173+
const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
174+
const screenCaptureModel = target?.model(SDK.ScreenCaptureModel.ScreenCaptureModel);
175+
if (!screenCaptureModel) {
176+
return;
177+
}
178+
const screenshot = await screenCaptureModel.captureScreenshot(
179+
'png' as Protocol.Page.CaptureScreenshotRequestFormat, 100,
180+
SDK.ScreenCaptureModel.ScreenshotMode.FROM_VIEWPORT);
181+
if (!screenshot) {
182+
return;
183+
}
184+
const link = document.createElement('a');
185+
link.download = 'screenshot.png';
186+
link.href = 'data:image/png;base64,' + screenshot;
187+
link.click();
188+
}

front_end/panels/emulation/emulation-meta.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,8 @@ UI.ActionRegistration.registerActionExtension({
103103
const Emulation = await loadEmulationModule();
104104
return new Emulation.DeviceModeWrapper.ActionDelegate();
105105
},
106-
condition: Root.Runtime.conditions.canDock,
106+
// [RN] Available without docking for React Native targets.
107+
// condition: Root.Runtime.conditions.canDock,
107108
title: i18nLazyString(UIStrings.captureScreenshot),
108109
});
109110

0 commit comments

Comments
 (0)