chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

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);
@@ -279,6 +280,96 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
                stylePropertyTreeElement.valueElement?.querySelectorAll('devtools-link-swatch');
            assert.strictEqual(animationNameSwatches?.length, 2);
          });
+
+      describe('jumping to animations panel', () => {
+        let domModel: SDK.DOMModel.DOMModel;
+        beforeEach(() => {
+          const target = createTarget();
+          const domModelBeforeAssertion = target.model(SDK.DOMModel.DOMModel);
+          assert.exists(domModelBeforeAssertion);
+          domModel = domModelBeforeAssertion;
+        });
+
+        afterEach(() => {
+          sinon.reset();
+        });
+
+        it('should render a jump-to icon when the animation with the given name exists for the node', async () => {
+          const stubAnimationGroup = sinon.createStubInstance(SDK.AnimationModel.AnimationGroup);
+          const getAnimationGroupForAnimationStub =
+              sinon.stub(SDK.AnimationModel.AnimationModel.prototype, 'getAnimationGroupForAnimation')
+                  .resolves(stubAnimationGroup);
+          const domNode = SDK.DOMModel.DOMNode.create(domModel, null, false, {
+            nodeId: 1 as Protocol.DOM.NodeId,
+            backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+            nodeType: Node.ELEMENT_NODE,
+            nodeName: 'div',
+            localName: 'div',
+            nodeValue: '',
+          });
+          const stylePropertyTreeElement = getTreeElement('animation-name', 'first-keyframe, second-keyframe');
+          sinon.stub(stylePropertyTreeElement, 'node').returns(domNode);
+
+          stylePropertyTreeElement.updateTitle();
+          await Promise.all(getAnimationGroupForAnimationStub.returnValues);
+
+          const jumpToIcon =
+              stylePropertyTreeElement.valueElement?.querySelector('devtools-icon.open-in-animations-panel');
+          assert.exists(jumpToIcon);
+        });
+
+        it('should clicking on the jump-to icon reveal the resolved animation group', async () => {
+          const stubAnimationGroup = sinon.createStubInstance(SDK.AnimationModel.AnimationGroup);
+          const revealerSpy = sinon.stub(Common.Revealer.RevealerRegistry.instance(), 'reveal');
+          const getAnimationGroupForAnimationStub =
+              sinon.stub(SDK.AnimationModel.AnimationModel.prototype, 'getAnimationGroupForAnimation')
+                  .resolves(stubAnimationGroup);
+          const domNode = SDK.DOMModel.DOMNode.create(domModel, null, false, {
+            nodeId: 1 as Protocol.DOM.NodeId,
+            backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+            nodeType: Node.ELEMENT_NODE,
+            nodeName: 'div',
+            localName: 'div',
+            nodeValue: '',
+          });
+          const stylePropertyTreeElement = getTreeElement('animation-name', 'first-keyframe, second-keyframe');
+          sinon.stub(stylePropertyTreeElement, 'node').returns(domNode);
+
+          stylePropertyTreeElement.updateTitle();
+          await Promise.all(getAnimationGroupForAnimationStub.returnValues);
+
+          const jumpToIcon =
+              stylePropertyTreeElement.valueElement?.querySelector('devtools-icon.open-in-animations-panel');
+          jumpToIcon?.dispatchEvent(new Event('mouseup'));
+          assert.isTrue(
+              revealerSpy.calledWith(stubAnimationGroup),
+              'Common.Revealer.reveal is not called for the animation group');
+        });
+
+        it('should not render a jump-to icon when the animation with the given name does not exist for the node',
+           async () => {
+             const getAnimationGroupForAnimationStub =
+                 sinon.stub(SDK.AnimationModel.AnimationModel.prototype, 'getAnimationGroupForAnimation')
+                     .resolves(null);
+             const domNode = SDK.DOMModel.DOMNode.create(domModel, null, false, {
+               nodeId: 1 as Protocol.DOM.NodeId,
+               backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+               nodeType: Node.ELEMENT_NODE,
+               nodeName: 'div',
+               localName: 'div',
+               nodeValue: '',
+             });
+             const stylePropertyTreeElement = getTreeElement('animation-name', 'first-keyframe, second-keyframe');
+             sinon.stub(stylePropertyTreeElement, 'node').returns(domNode);
+
+             stylePropertyTreeElement.updateTitle();
+             await Promise.all(getAnimationGroupForAnimationStub.returnValues);
+
+             const jumpToIcon =
+                 stylePropertyTreeElement.valueElement?.querySelector('devtools-icon.open-in-animations-panel');
+             assert.notExists(jumpToIcon);
+           });
+      });
     });
   });
 
