chrome-devtools-frontend 1.0.1515446 → 1.0.1515988

package/front_end/panels/application/components/BackForwardCacheStrings.ts

@@ -3,6 +3,8 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import type * as Platform from '../../../core/platform/platform.js';
+import type * as Protocol from '../../../generated/protocol.js';
 
 const UIStrings = {
   /**
@@ -552,7 +554,10 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/BackForwardCacheStrings.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-export const NotRestoredReasonDescription = {
+type NotRestoredReason =
+    Record<Protocol.Page.BackForwardCacheNotRestoredReason, {name: () => Platform.UIString.LocalizedString}>;
+
+export const NotRestoredReasonDescription: NotRestoredReason = {
   NotPrimaryMainFrame: {name: i18nLazyString(UIStrings.notMainFrame)},
   BackForwardCacheDisabled: {name: i18nLazyString(UIStrings.backForwardCacheDisabled)},
   RelatedActiveContentsExist: {name: i18nLazyString(UIStrings.relatedActiveContentsExist)},
@@ -567,6 +572,7 @@ export const NotRestoredReasonDescription = {
   JavaScriptExecution: {name: i18nLazyString(UIStrings.JavaScriptExecution)},
   RendererProcessKilled: {name: i18nLazyString(UIStrings.rendererProcessKilled)},
   RendererProcessCrashed: {name: i18nLazyString(UIStrings.rendererProcessCrashed)},
+  // @ts-expect-error kept for backwards compatibly
   GrantedMediaStreamAccess: {name: i18nLazyString(UIStrings.grantedMediaStreamAccess)},
   CacheFlushed: {name: i18nLazyString(UIStrings.cacheFlushed)},
   ServiceWorkerVersionActivation: {name: i18nLazyString(UIStrings.serviceWorkerVersionActivation)},
@@ -713,4 +719,4 @@ export const NotRestoredReasonDescription = {
       {name: i18n.i18n.lockedLazyString('CacheLimitPrunedOnModerateMemoryPressure')},
   CacheLimitPrunedOnCriticalMemoryPressure:
       {name: i18n.i18n.lockedLazyString('CacheLimitPrunedOnCriticalMemoryPressure')},
-};
+} as const;

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -176,7 +176,6 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
             }
           };
 
-  const {on} = UI.UIUtils.HTMLElementWithLightDOMTemplate;
   const classes =
       (breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): ReturnType<typeof Lit.Directives.classMap> =>
           Lit.Directives.classMap({
@@ -239,7 +238,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
                 ?indeterminate=${breakpoints.some(breakpoint => !breakpoint.enabled()) &&
                                  breakpoints.some(breakpoint => breakpoint.enabled())}
                 ?checked=${!breakpoints.some(breakpoint => !breakpoint.enabled())}
-                @change=${on((e: Event) => onCheckboxClicked(e, category))}
+                @change=${(e: Event) => onCheckboxClicked(e, category)}
               >${getLocalizedCategory(category)}</devtools-checkbox>
               <ul
                   role="group"
@@ -257,7 +256,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
                     ?checked=${breakpoint.enabled()}
                     aria-description=${breakpoint === input.highlightedItem ? i18nString(UIStrings.breakpointHit)
                                                                             : Lit.nothing}
-                    @change=${on((e: Event) => onCheckboxClicked(e, breakpoint))}
+                    @change=${(e: Event) => onCheckboxClicked(e, breakpoint)}
                   >${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}</devtools-checkbox>
                 </li>`)}
               </ul>

package/front_end/panels/common/BadgeNotification.ts

@@ -21,16 +21,16 @@ const UIStrings = {
   /**
    * @description Title for close button
    */
-  dismiss: 'Dismiss',
+  close: 'Close',
   /**
    * @description Activity based badge award notification text
    * @example {Badge Title} PH1
    */
-  activityBasedBadgeAwardMessage: 'You earned the {PH1} badge! It has been added to your Developer Profile.',
+  activityBasedBadgeAwardMessage: 'You earned the {PH1} badge! It’s been added to your Developer Profile.',
   /**
    * @description Action title for navigating to the badge settings in Google Developer Profile section
    */
-  badgeSettings: 'Badge settings',
+  manageSettings: 'Manage settings',
   /**
    * @description Action title for opening the Google Developer Program profile page of the user in a new tab
    */
@@ -55,7 +55,7 @@ const UIStrings = {
   /**
    * @description Action title for enabling the "Receive badges" setting
    */
-  receiveBadges: 'Receive badges',
+  receiveBadges: 'Turn on badges',
   /**
    * @description Action title for creating a Google Developer Program profle
    */
@@ -103,10 +103,10 @@ const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement)
         class="dismiss notification-button"
         @click=${input.onCloseClick}
         jslog=${VisualLogging.action('badge-notification.dismiss').track({click: true})}
-        aria-label=${i18nString(UIStrings.dismiss)}
+        aria-label=${i18nString(UIStrings.close)}
         .iconName=${'cross'}
         .variant=${Buttons.Button.Variant.ICON}
-        .title=${i18nString(UIStrings.dismiss)}
+        .title=${i18nString(UIStrings.close)}
         .inverseColorTheme=${true}
     ></devtools-button>`;
 
@@ -114,7 +114,7 @@ const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement)
     <style>${badgeNotificationStyles}</style>
     <div class="container">
       <div class="badge-container">
-        <img class="badge-image" src=${input.imageUri}>
+        <img class="badge-image" role="presentation" src=${input.imageUri}>
       </div>
       <div class="action-and-text-container">
         <div class="label-container">
@@ -145,6 +145,8 @@ export class BadgeNotification extends UI.Widget.Widget {
     super(element);
     this.#view = view;
 
+    // eslint-disable-next-line
+    this.contentElement.role = 'alert';
     this.markAsRoot();
   }
 
@@ -240,7 +242,7 @@ export class BadgeNotification extends UI.Widget.Widget {
       message: i18nString(UIStrings.activityBasedBadgeAwardMessage, {PH1: badge.title}),
       actions: [
         {
-          label: i18nString(UIStrings.badgeSettings),
+          label: i18nString(UIStrings.manageSettings),
           onClick: () => {
             this.#close();
             revealBadgeSettings();

package/front_end/panels/common/GdpSignUpDialog.ts

@@ -39,8 +39,7 @@ const UIStrings = {
   /**
    * @description Body for the first section of the GDP sign up dialog.
    */
-  designedForSuccessBody:
-      'Grow your skills, build with AI, and receive badges you can showcase in your developer profile',
+  designedForSuccessBody: 'Grow your skills, build with AI, and earn badges you can showcase in your developer profile',
   /**
    * @description Title for the second section of the GDP sign up dialog.
    */
@@ -48,23 +47,32 @@ const UIStrings = {
   /**
    * @description Body for the second section of the GDP sign up dialog.
    */
-  keepUpdatedBody: 'The latest DevTools features, event invites, and tailored insights directly in your inbox',
+  keepUpdatedBody: 'The latest DevTools features, event invites, and tailored insights land directly in your inbox',
   /**
    * @description Title for the third section of the GDP sign up dialog.
    */
-  thingsToConsider: 'Things to consider',
+  tailorProfile: 'Tailor your profile',
+  /**
+   * @description Body for the third section of the GDP sign up dialog.
+   */
+  tailorProfileBody:
+      'The name on your Google Account and your interests will be used in your Google Developer Profile. Your name may appear where you contribute and can be changed at any time.',
   /**
    * @description Body for the third section of the GDP sign up dialog.
    * @example {Content Policy} PH1
    * @example {Terms of Service} PH2
    * @example {Privacy Policy} PH3
    */
-  thingsToConsiderBody:
-      'By creating a Developer Profile, you agree to the {PH1}. Google’s {PH2} and {PH3} apply to your use of this service. The name on your Google Account and your interests will be used in your Google Developer Profile. Your name may appear where you contribute and can be changed at any time.',
+  tailorProfileBodyDisclaimer:
+      'By creating a Developer Profile, you agree to the {PH1}. Google’s {PH2} and {PH3} apply to your use of this service.',
   /**
    * @description Button text for learning more about the Google Developer Program.
    */
   learnMore: 'Learn more',
+  /**
+   * @description Accessible text for learning more about the Google Developer Program.
+   */
+  learnMoreAccessibleText: 'Learn more about the Google Developer Program',
   /**
    * @description Link text for Content Policy.
    */
@@ -106,14 +114,14 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
   render(
     html`
       <style>${styles}</style>
-      <div class="gdp-sign-up-dialog-header"></div>
+      <div class="gdp-sign-up-dialog-header" role="img" tabindex="0" aria-label="Google Developer Program"></div>
       <div class="main-content">
         <div class="section">
           <div class="icon-container">
             <devtools-icon name="trophy"></devtools-icon>
           </div>
           <div class="text-container">
-            <h3 class="section-title">${i18nString(UIStrings.designedForSuccess)}</h3>
+            <h2 class="section-title">${i18nString(UIStrings.designedForSuccess)}</h2>
             <div class="section-text">${i18nString(UIStrings.designedForSuccessBody)}</div>
           </div>
         </div>
@@ -122,7 +130,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             <devtools-icon name="mark-email-unread"></devtools-icon>
           </div>
           <div class="text-container">
-            <h3 class="section-title">${i18nString(UIStrings.keepUpdated)}</h3>
+            <h2 class="section-title">${i18nString(UIStrings.keepUpdated)}</h2>
             <div class="section-text">${i18nString(UIStrings.keepUpdatedBody)}</div>
           </div>
           <div class="switch-container">
@@ -140,19 +148,24 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             <devtools-icon name="google"></devtools-icon>
           </div>
           <div class="text-container">
-            <h3 class="section-title">${i18nString(UIStrings.thingsToConsider)}</h3>
-            <div class="section-text">${i18n.i18n.getFormatLocalizedString(str_, UIStrings.thingsToConsiderBody, {
+            <h2 class="section-title">${i18nString(UIStrings.tailorProfile)}</h2>
+            <div class="section-text">
+              <div>${i18nString(UIStrings.tailorProfileBody)}</div><br/>
+              <div>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.tailorProfileBodyDisclaimer, {
       PH1: UI.XLink.XLink.create(CONTENT_POLICY_URL, i18nString(UIStrings.contentPolicy), 'link', undefined, 'gdp.content-policy'),
       PH2: UI.XLink.XLink.create(TERMS_OF_SERVICE_URL, i18nString(UIStrings.termsOfService), 'link',
         undefined, 'gdp.terms-of-service'),
       PH3: UI.XLink.XLink.create(PRIVACY_POLICY_URL, i18nString(UIStrings.privacyPolicy), 'link',
         undefined, 'gdp.privacy-policy'),
     })}</div>
+            </div>
           </div>
         </div>
       </div>
       <div class="buttons">
         <devtools-button
+          aria-label=${i18nString(UIStrings.learnMoreAccessibleText)}
+          .title=${i18nString(UIStrings.learnMoreAccessibleText)}
           .variant=${Buttons.Button.Variant.OUTLINED}
           .jslogContext=${'learn-more'}
           @click=${() => UI.UIUtils.openInNewTab(GDP_PROGRAM_URL as Platform.DevToolsPath.UrlString)}>${i18nString(UIStrings.learnMore)}</devtools-button>
@@ -180,10 +193,12 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
   #dialog: UI.Dialog.Dialog;
   #keepMeUpdated = false;
   #isSigningUp = false;
+  #onSuccess?: () => void;
 
-  constructor(options: {dialog: UI.Dialog.Dialog}, view?: View) {
+  constructor(options: {dialog: UI.Dialog.Dialog, onSuccess?: () => void}, view?: View) {
     super();
     this.#dialog = options.dialog;
+    this.#onSuccess = options.onSuccess;
     this.#view = view ?? DEFAULT_VIEW;
     this.requestUpdate();
   }
@@ -202,6 +217,7 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
       Common.Settings.Settings.instance().moduleSetting('receive-gdp-badges').set(true);
       await Badges.UserBadges.instance().initialize();
       Badges.UserBadges.instance().recordAction(Badges.BadgeAction.GDP_SIGN_UP_COMPLETE);
+      this.#onSuccess?.();
       this.#dialog.hide();
     } else {
       Snackbars.Snackbar.Snackbar.show({message: i18nString(UIStrings.signUpFailed)}, this.#dialog.contentElement);
@@ -227,14 +243,14 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
     this.#view(viewInput, undefined, this.contentElement);
   }
 
-  static show(): void {
+  static show({onSuccess}: {onSuccess?: () => void} = {}): void {
     const dialog = new UI.Dialog.Dialog();
     dialog.setAriaLabel(i18nString(UIStrings.gdpDialogAriaLabel));
     dialog.setMaxContentSize(new Geometry.Size(384, 500));
     dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
     dialog.setDimmed(true);
 
-    new GdpSignUpDialog({dialog}).show(dialog.contentElement);
+    new GdpSignUpDialog({dialog, onSuccess}).show(dialog.contentElement);
     dialog.show(undefined, /* stack */ true);
   }
 }

package/front_end/panels/common/gdpSignUpDialog.css

@@ -17,6 +17,10 @@
         background-repeat: no-repeat;
         background-size: contain;
         margin: 0;
+
+        &:focus-visible {
+            outline: 2px solid var(--sys-color-state-focus-ring);
+        }
     }
 
     :host-context(.theme-with-dark-background) & .gdp-sign-up-dialog-header {

package/front_end/panels/console/ConsoleView.ts

@@ -322,7 +322,7 @@ export class ConsoleView extends UI.Widget.VBox implements
   private buildHiddenCacheTimeout?: number;
   private searchShouldJumpBackwards?: boolean;
   private searchProgressIndicator?: UI.ProgressIndicator.ProgressIndicator;
-  private innerSearchTimeoutId?: number;
+  #searchTimeoutId?: number;
   private muteViewportUpdates?: boolean;
   private waitForScrollTimeout?: number;
   private issueCounter: IssueCounter.IssueCounter.IssueCounter;
@@ -1051,18 +1051,13 @@ export class ConsoleView extends UI.Widget.VBox implements
       return;
     }
 
-    // Track any adjacent messages.
-    const originatingMessage = viewMessage.consoleMessage().originatingMessage();
-    const adjacent = Boolean(originatingMessage && lastMessage?.consoleMessage() === originatingMessage);
-    viewMessage.setAdjacentUserCommandResult(adjacent);
-
-    // Ensure any parent groups for this message are shown.
     const currentGroup = viewMessage.consoleGroup();
-    showGroup(currentGroup, this.visibleViewMessages);
 
-    // Determine whether this message should actually be visible.
-    const shouldShowMessage = !currentGroup?.messagesHidden();
-    if (shouldShowMessage) {
+    if (!currentGroup?.messagesHidden()) {
+      const originatingMessage = viewMessage.consoleMessage().originatingMessage();
+      const adjacent = Boolean(originatingMessage && lastMessage?.consoleMessage() === originatingMessage);
+      viewMessage.setAdjacentUserCommandResult(adjacent);
+      showGroup(currentGroup, this.visibleViewMessages);
       this.visibleViewMessages.push(viewMessage);
       this.searchMessage(this.visibleViewMessages.length - 1);
     }
@@ -1216,8 +1211,8 @@ export class ConsoleView extends UI.Widget.VBox implements
     const stream = new Bindings.FileUtils.FileOutputStream();
 
     const progressIndicator = document.createElement('devtools-progress');
-    progressIndicator.setTitle(i18nString(UIStrings.writingFile));
-    progressIndicator.setTotalWork(this.itemCount());
+    progressIndicator.title = i18nString(UIStrings.writingFile);
+    progressIndicator.totalWork = this.itemCount();
 
     const chunkSize = 350;
 
@@ -1227,7 +1222,7 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.progressToolbarItem.element.appendChild(progressIndicator);
 
     let messageIndex = 0;
-    while (messageIndex < this.itemCount() && !progressIndicator.isCanceled()) {
+    while (messageIndex < this.itemCount() && !progressIndicator.canceled) {
       const messageContents = [];
       let i;
       for (i = 0; i < chunkSize && i + messageIndex < this.itemCount(); ++i) {
@@ -1236,11 +1231,11 @@ export class ConsoleView extends UI.Widget.VBox implements
       }
       messageIndex += i;
       await stream.write(messageContents.join('\n') + '\n');
-      progressIndicator.setWorked(messageIndex);
+      progressIndicator.worked = messageIndex;
     }
 
     void stream.close();
-    progressIndicator.done();
+    progressIndicator.done = true;
   }
 
   private async copyConsole(): Promise<void> {
@@ -1519,21 +1514,21 @@ export class ConsoleView extends UI.Widget.VBox implements
     }
 
     this.searchProgressIndicator = document.createElement('devtools-progress');
-    this.searchProgressIndicator.setTitle(i18nString(UIStrings.searching));
-    this.searchProgressIndicator.setTotalWork(this.visibleViewMessages.length);
+    this.searchProgressIndicator.title = i18nString(UIStrings.searching);
+    this.searchProgressIndicator.totalWork = this.visibleViewMessages.length;
     this.progressToolbarItem.element.appendChild(this.searchProgressIndicator);
 
-    this.innerSearch(0);
+    this.#search(0);
   }
 
   private cleanupAfterSearch(): void {
     delete this.searchShouldJumpBackwards;
-    if (this.innerSearchTimeoutId) {
-      clearTimeout(this.innerSearchTimeoutId);
-      delete this.innerSearchTimeoutId;
+    if (this.#searchTimeoutId) {
+      clearTimeout(this.#searchTimeoutId);
+      this.#searchTimeoutId = undefined;
     }
     if (this.searchProgressIndicator) {
-      this.searchProgressIndicator.done();
+      this.searchProgressIndicator.done = true;
       delete this.searchProgressIndicator;
     }
   }
@@ -1542,9 +1537,9 @@ export class ConsoleView extends UI.Widget.VBox implements
     // This method is sniffed in tests.
   }
 
-  private innerSearch(index: number): void {
-    delete this.innerSearchTimeoutId;
-    if (this.searchProgressIndicator?.isCanceled()) {
+  #search(index: number): void {
+    this.#searchTimeoutId = undefined;
+    if (this.searchProgressIndicator?.canceled) {
       this.cleanupAfterSearch();
       return;
     }
@@ -1566,9 +1561,9 @@ export class ConsoleView extends UI.Widget.VBox implements
       return;
     }
 
-    this.innerSearchTimeoutId = window.setTimeout(this.innerSearch.bind(this, index), 100);
+    this.#searchTimeoutId = window.setTimeout(this.#search.bind(this, index), 100);
     if (this.searchProgressIndicator) {
-      this.searchProgressIndicator.setWorked(index);
+      this.searchProgressIndicator.worked = index;
     }
   }
 

package/front_end/panels/console/ConsoleViewport.ts

@@ -435,13 +435,13 @@ export class ConsoleViewport {
 
   refresh(): void {
     this.observer.disconnect();
-    this.innerRefresh();
+    this.#refresh();
     if (this.#stickToBottom) {
       this.observer.observe(this.#contentElement, this.observerConfig);
     }
   }
 
-  private innerRefresh(): void {
+  #refresh(): void {
     if (!this.visibleHeight()) {
       return;
     }  // Do nothing for invisible controls.

package/front_end/panels/console/consoleView.css

@@ -325,14 +325,24 @@
 .console-view-object-properties-section {
   padding: 0;
   position: relative;
-  vertical-align: top;
   color: inherit;
   display: inline-block;
   overflow-wrap: break-word;
   max-width: 100%;
+  vertical-align: top;
   margin-top: -1.5px;
 }
 
+/* Console content is rendered in "Noto Sans Mono" on Linux, which has a
+ * different actual line-height than the fonts used on Windows or MacOS.
+ * "vertical-align: middle" breaks the layout when expanding an object such
+ * that it spans multiple lines. We therefore align to the top, and use a
+ * different "margin-top" on Linux to compensate for the line-height difference.
+ */
+.platform-linux .console-view-object-properties-section {
+  margin-top: 0;
+}
+
 .info-note {
   background-color: var(--sys-color-tonal-container);
 }

package/front_end/panels/coverage/CoverageView.ts

@@ -643,12 +643,12 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
           const view = UI.ViewManager.ViewManager.instance().view(coverageViewId);
           return view?.widget();
         })
-        .then(widget => this.innerHandleAction(widget as CoverageView, actionId));
+        .then(widget => this.#handleAction(widget as CoverageView, actionId));
 
     return true;
   }
 
-  private innerHandleAction(coverageView: CoverageView, actionId: string): void {
+  #handleAction(coverageView: CoverageView, actionId: string): void {
     switch (actionId) {
       case 'coverage.toggle-recording':
         coverageView.toggleRecording();

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1830,7 +1830,7 @@ export class ElementsTreeOutline extends
 
     console.assert(!treeElement.isClosingTag());
 
-    this.innerUpdateChildren(treeElement);
+    this.#updateChildren(treeElement);
   }
 
   insertChildElement(
@@ -1858,7 +1858,7 @@ export class ElementsTreeOutline extends
     }
   }
 
-  private innerUpdateChildren(treeElement: ElementsTreeElement): void {
+  #updateChildren(treeElement: ElementsTreeElement): void {
     if (this.treeElementsBeingUpdated.has(treeElement)) {
       return;
     }

package/front_end/panels/elements/StyleEditorWidget.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable rulesdir/no-imperative-dom-api */
 
-import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as ElementsComponents from './components/components.js';
@@ -120,7 +120,9 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   static createTriggerButton(
       pane: StylesSidebarPane, section: StylePropertiesSection, editorClass: {new(): Editor}, buttonTitle: string,
       triggerKey: string): HTMLElement {
-    const triggerButton = createButton(buttonTitle);
+    const triggerButton = IconButton.Icon.create('flex-wrap', 'styles-pane-button');
+    triggerButton.title = buttonTitle;
+    triggerButton.role = 'button';
 
     triggerButton.onclick = async event => {
       event.stopPropagation();
@@ -146,28 +148,15 @@ export class StyleEditorWidget extends UI.Widget.VBox {
         scrollerElement.addEventListener('scroll', onScroll);
       }
     };
+    triggerButton.onmouseup = event => {
+      // Stop propagation to prevent the property editor from being activated.
+      event.stopPropagation();
+    };
 
     return triggerButton;
   }
 }
 
-function createButton(buttonTitle: string): Buttons.Button.Button {
-  const button = new Buttons.Button.Button();
-  button.data = {
-    variant: Buttons.Button.Variant.ICON,
-    size: Buttons.Button.Size.SMALL,
-    iconName: 'flex-wrap',
-    title: buttonTitle,
-    jslogContext: 'flex-wrap',
-  };
-  button.classList.add('styles-pane-button');
-  button.onmouseup = event => {
-    // Stop propagation to prevent the property editor from being activated.
-    event.stopPropagation();
-  };
-  return button;
-}
-
 function ensureTreeElementForProperty(section: StylePropertiesSection, propertyName: string): StylePropertyTreeElement {
   const target = section.propertiesTreeOutline.rootElement().children().find(
       child => child instanceof StylePropertyTreeElement && child.property.name === propertyName);