chrome-devtools-frontend 1.0.940255 → 1.0.942095

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -187,7 +187,6 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
       return;
     }
 
-    let debuggerModel: SDK.DebuggerModel.DebuggerModel|null = details.debuggerModel;
     this.notPausedMessageElement.classList.add('hidden');
 
     const itemPromises = [];
@@ -209,32 +208,33 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
       UI.Tooltip.Tooltip.install(this.callFrameWarningsElement, Array.from(uniqueWarnings).join('\n'));
     }
 
-    let asyncStackTrace: Protocol.Runtime.StackTrace|null|undefined = details.asyncStackTrace;
-    if (!asyncStackTrace && details.asyncStackTraceId) {
-      if (details.asyncStackTraceId.debuggerId) {
-        debuggerModel = await SDK.DebuggerModel.DebuggerModel.modelForDebuggerId(details.asyncStackTraceId.debuggerId);
-      }
-      asyncStackTrace = debuggerModel ? await debuggerModel.fetchAsyncStackTrace(details.asyncStackTraceId) : null;
-    }
+    let debuggerModel = details.debuggerModel;
+    let asyncStackTraceId = details.asyncStackTraceId;
+    let asyncStackTrace: Protocol.Runtime.StackTrace|undefined|null = details.asyncStackTrace;
     let previousStackTrace: Protocol.Runtime.CallFrame[]|SDK.DebuggerModel.CallFrame[] = details.callFrames;
