@dimina-kit/devtools 0.3.2-dev.20260525152421 → 0.3.2-dev.20260610082053

package/dist/main/services/views/devtools-tabs.js

@@ -0,0 +1,95 @@
+/**
+ * Customize the embedded Chrome DevTools front-end's panel tab bar.
+ *
+ * The right-panel DevTools (a WebContents rendering `devtools://`, attached to the
+ * service-host via `setDevToolsWebContents` + `openDevTools`) shows ALL its panels
+ * by default. For the mini-app workflow only Elements / Console / Network are
+ * meaningful in the default tab bar — but we do NOT want to delete the rest: they
+ * stay reachable on demand via the command menu (Cmd+Shift+P → "Show Sources" …).
+ *
+ * ── How (registry, not DOM) ─────────────────────────────────────────────────
+ * The modern ESM DevTools front-end does NOT expose `UI.ViewManager` on
+ * `globalThis`, so the tab bar can't be driven through the view manager. Panels
+ * register themselves via `registerViewExtension({id, location:'panel', persistence})`
+ * into a module-level registry; the official mutators are `registerViewExtension`,
+ * `getRegisteredViewExtensions` and `maybeRemoveViewExtension`. We:
+ *   1. `import('./ui/legacy/legacy.js')` to reach those functions (the real export
+ *      path on Electron 41 / Chromium ~138, verified at runtime);
+ *   2. whitelist-patch `registerViewExtension` so any future non-kept panel comes
+ *      in with `persistence:'transient'` (hidden from the default bar);
+ *   3. for the already-registered non-kept panels, `maybeRemoveViewExtension(id)`
+ *      then re-register a copy with `persistence:'transient'`.
+ * Transient views are not shown in the default tab bar but stay in the command
+ * menu — and because this is DevTools' own panel path, there is NO `>>` overflow
+ * or `×` close-button residue (which a DOM `display:none` hack leaves behind).
+ *
+ * ── Locale infobar ──────────────────────────────────────────────────────────
+ * The "DevTools is now available in 中文" banner is suppressed via the official
+ * host preference `disable-locale-info-bar` (a GLOBAL setting that lives in host
+ * preferences, NOT page localStorage), set through `InspectorFrontendHost.setPreference`.
+ *
+ * ── Degradation ─────────────────────────────────────────────────────────────
+ * If the ESM module can't be resolved, a bounded DOM `display:none` fallback hides
+ * the non-kept tabs (by visible name) so the bar still looks right. Everything is
+ * wrapped in try/catch in the injected realm and silently no-ops on any failure.
+ */
+/**
+ * Canonical DevTools panel view ids kept in the DEFAULT tab bar (stable front-end
+ * ids, unchanged for many Chromium releases): `elements`, `console`, `network`.
+ */
+export const DEVTOOLS_KEPT_VIEW_IDS = ['elements', 'console', 'network'];
+/**
+ * Build the `executeJavaScript` source injected into the DevTools front-end
+ * WebContents. The kept ids + display names are carried as JSON data literals
+ * (never interpolated as bare code), same discipline as the other injectors.
+ */
+export function buildCustomizeTabsScript(keptIds = DEVTOOLS_KEPT_VIEW_IDS) {
+    // Kept panels are matched by view id (registry path) and by visible NAME (DOM
+    // fallback path); the DevTools UI may be EN or ZH, so include both.
+    const NAME_MAP = {
+        elements: ['Elements', '元素'], console: ['Console', '控制台'], network: ['Network', '网络'],
+    };
+    const keepNames = keptIds.flatMap((id) => NAME_MAP[id] ?? [id]);
+    const keepIdsJson = JSON.stringify(JSON.stringify([...keptIds]));
+    const keepNamesJson = JSON.stringify(JSON.stringify(keepNames));
+    return `(function(){try{
+    var KEEPID = new Set(JSON.parse(${keepIdsJson}));
+    var KEEPNAME = new Set(JSON.parse(${keepNamesJson}));
+    // (1) Locale infobar — official host-preference suppression (NOT localStorage).
+    try { var IFH=globalThis.InspectorFrontendHost; if(IFH&&typeof IFH.setPreference==='function'){ IFH.setPreference('disable-locale-info-bar','true'); } }catch(_){}
+    function deepCollect(sel,cap){ var out=[],seen=0,stack=[document]; while(stack.length&&seen<(cap||40000)){ var root=stack.pop(); try{var m=root.querySelectorAll?root.querySelectorAll(sel):[];for(var i=0;i<m.length;i++)out.push(m[i]);}catch(_){} try{var all=root.querySelectorAll?root.querySelectorAll('*'):[];for(var j=0;j<all.length;j++){seen++;if(all[j].shadowRoot)stack.push(all[j].shadowRoot);}}catch(_){} } return out; }
+    function txt(el){ return ((el&&el.textContent)||'').replace(/\\s+/g,' ').trim(); }
+    var PATHS=['./ui/legacy/legacy.js','./ui/legacy/ViewManager.js','devtools://devtools/bundled/ui/legacy/legacy.js'];
+    (async function(){
+      var VM=null,maybeRemove=null,origReg=null,reg=null,getReg=null;
+      for(var i=0;i<PATHS.length;i++){ try{ var m=await import(PATHS[i]); if(!m)continue; var v=m.ViewManager||m;
+        var mr=(v&&typeof v.maybeRemoveViewExtension==='function')?v.maybeRemoveViewExtension.bind(v):(typeof m.maybeRemoveViewExtension==='function'?m.maybeRemoveViewExtension:null);
+        if(mr){ VM=v;maybeRemove=mr;
+          origReg=(v&&typeof v.registerViewExtension==='function')?v.registerViewExtension:m.registerViewExtension; reg=origReg;
+          getReg=(v&&typeof v.getRegisteredViewExtensions==='function')?v.getRegisteredViewExtensions.bind(v):(typeof m.getRegisteredViewExtensions==='function'?m.getRegisteredViewExtensions:null);
+          break; } }catch(_){} }
+      if(maybeRemove){
+        // (2) future non-kept panels register as transient
+        try{ if(origReg&&VM){ VM.registerViewExtension=function(r){ try{ if(r&&String(r.location)==='panel'&&!KEEPID.has(r.id)){ r.persistence='transient'; } }catch(_){} return origReg.apply(this,arguments); }; reg=VM.registerViewExtension; } }catch(_){}
+        // (3) already-registered non-kept panels -> remove + re-register transient
+        var exts=[]; try{ if(getReg) exts=getReg()||[]; }catch(_){}
+        var handled=false;
+        for(var e=0;e<exts.length;e++){ try{ var ex=exts[e]; var eid=ex&&ex.id; if(!eid||KEEPID.has(eid)) continue; if(String(ex.location)!=='panel') continue;
+          maybeRemove(eid);
+          var nr={}; try{ nr=Object.assign({},ex); }catch(_){ for(var k in ex){ try{nr[k]=ex[k];}catch(__){} } }
+          nr.persistence='transient';
+          try{ reg(nr); }catch(_){ try{ origReg(nr); }catch(__){} }
+          handled=true;
+        }catch(_){} }
+        // fallback: registrations not enumerable -> at least clear the bar by id
+        if(!handled){ var FALL=['timeline','resources','heap-profiler','sources','security','lighthouse','chrome-recorder','coverage','linear-memory-inspector','sensors','rendering','animations','autofill-view','medias','issues-pane']; for(var fr=0;fr<FALL.length;fr++){ try{ if(!KEEPID.has(FALL[fr])) maybeRemove(FALL[fr]); }catch(_){} } }
+      } else { domFallback(); }
+    })();
+    // DOM fallback: only if the ESM module couldn't be resolved at all.
+    function domFallback(){ var cachedBar=null;
+      function findBar(){ if(cachedBar&&cachedBar.isConnected)return cachedBar; cachedBar=null; var tabs=deepCollect('[role="tab"]'); var a=null; for(var i=0;i<tabs.length;i++){if(KEEPNAME.has(txt(tabs[i]))){a=tabs[i];break;}} if(!a)return null; var p=a.parentElement; while(p){try{if(p.querySelectorAll('[role="tab"]').length>1){cachedBar=p;return p;}}catch(_){} p=p.parentElement;} cachedBar=a.parentElement; return cachedBar; }
+      function apply(){ try{ var bar=findBar(); if(bar){ var bts=bar.querySelectorAll('[role="tab"]'); for(var b=0;b<bts.length;b++){var bt=bts[b]; if(KEEPNAME.has(txt(bt)))continue; try{if(bt.style)bt.style.display='none';}catch(_){}} try{var more=bar.querySelector('[aria-label*="More tabs"],.tabbed-pane-header-tabs-drop-down-container'); if(more&&more.style)more.style.display='none';}catch(_){} } }catch(_){} }
+      var tr=0,t=setInterval(function(){tr++;try{apply();}catch(_){}if(tr>120)clearInterval(t);},60); try{apply();}catch(_){} }
+  }catch(_){}})()`;
+}
+//# sourceMappingURL=devtools-tabs.js.map