@@ -698,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

@@ -96,7 +96,7 @@ const UIStrings = {
   /**
    *@description Context menu item for style property in edit mode
    */
-  revealInSourcesPanel: 'Reveal in Sources panel',
+  openInSourcesPanel: 'Open in Sources panel',
   /**
    *@description A context menu item in Styles panel to copy CSS declaration
    */
@@ -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();
@@ -757,6 +761,34 @@ export class LinkableNameRenderer implements MatchRenderer<LinkableNameMatch> {
       jslogContext,
     };
 
+    if (match.propertyName === LinkableNameProperties.ANIMATION ||
+        match.propertyName === LinkableNameProperties.ANIMATION_NAME) {
+      const el = document.createElement('span');
+      el.appendChild(swatch);
+
+      const node = this.#treeElement.node();
+      if (node) {
+        const animationModel = node.domModel().target().model(SDK.AnimationModel.AnimationModel);
+        void animationModel?.getAnimationGroupForAnimation(match.text, node.id).then(maybeAnimationGroup => {
+          if (!maybeAnimationGroup) {
+            return;
+          }
+
+          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);
+
+            void Common.Revealer.reveal(maybeAnimationGroup);
+          });
+          el.insertBefore(icon, swatch);
+        });
+      }
+      return [el];
+    }
+
     return [swatch];
   }
 
@@ -1679,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 {
@@ -1934,7 +1966,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
     const revealCallback = this.navigateToSource.bind(this) as () => void;
     contextMenu.defaultSection().appendItem(
-        i18nString(UIStrings.revealInSourcesPanel), revealCallback, {jslogContext: 'reveal-in-sources-panel'});
+        i18nString(UIStrings.openInSourcesPanel), revealCallback, {jslogContext: 'reveal-in-sources-panel'});
     void contextMenu.show();
   }
 

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

@@ -8,8 +8,6 @@ import '../../../ui/components/node_text/node_text.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
-import type * as NodeText from '../../../ui/components/node_text/node_text.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -288,11 +286,11 @@ export class ElementsBreadcrumbs extends HTMLElement {
           color: 'var(--sys-color-on-surface)',
           width: '12px',
           height: '10px',
-        } as IconButton.Icon.IconData}>
+        }}>
         </devtools-icon>
       </button>
       `;
-    // clang-format on
+          // clang-format on
   }
 
   #render(): void {
@@ -330,7 +328,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
                     nodeTitle: crumb.title.main,
                     nodeId: crumb.title.extras.id,
                     nodeClasses: crumb.title.extras.classes,
-                  } as NodeText.NodeText.NodeTextData}></devtools-node-text></a>
+                  }}></devtools-node-text></a>
                 </li>`;
             })}
           </ul>

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

@@ -11,7 +11,6 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import type * as NodeText from '../../../ui/components/node_text/node_text.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 // eslint-disable-next-line rulesdir/es_modules_import
 import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.js';
@@ -467,7 +466,7 @@ export class LayoutPane extends LegacyWrapper.LegacyWrapper.WrappableComponent {
             nodeId: element.domId,
             nodeTitle: element.name,
             nodeClasses: element.domClasses,
-          } as NodeText.NodeText.NodeTextData}></devtools-node-text>
+          }}></devtools-node-text>
         </span>
       </label>
       <label @keyup=${onColorLabelKeyUp} @keydown=${onColorLabelKeyDown} class="color-picker-label" style="background: ${element.color};" jslog=${VisualLogging.showStyleEditor('color').track({click: true})}>
