chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

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

@@ -76,6 +76,7 @@ export class ImagePreview {
         precomputedFeatures: (PrecomputedFeatures|undefined),
         imageAltText: (string|undefined),
         align: Align,
+        hideFileData?: boolean,
       }|undefined = {precomputedFeatures: undefined, imageAltText: undefined, align: Align.CENTER}):
       Promise<Element|null> {
     const {precomputedFeatures, imageAltText, align} = options;
@@ -118,10 +119,10 @@ export class ImagePreview {
         const container = shadowRoot.createChild('table');
         container.className = 'image-preview-container';
 
-        const imageRow = (container.createChild('tr').createChild('td', 'image-container') as HTMLTableDataCellElement);
+        const imageRow = container.createChild('tr').createChild('td', 'image-container');
         imageRow.colSpan = 2;
 
-        const link = (imageRow.createChild('div', ` ${align}`) as HTMLLinkElement);
+        const link = imageRow.createChild('div', ` ${align}`);
         link.title = displayName;
         link.appendChild(imageElement);
 
@@ -158,23 +159,25 @@ export class ImagePreview {
           }
         }
 
-        // File size
-        const fileRow = container.createChild('tr', 'row');
-        fileRow.createChild('td', `title ${align}`).textContent = i18nString(UIStrings.fileSize);
-        fileRow.createChild('td', 'description').textContent = resourceSizeText;
-
-        // Current source
-        const originalRow = container.createChild('tr', 'row');
-        originalRow.createChild('td', `title ${align}`).textContent = i18nString(UIStrings.currentSource);
-
-        const sourceText = Platform.StringUtilities.trimMiddle(imageURL, 100);
-        const sourceLink =
-            (originalRow.createChild('td', 'description description-link').createChild('span', 'source-link') as
-             HTMLLinkElement);
-        sourceLink.textContent = sourceText;
-        sourceLink.addEventListener('click', () => {
-          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(imageURL);
-        });
+        if (!options.hideFileData) {
+          // File size
+          const fileRow = container.createChild('tr', 'row');
+          fileRow.createChild('td', `title ${align}`).textContent = i18nString(UIStrings.fileSize);
+          fileRow.createChild('td', 'description').textContent = resourceSizeText;
+
+          // Current source
+          const originalRow = container.createChild('tr', 'row');
+          originalRow.createChild('td', `title ${align}`).textContent = i18nString(UIStrings.currentSource);
+
+          const sourceText = Platform.StringUtilities.trimMiddle(imageURL, 100);
+          const sourceLink =
+              (originalRow.createChild('td', 'description description-link').createChild('span', 'source-link') as
+               HTMLLinkElement);
+          sourceLink.textContent = sourceText;
+          sourceLink.addEventListener('click', () => {
+            Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(imageURL);
+          });
+        }
         resolve(shadowBoundary);
       }
     });

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

@@ -167,8 +167,7 @@ export function buildStackTracePreviewContents(
   element.classList.add('stack-preview-container');
   element.classList.toggle('width-constrained', options.widthConstrained);
   element.style.display = 'inline-block';
-  const shadowRoot =
-      UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: [jsUtilsStyles], delegatesFocus: undefined});
+  const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: [jsUtilsStyles]});
   const contentElement = shadowRoot.createChild('table', 'stack-preview-container');
   contentElement.classList.toggle('width-constrained', options.widthConstrained);
 
@@ -213,7 +212,7 @@ function renderStackTraceTable(
   tableSection = container.createChild('tfoot');
   const showAllRow = tableSection.createChild('tr', 'show-all-link');
   showAllRow.createChild('td');
-  const cell = showAllRow.createChild('td') as HTMLTableCellElement;
+  const cell = showAllRow.createChild('td');
   cell.colSpan = 4;
   const showAllLink = cell.createChild('span', 'link');
   // Don't directly put the text of the link in the DOM, as it will likely be
@@ -228,7 +227,7 @@ function renderStackTraceTable(
   }, false);
   const showLessRow = tableSection.createChild('tr', 'show-less-link');
   showLessRow.createChild('td');
-  const showLesscell = showLessRow.createChild('td') as HTMLTableCellElement;
+  const showLesscell = showLessRow.createChild('td');
   showLesscell.colSpan = 4;
   const showLessLink = showLesscell.createChild('span', 'link');
   showLessLink.createChild('span', 'css-inserted-text')

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

