chrome-devtools-frontend 1.0.980472 → 1.0.982087

package/front_end/ui/components/buttons/Button.ts

@@ -18,6 +18,7 @@ export const enum Variant {
   PRIMARY = 'primary',
   SECONDARY = 'secondary',
   TOOLBAR = 'toolbar',
+  ROUND = 'round',
 }
 
 export const enum Size {
@@ -40,7 +41,7 @@ interface ButtonState {
 }
 
 export type ButtonData = {
-  variant: Variant.TOOLBAR,
+  variant: Variant.TOOLBAR|Variant.ROUND,
   iconUrl: string,
   size?: Size,
   disabled?: boolean,
@@ -199,10 +200,19 @@ export class Button extends HTMLElement {
         throw new Error('Tooblar button does not accept children');
       }
     }
+    if (this.#props.variant === Variant.ROUND) {
+      if (!this.#props.iconUrl) {
+        throw new Error('Round button requires an icon');
+      }
+      if (!this.#isEmpty) {
+        throw new Error('Round button does not accept children');
+      }
+    }
     const classes = {
       primary: this.#props.variant === Variant.PRIMARY,
       secondary: this.#props.variant === Variant.SECONDARY,
       toolbar: this.#props.variant === Variant.TOOLBAR,
+      round: this.#props.variant === Variant.ROUND,
       'text-with-icon': Boolean(this.#props.iconUrl) && !this.#isEmpty,
       'only-icon': Boolean(this.#props.iconUrl) && this.#isEmpty,
       small: Boolean(this.#props.size === Size.SMALL),

package/front_end/ui/components/buttons/button.css

@@ -49,7 +49,8 @@ button:focus-visible {
   box-shadow: 0 0 0 2px var(--color-button-outline-focus);
 }
 
-button.toolbar {
+button.toolbar,
+button.round {
   background: transparent;
   border-radius: 2px;
   border: none;
@@ -60,11 +61,22 @@ button.toolbar {
   white-space: nowrap;
 }
 
+button.round {
+  border-radius: 100%;
+  height: 30px;
+  width: 30px;
+}
+
 button.toolbar.small {
   height: 18px;
   width: 18px;
 }
 
+button.round.small {
+  height: 24px;
+  width: 24px;
+}
+
 button.primary {
   border: 1px solid var(--color-primary);
   background: var(--color-primary);
@@ -123,21 +135,27 @@ button.secondary:active:focus-visible {
   border: 1px solid var(--color-button-secondary-background-pressed);
 }
 
-button.toolbar:hover {
-  background-color: var(--color-button-secondary-background-hovering);
+button.toolbar:hover,
+button.round:hover {
+  background-color: var(--color-iconbutton-hover);
 }
 
 button.toolbar.active,
-button.toolbar:active {
-  background-color: var(--color-button-secondary-background-pressed);
+button.toolbar:active,
+button.round.active,
+button.round:active {
+  background-color: var(--color-iconbutton-pressed);
 }
 
-button.toolbar:focus-visible {
+button.toolbar:focus-visible,
+button.round:focus-visible {
   background-color: var(--color-background-elevation-2);
 }
 
 button.toolbar:disabled,
-button.toolbar:disabled:hover {
+button.toolbar:disabled:hover,
+button.round:disabled,
+button.round:disabled:hover {
   background: var(--color-background);
   color: var(--color-text-disabled);
   cursor: not-allowed;
@@ -160,7 +178,8 @@ button devtools-icon {
   height: 19px;
 }
 
-button.toolbar devtools-icon {
+button.toolbar devtools-icon,
+button.round devtools-icon {
   width: 24px;
   height: 24px;
 
@@ -180,7 +199,8 @@ button.small devtools-icon {
   height: 14px;
 }
 
-button.toolbar.small devtools-icon {
+button.toolbar.small devtools-icon,
+button.round.small devtools-icon {
   width: 18px;
   height: 18px;
 }
@@ -194,7 +214,8 @@ button.toolbar:hover devtools-icon {
   --icon-color: var(--color-text-primary);
 }
 
-button.toolbar:disabled devtools-icon {
+button.toolbar:disabled devtools-icon,
+button.round:disabled devtools-icon {
   --icon-color: var(--color-text-disabled);
 }
 

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

@@ -190,7 +190,7 @@ disabledPrimaryIconButton.data = {
 disabledPrimaryIconButton.onclick = () => alert('clicked');
 appendButton(disabledPrimaryIconButton);
 
-// Disabled Secondary Icon Only
+// Small Disabled Secondary Icon Only
 const disabledSecondaryIconOnlyButton = new Buttons.Button.Button();
 disabledSecondaryIconOnlyButton.onclick = () => alert('clicked');
 disabledSecondaryIconOnlyButton.style.width = '18px';
@@ -202,6 +202,50 @@ disabledSecondaryIconOnlyButton.data = {
 };
 appendButton(disabledSecondaryIconOnlyButton);
 
+// Round Button
+const roundButton = new Buttons.Button.Button();
+roundButton.data = {
+  variant: Buttons.Button.Variant.ROUND,
+  iconUrl: testIcon,
+};
+roundButton.title = 'Round Button';
+roundButton.onclick = () => alert('clicked');
+appendButton(roundButton);
+
+// Disabled Round Button
+const roundButtonDisabled = new Buttons.Button.Button();
+roundButtonDisabled.data = {
+  variant: Buttons.Button.Variant.ROUND,
+  iconUrl: testIcon,
+  disabled: true,
+};
+roundButtonDisabled.title = 'Disabled Round Button';
+roundButtonDisabled.onclick = () => alert('clicked');
+appendButton(roundButtonDisabled);
+
+// Small Round Button
+const smallRoundButton = new Buttons.Button.Button();
+smallRoundButton.data = {
+  variant: Buttons.Button.Variant.ROUND,
+  iconUrl: testIcon,
+  size: Buttons.Button.Size.SMALL,
+};
+smallRoundButton.title = 'Small Round Button';
+smallRoundButton.onclick = () => alert('clicked');
+appendButton(smallRoundButton);
+
+// Small Disabled Round Button
+const smallRoundButtonDisabled = new Buttons.Button.Button();
+smallRoundButtonDisabled.data = {
+  variant: Buttons.Button.Variant.ROUND,
+  iconUrl: testIcon,
+  disabled: true,
+  size: Buttons.Button.Size.SMALL,
+};
+smallRoundButtonDisabled.title = 'Small Disabled Round Button';
+smallRoundButtonDisabled.onclick = () => alert('clicked');
+appendButton(smallRoundButtonDisabled);
+
 for (let i = 0; i < 6; i++) {
   // Regular Toolbar Button
   const toolbarButton = new Buttons.Button.Button();
@@ -245,6 +289,7 @@ for (let i = 0; i < 6; i++) {
   }
 }
 
+// Submit Button
 const submitButton = new Buttons.Button.Button();
 submitButton.data = {
   variant: Buttons.Button.Variant.PRIMARY,
@@ -253,6 +298,7 @@ submitButton.data = {
 submitButton.innerText = 'Submit';
 document.querySelector('#form')?.append(submitButton);
 
+// Reset Button
 const resetButton = new Buttons.Button.Button();
 resetButton.data = {
   variant: Buttons.Button.Variant.SECONDARY,

package/front_end/ui/components/panel_feedback/FeedbackButton.ts

@@ -4,6 +4,7 @@
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
+import type * as Platform from '../../../core/platform/platform.js';
 import * as ComponentHelpers from '../../components/helpers/helpers.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as Buttons from '../buttons/buttons.js';
@@ -38,7 +39,9 @@ export class FeedbackButton extends HTMLElement {
   }
 
   #onFeedbackClick(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(this.#props.feedbackUrl);
+    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+        this.#props.feedbackUrl as Platform.DevToolsPath.UrlString);
   }
 
   #render(): void {

package/front_end/ui/legacy/XLink.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// TODO(crbug.com/1253323): Casts to UrlString will be removed from this file when migration to branded types is complete.
+
 import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as ComponentHelpers from '../components/helpers/helpers.js';
@@ -47,13 +49,15 @@ export class XLink extends XElement {
 
     this.onClick = (event: Event): void => {
       event.consume(true);
-      Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab((this.hrefInternal as string));
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+          (this.hrefInternal as Platform.DevToolsPath.UrlString));
       this.dispatchEvent(new Event('x-link-invoke'));
     };
     this.onKeyDown = (event: Event): void => {
       if (isEnterOrSpaceKey(event)) {
         event.consume(true);
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab((this.hrefInternal as string));
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+            (this.hrefInternal as Platform.DevToolsPath.UrlString));
       }
       this.dispatchEvent(new Event('x-link-invoke'));
     };
@@ -138,7 +142,8 @@ export class ContextMenuProvider implements Provider {
     const node: XLink = targetNode;
     contextMenu.revealSection().appendItem(openLinkExternallyLabel(), () => {
       if (node.href) {
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(node.href);
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+            node.href as Platform.DevToolsPath.UrlString);
       }
     });
     contextMenu.revealSection().appendItem(copyLinkAddressLabel(), () => {

package/front_end/ui/legacy/components/color_picker/ContrastDetails.ts

@@ -359,8 +359,10 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private static showHelp(): void {
+    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
-        UI.UIUtils.addReferrerToURL('https://web.dev/color-and-contrast-accessibility/'));
+        UI.UIUtils.addReferrerToURL('https://web.dev/color-and-contrast-accessibility/') as
+        Platform.DevToolsPath.UrlString);
   }
 
   setVisible(visible: boolean): void {

package/front_end/ui/legacy/components/utils/ImagePreview.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// TODO(crbug.com/1253323): Casts to UrlString will be removed from this file when migration to branded types is complete.
+
 import * as Common from '../../../../core/common/common.js';
 import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
@@ -113,7 +115,8 @@ export class ImagePreview {
 
         // Open image in new tab.
         link.addEventListener('click', () => {
-          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(imageURL);
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+              imageURL as Platform.DevToolsPath.UrlString);
         });
 
         const intrinsicWidth = imageElement.naturalWidth;
@@ -158,7 +161,8 @@ export class ImagePreview {
              HTMLLinkElement);
         sourceLink.textContent = sourceText;
         sourceLink.addEventListener('click', () => {
-          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(imageURL);
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+              imageURL as Platform.DevToolsPath.UrlString);
         });
         resolve(shadowBoundary);
       }

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -31,6 +31,7 @@
 import * as Common from '../../../../core/common/common.js';
 import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
+import type * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Bindings from '../../../../models/bindings/bindings.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
@@ -749,10 +750,12 @@ export class Linkifier implements SDK.TargetManager.Observer {
       }
     }
     if (resource || info.url) {
+      // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
       result.push({
         section: 'reveal',
         title: UI.UIUtils.openLinkExternallyLabel(),
-        handler: (): void => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(url),
+        handler: (): void => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+            url as Platform.DevToolsPath.UrlString),
       });
       result.push({
         section: 'clipboard',
@@ -916,7 +919,9 @@ export class ContentProviderContextMenuProvider implements UI.ContextMenu.Provid
     contextMenu.revealSection().appendItem(
         UI.UIUtils.openLinkExternallyLabel(),
         () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
-            contentUrl.endsWith(':formatted') ? contentUrl.slice(0, contentUrl.lastIndexOf(':')) : contentUrl));
+            contentUrl.endsWith(':formatted') ?
+                Common.ParsedURL.ParsedURL.slice(contentUrl, 0, contentUrl.lastIndexOf(':')) :
+                contentUrl));
     for (const title of linkHandlers.keys()) {
       const handler = linkHandlers.get(title);
       if (!handler) {

package/front_end/ui/legacy/tabbedPane.css

@@ -98,6 +98,7 @@
   pointer-events: none;
   margin-left: 0;
   position: relative;
+  cursor: default;
 }
 
 .tabbed-pane-header-contents > * {

package/front_end/ui/legacy/themeColors.css

@@ -127,6 +127,8 @@
   --color-button-secondary-background-hovering: rgb(26 115 232 / 10%);
   --color-button-secondary-background-pressed: rgb(26 92 178 / 25%);
   --color-button-secondary-border: rgb(218 220 224);
+  --color-iconbutton-hover: rgb(0 0 0 / 10%);
+  --color-iconbutton-pressed: rgb(0 0 0 / 15%);
 
   /* Colors for file icons */
   --color-ic-file-document: rgb(39 116 240);
@@ -273,6 +275,8 @@
   --color-button-secondary-background-hovering: rgb(138 180 248 / 15%);
   --color-button-secondary-background-pressed: rgb(138 180 248 / 23%);
   --color-button-secondary-border: rgb(60 61 65);
+  --color-iconbutton-hover: rgb(255 255 255 / 12%);
+  --color-iconbutton-pressed: rgb(255 255 255 / 20%);
 
   /* Colors for file icons */
   --color-ic-file-document: rgb(39 116 240);

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.980472"
+  "version": "1.0.982087"
 }