chrome-devtools-frontend 1.0.962581 → 1.0.964938

package/front_end/panels/application/components/interestGroupAccessGrid.css

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+:host {
+  padding: 20px;
+}
+
+.heading {
+  font-size: 15px;
+}
+
+devtools-data-grid-controller {
+  border: 1px solid var(--color-details-hairline);
+  margin-top: 20px;
+}
+
+.info-icon {
+  vertical-align: text-bottom;
+  height: 14px;
+}
+
+.no-tt-message {
+  margin-top: 20px;
+}

package/front_end/panels/application/interestGroupStorageView.css

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2021 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -477,6 +477,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     } else {
       this.listItemElement.classList.remove('disabled');
     }
+
+    this.listItemElement.classList.toggle('changed', this.parentPane().isPropertyChanged(this.property));
   }
 
   node(): SDK.DOMModel.DOMNode|null {
@@ -714,6 +716,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         UI.ARIAUtils.setAccessibleName(
             enabledCheckboxElement, `${this.nameElement.textContent} ${this.valueElement.textContent}`);
       }
+
+      const copyIcon = UI.Icon.Icon.create('largeicon-copy', 'copy');
+      UI.Tooltip.Tooltip.install(copyIcon, i18nString(UIStrings.copyDeclaration));
+      copyIcon.addEventListener('click', () => {
+        const propertyText = `${this.property.name}: ${this.property.value};`;
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(propertyText);
+      });
+      this.listItemElement.append(copyIcon);
       this.listItemElement.insertBefore(enabledCheckboxElement, this.listItemElement.firstChild);
     }
   }
@@ -1470,6 +1480,9 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.styleTextAppliedForTest();
       return;
     }
+    if (updatedProperty) {
+      this.listItemElement.classList.toggle('changed', this.parentPane().isPropertyChanged(updatedProperty));
+    }
 
     this.matchedStylesInternal.resetActiveProperties();
     this.hasBeenEditedIncrementally = true;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -40,6 +40,9 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as Workspace from '../../models/workspace/workspace.js';
+import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.js';
+import * as DiffView from '../../ui/components/diff_view/diff_view.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -162,12 +165,14 @@ const UIStrings = {
   newStyleRule: 'New Style Rule',
   /**
   *@description Text that is announced by the screen reader when the user focuses on an input field for entering the name of a CSS property in the Styles panel
+  *@example {margin} PH1
   */
-  cssPropertyName: '`CSS` property name',
+  cssPropertyName: '`CSS` property name: {PH1}',
   /**
   *@description Text that is announced by the screen reader when the user focuses on an input field for entering the value of a CSS property in the Styles panel
+  *@example {10px} PH1
   */
-  cssPropertyValue: '`CSS` property value',
+  cssPropertyValue: '`CSS` property value: {PH1}',
   /**
   *@description Text that is announced by the screen reader when the user focuses on an input field for editing the name of a CSS selector in the Styles panel
   */
@@ -231,6 +236,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private readonly resizeThrottler: Common.Throttler.Throttler;
   private readonly imagePreviewPopover: ImagePreviewPopover;
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null;
+  #changedLinesByURLs: Map<string, Set<number>> = new Map();
+  #uiSourceCodeToDiffCallbacks: Map<Workspace.UISourceCode.UISourceCode, () => void> = new Map();
 
   static instance(): StylesSidebarPane {
     if (!_stylesSidebarPaneInstance) {
@@ -834,7 +841,14 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const blocks = [new SectionBlock(null)];
     let sectionIdx = 0;
     let lastParentNode: SDK.DOMModel.DOMNode|null = null;
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
+      this.resetChangedLinesTracking();
+    }
     for (const style of matchedStyles.nodeStyles()) {
+      if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES) && style.parentRule) {
+        await this.trackChangedLines(style.parentRule.resourceURL());
+      }
+
       const parentNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
       if (parentNode && parentNode !== lastParentNode) {
         lastParentNode = parentNode;
@@ -987,6 +1001,61 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     return sections;
   }
 
