chrome-devtools-frontend 1.0.1701636 → 1.0.1702515

package/front_end/panels/elements/components/CSSQuery.ts

@@ -171,7 +171,7 @@ export class CSSQuery extends HTMLElement {
           <slot name="indent"></slot>
           ${this.#queryPrefix ? html`<span>${this.#queryPrefix + ' '}</span>` : Lit.nothing}
           ${this.#queryName ? html`<span>${this.#queryName + ' '}</span>` : Lit.nothing}
-          ${queryText} {
+          ${queryText}<slot></slot> <span class="sidebar-pane-open-brace">{</span>
         </div>`,
         this.#shadow, {host: this});
     // clang-format on

package/front_end/panels/elements/components/cssQuery.css

@@ -16,3 +16,7 @@
   text-decoration: var(--override-styles-section-text-hover-text-decoration);
   cursor: var(--override-styles-section-text-hover-cursor);
 }
+
+:host-context(.collapsed):host(:has(devtools-icon)) .sidebar-pane-open-brace::after {
+  content: "}";
+}

package/front_end/panels/elements/elements.ts

@@ -81,7 +81,6 @@ export {
   DOMPath,
   DOMTreeContextMenu,
   DOMTreeWidget,
-  DOMTreeWidget as ElementsTreeOutline,
   ElementsPanel,
   ElementsSidebarPane,
   ElementStatePaneWidget,

package/front_end/panels/elements/stylesSidebarPane.css

@@ -115,6 +115,7 @@
   & .section-collapse-icon {
     width: var(--sys-size-6);
     height: var(--sys-size-6);
+    margin-block: calc(-1 * var(--sys-size-3));
     margin-right: var(--sys-size-2);
     margin-left: calc(-1 * var(--sys-size-2));
     vertical-align: middle;
@@ -122,6 +123,11 @@
     display: none;
   }
 
+  & .styles-section-status {
+    margin-block: calc(-1 * var(--sys-size-4));
+    vertical-align: middle;
+  }
+
   &.collapsible .section-collapse-icon {
     display: inline-block;
   }

package/front_end/panels/sources/ResourceOriginPlugin.ts

@@ -49,11 +49,15 @@ export class ResourceOriginPlugin extends Plugin {
         const url = uiSourceCode.url();
         const text = Bindings.ResourceUtils.displayNameForURL(url);
         const title = i18nString(UIStrings.sourceMappedFromS, {PH1: text});
-        links.push(Components.Linkifier.Linkifier.linkifyRevealable(
-            uiSourceCode, text, url, title, undefined, 'original-script-location'));
+        const link = Components.Linkifier.Linkifier.linkifyRevealable(uiSourceCode, text, url, title, undefined,
+                                                                      'original-script-location');
+        link.tabIndex = 0;
+        links.push(link);
       }
       for (const originURL of Bindings.SASSSourceMapping.SASSSourceMapping.uiSourceOrigin(this.uiSourceCode)) {
-        links.push(Components.Linkifier.Linkifier.linkifyURL(originURL));
+        const link = Components.Linkifier.Linkifier.linkifyURL(originURL);
+        link.tabIndex = 0;
+        links.push(link);
       }
       if (links.length === 0) {
         return [];
@@ -72,6 +76,7 @@ export class ResourceOriginPlugin extends Plugin {
     for (const script of debuggerWorkspaceBinding.scriptsForUISourceCode(this.uiSourceCode)) {
       if (script.originStackTrace?.callFrames.length) {
         const link = this.#linkifier.linkifyStackTraceTopFrame(script.debuggerModel.target(), script.originStackTrace);
+        link.tabIndex = 0;
         return [new UI.Toolbar.ToolbarItem(uiI18n.getFormatLocalizedString(str_, UIStrings.fromS, {PH1: link}))];
       }
     }

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -28,7 +28,6 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
@@ -38,7 +37,7 @@ import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
+import {html, type LitTemplate, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import scopeChainSidebarPaneStyles from './scopeChainSidebarPane.css.js';
@@ -89,9 +88,9 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     scope: SDK.DebuggerModel.ScopeChainEntry,
     objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree,
   }): TemplateResult => {
-    let emptyPlaceholder: Common.UIString.LocalizedString|undefined;
+    let emptyPlaceholder: LitTemplate|undefined;
     if (scope.type() === Protocol.Debugger.ScopeType.Local || scope.type() === Protocol.Debugger.ScopeType.Closure) {
-      emptyPlaceholder = i18nString(UIStrings.noVariables);
+      emptyPlaceholder = html`${i18nString(UIStrings.noVariables)}`;
     }
     const icon = scope.icon();
     const {title, subtitle} = scopeTitle(scope);