@@ -482,7 +481,7 @@ export class LayoutPane extends LegacyWrapper.LegacyWrapper.WrappableComponent {
                                            .variant=${Buttons.Button.Variant.ICON}
                                            @click=${onElementClick}></devtools-button>
     </div>`;
-    // clang-format on
+            // clang-format on
   }
 
   #renderBooleanSetting(setting: BooleanSetting): LitHtml.TemplateResult {

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

@@ -6,8 +6,6 @@ import '../../../ui/components/icon_button/icon_button.js';
 import '../../../ui/components/node_text/node_text.js';
 
 import * as SDK from '../../../core/sdk/sdk.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
-import type * as NodeText from '../../../ui/components/node_text/node_text.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -97,7 +95,7 @@ export class QueryContainer extends HTMLElement {
         nodeTitle,
         nodeId: idToDisplay,
         nodeClasses: classesToDisplay,
-      } as NodeText.NodeText.NodeTextData}></devtools-node-text></a>
+      }}></devtools-node-text></a>
       ${this.#isContainerLinkHovered ? this.#renderQueriedSizeDetails() : LitHtml.nothing}
     `, this.#shadow, {
       host: this,
@@ -126,14 +124,14 @@ export class QueryContainer extends HTMLElement {
           class=${axisIconClasses} .data=${{
             iconName: 'width',
             color: 'var(--icon-default)',
-          } as IconButton.Icon.IconData}></devtools-icon>)
+          }}></devtools-icon>)
         ${areBothAxesQueried && this.#queriedSizeDetails.width ? 'width:' : LitHtml.nothing}
         ${this.#queriedSizeDetails.width || LitHtml.nothing}
         ${areBothAxesQueried && this.#queriedSizeDetails.height ? 'height:' : LitHtml.nothing}
         ${this.#queriedSizeDetails.height || LitHtml.nothing}
       </span>
     `;
-    // clang-format on
+            // clang-format on
   }
 }
 

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -275,3 +275,16 @@ devtools-css-angle,
 devtools-css-length {
   display: inline-block;
 }
+
+devtools-icon.open-in-animations-panel {
+  position: relative;
+  transform: scale(0.7);
+  margin: -5px -2px -3px -4px;
+  user-select: none;
+  color: var(--icon-css);
+  cursor: default;
+
+  &:hover {
+    color: var(--icon-css-hover);
+  }
+}

package/front_end/panels/emulation/components/DeviceSizeInputElement.ts

@@ -29,8 +29,6 @@ export class SizeInputElement extends HTMLElement {
   #title: Platform.UIString.LocalizedString;
   #jslogContext: string;
 
-  static readonly litTagName = LitHtml.literal`device-mode-emulation-size-input`;
-
   constructor(title: Platform.UIString.LocalizedString, {jslogContext}: {jslogContext: string}) {
     super();
     this.#title = title;

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -37,7 +37,7 @@ const UIStrings = {
   /**
    *@description A context menu item to reveal a node in the DOM tree of the Elements Panel
    */
-  revealInElementsPanel: 'Reveal in Elements panel',
+  openInElementsPanel: 'Open in Elements panel',
   /**
    *@description Text in Event Listeners Widget of the Elements panel
    */
@@ -340,7 +340,7 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
       }
       if (object.subtype === 'node') {
         menu.defaultSection().appendItem(
-            i18nString(UIStrings.revealInElementsPanel), () => Common.Revealer.reveal(object),
+            i18nString(UIStrings.openInElementsPanel), () => Common.Revealer.reveal(object),
             {jslogContext: 'reveal-in-elements'});
       }
       menu.defaultSection().appendItem(

package/front_end/panels/event_listeners/eventListenersView.css

@@ -8,7 +8,7 @@
   padding: 0 0 0 5px;
   overflow: hidden;
   display: flex;
-  min-height: 18px;
+  min-height: var(--sys-size-9);
   align-items: center;
 }
 
@@ -33,11 +33,12 @@
 
 .event-listener-details {
   display: flex;
-  min-height: 18px;
+  min-height: var(--sys-size-9);
   align-items: center;
+  gap: var(--sys-size-2);
 
   devtools-button {
-    height: 18px;
+    height: var(--sys-size-8);
   }
 }
 

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

@@ -13,7 +13,10 @@ import {describeWithEnvironment, getGetHostConfigStub} from '../../../testing/En
 import * as Explain from '../explain.js';
 
 describeWithEnvironment('ConsoleInsight', () => {
+  let component: Explain.ConsoleInsight|undefined;
+
   afterEach(() => {
+    component?.remove();
     Common.Settings.settingForTest('console-insights-enabled').set(true);
     Common.Settings.settingForTest('console-insights-onboarding-finished').set(true);
   });
@@ -52,9 +55,9 @@ describeWithEnvironment('ConsoleInsight', () => {
     await new Promise(resolve => setTimeout(resolve, 0));
   }
 
-  it('shows opt-in teaser when setting is disabled', async () => {
+  it('shows opt-in teaser when setting is turned off', async () => {
     Common.Settings.settingForTest('console-insights-enabled').set(false);
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -67,6 +70,51 @@ describeWithEnvironment('ConsoleInsight', () => {
     );
   });
 
+  it('shows opt-in teaser when blocked by age', async () => {
+    const stub = getGetHostConfigStub({
+      aidaAvailability: {
+        blockedByAge: true,
+      },
+      devToolsConsoleInsights: {
+        enabled: true,
+      },
+    });
+    component = new Explain.ConsoleInsight(
+        getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
+    renderElementIntoDOM(component);
+    await drainMicroTasks();
+    assert.isNotNull(component.shadowRoot);
+    assert.deepEqual(
+        getCleanTextContentFromElements(component.shadowRoot, 'main'),
+        [
+          'Turn on Console insights in Settings to receive AI assistance for understanding and addressing console warnings and errors. Learn more',
+        ],
+    );
+    stub.restore();
+  });
+
+  it('generates an explanation when the user logs in', async () => {
+    component = new Explain.ConsoleInsight(
+        getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL);
+    renderElementIntoDOM(component);
+    await drainMicroTasks();
+    assert.isNotNull(component.shadowRoot);
+    assert.deepEqual(
+        getCleanTextContentFromElements(component.shadowRoot, 'main'),
+        [
+          'This feature is only available when you sign into Chrome with your Google account.',
+        ],
+    );
+
+    const stub = sinon.stub(Host.AidaClient.AidaClient, 'checkAccessPreconditions')
+                     .returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.AVAILABLE));
+    Host.AidaClient.HostConfigTracker.instance().dispatchEventToListeners(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED);
+    await drainMicroTasks();
+    assert.deepEqual(getCleanTextContentFromElements(component.shadowRoot, 'h2'), ['Explanation']);
+    stub.restore();
+  });
+
   it('shows opt-in teaser when setting is disabled via disabledCondition', async () => {
     const setting = Common.Settings.settingForTest('console-insights-enabled');
     setting.setRegistration({
@@ -77,7 +125,7 @@ describeWithEnvironment('ConsoleInsight', () => {
         return {disabled: true, reason: 'disabled for test'};
       },
     });
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -98,7 +146,7 @@ describeWithEnvironment('ConsoleInsight', () => {
 
   it('shows reminder on first run of console insights', async () => {
     Common.Settings.settingForTest('console-insights-onboarding-finished').set(false);
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -118,7 +166,7 @@ describeWithEnvironment('ConsoleInsight', () => {
     const stub = getGetHostConfigStub({});
     const actionTaken = sinon.stub(Host.userMetrics, 'actionTaken');
     const aidaClient = getTestAidaClient();
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), aidaClient, Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -158,7 +206,7 @@ describeWithEnvironment('ConsoleInsight', () => {
         enabled: true,
       },
     });
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -171,7 +219,7 @@ describeWithEnvironment('ConsoleInsight', () => {
   });
 
   it('report if the user is not logged in', async () => {
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -180,7 +228,7 @@ describeWithEnvironment('ConsoleInsight', () => {
   });
 
   it('report if the navigator is offline', async () => {
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.NO_INTERNET);
     renderElementIntoDOM(component);
     await drainMicroTasks();