+  resetChangedLinesTracking(): void {
+    this.#changedLinesByURLs.clear();
+    for (const [uiSourceCode, callback] of this.#uiSourceCodeToDiffCallbacks) {
+      WorkspaceDiff.WorkspaceDiff.workspaceDiff().unsubscribeFromDiffChange(uiSourceCode, callback);
+    }
+    this.#uiSourceCodeToDiffCallbacks.clear();
+  }
+
+  async trackChangedLines(url: string): Promise<void> {
+    if (!url || this.#changedLinesByURLs.has(url)) {
+      return;
+    }
+    const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url);
+    if (uiSourceCode) {
+      await this.refreshChangedLines(uiSourceCode);
+      const callback = this.refreshChangedLines.bind(this, uiSourceCode);
+      WorkspaceDiff.WorkspaceDiff.workspaceDiff().subscribeToDiffChange(uiSourceCode, callback);
+      this.#uiSourceCodeToDiffCallbacks.set(uiSourceCode, callback);
+    }
+  }
+
+  isPropertyChanged(property: SDK.CSSProperty.CSSProperty): boolean {
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
+      return false;
+    }
+    const url = property.ownerStyle.parentRule?.resourceURL();
+    if (!url) {
+      return false;
+    }
+    const changedLines = this.#changedLinesByURLs.get(url);
+    if (!changedLines) {
+      return false;
+    }
+    const uiLocation = Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().propertyUILocation(property, true);
+    if (!uiLocation) {
+      return false;
+    }
+    // UILocation's lineNumber starts at 0, but changedLines start at 1.
+    return changedLines.has(uiLocation.lineNumber + 1);
+  }
+
+  private async refreshChangedLines(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
+    const diff = await WorkspaceDiff.WorkspaceDiff.workspaceDiff().requestDiff(uiSourceCode, {shouldFormatDiff: true});
+    const changedLines = new Set<number>();
+    if (diff && diff.length > 0) {
+      const {rows} = DiffView.DiffView.buildDiffRows(diff);
+      for (const row of rows) {
+        if (row.type === DiffView.DiffView.RowType.Addition) {
+          changedLines.add(row.currentLineNumber);
+        }
+      }
+    }
+    this.#changedLinesByURLs.set(uiSourceCode.url(), changedLines);
+  }
+
   private clipboardCopy(_event: Event): void {
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.StyleRuleCopied);
   }
