chrome-devtools-frontend 1.0.967610 → 1.0.969345

package/front_end/third_party/codemirror.next/package.json

@@ -5,9 +5,9 @@
   "dependencies": {
     "@codemirror/autocomplete": "0.19.12",
     "@codemirror/closebrackets": "0.19.0",
-    "@codemirror/commands": "0.19.7",
+    "@codemirror/commands": "0.19.8",
     "@codemirror/comment": "0.19.0",
-    "@codemirror/fold": "0.19.2",
+    "@codemirror/fold": "0.19.3",
     "@codemirror/gutter": "0.19.9",
     "@codemirror/highlight": "0.19.7",
     "@codemirror/history": "0.19.2",
@@ -15,11 +15,11 @@
     "@codemirror/lang-css": "0.19.3",
     "@codemirror/lang-html": "0.19.4",
     "@codemirror/lang-java": "0.19.1",
-    "@codemirror/lang-javascript": "0.19.6",
+    "@codemirror/lang-javascript": "0.19.7",
     "@codemirror/lang-json": "0.19.1",
-    "@codemirror/lang-markdown": "0.19.4",
+    "@codemirror/lang-markdown": "0.19.6",
     "@codemirror/lang-php": "0.19.1",
-    "@codemirror/lang-python": "0.19.2",
+    "@codemirror/lang-python": "0.19.4",
     "@codemirror/lang-wast": "0.19.0",
     "@codemirror/lang-xml": "0.19.2",
     "@codemirror/language": "0.19.7",
@@ -27,14 +27,14 @@
     "@codemirror/matchbrackets": "0.19.3",
     "@codemirror/panel": "0.19.1",
     "@codemirror/rangeset": "0.19.6",
-    "@codemirror/search": "0.19.5",
+    "@codemirror/search": "0.19.6",
     "@codemirror/state": "0.19.6",
-    "@codemirror/stream-parser": "0.19.3",
-    "@codemirror/text": "0.19.5",
-    "@codemirror/tooltip": "0.19.12",
-    "@codemirror/view": "0.19.39",
+    "@codemirror/stream-parser": "0.19.5",
+    "@codemirror/text": "0.19.6",
+    "@codemirror/tooltip": "0.19.13",
+    "@codemirror/view": "0.19.42",
     "@lezer/common": "0.15.11",
-    "@lezer/lr": "0.15.6",
+    "@lezer/lr": "0.15.8",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "rollup-plugin-dts": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",

package/front_end/ui/components/settings/settingCheckbox.css

@@ -12,6 +12,8 @@
 input {
   height: 12px;
   width: 12px;
+  min-height: 12px;
+  min-width: 12px;
 }
 
 label {

package/front_end/ui/legacy/components/object_ui/ObjectPopoverHelper.ts

@@ -59,7 +59,7 @@ export class ObjectPopoverHelper {
       Promise<ObjectPopoverHelper|null> {
     const description = Platform.StringUtilities.trimEndWithMaxLength(result.description || '', MaxPopoverTextLength);
     let popoverContentElement: HTMLSpanElement|HTMLDivElement|null = null;
-    if (result.type === 'object') {
+    if (result.type === 'function' || result.type === 'object') {
       let linkifier: Components.Linkifier.Linkifier|null = null;
       let resultHighlightedAsDOM = false;
       if (result.subtype === 'node') {
@@ -74,9 +74,15 @@ export class ObjectPopoverHelper {
       } else {
         popoverContentElement = document.createElement('div');
         popoverContentElement.classList.add('object-popover-content');
-        popover.registerCSSFiles([objectPopoverStyles]);
-        const titleElement = popoverContentElement.createChild('div', 'monospace object-popover-title');
-        titleElement.createChild('span').textContent = description;
+        popover.registerCSSFiles([objectValueStyles, objectPopoverStyles]);
+        const titleElement = popoverContentElement.createChild('div', 'object-popover-title');
+        if (result.type === 'function') {
+          titleElement.classList.add('source-code');
+          titleElement.appendChild(ObjectPropertiesSection.valueElementForFunctionDescription(result.description));
+        } else {
+          titleElement.classList.add('monospace');
+          titleElement.createChild('span').textContent = description;
+        }
         linkifier = new Components.Linkifier.Linkifier();
         const section = new ObjectPropertiesSection(result, '', linkifier, true /* showOverflow */);
         section.element.classList.add('object-popover-tree');
@@ -98,39 +104,12 @@ export class ObjectPopoverHelper {
 
     if (result.type === 'string') {
       UI.UIUtils.createTextChildren(valueElement, `"${description}"`);
-    } else if (result.type !== 'function') {
+    } else {
       valueElement.textContent = description;
     }
 
-    if (result.type !== 'function') {
-      popover.contentElement.appendChild(popoverContentElement);
-      return new ObjectPopoverHelper(null, false);
-    }
-
-    void ObjectPropertiesSection.formatObjectAsFunction(result, valueElement, true);
-    const response = await result.debuggerModel().functionDetailsPromise(result);
-    if (!response) {
-      return null;
-    }
-
-    const container = document.createElement('div');
-    container.classList.add('object-popover-container');
-    const title = container.createChild('div', 'function-popover-title source-code');
-    const functionName = title.createChild('span', 'function-name');
-    functionName.textContent = UI.UIUtils.beautifyFunctionName(response.functionName);
-
-    const rawLocation = response.location;
-    const linkContainer = title.createChild('div', 'function-title-link-container');
-    const script = rawLocation && rawLocation.script();
-    const sourceURL = script && script.sourceURL;
-    let linkifier: Components.Linkifier.Linkifier|null = null;
-    if (sourceURL) {
-      linkifier = new Components.Linkifier.Linkifier(undefined, undefined, popover.positionContent.bind(popover));
-      linkContainer.appendChild(linkifier.linkifyRawLocation((rawLocation as SDK.DebuggerModel.Location), sourceURL));
-    }
-    container.appendChild(popoverContentElement);
-    popover.contentElement.appendChild(container);
-    return new ObjectPopoverHelper(linkifier, false);
+    popover.contentElement.appendChild(popoverContentElement);
+    return new ObjectPopoverHelper(null, false);
   }
 }
 

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -260,7 +260,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     return UI.Fragment.html`<span class="name">${name}</span>`;
   }
 
-  static valueElementForFunctionDescription(description?: string|null, includePreview?: boolean, defaultName?: string):
+  static valueElementForFunctionDescription(description?: string, includePreview?: boolean, defaultName?: string):
       Element {
     const valueElement = document.createElement('span');
     valueElement.classList.add('object-value-function');

package/front_end/ui/legacy/components/object_ui/objectPopover.css

@@ -30,28 +30,3 @@
 .object-popover-container {
   display: inline-block;
 }
-
-.function-popover-title {
-  border-bottom: 1px solid var(--color-details-hairline);
-  margin-bottom: 3px;
-  padding-bottom: 2px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.function-popover-title .function-name {
-  font-weight: bold;
-}
-
-.function-title-link-container {
-  display: flex;
-  align-items: center;
-  position: relative;
-  margin-left: 10px;
-}
-
-.function-title-link-container .devtools-link {
-  white-space: nowrap;
-  overflow: hidden;
-}

package/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts

@@ -388,8 +388,8 @@ export class TimelineOverviewBase extends UI.Widget.VBox implements TimelineOver
   reset(): void {
   }
 
-  overviewInfoPromise(_x: number): Promise<Element|null> {
-    return Promise.resolve((null as Element | null));
+  async overviewInfoPromise(_x: number): Promise<Element|null> {
+    return null;
   }
 
   setCalculator(calculator: TimelineOverviewCalculator): void {

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -578,8 +578,10 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     if (this.lineToScrollTo !== null) {
       if (this.loaded && this.isShowing()) {
         const {textEditor} = this;
-        const position = textEditor.toOffset({lineNumber: this.lineToScrollTo, columnNumber: 0});
-        textEditor.dispatch({effects: CodeMirror.EditorView.scrollTo.of(CodeMirror.EditorSelection.cursor(position))});
+        // DevTools history items are 0-based, but CodeMirror is 1-based, so we have to increment the
+        // line we want to scroll to by 1.
+        const position = textEditor.toOffset({lineNumber: this.lineToScrollTo + 1, columnNumber: 0});
+        textEditor.dispatch({effects: CodeMirror.EditorView.scrollIntoView(position, {y: 'start'})});
         this.lineToScrollTo = null;
       }
     }

package/package.json

@@ -54,5 +54,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.967610"
+  "version": "1.0.969345"
 }

package/scripts/build/devtools_plugin.js

@@ -111,4 +111,35 @@ function devtoolsPlugin(source, importer) {
   };
 }
 
-module.exports = {devtoolsPlugin};
+function esbuildPlugin(outdir) {
+  return args => {
+    // args.importer is absolute path in esbuild.
+    const res = devtoolsPlugin(args.path, args.importer);
+    if (!res) {
+      return null;
+    }
+
+    if (res.external) {
+      // res.id can be both of absolutized local JavaScript path or node's
+      // builtin module (e.g. 'fs', 'path'), and only relativize the path in
+      // former case.
+      if (path.isAbsolute(res.id)) {
+        res.id = './' + path.relative(outdir, res.id);
+      }
+
+      return {
+        external: res.external,
+        path: res.id,
+      };
+    }
+
+    return {
+      path: res.id,
+    };
+  };
+}
+
+module.exports = {
+  devtoolsPlugin,
+  esbuildPlugin
+};

package/scripts/build/esbuild.js

@@ -21,30 +21,7 @@ const plugin = {
   name: 'devtools-plugin',
   setup(build) {
     // https://esbuild.github.io/plugins/#on-resolve
-    build.onResolve({filter: /.*/}, args => {
-      const res = devtools_plugin.devtoolsPlugin(args.path, args.importer);
-      if (!res) {
-        return null;
-      }
-
-      if (res.external) {
-        // res.id can be both of absolutized local JavaScript path or node's
-        // builtin module (e.g. 'fs', 'path'), and only relativize the path in
-        // former case.
-        if (path.isAbsolute(res.id)) {
-          res.id = './' + path.relative(outdir, res.id);
-        }
-
-        return {
-          external: res.external,
-          path: res.id,
-        };
-      }
-
-      return {
-        path: res.id,
-      };
-    });
+    build.onResolve({filter: /.*/}, devtools_plugin.esbuildPlugin(outdir));
   },
 };
 

package/scripts/build/tests/plugins_test.js

@@ -5,7 +5,7 @@
 const {assert} = require('chai');
 const path = require('path');
 
-const {devtoolsPlugin} = require('../devtools_plugin.js');
+const {devtoolsPlugin, esbuildPlugin} = require('../devtools_plugin.js');
 
 describe('devtools_plugin can compute paths with', () => {
   it('same directory import', () => {
@@ -27,4 +27,63 @@ describe('devtools_plugin can compute paths with', () => {
   it('importing generated files', () => {
     assert.strictEqual(devtoolsPlugin('../../generated/Protocol.js', 'front_end/core/sdk/FirstFile.js'), null);
   });
+
+  it('importing lighthouse files', () => {
+    assert.deepEqual(
+        devtoolsPlugin('./front_end/third_party/lighthouse/lighthouse-dt-bundle.js', 'front_end/core/sdk/FirstFile.js'),
+        {
+          id: path.join(
+              'front_end', 'core', 'sdk', 'front_end', 'third_party', 'lighthouse', 'lighthouse-dt-bundle.js'),
+          external: true,
+        });
+  });
+});
+
+describe('esbuild_plugin can compute paths with', () => {
+  const srcdir = __dirname;
+  const outdir = path.join(srcdir, 'out');
+  const plugin = esbuildPlugin(outdir);
+  it('same directory import', () => {
+    assert.deepEqual(
+        plugin({path: './AnotherFile.js', importer: path.join(srcdir, 'front_end/core/sdk/FirstFile.js')}),
+        {path: path.join(srcdir, 'front_end', 'core', 'sdk', 'AnotherFile.js')});
+  });
+
+  it('different directory import', () => {
+    assert.deepEqual(
+        plugin({path: '../common/common.js', importer: path.join(srcdir, 'front_end/core/sdk/FirstFile.js')}),
+        {path: './' + path.join('..', 'front_end', 'core', 'common', 'common.js'), external: true});
+  });
+
+  it('node built-in modules', () => {
+    assert.deepEqual(
+        plugin({path: 'fs', importer: path.join(srcdir, 'scripts/some-script.js')}), {path: 'fs', external: true});
+  });
+
+  it('codemirror modules', () => {
+    assert.deepEqual(
+        plugin({path: '../../lib/codemirror', importer: path.join(srcdir, 'scripts/some-script.js')}),
+        {path: '../../lib/codemirror', external: true});
+  });
+
+  it('importing generated files', () => {
+    assert.strictEqual(
+        plugin({path: '../../generated/Protocol.js', importer: path.join(srcdir, 'front_end/core/sdk/FirstFile.js')}),
+        null);
+  });
+
+  it('importing lighthouse files', () => {
+    assert.deepEqual(
+        plugin({
+          path: './front_end/third_party/lighthouse/lighthouse-dt-bundle.js',
+          importer: path.join(srcdir, 'front_end/core/sdk/FirstFile.js')
+        }),
+        {
+          path: './' +
+              path.join(
+                  '..', 'front_end', 'core', 'sdk', 'front_end', 'third_party', 'lighthouse',
+                  'lighthouse-dt-bundle.js'),
+          external: true,
+        });
+  });
 });

package/scripts/devtools_paths.js

@@ -34,16 +34,6 @@ const os = require('os');
  */
 const PATH_TO_EXECUTED_FILE = process.argv[1];
 
-function pathIsMostTopLevelPath(filePath) {
-  /**
-   * On Linux/Mac, if we do path.dirname(X) as many times as possible, it will
-   * eventually equal `/`. On Windows, it will end up equalling C:\, and
-   * path.dirname('C:\') === 'C:\', so we use that to figure out if we've made
-   * it as far up the tree as we can.
-   */
-  return filePath === path.sep || path.dirname(filePath) === filePath;
-}
-
 const _lookUpCaches = new Map(
     [['chromium', null]],
 );
@@ -73,25 +63,7 @@ function isInChromiumDirectory() {
  * If it's standalone, it will be /path/to/devtools-frontend
  */
 function devtoolsRootPath() {
-  const nodeScriptFileThatIsBeingExecuted = PATH_TO_EXECUTED_FILE;
-  let devtoolsRootFolder = nodeScriptFileThatIsBeingExecuted;
-  while (path.basename(devtoolsRootFolder) !== 'devtools-frontend') {
-    devtoolsRootFolder = path.dirname(devtoolsRootFolder);
-    // We reached the end and can't find devtools-frontend.
-    if (pathIsMostTopLevelPath(devtoolsRootFolder)) {
-      throw new Error(
-          'Could not find devtools-frontend in path. If you have cloned the repository to a different directory name, it will not work.');
-    }
-  }
-  // In Chromium the path to the source code for devtools-frontend is:
-  // third_party/devtools-frontend/src
-  const {isInChromium} = isInChromiumDirectory();
-  if (isInChromium) {
-    return path.join(devtoolsRootFolder, 'src');
-  }
-
-  // But if you're in a standalone repo it's just the devtools-frontend folder.
-  return devtoolsRootFolder;
+  return path.dirname(__dirname);
 }
 
 /**