chrome-devtools-frontend 1.0.931927 → 1.0.932859

package/front_end/panels/sources/javaScriptBreakpointsSidebarPane.css

@@ -24,12 +24,62 @@
   background-color: var(--color-background-elevation-1);
 }
 
-.breakpoint-entry > .source-text {
+.breakpoint-entry > .decoration-and-source {
+  display: flex;
+}
+
+.breakpoint-entry .breakpoint {
+  content: var(--inline-breakpoint-enabled);
+  height: 12px;
+  top: 1px;
+  position: relative;
+  width: 11px;
+  margin-left: 3px;
+  margin-right: 3px;
+
+  --inline-breakpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%234285F4" stroke="%231A73E8"/></svg>');
+  --inline-breakpoint-disabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%234285F4" fill-opacity="0.2" stroke="%231A73E8"/></svg>');
+  --inline-conditional-breakpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.75489 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.75489 11.2583 6.29382 11.5 5.80138 11.5H0.5V0.5Z" fill="%23F29900" stroke="%23E37400"/><path d="M3.51074 7.75635H4.68408V9H3.51074V7.75635ZM4.68408 7.23779H3.51074V6.56104C3.51074 6.271 3.55615 6.02344 3.64697 5.81836C3.73779 5.61328 3.90039 5.39648 4.13477 5.16797L4.53027 4.77686C4.71484 4.59814 4.83936 4.4502 4.90381 4.33301C4.97119 4.21582 5.00488 4.09424 5.00488 3.96826C5.00488 3.77197 4.9375 3.62402 4.80273 3.52441C4.66797 3.4248 4.46582 3.375 4.19629 3.375C3.9502 3.375 3.69238 3.42773 3.42285 3.5332C3.15625 3.63574 2.88232 3.78955 2.60107 3.99463V2.81689C2.88818 2.65283 3.17822 2.52979 3.47119 2.44775C3.76709 2.36279 4.06299 2.32031 4.35889 2.32031C4.95068 2.32031 5.41504 2.45801 5.75195 2.7334C6.08887 3.00879 6.25732 3.38818 6.25732 3.87158C6.25732 4.09424 6.20752 4.30225 6.10791 4.49561C6.0083 4.68604 5.8208 4.91602 5.54541 5.18555L5.15869 5.56348C4.95947 5.75684 4.83203 5.91504 4.77637 6.03809C4.7207 6.16113 4.69287 6.31201 4.69287 6.49072C4.69287 6.51709 4.69141 6.54785 4.68848 6.58301C4.68848 6.61816 4.68701 6.65625 4.68408 6.69727V7.23779Z" fill="white"/></svg>');
+  --inline-conditional-breakpoint-disabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.75489 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.75489 11.2583 6.29382 11.5 5.80138 11.5H0.5V0.5Z" fill="%23F9AB00" fill-opacity="0.2" stroke="%23E37400"/><path d="M3.51074 7.75635H4.68408V9H3.51074V7.75635ZM4.68408 7.23779H3.51074V6.56104C3.51074 6.271 3.55615 6.02344 3.64697 5.81836C3.73779 5.61328 3.90039 5.39648 4.13477 5.16797L4.53027 4.77686C4.71484 4.59814 4.83936 4.4502 4.90381 4.33301C4.97119 4.21582 5.00488 4.09424 5.00488 3.96826C5.00488 3.77197 4.9375 3.62402 4.80273 3.52441C4.66797 3.4248 4.46582 3.375 4.19629 3.375C3.9502 3.375 3.69238 3.42773 3.42285 3.5332C3.15625 3.63574 2.88232 3.78955 2.60107 3.99463V2.81689C2.88818 2.65283 3.17822 2.52979 3.47119 2.44775C3.76709 2.36279 4.06299 2.32031 4.35889 2.32031C4.95068 2.32031 5.41504 2.45801 5.75195 2.7334C6.08887 3.00879 6.25732 3.38818 6.25732 3.87158C6.25732 4.09424 6.20752 4.30225 6.10791 4.49561C6.0083 4.68604 5.8208 4.91602 5.54541 5.18555L5.15869 5.56348C4.95947 5.75684 4.83203 5.91504 4.77637 6.03809C4.7207 6.16113 4.69287 6.31201 4.69287 6.49072C4.69287 6.51709 4.69141 6.54785 4.68848 6.58301C4.68848 6.61816 4.68701 6.65625 4.68408 6.69727V7.23779Z" fill="%23E37400"/></svg>');
+  --inline-logpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%23F439A0" stroke="%23D01884"/><circle cx="3" cy="6" r="1" fill="white"/><circle cx="7" cy="6" r="1" fill="white"/></svg>');
+  --inline-logpoint-disabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%23F439A0" fill-opacity="0.2" stroke="%23D01884"/><circle cx="3" cy="6" r="1" fill="%23D01884"/><circle cx="7" cy="6" r="1" fill="%23D01884"/></svg>');
+}
+
+.breakpoint-entry .breakpoint.disabled,
+.breakpoints-list-deactivated .breakpoint-entry .breakpoint {
+  content: var(--inline-breakpoint-disabled);
+}
+
+:host-context(.-theme-with-dark-background) .breakpoint-entry .breakpoint {
+  --inline-breakpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%235186EC" stroke="%231A73E8"/></svg>');
+  --inline-conditional-breakpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.75489 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.75489 11.2583 6.29382 11.5 5.80138 11.5H0.5V0.5Z" fill="%23e9a33a" stroke="%23E37400"/><path d="M3.51074 7.75635H4.68408V9H3.51074V7.75635ZM4.68408 7.23779H3.51074V6.56104C3.51074 6.271 3.55615 6.02344 3.64697 5.81836C3.73779 5.61328 3.90039 5.39648 4.13477 5.16797L4.53027 4.77686C4.71484 4.59814 4.83936 4.4502 4.90381 4.33301C4.97119 4.21582 5.00488 4.09424 5.00488 3.96826C5.00488 3.77197 4.9375 3.62402 4.80273 3.52441C4.66797 3.4248 4.46582 3.375 4.19629 3.375C3.9502 3.375 3.69238 3.42773 3.42285 3.5332C3.15625 3.63574 2.88232 3.78955 2.60107 3.99463V2.81689C2.88818 2.65283 3.17822 2.52979 3.47119 2.44775C3.76709 2.36279 4.06299 2.32031 4.35889 2.32031C4.95068 2.32031 5.41504 2.45801 5.75195 2.7334C6.08887 3.00879 6.25732 3.38818 6.25732 3.87158C6.25732 4.09424 6.20752 4.30225 6.10791 4.49561C6.0083 4.68604 5.8208 4.91602 5.54541 5.18555L5.15869 5.56348C4.95947 5.75684 4.83203 5.91504 4.77637 6.03809C4.7207 6.16113 4.69287 6.31201 4.69287 6.49072C4.69287 6.51709 4.69141 6.54785 4.68848 6.58301C4.68848 6.61816 4.68701 6.65625 4.68408 6.69727V7.23779Z" fill="white"/></svg>');
+  --inline-logpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%23E54D9B" stroke="%23D01884"/><circle cx="3" cy="6" r="1" fill="white"/><circle cx="7" cy="6" r="1" fill="white"/></svg>');
+}
+
+.breakpoint-entry .breakpoint-conditional {
+  content: var(--inline-conditional-breakpoint-enabled);
+}
+
+.breakpoint-entry .breakpoint-conditional.disabled,
+.breakpoints-list-deactivated .breakpoint-entry .breakpoint-conditional {
+  content: var(--inline-conditional-breakpoint-disabled);
+}
+
+.breakpoint-entry .logpoint {
+  content: var(--inline-logpoint-enabled);
+}
+
+.breakpoint-entry .logpoint.disabled,
+.breakpoints-list-deactivated .breakpoint-entry .logpoint {
+  content: var(--inline-logpoint-disabled);
+}
+
+.breakpoint-entry .source-text {
   cursor: pointer;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-  margin-left: 22px;
+  margin-left: 4px;
 }
 
 .breakpoints-list-deactivated {

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

@@ -17,6 +17,7 @@ declare global {
 export const enum Variant {
   PRIMARY = 'primary',
   SECONDARY = 'secondary',
+  TOOLBAR = 'toolbar',
 }
 
 export const enum Size {
@@ -24,21 +25,27 @@ export const enum Size {
   MEDIUM = 'MEDIUM',
 }
 
-interface ButtonData {
+interface ButtonState {
   iconUrl?: string;
   variant?: Variant;
   size?: Size;
 }
 
-export interface ButtonDataWithVariant extends ButtonData {
-  variant: Variant;
-}
+export type ButtonData = {
+  variant: Variant.TOOLBAR,
+  iconUrl: string,
+  size?: Size,
+}|{
+  variant: Variant.PRIMARY | Variant.SECONDARY,
+  iconUrl?: string,
+  size?: Size,
+};
 
 export class Button extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-button`;
   private readonly shadow = this.attachShadow({mode: 'open', delegatesFocus: true});
   private readonly boundRender = this.render.bind(this);
-  private readonly props: ButtonData = {
+  private readonly props: ButtonState = {
     size: Size.MEDIUM,
   };
   private isEmpty = true;
@@ -52,7 +59,7 @@ export class Button extends HTMLElement {
    * Perfer using the .data= setter instead of setting the individual properties
    * for increased type-safety.
    */
-  set data(data: ButtonDataWithVariant) {
+  set data(data: ButtonData) {
     this.props.variant = data.variant;
     this.props.iconUrl = data.iconUrl;
     this.props.size = data.size || Size.MEDIUM;
@@ -94,9 +101,18 @@ export class Button extends HTMLElement {
     if (!this.props.variant) {
       throw new Error('Button requires a variant to be defined');
     }
+    if (this.props.variant === Variant.TOOLBAR) {
+      if (!this.props.iconUrl) {
+        throw new Error('Toolbar button requires an icon');
+      }
+      if (!this.isEmpty) {
+        throw new Error('Tooblar 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,
       '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

@@ -21,13 +21,18 @@
   outline: none;
 }
 
+:host {
+  display: inline-flex;
+  flex-direction: row;
+}
+
 button {
   align-items: center;
   border-radius: 4px;
   display: inline-flex;
   font-family: inherit;
   font-size: 12px;
-  height: 25px;
+  height: 24px;
   line-height: 14px;
   padding: 5px 12px;
   justify-content: center;
@@ -47,6 +52,23 @@ button:hover {
   cursor: pointer;
 }
 
+button.toolbar {
+  background: transparent;
+  border-radius: 2px;
+  border: none;
+  cursor: pointer;
+  height: 24px;
+  width: 24px;
+  overflow: hidden;
+  padding: 0;
+  white-space: nowrap;
+}
+
+button.toolbar.small {
+  height: 18px;
+  width: 18px;
+}
+
 button.primary {
   border: 1px solid var(--color-primary);
   background: var(--color-primary);
@@ -86,6 +108,18 @@ 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:active {
+  background-color: var(--color-button-secondary-background-pressed);
+}
+
+button.toolbar:focus-visible {
+  background-color: var(--color-background-elevation-2);
+}
+
 button.text-with-icon {
   padding: 0 12px 0 4px;
 }
@@ -103,9 +137,11 @@ button devtools-icon {
   height: 19px;
 }
 
-button.small devtools-icon {
-  width: 14px;
-  height: 14px;
+button.toolbar devtools-icon {
+  width: 24px;
+  height: 24px;
+
+  --icon-color: var(--color-text-primary);
 }
 
 button.primary devtools-icon {
@@ -115,3 +151,13 @@ button.primary devtools-icon {
 button.secondary devtools-icon {
   --icon-color: var(--color-primary);
 }
+
+button.small devtools-icon {
+  width: 14px;
+  height: 14px;
+}
+
+button.toolbar.small devtools-icon {
+  width: 18px;
+  height: 18px;
+}

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

@@ -19,11 +19,39 @@
       #container > * {
         margin-right: 10px;
       }
+      #toolbar {
+        background-color: var(--color-background);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        border-bottom: 1px solid var(--color-details-hairline);
+        padding: 0px 5px;
+        height: 29px;
+      }
+      #small-toolbar {
+        background-color: var(--color-background);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        border-bottom: 1px solid var(--color-details-hairline);
+        padding: 0px 5px;
+        height: 23px;
+      }
+      .separator {
+        background-color: var(--color-details-hairline);
+        width: 1px;
+        height: 17px;
+        margin: 0px 5px;
+      }
     </style>
   </head>
   <body>
     <div id="container">
     </div>
+    <div id="toolbar">
+    </div>
+    <div id="small-toolbar">
+    </div>
     <script type="module" src="./basic.js"></script>
   </body>
 </html>

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

@@ -15,6 +15,14 @@ function appendButton(button: Buttons.Button.Button): void {
   document.querySelector('#container')?.appendChild(button);
 }
 
+function appendToToolbar(element: HTMLElement): void {
+  document.querySelector('#toolbar')?.appendChild(element);
+}
+
+function appendToSmallToolbar(element: HTMLElement): void {
+  document.querySelector('#small-toolbar')?.appendChild(element);
+}
+
 // Primary
 const primaryButton = new Buttons.Button.Button();
 primaryButton.data = {
@@ -62,13 +70,13 @@ primaryIconOnlyButton.data = {
   iconUrl: testIcon,
 };
 primaryIconOnlyButton.onclick = () => alert('clicked');
-primaryIconOnlyButton.style.width = '25px';
+primaryIconOnlyButton.style.width = '24px';
 appendButton(primaryIconOnlyButton);
 
 // Secondary Icon Only
 const secondaryIconOnlyButton = new Buttons.Button.Button();
 secondaryIconOnlyButton.onclick = () => alert('clicked');
-secondaryIconOnlyButton.style.width = '25px';
+secondaryIconOnlyButton.style.width = '24px';
 secondaryIconOnlyButton.data = {
   variant: Buttons.Button.Variant.SECONDARY,
   iconUrl: testIcon,
@@ -96,3 +104,36 @@ smallSecondaryIconOnlyButton.data = {
   size: Buttons.Button.Size.SMALL,
 };
 appendButton(smallSecondaryIconOnlyButton);
+
+for (let i = 0; i < 6; i++) {
+  // Regular Toolbar Button
+  const toolbarButton = new Buttons.Button.Button();
+  toolbarButton.onclick = () => alert('clicked');
+  toolbarButton.data = {
+    variant: Buttons.Button.Variant.TOOLBAR,
+    iconUrl: testIcon,
+  };
+  appendToToolbar(toolbarButton);
+  if (i % 3 === 1) {
+    const sep = document.createElement('div');
+    sep.classList.add('separator');
+    appendToToolbar(sep);
+  }
+}
+
+for (let i = 0; i < 6; i++) {
+  // Small Toolbar Button
+  const smallToolbarButton = new Buttons.Button.Button();
+  smallToolbarButton.onclick = () => alert('clicked');
+  smallToolbarButton.data = {
+    variant: Buttons.Button.Variant.TOOLBAR,
+    size: Buttons.Button.Size.SMALL,
+    iconUrl: testIcon,
+  };
+  appendToSmallToolbar(smallToolbarButton);
+  if (i % 3 === 1) {
+    const sep = document.createElement('div');
+    sep.classList.add('separator');
+    appendToSmallToolbar(sep);
+  }
+}

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -0,0 +1,69 @@
+// 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.
+
+import type * as Common from '../../../core/common/common.js';
+import * as ComponentHelpers from '../../components/helpers/helpers.js';
+import * as LitHtml from '../../lit-html/lit-html.js';
+
+import settingCheckboxStyles from './settingCheckbox.css.js';
+
+export interface SettingCheckboxData {
+  setting: Common.Settings.Setting<boolean>;
+}
+
+/**
+ * A simple checkbox that is backed by a boolean setting.
+ */
+export class SettingCheckbox extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`setting-checkbox`;
+  private readonly shadow = this.attachShadow({mode: 'open'});
+
+  private setting?: Common.Settings.Setting<boolean>;
+  private changeListenerDescriptor?: Common.EventTarget.EventDescriptor;
+
+  connectedCallback(): void {
+    this.shadow.adoptedStyleSheets = [settingCheckboxStyles];
+  }
+
+  set data(data: SettingCheckboxData) {
+    if (this.changeListenerDescriptor && this.setting) {
+      this.setting.removeChangeListener(this.changeListenerDescriptor.listener);
+    }
+
+    this.setting = data.setting;
+
+    this.changeListenerDescriptor = this.setting.addChangeListener(() => {
+      this.render();
+    });
+    this.render();
+  }
+
+  private render(): void {
+    if (!this.setting) {
+      throw new Error('No "Setting" object provided for rendering');
+    }
+
+    LitHtml.render(
+        LitHtml.html`
+      <p>
+        <label>
+          <input type="checkbox" ?checked=${this.setting.get()} @change="${this.checkboxChanged}" aria-label="${
+            this.setting.title()}" /> ${this.setting.title()}
+        </label>
+      </p>`,
+        this.shadow, {host: this});
+  }
+
+  private checkboxChanged(e: Event): void {
+    this.setting?.set((e.target as HTMLInputElement).checked);
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('setting-checkbox', SettingCheckbox);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'setting-checkbox': SettingCheckbox;
+  }
+}

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

@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+:host {
+  padding: 0;
+  margin: 0;
+}
+
+input {
+  height: 12px;
+  width: 12px;
+}
+
+label {
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+p {
+  margin: 12px 0;
+}
+
+/* Preserve look of legacy checkboxes in dark mode */
+:host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve) {
+  filter: invert(80%);
+}

package/front_end/ui/components/settings/settings.ts

@@ -0,0 +1,7 @@
+// 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.
+
+import * as SettingCheckbox from './SettingCheckbox.js';
+
+export {SettingCheckbox};

package/front_end/ui/components/text_editor/theme.ts

@@ -7,6 +7,9 @@ import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
 export const editorTheme = CM.EditorView.theme({
   '&.cm-editor': {
     color: 'color: var(--color-text-primary)',
+    '&.cm-focused': {
+      outline: 'none',
+    },
   },
 
   '.cm-scroller': {

package/front_end/ui/legacy/SettingsUI.ts

@@ -30,6 +30,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Settings from '../components/settings/settings.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import {InspectorView} from './InspectorView.js';
@@ -153,8 +154,11 @@ export const createControlForSetting = function(setting: Common.Settings.Setting
     null {
       const uiTitle = setting.title();
       switch (setting.type()) {
-        case Common.Settings.SettingType.BOOLEAN:
-          return createSettingCheckbox(uiTitle, (setting as Common.Settings.Setting<boolean>));
+        case Common.Settings.SettingType.BOOLEAN: {
+          const component = new Settings.SettingCheckbox.SettingCheckbox();
+          component.data = {setting: setting as Common.Settings.Setting<boolean>};
+          return component;
+        }
         case Common.Settings.SettingType.ENUM:
           if (Array.isArray(setting.options())) {
             return createSettingSelect(uiTitle, setting.options(), setting.reloadRequired(), setting, subtitle);

package/front_end/ui/legacy/components/color_picker/spectrum.css

@@ -425,6 +425,10 @@
   margin: 0;
   top: -5px;
   left: 3px;
+  border: 0;
+  border-radius: 1px;
+  width: 11px;
+  height: 11px;
 }
 
 .spectrum-palette-color:hover:not(.spectrum-shades-shown) > .spectrum-palette-color-shadow,

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -191,8 +191,6 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     const headerContainer = this.element.createChild('div', 'header-container');
     this.headerTable = headerContainer.createChild('table', 'header');
-    // Hide the header table from screen readers since titles are also added to data table.
-    UI.ARIAUtils.markAsHidden(this.headerTable);
     this.headerTableHeaders = {};
     this.scrollContainerInternal = this.element.createChild('div', 'data-container');
     this.dataTable = this.scrollContainerInternal.createChild('table', 'data');

package/front_end/ui/legacy/components/quick_open/filteredListWidget.css

@@ -139,6 +139,7 @@ devtools-text-prompt {
   line-height: 24px;
   height: 24px;
   align-self: center;
+  flex-shrink: 0;
 }
 
 .filtered-list-widget-item-wrapper.selected .filtered-list-widget-item span.highlight {

package/package.json

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