-    let maxAsyncStackChainDepth = this.maxAsyncStackChainDepth;
-    while (asyncStackTrace && maxAsyncStackChainDepth > 0) {
+    for (let {maxAsyncStackChainDepth} = this; maxAsyncStackChainDepth > 0; --maxAsyncStackChainDepth) {
+      if (!asyncStackTrace) {
+        if (!asyncStackTraceId) {
+          break;
+        }
+        if (asyncStackTraceId.debuggerId) {
+          const dm = await SDK.DebuggerModel.DebuggerModel.modelForDebuggerId(asyncStackTraceId.debuggerId);
+          if (!dm) {
+            break;
+          }
+          debuggerModel = dm;
+        }
+        asyncStackTrace = await debuggerModel.fetchAsyncStackTrace(asyncStackTraceId);
+        if (!asyncStackTrace) {
+          break;
+        }
+      }
       const title = UI.UIUtils.asyncStackTraceLabel(asyncStackTrace.description, previousStackTrace);
       items.push(...await Item.createItemsForAsyncStack(
           title, debuggerModel, asyncStackTrace.callFrames, this.locationPool, this.refreshItem.bind(this)));
-
-      --maxAsyncStackChainDepth;
       previousStackTrace = asyncStackTrace.callFrames;
-      if (asyncStackTrace.parent) {
-        asyncStackTrace = asyncStackTrace.parent;
-      } else if (asyncStackTrace.parentId) {
-        if (asyncStackTrace.parentId.debuggerId) {
-          debuggerModel = await SDK.DebuggerModel.DebuggerModel.modelForDebuggerId(asyncStackTrace.parentId.debuggerId);
-        }
-        asyncStackTrace = debuggerModel ? await debuggerModel.fetchAsyncStackTrace(asyncStackTrace.parentId) : null;
-      } else {
-        asyncStackTrace = null;
-      }
+      asyncStackTraceId = asyncStackTrace.parentId;
+      asyncStackTrace = asyncStackTrace.parent;
     }
     this.showMoreMessageElement.classList.toggle('hidden', !asyncStackTrace);
     this.items.replaceAll(items);
@@ -552,7 +552,7 @@ export class Item {
   }
 
   static async createItemsForAsyncStack(
-      title: string, debuggerModel: SDK.DebuggerModel.DebuggerModel|null, frames: Protocol.Runtime.CallFrame[],
+      title: string, debuggerModel: SDK.DebuggerModel.DebuggerModel, frames: Protocol.Runtime.CallFrame[],
       locationPool: Bindings.LiveLocation.LiveLocationPool, updateDelegate: (arg0: Item) => void): Promise<Item[]> {
     const headerItemToItemsSet = new WeakMap<Item, Set<Item>>();
     const asyncHeaderItem = new Item(title, updateDelegate);
@@ -563,17 +563,11 @@ export class Item {
     const liveLocationPromises = [];
     for (const frame of frames) {
       const item = new Item(UI.UIUtils.beautifyFunctionName(frame.functionName), update);
-      const rawLocation = debuggerModel ?
-          debuggerModel.createRawLocationByScriptId(frame.scriptId, frame.lineNumber, frame.columnNumber) :
-          null;
-      if (!rawLocation) {
-        item.linkText = (frame.url || '<unknown>') + ':' + (frame.lineNumber + 1);
-        item.updateDelegate(item);
-      } else {
-        liveLocationPromises.push(
-            Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createCallFrameLiveLocation(
-                rawLocation, item.update.bind(item), locationPool));
-      }
+      const rawLocation =
+          debuggerModel.createRawLocationByScriptId(frame.scriptId, frame.lineNumber, frame.columnNumber);
+      liveLocationPromises.push(
+          Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createCallFrameLiveLocation(
+              rawLocation, item.update.bind(item), locationPool));
       asyncFrameItems.push(item);
     }
 

package/front_end/panels/sources/CoveragePlugin.ts

@@ -6,8 +6,10 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Formatter from '../../models/formatter/formatter.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
-import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
+import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
+import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as Coverage from '../coverage/coverage.js';
 
 import {Plugin} from './Plugin.js';
@@ -35,16 +37,13 @@ const str_ = i18n.i18n.registerUIStrings('panels/sources/CoveragePlugin.ts', UIS
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class CoveragePlugin extends Plugin {
-  private uiSourceCode: Workspace.UISourceCode.UISourceCode;
   private originalSourceCode: Workspace.UISourceCode.UISourceCode;
   private infoInToolbar: UI.Toolbar.ToolbarButton;
   private model: Coverage.CoverageModel.CoverageModel|null|undefined;
   private coverage: Coverage.CoverageModel.URLCoverageInfo|null|undefined;
 
-  constructor(
-      _textEditor: SourceFrame.SourcesTextEditor.SourcesTextEditor, uiSourceCode: Workspace.UISourceCode.UISourceCode) {
-    super();
-    this.uiSourceCode = uiSourceCode;
+  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
+    super(uiSourceCode);
     this.originalSourceCode =
         Formatter.SourceFormatter.SourceFormatter.instance().getOriginalUISourceCode(this.uiSourceCode);
     this.infoInToolbar = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clickToShowCoveragePanel));
@@ -111,4 +110,120 @@ export class CoveragePlugin extends Plugin {
   async rightToolbarItems(): Promise<UI.Toolbar.ToolbarItem[]> {
     return [this.infoInToolbar];
   }
+
+  editorExtension(): CodeMirror.Extension {
+    return coverageCompartment.of([]);
+  }
+
+  private getCoverageManager(): Coverage.CoverageDecorationManager.CoverageDecorationManager|undefined {
+    return this.uiSourceCode.getDecorationData(SourceFrame.SourceFrame.DecoratorType.COVERAGE);
+  }
+
+  editorInitialized(editor: TextEditor.TextEditor.TextEditor): void {
+    if (this.getCoverageManager()) {
+      this.startDecoUpdate(editor);
+    }
+  }
+
+  decorationChanged(type: SourceFrame.SourceFrame.DecoratorType, editor: TextEditor.TextEditor.TextEditor): void {
+    if (type === SourceFrame.SourceFrame.DecoratorType.COVERAGE) {
+      this.startDecoUpdate(editor);
+    }
+  }
+
+  private startDecoUpdate(editor: TextEditor.TextEditor.TextEditor): void {
+    const manager = this.getCoverageManager();
+    (manager ? manager.usageByLine(this.uiSourceCode) : Promise.resolve([])).then(usageByLine => {
+      const enabled = Boolean(editor.state.field(coverageState, false));
+      if (!usageByLine.length) {
+        if (enabled) {
+          editor.dispatch({effects: coverageCompartment.reconfigure([])});
+        }
+      } else if (!enabled) {
+        editor.dispatch({
+          effects: coverageCompartment.reconfigure([
+            coverageState.init(state => markersFromCoverageData(usageByLine, state)),
+            coverageGutter(this.uiSourceCode.url()),
+            theme,
+          ]),
+        });
+      } else {
+        editor.dispatch({effects: setCoverageState.of(usageByLine)});
+      }
+    });
+  }
 }
+
+const coveredMarker = new (class extends CodeMirror.GutterMarker {
+  elementClass = 'cm-coverageUsed';
+})();
+
+const notCoveredMarker = new (class extends CodeMirror.GutterMarker {
+  elementClass = 'cm-coverageUnused';
+})();
+
+function markersFromCoverageData(
+    usageByLine: (boolean|undefined)[], state: CodeMirror.EditorState): CodeMirror.RangeSet<CodeMirror.GutterMarker> {
+  const builder = new CodeMirror.RangeSetBuilder<CodeMirror.GutterMarker>();
+  for (let line = 0; line < usageByLine.length; line++) {
+    const usage = usageByLine[line];
+    if (usage !== undefined && line < state.doc.lines) {
+      const lineStart = state.doc.line(line + 1).from;
+      builder.add(lineStart, lineStart, usage ? coveredMarker : notCoveredMarker);
+    }
+  }
+  return builder.finish();
+}
+
+const setCoverageState = CodeMirror.StateEffect.define<(boolean | undefined)[]>();
+
+const coverageState = CodeMirror.StateField.define<CodeMirror.RangeSet<CodeMirror.GutterMarker>>({
+  create(): CodeMirror.RangeSet<CodeMirror.GutterMarker> {
+    return CodeMirror.RangeSet.empty;
+  },
+  update(markers, tr) {
+    return tr.effects.reduce((markers, effect) => {
+      return effect.is(setCoverageState) ? markersFromCoverageData(effect.value, tr.state) : markers;
+    }, markers.map(tr.changes));
+  },
+});
+
+function coverageGutter(url: string): CodeMirror.Extension {
+  return CodeMirror.gutter({
+    markers: (view): CodeMirror.RangeSet<CodeMirror.GutterMarker> => view.state.field(coverageState),
+
+    domEventHandlers: {
+      click() {
+        UI.ViewManager.ViewManager.instance()
+            .showView('coverage')
+            .then(() => {
+              const view = UI.ViewManager.ViewManager.instance().view('coverage');
+              return view && view.widget();
+            })
+            .then(widget => {
+              const matchFormattedSuffix = url.match(/(.*):formatted$/);
+              const urlWithoutFormattedSuffix = (matchFormattedSuffix && matchFormattedSuffix[1]) || url;
+              (widget as Coverage.CoverageView.CoverageView).selectCoverageItemByUrl(urlWithoutFormattedSuffix);
+            });
+        return true;
+      },
+    },
+
+    class: 'cm-coverageGutter',
+  });
+}
+
+const coverageCompartment = new CodeMirror.Compartment();
+
+const theme = CodeMirror.EditorView.baseTheme({
+  '.cm-coverageGutter': {
+    width: '5px',
+    marginLeft: '3px',
+  },
+  '.cm-coverageUnused': {
+    backgroundColor: 'var(--color-accent-red)',
+  },
+  '.cm-coverageUsed': {
+    backgroundColor: 'var(--color-coverage-used)',
+  },
+});