@@ -3024,7 +3093,7 @@ export class StylesSidebarPropertyRenderer {
 
   renderName(): Element {
     const nameElement = document.createElement('span');
-    UI.ARIAUtils.setAccessibleName(nameElement, i18nString(UIStrings.cssPropertyName));
+    UI.ARIAUtils.setAccessibleName(nameElement, i18nString(UIStrings.cssPropertyName, {PH1: this.propertyName}));
     nameElement.className = 'webkit-css-property';
     nameElement.textContent = this.propertyName;
     nameElement.normalize();
@@ -3033,7 +3102,7 @@ export class StylesSidebarPropertyRenderer {
 
   renderValue(): Element {
     const valueElement = document.createElement('span');
-    UI.ARIAUtils.setAccessibleName(valueElement, i18nString(UIStrings.cssPropertyValue));
+    UI.ARIAUtils.setAccessibleName(valueElement, i18nString(UIStrings.cssPropertyValue, {PH1: this.propertyValue}));
     valueElement.className = 'value';
     if (!this.propertyValue) {
       return valueElement;

package/front_end/panels/elements/stylesSectionTree.css

@@ -126,6 +126,34 @@ ol.expanded {
   opacity: 50%;
 }
 
+.changed::after {
+  content: "";
+  position: absolute;
+  left: -4px;
+  width: 2px;
+  height: 100%;
+  background-color: var(--color-accent-green);
+}
+
+.copy {
+  display: none;
+}
+
+.changed:hover {
+  background-color: var(--color-accent-green-background);
+}
+
+.changed:hover .copy {
+  position: absolute;
+  right: -4px;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  display: inline-block;
+  cursor: pointer;
+  transform: scale(0.9);
+}
+
 .has-ignorable-error {
   color: var(--color-text-disabled);
 }

package/front_end/panels/media/PlayerListView.ts

@@ -87,8 +87,10 @@ export class PlayerListView extends UI.Widget.VBox implements TriggerDispatcher
     this.mainContainer.renderMainPanel(playerID);
     if (this.currentlySelectedEntry !== null) {
       this.currentlySelectedEntry.classList.remove('selected');
+      this.currentlySelectedEntry.classList.remove('force-white-icons');
     }
     element.classList.add('selected');
+    element.classList.add('force-white-icons');
     this.currentlySelectedEntry = element;
   }
 

package/front_end/panels/media/playerListView.css

@@ -42,6 +42,9 @@ li.storage-group-list-item::before {
 
 .player-entry-frame-title {
   height: 26px;
+  width: 125px;
+  min-width: 125px;
+  text-overflow: elipsis;
   padding: 0 10px;
   border-right: 1px solid var(--color-details-hairline);
   overflow: hidden;

package/front_end/panels/sensors/sensors-meta.ts

@@ -184,7 +184,7 @@ Common.Settings.registerSettingExtension({
       title: 'Mountain View',
       lat: 37.386052,
       long: -122.083851,
-      timezoneId: 'US/Pacific',
+      timezoneId: 'America/Los_Angeles',
       locale: 'en-US',
     },
     {
@@ -198,7 +198,7 @@ Common.Settings.registerSettingExtension({
       title: 'San Francisco',
       lat: 37.774929,
       long: -122.419416,
-      timezoneId: 'US/Pacific',
+      timezoneId: 'America/Los_Angeles',
       locale: 'en-US',
     },
     {

package/front_end/panels/sources/NavigatorView.ts

@@ -849,7 +849,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
 
     if (project.type() === Workspace.Workspace.projectTypes.FileSystem) {
       // TODO(crbug.com/1253323): Cast to RawPathString will be removed when migration to branded types is complete.
-      const folderPath = Common.ParsedURL.ParsedURL.capFilePrefix(
+      const folderPath = Common.ParsedURL.ParsedURL.urlToRawPathString(
           Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.completeURL(project, path) as
               Platform.DevToolsPath.UrlString,
           Host.Platform.isWin());

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -364,9 +364,16 @@ export class UISourceCodeFrame extends
     this.unloadUISourceCode();
     this.persistenceBinding = binding;
     this.initializeUISourceCode();
+    this.reloadMessages();
     this.reloadPlugins();
   }
 
+  private reloadMessages(): void {
+    const messages = [...this.allMessages()];
+    const {editor} = this.textEditor;
+    editor.dispatch({effects: setRowMessages.of(RowMessages.create(messages))});
+  }
+
   private updateStyle(): void {
     this.setEditable(this.canEditSourceInternal());
   }

package/front_end/ui/components/diff_view/DiffView.ts

@@ -44,14 +44,14 @@ interface Row {
   type: RowType;
 }
 
-const enum RowType {
+export const enum RowType {
   Deletion = 'deletion',
   Addition = 'addition',
   Equal = 'equal',
   Spacer = 'spacer',
 }
 
-function buildDiffRows(diff: Diff.Diff.DiffArray): {
+export function buildDiffRows(diff: Diff.Diff.DiffArray): {
   originalLines: readonly string[],
   currentLines: readonly string[],
   rows: readonly Row[],

package/front_end/ui/components/docs/icon_button/basic.ts

@@ -12,7 +12,7 @@ function appendComponent(data: IconButton.IconButton.IconButtonData) {
 
 appendComponent({
   clickHandler: (): void => {},
-  groups: [{iconName: 'survey_feedback_icon', text: '1 item'}],
+  groups: [{iconName: 'survey_feedback_icon', iconColor: 'var(--color-text-primary)', text: '1 item'}],
 });
 
 appendComponent({

package/front_end/ui/components/icon_button/IconButton.ts

@@ -85,7 +85,7 @@ export class IconButton extends HTMLElement {
       ${filteredGroups.map(counter =>
       LitHtml.html`
       <${Icon.litTagName} class="status-icon"
-      .data=${{iconName: counter.iconName, color: counter.iconColor || 'var(--color-text-primary)', width: counter.iconWidth || '1.5ex', height: counter.iconHeight || '1.5ex'} as IconData}>
+      .data=${{iconName: counter.iconName, color: counter.iconColor, width: counter.iconWidth || '1.5ex', height: counter.iconHeight || '1.5ex'} as IconData}>
       </${Icon.litTagName}>
       ${this.#compact ? LitHtml.html`<!-- Force line-height for this element --><span>&#8203;</span>` : LitHtml.nothing}
       <span class="icon-button-title">${counter.text}</span>

package/front_end/ui/legacy/GlassPane.ts

@@ -120,6 +120,7 @@ export class GlassPane {
     // Deliberately starts with 3000 to hide other z-indexed elements below.
     this.element.style.zIndex = `${3000 + 1000 * _panes.size}`;
     document.body.addEventListener('mousedown', this.onMouseDownBound, true);
+    document.body.addEventListener('pointerdown', this.onMouseDownBound, true);
     this.widgetInternal.show(document.body);
     _panes.add(this);
     this.positionContent();
@@ -131,6 +132,7 @@ export class GlassPane {
     }
     _panes.delete(this);
     this.element.ownerDocument.body.removeEventListener('mousedown', this.onMouseDownBound, true);
+    this.element.ownerDocument.body.removeEventListener('pointerdown', this.onMouseDownBound, true);
     this.widgetInternal.detach();
   }
 

package/front_end/ui/legacy/components/inline_editor/cssLength.css

@@ -23,6 +23,7 @@
   cursor: pointer;
   opacity: 0%;
   width: 0.8em;
+  background-color: var(--color-background);
 }
 
 .icon {

package/front_end/ui/legacy/softDropDownButton.css

@@ -26,6 +26,8 @@ button.soft-dropdown > .title {
 @media (forced-colors: active) {
   button.soft-dropdown {
     border: 1px solid ButtonText;
+    background: ButtonFace;
+    color: ButtonText;
   }
 
   button.soft-dropdown[disabled] {

package/front_end/ui/legacy/themeColors.css

@@ -57,6 +57,7 @@
   --color-accent-red: rgb(217 48 37);
   --color-red: rgb(238 68 47);
   --color-accent-green: rgb(24 128 56);
+  --color-accent-green-background: rgb(24 128 56 / 10%);
   --color-green: rgb(99 172 190);
   --color-link: var(--color-primary);
   --color-syntax-1: rgb(200 0 0);
@@ -219,6 +220,7 @@
   --color-accent-red: rgb(242 139 130);
   --color-red: rgb(237 78 76);
   --color-accent-green: rgb(129 201 149);
+  --color-accent-green-background: rgb(129 201 149 / 20%);
   --color-link: var(--color-primary);
   --color-syntax-1: rgb(53 212 199);
   --color-syntax-2: rgb(93 176 215);
@@ -258,7 +260,7 @@
   --color-error-background: hsl(0deg 100% 8%);
   --color-checkbox-accent-color: rgb(255 165 0);
   /* Colors for styling inputs */
-  --color-input-outline: rgb(189 193 198);
+  --color-input-outline: rgb(60 64 67);
   --color-input-outline-active: rgb(138 180 248);
   --color-input-outline-error: rgb(242 139 130);
   --color-input-outline-disabled: rgba(189 193 198 / 20%);

package/front_end/ui/legacy/toolbar.css

@@ -537,4 +537,10 @@ devtools-icon.leading-issue-icon {
   .toolbar-item .devtools-link {
     color: linktext;
   }
+
+  .toolbar-has-dropdown {
+    forced-color-adjust: none;
+    background: ButtonFace;
+    color: ButtonText;
+  }
 }

package/package.json

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

package/scripts/build/devtools_plugin.js

@@ -0,0 +1,103 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// @ts-check
+
+const path = require('path');
+
+/**
+ * `path.dirname` does not include trailing slashes. If we would always
+ * use `path.dirname` and then later perform comparisons on the paths that
+ * it returns, we could run into false positives. For example, given the
+ * the following two paths:
+ *
+ *     front_end/timeline_model/TimelineModel.js
+ *     front_end/timeline/Timeline.js
+ *
+ * And that would have the following values for `path.dirname`:
+ *
+ *     front_end/timeline_model
+ *     front_end/timeline
+ *
+ * If we would do a simple `.startswith` on the `path.dirname` of both of
+ * these paths, then the first path would start with the dirname of the
+ * second. However, they *are* part of different folders. To fix that problem,
+ * we need to force a path separator after each folder. That makes sure we
+ * and up with the following comparison of path dirnames:
+ *
+ *     front_end/timeline_model/
+ *     front_end/timeline/
+ *
+ * Now, the first path does *not* start with the second one, as expected.
+ *
+ * @param {string} file
+ * @return {string}
+ */
+function dirnameWithSeparator(file) {
+  return path.dirname(file) + path.sep;
+}
+
+function devtoolsPlugin(source, importer) {
+  if (!importer) {
+    return null;
+  }
+  const currentDirectory = path.normalize(dirnameWithSeparator(importer));
+  const importedFilelocation = path.normalize(path.join(currentDirectory, source));
+  const importedFileDirectory = dirnameWithSeparator(importedFilelocation);
+
+  // Generated files are part of other directories, as they are only imported once
+  if (path.basename(importedFileDirectory) === 'generated') {
+    return null;
+  }
+
+  // An import is considered external (and therefore a separate
+  // bundle) if its filename matches its immediate parent's folder
+  // name (without the extension). For example:
+  // import * as Components from './components/components.js' = external
+  // import * as UI from '../ui/ui.js' = external
+  // import * as LitHtml from '../third_party/lit-html/lit-html.js' = external
+  // import {DataGrid} from './components/DataGrid.js' = not external
+  // import * as Components from './components/foo.js' = not external
+
+  // Note that we can't do a simple check for only `third_party`, as in Chromium
+  // our full path is `third_party/devtools-frontend/src/`, which thus *always*
+  // includes third_party. It also not possible to use the current directory
+  // as a check for the import, as the import will be different in Chromium and
+  // would therefore not match the path of `__dirname`.
+  // These should be removed because the new heuristic _should_ deal with these
+  // e.g. it'll pick up third_party/lit-html/lit-html.js is its own entrypoint
+
+  // Puppeteer has dynamic imports in its build gated on an ifNode
+  // flag, but our Rollup config doesn't know about that and tries
+  // to parse dynamic import('fs'). Let's ignore Puppeteer for now.
+  // The long term plan is probably for Puppeteer to ship a web
+  // bundle anyway. See go/pptr-agnostify for details.
+  if (importedFileDirectory.includes(path.join('front_end', 'third_party', 'puppeteer'))) {
+    return null;
+  }
+
+  // The CodeMirror addons look like bundles (addon/comment/comment.js) but are not.
+  if (importedFileDirectory.includes(path.join('front_end', 'third_party', 'codemirror', 'package'))) {
+    return null;
+  }
+
+  // The LightHouse bundle shouldn't be processed by `terser` again, as it is uniquely built
+  if (importedFilelocation.includes(path.join('front_end', 'third_party', 'lighthouse', 'lighthouse-dt-bundle.js'))) {
+    return {
+      id: importedFilelocation,
+      external: true,
+    };
+  }
+
+  const importedFileName = path.basename(importedFilelocation, '.js');
+  const importedFileParentDirectory = path.basename(path.dirname(importedFilelocation));
+  const isExternal = importedFileName === importedFileParentDirectory;
+
+  return {
+    id: importedFilelocation,
+    external: isExternal,
+  };
+}
+
+module.exports = {devtoolsPlugin};

package/scripts/build/ninja/{rollup.gni → bundle.gni}

@@ -5,9 +5,9 @@
 import("./node.gni")
 import("./vars.gni")
 
-template("rollup") {
+template("bundle") {
   assert(defined(invoker.entrypoint),
-         "You must define the 'entrypoint' for a rollup target")
+         "You must define the 'entrypoint' for a bundle target")
 
   node_action(target_name) {
     script = "node_modules/rollup/dist/bin/rollup"

package/scripts/build/ninja/devtools_entrypoint.gni

@@ -4,9 +4,9 @@
 
 import("//build/toolchain/rbe.gni")
 import("../../../third_party/typescript/typescript.gni")
+import("./bundle.gni")
 import("./copy.gni")
 import("./node.gni")
-import("./rollup.gni")
 import("./vars.gni")
 
 # This defines an entrypoint for DevTools, which uses Rollup
@@ -19,7 +19,7 @@ import("./vars.gni")
 #    import in `core/root/Runtime.js`.
 template("devtools_entrypoint") {
   assert(defined(invoker.entrypoint),
-         "You must define the 'entrypoint' for a rollup target")
+         "You must define the 'entrypoint' for a bundle target")
 
   _entrypoint_target_name = "devtools_entrypoint-" + target_name
 
@@ -79,7 +79,7 @@ template("devtools_entrypoint") {
     # make sure that the GN dependency graph correctly corresponds
     # to that. Therefore, the graph looks like so:
     #
-    #   copy -> ts_library -> fix-tsconfig -> rollup
+    #   copy -> ts_library -> fix-tsconfig -> bundle
     #
     _entrypoint_output_file_name = get_path_info(invoker.entrypoint, "name")
     _output_file_name =
@@ -88,7 +88,7 @@ template("devtools_entrypoint") {
     _prebundle_output_file_name = "$_output_file_name.js"
 
     _copy_target_name = _entrypoint_target_name + "-copy"
-    _rollup_target_name = _entrypoint_target_name + "-rollup"
+    _bundle_target_name = _entrypoint_target_name + "-bundle"
     _prebundle_target_name = _entrypoint_target_name + "-tsconfig"
 
     node_action(_copy_target_name) {
@@ -127,12 +127,12 @@ template("devtools_entrypoint") {
       }
     }
 
-    rollup(_rollup_target_name) {
+    bundle(_bundle_target_name) {
       entrypoint = _prebundle_output_file_name
 
       output_file_location = _entrypoint_gen_file_location
 
-      # Since rollup bundles both the entrypoint and the files it imports,
+      # Since bundles both the entrypoint and the files it imports,
       # we have to make sure that, when you change a file it imports, we
       # retrigger Rollup. Since the `invoker.deps` is a reference to the
       # `ts_library` that compiles all of the files it imports, we have to
@@ -161,8 +161,8 @@ template("devtools_entrypoint") {
         ]
 
         public_deps = [
+          ":$_bundle_target_name",
           ":$_prebundle_target_name",
-          ":$_rollup_target_name",
         ]
 
         outputs = [ "$target_gen_dir/$_entrypoint_output_file_name.d.ts" ]
@@ -171,8 +171,8 @@ template("devtools_entrypoint") {
       _devtools_entrypoint_deps += [ ":$_generated_declaration_target_name" ]
     } else {
       _devtools_entrypoint_deps += [
+        ":$_bundle_target_name",
         ":$_prebundle_target_name",
-        ":$_rollup_target_name",
       ]
     }
   }