@@ -128,6 +128,7 @@ describeWithMockConnection('Linkifier', () => {
       endColumn: 10,
       executionContextId,
       hash: '',
+      buildId: '',
       isLiveEdit: false,
       sourceMapURL: undefined,
       hasSourceURL: false,
@@ -165,6 +166,7 @@ describeWithMockConnection('Linkifier', () => {
       endColumn: 10,
       executionContextId,
       hash: '',
+      buildId: '',
       isLiveEdit: false,
       sourceMapURL: undefined,
       hasSourceURL: false,
@@ -193,6 +195,7 @@ describeWithMockConnection('Linkifier', () => {
       endColumn: 10,
       executionContextId,
       hash: '',
+      buildId: '',
       isLiveEdit: false,
       sourceMapURL: undefined,
       hasSourceURL: false,
@@ -243,6 +246,7 @@ describeWithMockConnection('Linkifier', () => {
       endColumn: 10,
       executionContextId,
       hash: '',
+      buildId: '',
       isLiveEdit: false,
       sourceMapURL: undefined,
       hasSourceURL: false,

package/front_end/ui/legacy/components/utils/jsUtils.css

@@ -66,6 +66,14 @@
     overflow: hidden;
     text-overflow: ellipsis;
     padding-inline: 2px;
+
+    &.link {
+      overflow: visible;
+
+      & > button.text-button.devtools-link {
+        background-color: inherit;
+      }
+    }
   }
 
   &.width-constrained {

package/front_end/ui/legacy/dropTarget.css

@@ -6,10 +6,7 @@
 
 :host {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   display: flex;
   background-color: var(--color-background-opacity-80);
   z-index: 1000;

package/front_end/ui/legacy/filter.css

@@ -103,7 +103,7 @@
   position: relative;
 }
 
-.filter-checkbox-filter > [is="dt-checkbox"] {
+.filter-checkbox-filter > dt-checkbox {
   display: flex;
   margin: auto 0;
 }

package/front_end/ui/legacy/glassPane.css

@@ -6,10 +6,7 @@
 
 :host {
   position: absolute !important; /* stylelint-disable-line declaration-no-important */
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   overflow: hidden;
   contain: strict;
   background-color: transparent;
@@ -35,6 +32,7 @@
 }
 
 .arrow {
+  /* stylelint-disable-next-line custom-property-pattern */
   background-image: var(--image-file-popoverArrows);
   width: 19px;
   height: 19px;

package/front_end/ui/legacy/inspectorCommon.css

@@ -16,6 +16,8 @@
 :root {
   height: 100%;
   overflow: hidden;
+  /* stylelint-disable-next-line property-no-unknown */
+  interpolate-size: allow-keywords;
   /**
    * NOTE: please don't add to these colours!
    * We are migrating to a new set of theme colors (see below for details) and over time these colors will be deprecated / removed.
@@ -170,10 +172,7 @@ a img {
 
 .fill {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
 }
 
 iframe.fill {
@@ -226,10 +225,7 @@ iframe.widget {
   position: absolute;
   width: 100%;
   height: 100%;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  inset: 0;
 }
 
 .hidden {
@@ -337,15 +333,90 @@ input::placeholder {
     border-color: var(--sys-color-error);
   }
 
-  &:not(.error-input):not(:invalid):focus {
+  &:not(.error-input, :invalid):focus {
     border-color: var(--sys-color-state-focus-ring);
   }
 
-  &:not(.error-input):not(:invalid):hover:not(:focus) {
+  &:not(.error-input, :invalid):hover:not(:focus) {
     background: var(--sys-color-state-hover-on-subtle);
   }
 }
 
+/* Radio inputs */
+input[type="radio"] {
+  height: 17px;
+  width: 17px;
+  min-width: 17px;
+  border-radius: 8px;
+  vertical-align: sub;
+  margin: 0 5px 5px 0;
+  accent-color: var(--sys-color-primary-bright);
+  color: var(--sys-color-on-primary);
+
+  &:focus {
+    box-shadow: var(--legacy-focus-ring-active-shadow);
+  }
+}
+
+@media (forced-colors: active) {
+  input[type="radio"] {
+    --gradient-start: ButtonFace;
+    --gradient-end: ButtonFace;
+
+    &:checked {
+      --gradient-start: Highlight;
+      --gradient-end: Highlight;
+    }
+  }
+}
+
+/* Range inputs */
+input[type="range"] {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  height: 10px;
+  width: 88px;
+  outline: none;
+  background: none;
+}
+
+input[type="range"]::-webkit-slider-thumb,
+.-theme-preserve {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  width: 12px;
+  height: 12px;
+  margin-top: -5px;
+  border-radius: 50%;
+  background-color: var(--sys-color-primary);
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--sys-color-surface-variant);
+}
+
+input[type="range"]:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 2px var(--sys-color-inverse-primary);
+}
+
+input[type="range"]:disabled::-webkit-slider-thumb {
+  background-color: var(--sys-color-state-disabled);
+}
+
+@media (forced-colors: active) {
+  input[type="range"] {
+    forced-color-adjust: none;
+  }
+}
+
 .highlighted-search-result.current-search-result {
   /* Note: this value is used in light & dark mode */
   --override-current-search-result-background-color: rgb(255 127 0 / 80%);
@@ -392,7 +463,7 @@ input::placeholder {
   outline: none;
   padding: 0 var(--sys-size-9) 0 var(--sys-size-5);
   background-image: var(--combobox-dropdown-arrow);
-  background-color: var(--sys-color-surface);
+  background-color: transparent;
   background-position: right center;
   background-repeat: no-repeat;
 }
@@ -480,7 +551,7 @@ input::placeholder {
   white-space: nowrap;
 }
 
-span[is="dt-icon-label"] {
+dt-icon-label {
   flex: none;
 }
 
@@ -497,10 +568,7 @@ span[is="dt-icon-label"] {
   text-align: center;
   padding: 20px;
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   font-size: 13px;
   overflow: auto;
   z-index: 500;
@@ -564,7 +632,8 @@ span[is="dt-icon-label"] {
 }
 
 ::selection {
-  background-color: var(--sys-color-tonal-container);
+  background-color: var(--sys-color-state-text-highlight);
+  color: var(--sys-color-state-on-text-highlight);
 }
 
 button.link {
@@ -662,10 +731,7 @@ input.custom-search-input::-webkit-search-cancel-button:hover {
   display: flex;
   overflow: hidden;
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   z-index: 0;
   background-color: var(--sys-color-cdt-base-container);
 }

package/front_end/ui/legacy/inspectorViewTabbedPane.css

@@ -5,28 +5,9 @@
  */
 
 .tabbed-pane-header-tab {
-  height: 26px;
-  margin: 0;
-  border: none;
-  border-left: 2px solid transparent;
-  border-right: 2px solid transparent;
-
-  &.selected {
-    border-width: 0 2px;
-  }
-
   & > .tabbed-pane-header-tab-icon > devtools-icon {
     width: 14px;
     height: 14px;
     color: var(--icon-warning);
   }
 }
-
-.tabbed-pane-header-contents {
-  margin-left: 0;
-  min-width: min-content;
-}
-
-.tabbed-pane-left-toolbar {
-  margin-right: 0 !important; /* stylelint-disable-line declaration-no-important */
-}

package/front_end/ui/legacy/legacy.ts

@@ -18,7 +18,6 @@ import * as ForwardedInputEventHandler from './ForwardedInputEventHandler.js';
 import * as Fragment from './Fragment.js';
 import * as Geometry from './Geometry.js';
 import * as GlassPane from './GlassPane.js';
-import * as HistoryInput from './HistoryInput.js';
 import * as Infobar from './Infobar.js';
 import * as InplaceEditor from './InplaceEditor.js';
 import * as InspectorView from './InspectorView.js';
@@ -73,7 +72,6 @@ export {
   Fragment,
   Geometry,
   GlassPane,
-  HistoryInput,
   Infobar,
   InplaceEditor,
   InspectorView,

package/front_end/ui/legacy/listWidget.css

@@ -7,10 +7,13 @@
 .list {
   flex: auto 0 1;
   overflow-y: auto;
-  border: 1px solid var(--sys-color-divider);
   flex-direction: column;
 
   --override-background-list-item-color: hsl(0deg 0% 96%);
+
+  &:has(div) {
+    border: var(--sys-size-1) solid var(--sys-color-divider);
+  }
 }
 
 .theme-with-dark-background .list,

package/front_end/ui/legacy/reportView.css

@@ -54,15 +54,21 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+
+  devtools-button {
+    flex: 0 0 auto;
+  }
 }
 
 .report-section-title {
-  flex: auto;
+  flex: 1 1 auto;
   text-overflow: ellipsis;
   overflow: hidden;
   line-height: 16px;
   font-weight: bold;
   color: var(--sys-color-on-surface);
+  min-width: var(--sys-size-21);
+  white-space: nowrap;
 }
 
 .report-field {
@@ -74,7 +80,7 @@
 .report-row {
   margin: 10px 0 2px 18px;
 
-  &:has(span[is="dt-checkbox"]) {
+  &:has(dt-checkbox) {
     margin-top: 7px;
   }
 }

package/front_end/ui/legacy/rootView.css

@@ -8,8 +8,5 @@
   background-color: var(--sys-color-cdt-base-container);
   overflow: hidden;
   position: absolute !important; /* stylelint-disable-line declaration-no-important */
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
 }

package/front_end/ui/legacy/softDropDown.css

@@ -11,8 +11,7 @@
 .item-list {
   background-color: var(--sys-color-cdt-base-container);
   box-shadow: var(--drop-shadow);
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   width: 100%;
 }
 

package/front_end/ui/legacy/tabbedPane.css

@@ -116,11 +116,7 @@
   min-width: 14px;
   display: flex;
   align-items: center;
-  margin-right: 2px;
-}
-
-.tabbed-pane-header-tab-icon devtools-icon {
-  margin-left: -1px;
+  margin-right: var(--sys-size-2);
 }
 
 .tabbed-pane-header-tab-suffix-element {
@@ -129,23 +125,19 @@
 }
 
 .tabbed-pane-header-tab {
+  font: var(--sys-typescale-body4-medium);
+  color: var(--sys-color-on-surface-subtle);
+  height: var(--sys-size-12);
   float: left;
-  padding: 2px 0.8em;
-  height: 26px;
-  line-height: 16px;
+  padding: 0 10px;
   white-space: nowrap;
   cursor: default;
   display: flex;
   align-items: center;
-  color: var(--ui-text);
 }
 
 .tabbed-pane-header-tab.closeable {
-  padding-right: 4px;
-}
-
-.tabbed-pane-header-tab.preview.closeable {
-  padding-right: 5px;
+  padding-right: var(--sys-size-3);
 }
 
 .tabbed-pane-header-tab devtools-icon.dot::before {
@@ -190,7 +182,6 @@
 }
 
 .tabbed-pane-header-tab .tabbed-pane-close-button {
-  margin: 0 -3px 0 4px;
   visibility: hidden;
 }
 
@@ -295,10 +286,11 @@
 }
 
 .tabbed-pane-tab-slider {
-  height: 2px;
+  height: 3px;
   position: absolute;
   bottom: -1px;
-  background-color: var(--sys-color-primary-bright);
+  background-color: var(--sys-color-primary);
+  border-radius: var(--sys-shape-corner-full) var(--sys-shape-corner-full) 0 0;
   left: 0;
   transform-origin: 0 100%;
   transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
@@ -338,7 +330,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-left: 3px;
+  margin-left: var(--sys-size-2);
   flex-shrink: 0;
 }
 

package/front_end/ui/legacy/textButton.css

@@ -28,15 +28,15 @@
   background-color: var(--sys-color-state-hover-on-subtle);
 }
 
-.text-button:not(:disabled):not(.primary-button):focus-visible {
+.text-button:not(:disabled, .primary-button):focus-visible {
   outline: 2px solid var(--sys-color-state-focus-ring);
   color: var(--sys-color-on-primary);
   background-color: var(--sys-color-cdt-base-container);
 }
 
-.text-button:not(:disabled):not(.running):focus,
-.text-button:not(:disabled):not(.running):hover,
-.text-button:not(:disabled):not(.running):active {
+.text-button:not(:disabled, .running):focus,
+.text-button:not(:disabled, .running):hover,
+.text-button:not(:disabled, .running):active {
   color: var(--sys-color-primary);
 }
 
@@ -62,12 +62,12 @@
 }
 
 .text-button.primary-button:not(:disabled):active {
-  background-color: color-mix(in sRGB, var(--sys-color-primary), var(--sys-color-state-ripple-primary) 32%);
+  background-color: color-mix(in srgb, var(--sys-color-primary), var(--sys-color-state-ripple-primary) 32%);
   color: var(--sys-color-on-primary);
 }
 
 .text-button.primary-button:not(:disabled):hover {
-  background-color: color-mix(in sRGB, var(--sys-color-primary), var(--sys-color-state-hover-on-prominent) 6%);
+  background-color: color-mix(in srgb, var(--sys-color-primary), var(--sys-color-state-hover-on-prominent) 6%);
   color: var(--sys-color-on-primary);
 }