Enable "Capture screenshot" command for React Native targets

front_end/panels/emulation/DeviceModeWrapper.ts

@@ -110,7 +110,11 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(context: UI.Context.Context, actionId: string): boolean {
     switch (actionId) {
       case 'emulation.capture-screenshot':
-        return DeviceModeWrapper.instance().captureScreenshot();
+        if (deviceModeWrapperInstance) {
+          return DeviceModeWrapper.instance().captureScreenshot();
+        }
+        void captureScreenshotDirect();
+        return true;
 
       case 'emulation.capture-node-screenshot': {
         const node = context.flavor(SDK.DOMModel.DOMNode);
@@ -164,3 +168,21 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     return false;
   }
 }
+
+async function captureScreenshotDirect(): Promise<void> {
+  const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+  const screenCaptureModel = target?.model(SDK.ScreenCaptureModel.ScreenCaptureModel);
+  if (!screenCaptureModel) {
+    return;
+  }
+  const screenshot = await screenCaptureModel.captureScreenshot(
+      'png' as Protocol.Page.CaptureScreenshotRequestFormat, 100,
+      SDK.ScreenCaptureModel.ScreenshotMode.FROM_VIEWPORT);
+  if (!screenshot) {
+    return;
+  }
+  const link = document.createElement('a');
+  link.download = 'screenshot.png';
+  link.href = 'data:image/png;base64,' + screenshot;
+  link.click();
+}

front_end/panels/emulation/emulation-meta.ts

@@ -103,7 +103,8 @@ UI.ActionRegistration.registerActionExtension({
     const Emulation = await loadEmulationModule();
     return new Emulation.DeviceModeWrapper.ActionDelegate();
   },
-  condition: Root.Runtime.conditions.canDock,
+  // [RN] Available without docking for React Native targets.
+  // condition: Root.Runtime.conditions.canDock,
   title: i18nLazyString(UIStrings.captureScreenshot),
 });