chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -59,15 +59,17 @@ enum SpecificPseudoStates {
   IN_RANGE = 'in-range',
   OUT_OF_RANGE = 'out-of-range',
   VISITED = 'visited',
+  LINK = 'link',
   CHECKED = 'checked',
   INDETERMINATE = 'indeterminate',
   PLACEHOLDER_SHOWN = 'placeholder-shown',
   AUTOFILL = 'autofill',
-}  // TODO(crbug.com/332914922): Also add :link and tests for :visited when the bug is fixed.
+}
 
 export class ElementStatePaneWidget extends UI.Widget.Widget {
   private readonly inputs: HTMLInputElement[];
   private readonly inputStates: WeakMap<HTMLInputElement, string>;
+  private readonly duals: Map<SpecificPseudoStates, SpecificPseudoStates>;
   private cssModel?: SDK.CSSModel.CSSModel|null;
   private specificPseudoStateDivs: Map<SpecificPseudoStates, HTMLDivElement>;
   private specificHeader: HTMLDetailsElement;
@@ -80,6 +82,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     const inputs: HTMLInputElement[] = [];
     this.inputs = inputs;
     this.inputStates = new WeakMap();
+    this.duals = new Map();
     const createSectionHeader = (title: string): HTMLDivElement => {
       const sectionHeaderContainer = document.createElement('div');
       sectionHeaderContainer.classList.add('section-header');
@@ -96,7 +99,12 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
       if (!state) {
         return;
       }
-      node.domModel().cssModel().forcePseudoState(node, state, event.target.checked);
+      const checked = event.target.checked;
+      const dual = this.duals.get(state as SpecificPseudoStates);
+      if (checked && dual) {
+        node.domModel().cssModel().forcePseudoState(node, dual, false);
+      }
+      node.domModel().cssModel().forcePseudoState(node, state, checked);
     };
     const createElementStateCheckbox = (state: string): HTMLDivElement => {
       const div = document.createElement('div');
@@ -110,7 +118,10 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
       div.appendChild(label);
       return div;
     };
-
+    const setDualStateCheckboxes = (first: SpecificPseudoStates, second: SpecificPseudoStates): void => {
+      this.duals.set(first, second);
+      this.duals.set(second, first);
+    };
     const createEmulateFocusedPageCheckbox = (): Element => {
       const div = document.createElement('div');
       div.classList.add('page-state-checkbox');
@@ -197,6 +208,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
         SpecificPseudoStates.OUT_OF_RANGE, createElementStateCheckbox(SpecificPseudoStates.OUT_OF_RANGE));
     this.specificPseudoStateDivs.set(
         SpecificPseudoStates.VISITED, createElementStateCheckbox(SpecificPseudoStates.VISITED));
+    this.specificPseudoStateDivs.set(SpecificPseudoStates.LINK, createElementStateCheckbox(SpecificPseudoStates.LINK));
     this.specificPseudoStateDivs.set(
         SpecificPseudoStates.CHECKED, createElementStateCheckbox(SpecificPseudoStates.CHECKED));
     this.specificPseudoStateDivs.set(
@@ -210,6 +222,13 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
       elementSpecificContainer.appendChild(div);
     });
 
+    setDualStateCheckboxes(SpecificPseudoStates.VALID, SpecificPseudoStates.INVALID);
+    setDualStateCheckboxes(SpecificPseudoStates.USER_VALID, SpecificPseudoStates.USER_INVALID);
+    setDualStateCheckboxes(SpecificPseudoStates.READ_ONLY, SpecificPseudoStates.READ_WRITE);
+    setDualStateCheckboxes(SpecificPseudoStates.IN_RANGE, SpecificPseudoStates.OUT_OF_RANGE);
+    setDualStateCheckboxes(SpecificPseudoStates.ENABLED, SpecificPseudoStates.DISABLED);
+    setDualStateCheckboxes(SpecificPseudoStates.VISITED, SpecificPseudoStates.LINK);
+
     this.specificHeader = document.createElement('details');
     this.specificHeader.classList.add('specific-details');
 
