@dimina-kit/devtools 0.4.0-dev.20260624040247 → 0.4.0-dev.20260624084417

package/dist/main/index.bundle.js

@@ -1138,10 +1138,15 @@ function projectAwareResourcePath(resourceUrl, context) {
   const projectRoot = normalizeSlashPath(context.projectRoot).replace(/\/$/, "");
   const raw = resourceUrl.trim();
   if (!raw) return null;
+  const excludeBuildChunk = (rel) => {
+    if (!rel) return rel;
+    const base2 = rel.split("/").pop();
+    return base2 === "common.js" || base2 === "vendors.js" || base2 === "runtime.js" || base2 === "taro.js" || base2 === "babelHelpers.js" ? null : rel;
+  };
   const normalizedRaw = normalizeSlashPath(raw);
   if (projectRoot && (normalizedRaw === projectRoot || normalizedRaw.startsWith(`${projectRoot}/`))) {
     const relative = normalizedRaw.slice(projectRoot.length).replace(/^\/+/, "");
-    return safeRelativePath(relative.split("/").filter(Boolean));
+    return excludeBuildChunk(safeRelativePath(relative.split("/").filter(Boolean)));
   }
   if (/^\/(?:Volumes|Users|home|private|tmp|var|opt|Applications)\//.test(normalizedRaw)) {
     return null;
@@ -1156,9 +1161,9 @@ function projectAwareResourcePath(resourceUrl, context) {
   if (resource.protocol === "file:") {
     const filePath = normalizeSlashPath(resource.pathname);
     if (!projectRoot || filePath !== projectRoot && !filePath.startsWith(`${projectRoot}/`)) return null;
-    return safeRelativePath(
+    return excludeBuildChunk(safeRelativePath(
       filePath.slice(projectRoot.length).replace(/^\/+/, "").split("/").filter(Boolean)
-    );
+    ));
   }
   if (resource.protocol !== "http:" && resource.protocol !== "https:") return null;
   if (resource.origin !== base.origin) return null;
@@ -1167,7 +1172,7 @@ function projectAwareResourcePath(resourceUrl, context) {
     segments = segments.slice(1);
     if (context.outputRoot && segments[0] === context.outputRoot) segments = segments.slice(1);
   }
-  return safeRelativePath(segments);
+  return excludeBuildChunk(safeRelativePath(segments));
 }
 function projectSourceContextFromServiceHostUrl(serviceHostUrl, activeProjectRoot) {
   let url;
@@ -1212,6 +1217,7 @@ function buildDevtoolsProjectSourceLinksScript(context) {
         const safeRelativePath = ${safeRelativePath.toString()}
         const observedRoots = new Set()
         const observers = []
+        const clickBindings = []
         let timer = null
         const state = {
           dispose() {
@@ -1222,11 +1228,106 @@ function buildDevtoolsProjectSourceLinksScript(context) {
             for (const observer of observers.splice(0)) {
               try { observer.disconnect() } catch (_) {}
             }
+            for (const binding of clickBindings.splice(0)) {
+              try { binding.target.removeEventListener('click', binding.fn, true) } catch (_) {}
+            }
             observedRoots.clear()
           },
         }
         globalThis[stateKey] = state
 
+        // The InspectorFrontendHost that owns openInNewTab. Across DevTools
+        // versions it lives on the top-level \`InspectorFrontendHost\` global, the
+        // legacy \`Host.InspectorFrontendHost\`, or \`DevToolsHost\`; resolve at call
+        // time so a late-bootstrapped host is still found.
+        function resolveOpenInNewTabHost() {
+          const candidates = [
+            globalThis.InspectorFrontendHost,
+            globalThis.Host && globalThis.Host.InspectorFrontendHost,
+            globalThis.DevToolsHost,
+          ]
+          for (const host of candidates) {
+            if (host && typeof host.openInNewTab === 'function') return host
+          }
+          return null
+        }
+
+        // Encode (url, 0-based line, 0-based column) as the sentinel the main
+        // process decodes from \`devtools-open-url\` and routes to Monaco.
+        function openInEditor(url, line, column) {
+          const host = resolveOpenInNewTabHost()
+          if (!host) return false
+          const p = new URLSearchParams()
+          p.set('u', String(url))
+          if (typeof line === 'number' && isFinite(line)) p.set('l', String(line))
+          if (typeof column === 'number' && isFinite(column)) p.set('c', String(column))
+          try { host.openInNewTab(${scheme} + ':?' + p.toString()) } catch (_) { return false }
+          return true
+        }
+
+        // Resolve a clicked link element to a project source location. Returns
+        // the FULL resource url (the main process re-maps it against the active
+        // project) plus its display line/column when present.
+        function projectLocationForLink(link) {
+          if (!link) return null
+          const candidates = [
+            link.getAttribute && link.getAttribute('data-url'),
+            link.getAttribute && link.getAttribute('href'),
+            link.getAttribute && link.getAttribute('title'),
+          ]
+          for (const candidate of candidates) {
+            if (!candidate) continue
+            const location = splitLocation(candidate)
+            if (!diminaProjectSourcePath(location.url, cfg)) continue
+            const suffix = location.suffix
+              || ((String(link.textContent || '').match(/(:\\d+(?::\\d+)?)$/) || [])[1] || '')
+            return { url: location.url, suffix }
+          }
+          return null
+        }
+
+        // DevTools shows 1-based line:column in link text; the main process
+        // contract expects 0-based (it re-adds 1). Convert here.
+        function parseSuffix(suffix) {
+          const m = String(suffix || '').match(/^:(\\d+)(?::(\\d+))?$/)
+          if (!m) return { line: undefined, column: undefined }
+          const line = Math.max(0, parseInt(m[1], 10) - 1)
+          const column = m[2] != null ? Math.max(0, parseInt(m[2], 10) - 1) : undefined
+          return { line, column }
+        }
+
+        // Capture-phase click handler: route a project-source link click to
+        // Monaco instead of the DevTools Sources panel. Plain primary clicks only
+        // \u2014 modified clicks (cmd/ctrl/shift/alt, middle button) fall through to
+        // DevTools so its own "open in new tab" / multi-select still work.
+        function onLinkClick(event) {
+          if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+          const path = typeof event.composedPath === 'function' ? event.composedPath() : []
+          let link = null
+          for (const node of path) {
+            if (node && node.nodeType === 1 && node.classList && node.classList.contains('devtools-link')) {
+              link = node
+              break
+            }
+          }
+          if (!link) return
+          const location = projectLocationForLink(link)
+          if (!location) return
+          const { line, column } = parseSuffix(location.suffix)
+          if (!openInEditor(location.url, line, column)) return
+          event.preventDefault()
+          event.stopImmediatePropagation()
+        }
+
+        function bindClicks(target) {
+          if (!target || !target.addEventListener) return
+          for (const binding of clickBindings) {
+            if (binding.target === target) return
+          }
+          target.addEventListener('click', onLinkClick, true)
+          clickBindings.push({ target, fn: onLinkClick })
+        }
+
         function splitLocation(value) {
           const raw = String(value || '')
           const match = raw.match(/^(.*?)(?::(\\d+))(?::(\\d+))?$/)
@@ -1257,6 +1358,7 @@ function buildDevtoolsProjectSourceLinksScript(context) {
         function observeRoot(root) {
           if (!root || !root.querySelectorAll || observedRoots.has(root)) return
           observedRoots.add(root)
+          bindClicks(root)
 
           const observer = new MutationObserver((records) => {
             for (const record of records) {
@@ -1291,23 +1393,25 @@ function buildDevtoolsProjectSourceLinksScript(context) {
 
         observeRoot(document)
 
+        // Fallback for older DevTools fronts that still expose the
+        // setOpenResourceHandler hook. On current Chromium the method is gone,
+        // so this poll simply times out and the capture-phase click interceptor
+        // is the only live path. When the hook IS present the interceptor still
+        // wins (it runs in capture and stops propagation), so the two never
+        // double-open the same click.
         let tries = 0
         timer = setInterval(() => {
           tries++
           try {
-            const Host = globalThis.Host
-            const host = Host && Host.InspectorFrontendHost
-            if (host && typeof host.setOpenResourceHandler === 'function'
-                     && typeof host.openInNewTab === 'function') {
+            const host = resolveOpenInNewTabHost()
+            if (host && typeof host.setOpenResourceHandler === 'function') {
               host.setOpenResourceHandler((url, lineNumber, columnNumber) => {
-                try {
-                  if (!diminaProjectSourcePath(String(url), cfg)) return
-                  const p = new URLSearchParams()
-                  p.set('u', String(url))
-                  if (typeof lineNumber === 'number') p.set('l', String(lineNumber))
-                  if (typeof columnNumber === 'number') p.set('c', String(columnNumber))
-                  host.openInNewTab(${scheme} + ':?' + p.toString())
-                } catch (_) {}
+                if (!diminaProjectSourcePath(String(url), cfg)) return
+                openInEditor(
+                  String(url),
+                  typeof lineNumber === 'number' ? lineNumber : undefined,
+                  typeof columnNumber === 'number' ? columnNumber : undefined,
+                )
               })
               clearInterval(timer)
               timer = null
@@ -1373,19 +1477,25 @@ function createSafeAreaController(options = {}) {
 }
 
 // src/main/services/views/devtools-tabs.ts
-var DEVTOOLS_KEPT_VIEW_IDS = ["elements", "console", "network"];
+var DEVTOOLS_KEPT_VIEW_IDS = ["elements", "console", "network", "sources"];
 function buildCustomizeTabsScript(keptIds = DEVTOOLS_KEPT_VIEW_IDS) {
   const NAME_MAP = {
     elements: ["Elements", "\u5143\u7D20"],
     console: ["Console", "\u63A7\u5236\u53F0"],
-    network: ["Network", "\u7F51\u7EDC"]
+    network: ["Network", "\u7F51\u7EDC"],
+    sources: ["Sources", "\u6765\u6E90", "\u6E90\u4EE3\u7801"]
   };
   const keepNames = keptIds.flatMap((id) => NAME_MAP[id] ?? [id]);
   const keepIdsJson = JSON.stringify(JSON.stringify([...keptIds]));
   const keepNamesJson = JSON.stringify(JSON.stringify(keepNames));
+  const srcNamesJson = JSON.stringify(JSON.stringify(NAME_MAP.sources));
+  const netNamesJson = JSON.stringify(JSON.stringify(NAME_MAP.network));
   return `(function(){try{
     var KEEPID = new Set(JSON.parse(${keepIdsJson}));
     var KEEPNAME = new Set(JSON.parse(${keepNamesJson}));
+    var SRCNAME = new Set(JSON.parse(${srcNamesJson}));
+    var NETNAME = new Set(JSON.parse(${netNamesJson}));
+    var WANT_SOURCES_LAST = KEEPID.has('sources');
     // (1) Locale infobar \u2014 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; }
@@ -1413,9 +1523,18 @@ function buildCustomizeTabsScript(keptIds = DEVTOOLS_KEPT_VIEW_IDS) {
           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(_){} } }
+        if(!handled){ var FALL=['timeline','resources','heap-profiler','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(); }
     })();
+    // Keep Sources LAST in the bar (after Network). Default DevTools order puts
+    // Sources between Console and Network; nudge it to just after Network. Runs in
+    // BOTH paths (registry removal leaves the kept tabs in default order). Self-
+    // stable: once Sources follows Network the condition no longer holds.
+    if(WANT_SOURCES_LAST){ var ro=0,rt=setInterval(function(){ ro++; try{
+      var tabs=deepCollect('[role="tab"]'),src=null,net=null;
+      for(var i=0;i<tabs.length;i++){ var n=txt(tabs[i]); if(SRCNAME.has(n))src=tabs[i]; else if(NETNAME.has(n))net=tabs[i]; }
+      if(src&&net&&src.parentElement&&src.parentElement===net.parentElement&&(src.compareDocumentPosition(net)&Node.DOCUMENT_POSITION_FOLLOWING)){ net.parentElement.insertBefore(src,net.nextSibling); }
+    }catch(_){} if(ro>120)clearInterval(rt); },60); }
     // 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; }
@@ -1670,10 +1789,19 @@ function installElementsForward(deps) {
   function primeGuest(wc) {
     if (!ensureGuestDebugger(wc)) return;
     wireGuestEvents(wc);
-    for (const domain of ["DOM.enable", "CSS.enable", "Overlay.enable"]) {
-      wc.debugger.sendCommand(domain).catch(() => {
-      });
+    void enableGuestDomains(wc);
+  }
+  async function enableGuestDomains(wc) {
+    wc.debugger.sendCommand("CSS.enable").catch(() => {
+    });
+    try {
+      await wc.debugger.sendCommand("DOM.enable");
+    } catch {
+      return;
     }
+    if (disposed || !isActiveWcId(wc.id)) return;
+    wc.debugger.sendCommand("Overlay.enable").catch(() => {
+    });
   }
   function routeCommand(cmd) {
     const wc = activeRenderWc();
@@ -1693,6 +1821,10 @@ function installElementsForward(deps) {
         replyError(cmd, "stale render generation");
         return;
       }
+      if (cmd.method === "Overlay.disable" && isActiveWcId(cmdWcId)) {
+        wc.debugger.sendCommand("Overlay.enable").catch(() => {
+        });
+      }
       replyResult(cmd, result);
     }).catch((err) => {
       if (disposed) return;
@@ -8489,10 +8621,35 @@ function setupSimulatorCurrentPage(host, options) {
 import { readFileSync } from "node:fs";
 import path17 from "node:path";
 var DEFAULT_SOURCE_PATH = "dist/render-host/render-inspect.js";
+var HIGHLIGHT_CONFIG = {
+  showInfo: true,
+  showRulers: false,
+  showExtensionLines: false,
+  contentColor: { r: 111, g: 168, b: 220, a: 0.66 },
+  paddingColor: { r: 147, g: 196, b: 125, a: 0.55 },
+  borderColor: { r: 255, g: 229, b: 153, a: 0.66 },
+  marginColor: { r: 246, g: 178, b: 107, a: 0.66 }
+};
+var HOVER_OBJECT_GROUP = "render-inspect-hover";
+var ENABLE_HANDSHAKE_TIMEOUT_MS = 500;
+function withTimeout(p, ms) {
+  return new Promise((resolve) => {
+    const timer = setTimeout(resolve, ms);
+    p.then(() => {
+      clearTimeout(timer);
+      resolve();
+    }, () => {
+      clearTimeout(timer);
+      resolve();
+    });
+  });
+}
 function createRenderInspector(options = {}) {
   const loadSource = options.loadSource ?? (() => readFileSync(path17.join(devtoolsPackageRoot, DEFAULT_SOURCE_PATH), "utf8"));
   let cachedSource = null;
   const injected = /* @__PURE__ */ new Set();
+  const selfAttached = /* @__PURE__ */ new Set();
+  const enablePromises = /* @__PURE__ */ new Map();
   function source() {
     if (cachedSource === null) cachedSource = loadSource();
     return cachedSource;
@@ -8514,10 +8671,14 @@ function createRenderInspector(options = {}) {
       return false;
     }
     injected.add(wc.id);
+    const forget = () => {
+      injected.delete(wc.id);
+      enablePromises.delete(wc.id);
+    };
     if (options.connections) {
-      options.connections.acquire(wc).own(() => injected.delete(wc.id));
+      options.connections.acquire(wc).own(forget);
     } else {
-      wc.once("destroyed", () => injected.delete(wc.id));
+      wc.once("destroyed", forget);
     }
     return true;
   }
@@ -8536,22 +8697,97 @@ function createRenderInspector(options = {}) {
   async function highlight(wc, sid) {
     if (wc.isDestroyed()) return null;
     if (!await ensureInjected(wc)) return null;
+    let inspection;
     try {
       const result = await wc.executeJavaScript(
         `window.__diminaRenderInspect ? window.__diminaRenderInspect.highlightElement(${JSON.stringify(sid)}) : null`
       );
-      return result ?? null;
+      inspection = result ?? null;
     } catch {
       return null;
     }
+    if (!inspection) return null;
+    await drawNativeHighlight(wc, sid).catch(() => {
+    });
+    return inspection;
+  }
+  async function drawNativeHighlight(wc, sid) {
+    if (wc.isDestroyed()) return;
+    if (!ensureGuestDebugger(wc)) return;
+    await withTimeout(ensureDomainsEnabled(wc), ENABLE_HANDSHAKE_TIMEOUT_MS);
+    if (wc.isDestroyed()) return;
+    const expression = `window.__diminaRenderInspect && window.__diminaRenderInspect.elementFor(${JSON.stringify(sid)})`;
+    try {
+      const evaluated = await wc.debugger.sendCommand("Runtime.evaluate", {
+        expression,
+        returnByValue: false,
+        objectGroup: HOVER_OBJECT_GROUP
+      });
+      const objectId = evaluated?.result?.objectId;
+      if (!objectId) return;
+      await wc.debugger.sendCommand("Overlay.highlightNode", {
+        objectId,
+        highlightConfig: HIGHLIGHT_CONFIG
+      });
+    } finally {
+      wc.debugger.sendCommand("Runtime.releaseObjectGroup", { objectGroup: HOVER_OBJECT_GROUP }).catch(() => {
+      });
+    }
+  }
+  function ensureGuestDebugger(wc) {
+    try {
+      if (wc.debugger.isAttached()) return true;
+    } catch {
+      return false;
+    }
+    try {
+      wc.debugger.attach("1.3");
+      trackSelfAttached(wc);
+      return true;
+    } catch {
+      try {
+        return wc.debugger.isAttached();
+      } catch {
+        return false;
+      }
+    }
+  }
+  function trackSelfAttached(wc) {
+    if (selfAttached.has(wc.id)) return;
+    selfAttached.add(wc.id);
+    const detach = () => {
+      selfAttached.delete(wc.id);
+      try {
+        if (!wc.isDestroyed() && wc.debugger.isAttached()) wc.debugger.detach();
+      } catch {
+      }
+    };
+    if (options.connections) options.connections.acquire(wc).own(detach);
+    else {
+      try {
+        wc.once("destroyed", () => selfAttached.delete(wc.id));
+      } catch {
+      }
+    }
+  }
+  function ensureDomainsEnabled(wc) {
+    const cached = enablePromises.get(wc.id);
+    if (cached) return cached;
+    wc.debugger.sendCommand("CSS.enable").catch(() => {
+    });
+    const handshake = wc.debugger.sendCommand("DOM.enable").then(() => {
+      if (wc.isDestroyed()) return;
+      return wc.debugger.sendCommand("Overlay.enable");
+    }).then(() => void 0).catch(() => {
+      enablePromises.delete(wc.id);
+    });
+    enablePromises.set(wc.id, handshake);
+    return handshake;
   }
   async function unhighlight(wc) {
     if (wc.isDestroyed()) return;
-    if (!await ensureInjected(wc)) return;
     try {
-      await wc.executeJavaScript(
-        "window.__diminaRenderInspect && window.__diminaRenderInspect.unhighlightElement && window.__diminaRenderInspect.unhighlightElement()"
-      );
+      await wc.debugger.sendCommand("Overlay.hideHighlight");
     } catch {
     }
   }

package/dist/main/services/elements-forward/index.js

@@ -430,14 +430,40 @@ export function installElementsForward(deps) {
             catch { /* gone */ }
         });
     }
-    /** enable DOM/CSS/Overlay + wire events on a guest. Best-effort. */
+    /**
+     * enable DOM/CSS/Overlay + wire events on a guest. Best-effort (never throws).
+     *
+     * `Overlay.enable` is sent ONLY AFTER `DOM.enable` has resolved: Chromium rejects
+     * `Overlay.enable` with "DOM should be enabled first" when it arrives before the
+     * DOM domain is enabled, and a silently-dropped rejection leaves Overlay disabled
+     * so every later `Overlay.highlightNode` fails with "Overlay must be enabled" and
+     * the Elements-panel hover highlight never paints. Awaiting DOM.enable first
+     * guarantees the correct enable order. CSS.enable has no such dependency and is
+     * fire-and-forget alongside.
+     */
     function primeGuest(wc) {
         if (!ensureGuestDebugger(wc))
             return;
         wireGuestEvents(wc);
-        for (const domain of ['DOM.enable', 'CSS.enable', 'Overlay.enable']) {
-            wc.debugger.sendCommand(domain).catch(() => { });
+        void enableGuestDomains(wc);
+    }
+    /** Enable the render domains in dependency order. Resolves; never rejects. */
+    async function enableGuestDomains(wc) {
+        wc.debugger.sendCommand('CSS.enable').catch(() => { });
+        try {
+            await wc.debugger.sendCommand('DOM.enable');
         }
+        catch {
+            // Guest mid-destroy or DOM domain unavailable; Overlay.enable would only
+            // re-reject, so stop here rather than firing it out of order.
+            return;
+        }
+        // DOM.enable can settle after the guest was destroyed or the active page
+        // switched away (priming always targets the active guest). Re-check before
+        // arming Overlay so a stale/dead guest is left untouched.
+        if (disposed || !isActiveWcId(wc.id))
+            return;
+        wc.debugger.sendCommand('Overlay.enable').catch(() => { });
     }
     // ── front-end → render command routing ─────────────────────────────────────
     function routeCommand(cmd) {
@@ -465,6 +491,14 @@ export function installElementsForward(deps) {
                 replyError(cmd, 'stale render generation');
                 return;
             }
+            // The front-end emits `Overlay.disable` on Elements-panel state
+            // transitions. Forwarded verbatim it disables the guest's Overlay agent,
+            // after which every `Overlay.highlightNode` fails with "Overlay must be
+            // enabled" and the hover highlight stops painting. Re-arm it so the next
+            // hover paints — only while this guest is still the active one.
+            if (cmd.method === 'Overlay.disable' && isActiveWcId(cmdWcId)) {
+                wc.debugger.sendCommand('Overlay.enable').catch(() => { });
+            }
             replyResult(cmd, result);
         })
             .catch((err) => {