package/dist/main/services/views/view-manager.d.ts

@@ -1,4 +1,5 @@
 import type { WebContents } from 'electron';
+import type { NativeDeviceInfo } from '../../../shared/ipc-channels.js';
 import { type WorkbenchContext } from '../workbench-context.js';
 /**
  * Context surface used by the ViewManager. We only need a small slice of the
@@ -7,8 +8,41 @@ import { type WorkbenchContext } from '../workbench-context.js';
 export interface ViewManagerContext {
     windows: WorkbenchContext['windows'];
     rendererDir: string;
+    /**
+     * Per-webContents connection registry (foundation.md §4). The native-host
+     * simulator WebContentsView is acquired here so the registry tracks that
+     * trusted webContents and tears its per-wc resources (the custom-api bridge
+     * `ipcMain.on`) down deterministically on destroy — see P1 DoD #3. Required:
+     * `createWorkbenchContext` always supplies it.
+     */
+    connections: WorkbenchContext['connections'];
+    /**
+     * Absolute path to the simulator preload bundle. Only consumed by the
+     * native-host simulator WebContentsView (`attachNativeSimulator`); the
+     * default `<webview>` path gets its preload from the session-registered
+     * frame preload instead. Optional so partial test contexts compile.
+     */
+    preloadPath?: string;
     panels: string[];
     notify: WorkbenchContext['notify'];