@@ -243,7 +262,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     this.registerCSSFiles([elementStatePaneWidgetStyles]);
     this.update();
   }
-  private update(): void {
+  override update(): void {
     let node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     if (node) {
       node = node.enclosingElementOrSelf();
@@ -287,6 +306,19 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
       return isElementOfTypes(node, ['input']) &&
           (node.getAttribute('type') === 'checkbox' || node.getAttribute('type') === 'radio');
     };
+    const isContentEditable = (node: SDK.DOMModel.DOMNode): boolean => {
+      return node.getAttribute('contenteditable') !== undefined ||
+          Boolean(node.parentNode && isContentEditable(node.parentNode));
+    };
+    const isDisabled = (node: SDK.DOMModel.DOMNode): boolean => {
+      return node.getAttribute('disabled') !== undefined;
+    };
+    const isMutable = (node: SDK.DOMModel.DOMNode): boolean => {
+      if (isElementOfTypes(node, ['input', 'textarea'])) {
+        return node.getAttribute('readonly') === undefined && !isDisabled(node);
+      }
+      return isContentEditable(node);
+    };
     // An autonomous custom element is called a form-associated custom element if the element is associated with a custom element definition whose form-associated field is set to true.
     // https://html.spec.whatwg.org/multipage/custom-elements.html#form-associated-custom-element
     const isFormAssociatedCustomElement = async(node: SDK.DOMModel.DOMNode): Promise<boolean> => {
@@ -300,8 +332,8 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
 
     if (isElementOfTypes(node, ['button', 'input', 'select', 'textarea', 'optgroup', 'option', 'fieldset']) ||
         isFormAssociated) {
-      hideSpecificCheckbox(SpecificPseudoStates.ENABLED, false);
-      hideSpecificCheckbox(SpecificPseudoStates.DISABLED, false);
+      hideSpecificCheckbox(SpecificPseudoStates.ENABLED, !isDisabled(node));
+      hideSpecificCheckbox(SpecificPseudoStates.DISABLED, isDisabled(node));
     } else {
       hideSpecificCheckbox(SpecificPseudoStates.ENABLED, true);
       hideSpecificCheckbox(SpecificPseudoStates.DISABLED, true);
@@ -319,8 +351,13 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     if (isElementOfTypes(node, ['input', 'select', 'textarea'])) {
       hideSpecificCheckbox(SpecificPseudoStates.USER_VALID, false);
       hideSpecificCheckbox(SpecificPseudoStates.USER_INVALID, false);
-      hideSpecificCheckbox(SpecificPseudoStates.REQUIRED, false);
-      hideSpecificCheckbox(SpecificPseudoStates.OPTIONAL, false);
+      if (node.getAttribute('required') === undefined) {
+        hideSpecificCheckbox(SpecificPseudoStates.REQUIRED, false);
+        hideSpecificCheckbox(SpecificPseudoStates.OPTIONAL, true);
+      } else {
+        hideSpecificCheckbox(SpecificPseudoStates.REQUIRED, true);
+        hideSpecificCheckbox(SpecificPseudoStates.OPTIONAL, false);
+      }
     } else {
       hideSpecificCheckbox(SpecificPseudoStates.USER_VALID, true);
       hideSpecificCheckbox(SpecificPseudoStates.USER_INVALID, true);
@@ -328,27 +365,11 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
       hideSpecificCheckbox(SpecificPseudoStates.OPTIONAL, true);
     }
 
-    if (isElementOfTypes(node, ['input', 'textarea'])) {
-      hideSpecificCheckbox(SpecificPseudoStates.READ_WRITE, false);
-    } else {
+    if (isMutable(node)) {
       hideSpecificCheckbox(SpecificPseudoStates.READ_WRITE, true);
-    }
-
-    if (isElementOfTypes(node, [
-          'button',
-          'datalist',
-          'fieldset',
-          'label',
-          'legend',
-          'meter',
-          'optgroup',
-          'option',
-          'output',
-          'progress',
-          'select',
-        ])) {
       hideSpecificCheckbox(SpecificPseudoStates.READ_ONLY, false);
     } else {
+      hideSpecificCheckbox(SpecificPseudoStates.READ_WRITE, false);
       hideSpecificCheckbox(SpecificPseudoStates.READ_ONLY, true);
     }
 
@@ -363,8 +384,10 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
 
     if (isElementOfTypes(node, ['a', 'area']) && node.getAttribute('href') !== undefined) {
       hideSpecificCheckbox(SpecificPseudoStates.VISITED, false);
+      hideSpecificCheckbox(SpecificPseudoStates.LINK, false);
     } else {
       hideSpecificCheckbox(SpecificPseudoStates.VISITED, true);
+      hideSpecificCheckbox(SpecificPseudoStates.LINK, true);
     }
 
     if (isInputWithTypeRadioOrCheckbox(node) || isElementOfTypes(node, ['option'])) {

package/front_end/panels/elements/ElementsSidebarPane.ts

@@ -6,7 +6,7 @@ import * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {ComputedStyleModel, Events, type ComputedStyleChangedEvent} from './ComputedStyleModel.js';
+import {type ComputedStyleChangedEvent, ComputedStyleModel, Events} from './ComputedStyleModel.js';
 
 export class ElementsSidebarPane extends UI.Widget.VBox {
   protected computedStyleModelInternal: ComputedStyleModel;
@@ -34,11 +34,11 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
     return this.computedStyleModelInternal;
   }
 
-  async doUpdate(): Promise<void> {
+  override async doUpdate(): Promise<void> {
     return;
   }
 
-  update(): void {
+  override update(): void {
     this.updateWhenVisible = !this.isShowing();
     if (this.updateWhenVisible) {
       return;

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -537,6 +537,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (this.contentElement && !this.aiButtonContainer) {
       this.aiButtonContainer = this.contentElement.createChild('span', 'ai-button-container');
       const floatingButton = new FloatingButton.FloatingButton.FloatingButton({
+        title: action.title(),
         iconName: 'smart-assistant',
       });
       floatingButton.addEventListener('click', ev => {
@@ -996,7 +997,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     removeZeroWidthSpaceRecursive(attribute);
 
     const config = new UI.InplaceEditor.Config(
-        this.attributeEditingCommitted.bind(this), this.editingCancelled.bind(this), attributeName || undefined);
+        this.attributeEditingCommitted.bind(this), this.editingCancelled.bind(this), attributeName);
 
     function postKeyDownFinishHandler(event: Event): string {
       UI.UIUtils.handleElementValueModifications(event, attribute);
@@ -1032,7 +1033,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       container.textContent = textNode.nodeValue();
     }  // Strip the CSS or JS highlighting if present.
     const config = new UI.InplaceEditor.Config(
-        this.textNodeEditingCommitted.bind(this, textNode), this.editingCancelled.bind(this));
+        this.textNodeEditingCommitted.bind(this, textNode), this.editingCancelled.bind(this), null);
     this.updateEditorHandles(textNodeElement, config);
     const componentSelection = this.listItemElement.getComponentSelection();
     componentSelection && componentSelection.selectAllChildren(textNodeElement);
@@ -1074,8 +1075,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     };
 
     function editingCommitted(
-        this: ElementsTreeElement, element: Element, newTagName: string, oldText: string, tagName: string|null,
-        moveDirection: string): void {
+        this: ElementsTreeElement,
+        element: Element,
+        newTagName: string,
+        oldText: string|null,
+        tagName: string|null,
+        moveDirection: string,
+        ): void {
       if (!tagNameElement) {
         return;
       }
@@ -1104,7 +1110,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     return true;
   }
 
-  private updateEditorHandles<T>(element: Element, config?: UI.InplaceEditor.Config<T>): void {
+  private updateEditorHandles<T>(element: Element, config: UI.InplaceEditor.Config<T>): void {
     const editorHandles = UI.InplaceEditor.InplaceEditor.startEditing(element, config);
     if (!editorHandles) {
       this.editing = null;
@@ -1241,7 +1247,12 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   private attributeEditingCommitted(
-      element: Element, newText: string, oldText: string, attributeName: string, moveDirection: string): void {
+      element: Element,
+      newText: string,
+      oldText: string|null,
+      attributeName: string|null,
+      moveDirection: string,
+      ): void {
     this.editing = null;
 
     const treeOutline = this.treeOutline;
@@ -1305,7 +1316,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       }
     }
 
-    if ((attributeName.trim() || newText.trim()) && oldText !== newText) {
+    if (attributeName !== null && (attributeName.trim() || newText.trim()) && oldText !== newText) {
       this.nodeInternal.setAttribute(attributeName, newText, moveToNextAttributeIfNeeded.bind(this));
       return;
     }
@@ -1315,7 +1326,12 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   private tagNameEditingCommitted(
-      element: Element, newText: string, oldText: string, tagName: string|null, moveDirection: string): void {
+      element: Element,
+      newText: string,
+      oldText: string|null,
+      tagName: string|null,
+      moveDirection: string,
+      ): void {
     this.editing = null;
     const self = this;
 
@@ -2267,9 +2283,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         false;
 
     const containerType = styles.get('container-type');
-    const contain = styles.get('contain');
-    const isContainer =
-        SDK.CSSContainerQuery.getQueryAxis(`${containerType} ${contain}`) !== SDK.CSSContainerQuery.QueryAxis.NONE;
+    const isContainer = containerType && containerType !== '' && containerType !== 'normal';
 
     if (isGrid) {
       this.pushGridAdorner(this.tagTypeContext, isSubgrid);

package/front_end/panels/elements/LayersWidget.ts

@@ -64,7 +64,7 @@ export class LayersWidget extends UI.Widget.Widget {
     return this.update();
   }
 
-  private async update(): Promise<void> {
+  override async update(): Promise<void> {
     if (!this.isShowing()) {
       return;
     }

package/front_end/panels/elements/MetricsSidebarPane.ts

@@ -428,7 +428,7 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
   }
 
   private applyUserInput(
-      element: Element, userInput: string, previousContent: string, context: {
+      element: Element, userInput: string, previousContent: string|null, context: {
         box: string,
         styleProperty: string,
         computedStyle: Map<string, string>,
@@ -519,12 +519,17 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
     }
   }
 
-  private editingCommitted(element: Element, userInput: string, previousContent: string, context: {
-    box: string,
-    styleProperty: string,
-    computedStyle: Map<string, string>,
-    keyDownHandler: (arg0: Event) => void,
-  }): void {
+  private editingCommitted(
+      element: Element,
+      userInput: string,
+      previousContent: string|null,
+      context: {
+        box: string,
+        styleProperty: string,
+        computedStyle: Map<string, string>,
+        keyDownHandler: (arg0: Event) => void,
+      },
+      ): void {
     this.editingEnded(element, context);
     this.applyUserInput(element, userInput, previousContent, context, true);
   }

package/front_end/panels/elements/PropertyMatchers.test.ts

@@ -280,6 +280,13 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
       assert.deepStrictEqual(
           match('animation', '1s linear var(--non-existent, --animation-name)'),
           ['--non-existent', '--animation-name']);
+      assert.deepStrictEqual(match('animation', '1s step-start 0s kf'), ['kf']);
+      assert.deepStrictEqual(match('animation', '1s step-end 0s kf'), ['kf']);
+      assert.deepStrictEqual(match('animation', '1s steps(1, jump-start) 0s kf'), ['kf']);
+      assert.deepStrictEqual(match('animation', '1s steps(1, jump-end) 0s kf'), ['kf']);
+      assert.deepStrictEqual(match('animation', '1s steps(1, jump-none) 0s kf'), ['kf']);
+      assert.deepStrictEqual(match('animation', '1s steps(1, start) 0s kf'), ['kf']);
+      assert.deepStrictEqual(match('animation', '1s steps(1, end) 0s kf'), ['kf']);
     }
   });
 

package/front_end/panels/elements/PropertyMatchers.ts

@@ -292,6 +292,9 @@ export class LinkableNameMatcher extends matcherBase(LinkableNameMatch) {
         'ease-in': AnimationLonghandPart.EASING_FUNCTION,
         'ease-out': AnimationLonghandPart.EASING_FUNCTION,
         'ease-in-out': AnimationLonghandPart.EASING_FUNCTION,
+        steps: AnimationLonghandPart.EASING_FUNCTION,
+        'step-start': AnimationLonghandPart.EASING_FUNCTION,
+        'step-end': AnimationLonghandPart.EASING_FUNCTION,
       }),
   );
 
@@ -439,6 +442,9 @@ export class ShadowMatcher extends matcherBase(ShadowMatch) {
       return null;
     }
     const valueNodes = ASTUtils.siblings(ASTUtils.declValue(node));
+    if (valueNodes.length === 0) {
+      return null;
+    }
     const valueText = matching.ast.textRange(valueNodes[0], valueNodes[valueNodes.length - 1]);
     return new ShadowMatch(
         valueText, node, matching.ast.propertyName === 'text-shadow' ? ShadowType.TEXT_SHADOW : ShadowType.BOX_SHADOW);

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -1303,8 +1303,13 @@ export class StylePropertiesSection {
   }
 
   private async editingMediaCommitted(
-      query: SDK.CSSQuery.CSSQuery, element: Element, newContent: string, _oldContent: string,
-      _context: Context|undefined, _moveDirection: string): Promise<void> {
+      query: SDK.CSSQuery.CSSQuery,
+      element: Element,
+      newContent: string,
+      _oldContent: string|null,
+      _context: Context|undefined,
+      _moveDirection: string,
+      ): Promise<void> {
     this.parentPane.setEditingStyle(false);
     this.editingMediaFinished(element);
 
@@ -1446,8 +1451,8 @@ export class StylePropertiesSection {
       element.textContent = textContent.replace(/\s+/g, ' ').trim();
     }
 
-    const config =
-        new UI.InplaceEditor.Config(this.editingSelectorCommitted.bind(this), this.editingSelectorCancelled.bind(this));
+    const config = new UI.InplaceEditor.Config(
+        this.editingSelectorCommitted.bind(this), this.editingSelectorCancelled.bind(this), undefined);
     UI.InplaceEditor.InplaceEditor.startEditing(this.selectorElement, config);
 
     const selection = element.getComponentSelection();
@@ -1490,8 +1495,12 @@ export class StylePropertiesSection {
   }
 
   editingSelectorCommitted(
-      element: Element, newContent: string, oldContent: string, context: Context|undefined,
-      moveDirection: string): void {
+      element: Element,
+      newContent: string,
+      oldContent: string|null,
+      context: Context|undefined,
+      moveDirection: string,
+      ): void {
     this.editingSelectorEnded();
     if (newContent) {
       newContent = newContent.trim();

package/front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -36,6 +36,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       '--garbage-space': 'this-is-garbage-text',
       '--prop': 'customproperty',
       '--zero': '0',
+      '--empty': '',
     };
 
     mockStylePropertiesSection = sinon.createStubInstance(Elements.StylePropertiesSection.StylePropertiesSection);
@@ -319,7 +320,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
 
         it('should clicking on the jump-to icon reveal the resolved animation group', async () => {
           const stubAnimationGroup = sinon.createStubInstance(SDK.AnimationModel.AnimationGroup);
-          const revealerSpy = sinon.spy(Common.Revealer.RevealerRegistry.instance(), 'reveal');
+          const revealerSpy = sinon.stub(Common.Revealer.RevealerRegistry.instance(), 'reveal');
           const getAnimationGroupForAnimationStub =
               sinon.stub(SDK.AnimationModel.AnimationModel.prototype, 'getAnimationGroupForAnimation')
                   .resolves(stubAnimationGroup);
@@ -788,6 +789,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       assert.deepStrictEqual(
           await matchProperty('var(--no, var(--no2))'),
           {hasUnresolvedVars: true, computedText: 'color: var(--no, var(--no2))'});
+      assert.deepStrictEqual(await matchProperty(''), {hasUnresolvedVars: false, computedText: 'color:'});
     });
 
     it('layers correctly with the font renderer', () => {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -141,6 +141,10 @@ const UIStrings = {
    *@description A context menu item in Styles panel to copy all declarations of CSS rule as JavaScript properties.
    */
   copyAllCssDeclarationsAsJs: 'Copy all declarations as JS',
+  /**
+   *@description Title of the link in Styles panel to jump to the Animations panel.
+   */
+  jumpToAnimationsPanel: 'Jump to Animations panel',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/StylePropertyTreeElement.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -259,7 +263,7 @@ export class VariableRenderer implements MatchRenderer<SDK.CSSPropertyParser.Var
     const renderedFallback = match.fallback.length > 0 ? Renderer.render(match.fallback, context) : undefined;
 
     const {declaration, value: variableValue} = this.resolveVariable(match) ?? {};
-    const fromFallback = !variableValue;
+    const fromFallback = variableValue === undefined;
     const computedValue = variableValue ?? this.fallbackValue(match);
 
     const varSwatch = new InlineEditor.LinkSwatch.CSSVarSwatch();
@@ -770,9 +774,10 @@ export class LinkableNameRenderer implements MatchRenderer<LinkableNameMatch> {
             return;
           }
 
-          const icon = IconButton.Icon.create('open-externally', 'open-in-animations-panel');
+          const icon = IconButton.Icon.create('animation', 'open-in-animations-panel');
           icon.setAttribute('jslog', `${VisualLogging.link('open-in-animations-panel').track({click: true})}`);
           icon.setAttribute('role', 'button');
+          icon.setAttribute('title', i18nString(UIStrings.jumpToAnimationsPanel));
           icon.addEventListener('mouseup', ev => {
             ev.consume(true);
 
@@ -1706,7 +1711,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         })]);
 
     const decl = SDK.CSSPropertyParser.ASTUtils.siblings(SDK.CSSPropertyParser.ASTUtils.declValue(matching.ast.tree));
-    return matching.getComputedTextRange(decl[0], decl[decl.length - 1]);
+    return decl.length > 0 ? matching.getComputedTextRange(decl[0], decl[decl.length - 1]) : '';
   }
 
   refreshIfComputedValueChanged(): void {

package/front_end/panels/elements/classesPaneWidget.css

@@ -16,7 +16,7 @@
   justify-content: flex-start;
 }
 
-.styles-element-classes-pane [is="dt-checkbox"] {
+.styles-element-classes-pane dt-checkbox {
   margin-right: 15px;
 }
 

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -281,10 +281,10 @@ devtools-icon.open-in-animations-panel {
   transform: scale(0.7);
   margin: -5px -2px -3px -4px;
   user-select: none;
-  color: var(--icon-default);
+  color: var(--icon-css);
   cursor: default;
 
   &:hover {
-    color: var(--icon-default-hover);
+    color: var(--icon-css-hover);
   }
 }

package/front_end/panels/emulation/DeviceModeView.ts

@@ -598,7 +598,7 @@ export class Ruler extends UI.Widget.VBox {
     void this.throttler.schedule(this.update.bind(this));
   }
 
-  private update(): Promise<void> {
+  override update(): Promise<void> {
     const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
     const size = this.horizontal ? this.contentElementInternal.offsetWidth : this.contentElementInternal.offsetHeight;
 

package/front_end/panels/emulation/DeviceModeWrapper.ts

@@ -80,7 +80,7 @@ export class DeviceModeWrapper extends UI.Widget.VBox {
     this.captureScreenshot(false, clip);
   }
 
-  private update(force: boolean): void {
+  override update(force?: boolean): void {
     this.toggleDeviceModeAction.setToggled(this.showDeviceModeSetting.get());
     if (!force) {
       const showing = this.deviceModeView && this.deviceModeView.isShowing();

package/front_end/panels/emulation/InspectedPagePlaceholder.ts

@@ -63,7 +63,7 @@ export class InspectedPagePlaceholder extends Common.ObjectWrapper.eventMixin<Ev
     return {x: left, y: top, width: right - left, height: bottom - top};
   }
 
-  update(force?: boolean): void {
+  override update(force?: boolean): void {
     delete this.updateId;
     const rect = this.dipPageRect();
     const bounds = {

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -8,7 +8,6 @@ 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 Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
@@ -95,9 +94,9 @@ const UIStrings = {
    */
   notLoggedIn: 'This feature is only available when you sign into Chrome with your Google account.',
   /**
-   * @description The title of the button that opens Chrome settings.
+   * @description The title of a button which opens the Chrome SignIn page.
    */
-  updateSettings: 'Update Settings',
+  signIn: 'Sign in',
   /**
    * @description The header shown when the internet connection is not
    * available.
@@ -168,7 +167,7 @@ const CODE_SNIPPET_WARNING_URL = 'https://support.google.com/legal/answer/135054
 const LEARNMORE_URL = 'https://goo.gle/devtools-console-messages-ai' as Platform.DevToolsPath.UrlString;
 const REPORT_URL = 'https://support.google.com/legal/troubleshooter/1114905?hl=en#ts=1115658%2C13380504' as
     Platform.DevToolsPath.UrlString;
-const CHROME_SETTINGS_URL = 'chrome://settings' as Platform.DevToolsPath.UrlString;
+const SIGN_IN_URL = 'https://accounts.google.com' as Platform.DevToolsPath.UrlString;
 
 const enum State {
   INSIGHT = 'insight',
@@ -529,17 +528,8 @@ export class ConsoleInsight extends HTMLElement {
     }
   }
 
-  #onGoToChromeSettings(): void {
-    const rootTarget = SDK.TargetManager.TargetManager.instance().rootTarget();
-    if (rootTarget === null) {
-      return;
-    }
-    const url = CHROME_SETTINGS_URL;
-    void rootTarget.targetAgent().invoke_createTarget({url}).then(result => {
-      if (result.getError()) {
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(url);
-      }
-    });
+  #onGoToSignIn(): void {
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(SIGN_IN_URL);
   }
 
   #focusHeader(): void {
@@ -594,7 +584,7 @@ export class ConsoleInsight extends HTMLElement {
         <main jslog=${jslog}>
           ${
             this.#state.validMarkdown ? html`<devtools-markdown-view
-              .data=${{tokens: this.#state.tokens, renderer: this.#renderer} as MarkdownView.MarkdownView.MarkdownViewData}>
+              .data=${{tokens: this.#state.tokens, renderer: this.#renderer, animationEnabled: true} as MarkdownView.MarkdownView.MarkdownViewData}>
             </devtools-markdown-view>`: this.#state.explanation
           }
           <details style="--list-height: ${(this.#state.sources.length + (this.#state.isPageReloadRecommended ? 1 : 0)) * 20}px;" jslog=${VisualLogging.expand('sources').track({click: true})}>
@@ -740,7 +730,7 @@ export class ConsoleInsight extends HTMLElement {
         <div class="filler"></div>
         <div>
           <devtools-button
-            @click=${this.#onGoToChromeSettings}
+            @click=${this.#onGoToSignIn}
             .data=${
               {
                 variant: Buttons.Button.Variant.PRIMARY,
@@ -748,7 +738,7 @@ export class ConsoleInsight extends HTMLElement {
               } as Buttons.Button.ButtonData
             }
           >
-            ${UIStrings.updateSettings}
+            ${UIStrings.signIn}
           </devtools-button>
         </div>
       </footer>`;