+    bridge?: WorkbenchContext['bridge'];
+    /**
+     * Native-host network forwarder. `attachNativeSimulator` hands it the freshly
+     * created simulator WebContentsView (`attachSimulator`) so it can attach the
+     * CDP debugger, and the DevTools front-end host wc (`setDevtoolsHost`) so it can
+     * inject that WCV's Network.* events into the native Network tab (service-host
+     * console line is the fallback). Optional so partial test contexts compile.
+     */
+    networkForward?: WorkbenchContext['networkForward'];
+    /**
+     * Per-context registry of host-registered simulator custom APIs. The
+     * native-host simulator is a top-level WebContentsView with no embedder
+     * renderer, so `attachNativeSimulator` dispatches the simulator-side
+     * `__diminaCustomApis` bridge straight to this registry (the default
+     * `<webview>` path proxies through the trusted main renderer instead).
+     * Optional so partial test contexts compile.
+     */
+    simulatorApis?: WorkbenchContext['simulatorApis'];
     /**
      * Header bar height in px, used to position overlay views below the header.
      * Optional here so partial test contexts compile; `createWorkbenchContext`
@@ -20,13 +54,14 @@ export interface ViewManagerContext {
  * Unified lifecycle manager for Electron WebContentsView overlays.
  *
  * Owns creation / attachment / detachment / positioning / destruction of
- * every overlay view hung off the main window's contentView (simulator,
- * settings, popover). All `new WebContentsView`, `addChildView`,
+ * every overlay view hung off the main window's contentView (simulator
+ * DevTools, settings, popover). All `new WebContentsView`, `addChildView`,
  * `removeChildView`, `webContents.destroy()` and overlay `setBounds` calls
  * should live here — IPC handlers just call into the manager.
  *
- * The main window's own renderer (added in `windows/main-window/create.ts`)
- * is the main content root and is not an overlay, so it is not managed here.
+ * The code editor is NOT an overlay: it renders as an in-renderer
+ * `<MonacoEditor/>` React component inside the main window. The main
+ * window's own renderer is the content root and is not managed here.
  */
 export interface ViewManager {
     /**
@@ -35,6 +70,19 @@ export interface ViewManager {
      * tab; otherwise the view is created but not added yet).
      */
     attachSimulator(simWcId: number, simWidth: number): void;
+    /**
+     * NATIVE-HOST ONLY. Create the simulator itself as a top-level
+     * WebContentsView (not a renderer `<webview>` guest) loading `simulatorUrl`,
+     * position it in the simulator panel region, and treat its webContents as
+     * THE simulator webContents (so `getSimulatorWebContents` resolves it and the
+     * spawn/SIMULATOR_EVENTS pipeline flows through it). This is required because
+     * Electron force-disables the `<webview>` tag inside a webview guest, so the
+     * default `<webview>`-in-`<webview>` topology can never host DeviceShell's
+     * per-page render-host `<webview>`s. A top-level WebContentsView's webContents
+     * is NOT a guest and CAN host them. Then wires the DevTools/console view on
+     * top of it via `attachSimulator`. No-op (logs) when `preloadPath` is unset.
+     */
+    attachNativeSimulator(simulatorUrl: string, simWidth: number): void;
     /**
      * Destroy and null out the simulator view (e.g. on simulator detach).
      * Also destroys the cached settings view and hides the popover —
@@ -74,10 +122,100 @@ export interface ViewManager {
     getSettingsWebContentsId(): number | null;
     /** Return the webContents ID of the popover overlay if alive, else null. */
     getPopoverWebContentsId(): number | null;
+    /**
+     * Return the webContents ID of the host-toolbar overlay if alive, else null.
+     * The host-toolbar WCV is the one overlay whose OWN renderer drives an IPC
+     * channel back to main (the reverse size-advertiser), so the sender policy
+     * must trust its id — see `createWorkbenchSenderPolicy`.
+     */
+    getHostToolbarWebContentsId(): number | null;
+    /**
+     * NATIVE-HOST ONLY. Position the simulator content WebContentsView over the
+     * renderer-measured simulator panel REGION rect (the flex:1 placeholder slot,
+     * CSS px from the main window content top-left, which maps 1:1 to overlay
+     * setBounds DIP) and apply the device zoom. The WCV fills the region as a
+     * plain rectangle; DeviceShell draws + scrolls the phone inside. No-op in the
+     * default `<webview>` path (`nativeSimulatorView` is null). See
+     * `computeNativeSimulatorViewParams`.
+     */
+    setNativeSimulatorViewBounds(params: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        zoom: number;
+    }): void;
+    /**
+     * NATIVE-HOST ONLY. Re-push the selected device's CSS `env(safe-area-inset-*)`
+     * override to every attached render-host guest (on device change). New guests
+     * pick it up automatically when they attach (`did-attach-webview`).
+     */
+    reapplySafeArea(device: NativeDeviceInfo | null): void;
     /** Update lastSimWidth; reposition simulator + settings if they are added. */
     resize(simWidth: number): void;
     /** Show or hide the simulator overlay based on visibility flag. */
     setVisible(visible: boolean, simWidth: number): void;
+    /**
+     * Apply a renderer-measured rectangle to the simulator's Chromium
+     * DevTools overlay view. `{ width: 0, height: 0 }` is treated as "hide" —
+     * the view is removed from the contentView but its WebContents is kept
+     * alive so re-showing it doesn't re-pay the DevTools bootstrap.
+     */
+    setSimulatorDevtoolsBounds(bounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }): void;
+    /**
+     * Apply a renderer-measured rectangle to the host-controllable toolbar
+     * WebContentsView (the strip above the devtools header). Forward anchor,
+     * mirroring `setSimulatorDevtoolsBounds`. `{ width: 0, height: 0 }` is
+     * treated as "hide" — the view is removed from the contentView but its
+     * WebContents (and the host's loaded content) stays alive. Lazily creates
+     * the view on the first non-empty rect.
+     */
+    setHostToolbarBounds(bounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }): void;
+    /**
+     * Reverse size-advertiser sink: the toolbar WCV's own renderer advertises
+     * its intrinsic content height (block-axis extent); we store it and push it
+     * to the main-window renderer so the placeholder div resizes (closing the
+     * dynamic-height loop).
+     */
+    setHostToolbarHeight(extent: number): void;
+    /**
+     * Host-facing control surface for the toolbar WebContentsView. The downstream
+     * host loads its own content into it (`loadURL` / `loadFile`) and fully drives
+     * it. Lazily creates the underlying view on the first load call.
+     */
+    readonly hostToolbar: HostToolbarControl;
+}
+/**
+ * The control object the downstream host uses to own the toolbar
+ * WebContentsView. Lazily backed by the view-manager's `hostToolbarView`.
+ */
+export interface HostToolbarControl {
+    /** Load a URL into the toolbar view (lazy-creates the view). */
+    loadURL(url: string): Promise<void>;
+    /** Load a local file into the toolbar view (lazy-creates the view). */
+    loadFile(path: string): Promise<void>;
+    /** The toolbar view's live WebContents, or null if not yet created/destroyed. */
+    readonly webContents: WebContents | null;
+    /** Remove the toolbar view from the contentView and reset it (kept alive). */
+    hide(): void;
+    /**
+     * Override the preload used when the toolbar view is first created. The
+     * host-shell (`launch(config)`) passes the host-controlled
+     * `toolbar.preloadPath` here; the host owns the bridge (it calls
+     * `exposeWorkbenchBridge()` itself). Must be set before the first
+     * `loadURL`/`loadFile`; `null` restores the built-in size-advertiser preload.
+     */
+    setPreloadPath(path: string | null): void;
 }
 /**
  * Build a ViewManager bound to the given context. The returned object is the