chrome-devtools-frontend 1.0.1021097 → 1.0.1021582

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -6,18 +6,80 @@ import * as i18n from '../../core/i18n/i18n.js';
 
 const UIStrings = {
   /**
-    *@description Hint for Align-content rule where element also has flex-wrap nowrap rule.
+    *@description Hint prefix for deprecated properties.
     */
-  alignContentRuleOnNoWrapFlex: 'This element has flex-wrap: nowrap rule, therefore \'align-content\' has no effect.',
+  deprecatedPropertyHintPrefix: 'Deprecated Property',
   /**
-    *@description Hint for element that does not have effect if parent container is not flex.
-    *@example {flex} PH1
+    *@description Hint prefix for rule validation.
     */
-  notFlexItemHint: 'Parent of this element is not flex container, therefore {PH1} property has no effect.',
-};
+  ruleValidationHintPrefix: 'Inactive rule',
+  /**
+    *@description Hint for rules that was violated because of same elements rule.
+    *@example {flex-wrap: nowrap} REASON_RULE_CODE
+    *@example {align-content} AFFECTED_RULE_CODE
+    */
+  ruleViolatedBySameElementRuleReason: 'This element has {REASON_RULE_CODE} rule, therefore {AFFECTED_RULE_CODE} has no effect.',
+  /**
+    *@description Possible fix for rules that was violated because of same elements rule.
+    *@example {flex-wrap: nowrap} REASON_RULE_CODE
+    */
+  ruleViolatedBySameElementRuleFix: 'For this property to work, please remove or change the value of {REASON_RULE_CODE}',
+  /**
+    *@description Hint for rules that was violated because of parent element rule.
+    *@example {display: block} REASON_RULE_CODE
+    *@example {flex} AFFECTED_RULE_CODE
+    */
+  ruleViolatedByParentElementRuleReason: 'Parent element has {REASON_RULE_CODE} rule, therefore this elements {AFFECTED_RULE_CODE} has no effect',
+  /**
+    *@description Posible fix for rules that was violated because of parent element rule.
+    *@example {display: block} EXISTING_PARENT_ELEMENT_RULE
+    *@example {display: flex} TARGET_PARENT_ELEMENT_RULE
+    */
+  ruleViolatedByParentElementRuleFix: 'Please change parent elements {EXISTING_PARENT_ELEMENT_RULE} to {TARGET_PARENT_ELEMENT_RULE} to fix this issue.',
+  };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/CSSRuleValidator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+export const enum AuthoringHintType {
+  RULE_VALIDATION = 'ruleValidation',
+  DEPRECATED_PROPERTY = 'deprecatedProperty',
+}
+
+export class AuthoringHint {
+  readonly #hintType: AuthoringHintType;
+  readonly #hintMessage: string;
+  readonly #possibleFixMessage: string|null;
+  readonly #learnMore: string|null;
+
+  constructor(property: string, hintType: AuthoringHintType, hintMessage: string, possibleFixMessage: string|null, showLearnMore: boolean) {
+    this.#hintType = hintType;
+    this.#hintMessage = hintMessage;
+    this.#possibleFixMessage = possibleFixMessage;
+    this.#learnMore = showLearnMore ? property : null; // TODO: Add Goo.gle short link base url
+  }
+
+  getHintPrefix(): string {
+    switch (this.#hintType) {
+      case AuthoringHintType.RULE_VALIDATION:
+        return i18nString(UIStrings.ruleValidationHintPrefix);
+      case AuthoringHintType.DEPRECATED_PROPERTY:
+        return i18nString(UIStrings.deprecatedPropertyHintPrefix);
+    }
+  }
+
+  getHintMessage(): string {
+    return this.#hintMessage;
+  }
+
+  getPossibleFixMessage(): string|null {
+    return this.#possibleFixMessage;
+  }
+
+  getLearnMoreLink(): string|null {
+    return this.#learnMore;
+  }
+}
+
 export abstract class CSSRuleValidator {
   readonly #affectedProperties: string[];
 
@@ -32,7 +94,7 @@ export abstract class CSSRuleValidator {
     return this.#affectedProperties;
   }
 
-  abstract getHintMessage(propertyName: string): string;
+  abstract getAuthoringHint(propertyName: string, parentComputedStyles: Map<String, String>|null): AuthoringHint;
 }
 
 export class AlignContentValidator extends CSSRuleValidator {
@@ -51,8 +113,22 @@ export class AlignContentValidator extends CSSRuleValidator {
     return computedStyles.get('flex-wrap') !== 'nowrap';
   }
 
-  getHintMessage(): string {
-    return i18nString(UIStrings.alignContentRuleOnNoWrapFlex);
+  getAuthoringHint(): AuthoringHint {
+    const reasonRuleCode = '<code class="unbreakable-text"><span class="property">flex-wrap</span>: nowrap</code>';
+    const affectedRuleCode = '<code class="unbreakable-text"><span class="property">align-content</span></code>';
+
+    return new AuthoringHint(
+      'align-content',
+      AuthoringHintType.RULE_VALIDATION,
+      i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+        'REASON_RULE_CODE': reasonRuleCode,
+        'AFFECTED_RULE_CODE': affectedRuleCode,
+      }),
+      i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+        'REASON_RULE_CODE': reasonRuleCode,
+      }),
+      true,
+    );
   }
 }
 
@@ -70,10 +146,24 @@ export class FlexItemValidator extends CSSRuleValidator {
     return parentDisplay === 'flex' || parentDisplay === 'inline-flex';
   }
 
-  getHintMessage(property: string): string {
-    return i18nString(UIStrings.notFlexItemHint, {
-      'PH1': property,
-    });
+  getAuthoringHint(property: string, parentsComputedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = '<code class="unbreakable-text"><span class="property">display</span>:' + parentsComputedStyles?.get('display') + '</code>';
+    const affectedRuleCode = '<code class="unbreakable-text"><span class="property">' + property + '</span></code>';
+    const targetParentRuleCode = '<code class="unbreakable-text"><span class="property">display</span>: flex</code>';
+
+    return new AuthoringHint(
+      property,
+      AuthoringHintType.RULE_VALIDATION,
+      i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
+        'REASON_RULE_CODE': reasonRuleCode,
+        'AFFECTED_RULE_CODE': affectedRuleCode,
+      }),
+      i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
+        'EXISTING_PARENT_ELEMENT_RULE': reasonRuleCode,
+        'TARGET_PARENT_ELEMENT_RULE': targetParentRuleCode,
+      }),
+      true,
+    );
   }
 }
 

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1538,7 +1538,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
 
     const nodeName = node ? node.nodeName().toLowerCase() : '';
-    if (nodeName && (name === 'src' || name === 'href')) {
+    // If the href/src attribute has a value, attempt to link it.
+    // There's no point trying to link it if the value is empty (e.g. <a href=''>).
+    if (nodeName && (name === 'src' || name === 'href') && value) {
       attrValueElement.appendChild(linkifyValue.call(this, value));
     } else if ((nodeName === 'img' || nodeName === 'source') && name === 'srcset') {
       attrValueElement.appendChild(linkifySrcset.call(this, value));

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -22,6 +22,7 @@ import type {StylePropertiesSection} from './StylePropertiesSection.js';
 import {CSSPropertyPrompt, StylesSidebarPane, StylesSidebarPropertyRenderer} from './StylesSidebarPane.js';
 import {getCssDeclarationAsJavascriptProperty} from './StylePropertyUtils.js';
 import {cssRuleValidatorsMap} from './CSSRuleValidator.js';
+import type {AuthoringHint} from './CSSRuleValidator.js';
 
 const FlexboxEditor = ElementsComponents.StylePropertyEditor.FlexboxEditor;
 const GridEditor = ElementsComponents.StylePropertyEditor.GridEditor;
@@ -715,11 +716,11 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       }
     }
 
-    const hintMessage = this.getHintMessage(this.computedStyles, this.parentsComputedStyles);
-    if (hintMessage !== null) {
+    const authoringHint = this.getAuthoringHint(this.computedStyles, this.parentsComputedStyles);
+    if (authoringHint !== null) {
       const hintIcon = UI.Icon.Icon.create('mediumicon-info', 'hint');
       const hintPopover =
-          new UI.PopoverHelper.PopoverHelper(hintIcon, event => this.handleHintPopoverRequest(hintMessage, event));
+          new UI.PopoverHelper.PopoverHelper(hintIcon, event => this.handleHintPopoverRequest(authoringHint, event));
       hintPopover.setHasPadding(true);
       hintPopover.setTimeout(0, 100);
 
@@ -817,8 +818,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         StylesSidebarPane.createExclamationMark(this.property, warnings.join(' ')), this.listItemElement.firstChild);
   }
 
-  private getHintMessage(computedStyles: Map<string, string>|null, parentComputedStyles: Map<string, string>|null):
-      string|null {
+  private getAuthoringHint(computedStyles: Map<string, string>|null, parentComputedStyles: Map<string, string>|null):
+      AuthoringHint|null {
     const propertyName = this.property.name;
 
     if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.CSS_AUTHORING_HINTS) ||
@@ -828,14 +829,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
     for (const validator of cssRuleValidatorsMap.get(propertyName) || []) {
       if (!validator.isRuleValid(computedStyles, parentComputedStyles)) {
-        return validator.getHintMessage(propertyName);
+        return validator.getAuthoringHint(propertyName, this.parentsComputedStyles);
       }
     }
 
     return null;
   }
 
-  private handleHintPopoverRequest(hintMessageContent: string, event: Event): UI.PopoverHelper.PopoverRequest|null {
+  private handleHintPopoverRequest(authoringHint: AuthoringHint, event: Event): UI.PopoverHelper.PopoverRequest|null {
     const link = event.composedPath()[0];
     Platform.DCHECK(() => link instanceof Element, 'Link is not an instance of Element');
 
@@ -846,7 +847,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         if (!node) {
           return false;
         }
-        popover.contentElement.insertAdjacentHTML('beforeend', hintMessageContent);
+        const popupElement = new ElementsComponents.CSSHintDetailsView.CSSHintDetailsView(authoringHint);
+        popover.contentElement.insertAdjacentElement('beforeend', popupElement);
         return true;
       },
     };

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

@@ -0,0 +1,71 @@
+// Copyright 2022 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 ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+
+import cssHintDetailsViewStyles from './cssHintDetailsView.css.js';
+
+const UIStrings = {
+  /**
+    *@description Text for button that redirects to CSS property documentation.
+    */
+    learnMore: 'Learn More',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/elements/components/CSSHintDetailsView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const {render, html, Directives} = LitHtml;
+
+interface Hint {
+    getHintPrefix(): string;
+    getHintMessage(): string;
+    getPossibleFixMessage(): string|null;
+    getLearnMoreLink(): string|null;
+}
+
+export class CSSHintDetailsView extends HTMLElement {
+    static readonly litTagName = LitHtml.literal`devtools-css-hint-details-view`;
+    readonly #shadow = this.attachShadow({mode: 'open'});
+    readonly #authoringHint: Hint;
+
+    constructor(authoringHint: Hint) {
+        super();
+        this.#authoringHint = authoringHint;
+        this.#shadow.adoptedStyleSheets = [cssHintDetailsViewStyles];
+        this.#render();
+    }
+
+    #render(): void {
+        render(html`
+            <div class="hint-popup-wrapper">
+                <div class="hint-popup-reason">
+                    <strong>${this.#authoringHint.getHintPrefix()}:</strong> ${Directives.unsafeHTML(this.#authoringHint.getHintMessage())}
+                </div>
+                ${this.#authoringHint.getPossibleFixMessage() ? html`
+                    <div class="hint-popup-possible-fix">
+                        ${Directives.unsafeHTML(this.#authoringHint.getPossibleFixMessage())}
+                        ${this.#authoringHint.getLearnMoreLink() ? html`
+                            <x-link id='learn-more' href='${this.#authoringHint.getLearnMoreLink()}' class='clickable underlined unbreakable-text'}>
+                                ${i18nString(UIStrings.learnMore)}
+                            </x-link>
+                        `: ''}
+                    </div>
+                ` : ''}
+            </div>
+        `, this.#shadow, {
+            host: this,
+          });
+    }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-css-hint-details-view', CSSHintDetailsView);
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface HTMLElementTagNameMap {
+      'devtools-css-hint-details-view': CSSHintDetailsView;
+    }
+}

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

@@ -5,6 +5,7 @@
 import * as AccessibilityTreeNode from './AccessibilityTreeNode.js';
 import * as AdornerManager from './AdornerManager.js';
 import * as AdornerSettingsPane from './AdornerSettingsPane.js';
+import * as CSSHintDetailsView from './CSSHintDetailsView.js';
 import * as ComputedStyleProperty from './ComputedStyleProperty.js';
 import * as ComputedStyleTrace from './ComputedStyleTrace.js';
 import * as CSSPropertyIconResolver from './CSSPropertyIconResolver.js';
@@ -22,6 +23,7 @@ export {
   AccessibilityTreeNode,
   AdornerManager,
   AdornerSettingsPane,
+  CSSHintDetailsView,
   ComputedStyleProperty,
   ComputedStyleTrace,
   CSSPropertyIconResolver,

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

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2022 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.
+ */
+
+.hint-popup-wrapper {
+  width: 400px;
+  line-height: 1.1;
+  font-size: 12px;
+}
+
+code {
+  background-color: var(--color-background-elevation-1);
+  padding: 0 2px;
+}
+
+.property {
+  color: var(--color-syntax-1);
+}
+
+.hint-popup-possible-fix {
+  margin-top: 8px;
+}
+
+.clickable {
+  color: var(--color-link);
+}
+
+.underlined {
+  text-decoration: underline;
+}
+
+.unbreakable-text {
+  white-space: nowrap;
+}

package/front_end/panels/elements/stylesSectionTree.css

@@ -159,7 +159,7 @@ ol.expanded {
   position: absolute;
   top: 0;
   bottom: 0;
-  margin: auto;
+  margin: auto auto auto 5px;
   display: inline-block;
   cursor: pointer;
   transform: scale(0.9);

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -8,6 +8,7 @@ import {assertNotNullOrUndefined} from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as Input from '../../../ui/components/input/input.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
@@ -357,7 +358,7 @@ export class Category extends HTMLElement {
   #checked: boolean|undefined = undefined;
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [requestHeadersViewStyles];
+    this.#shadow.adoptedStyleSheets = [requestHeadersViewStyles, Input.checkboxStyles];
   }
 
   set data(data: CategoryData) {

package/front_end/services/puppeteer/PuppeteerConnection.ts

@@ -60,14 +60,12 @@ export class Transport implements puppeteer.ConnectionTransport {
 }
 
 export class PuppeteerConnection extends puppeteer.Connection {
-  // Overriding Puppeteer's API here.
-  // eslint-disable-next-line rulesdir/no_underscored_properties
-  async _onMessage(message: string): Promise<void> {
+  override async onMessage(message: string): Promise<void> {
     const msgObj = JSON.parse(message) as {id: number, method: string, params: unknown, sessionId?: string};
     if (msgObj.sessionId && !this._sessions.has(msgObj.sessionId)) {
       return;
     }
-    void super._onMessage(message);
+    void super.onMessage(message);
   }
 }
 
@@ -90,7 +88,7 @@ export async function getPuppeteerConnection(
     return targetInfo.targetId === mainTargetId || targetInfo.openerId === mainTargetId || targetInfo.type === 'iframe';
   };
 
-  const browser = await puppeteer.Browser.create(
+  const browser = await puppeteer.Browser._create(
       connection,
       [] /* contextIds */,
       false /* ignoreHTTPSErrors */,

package/front_end/third_party/lit-html/directives.ts

@@ -8,3 +8,4 @@ export * from './package/directives/style-map.js';
 export * from './package/directives/live.js';
 export * from './package/directives/repeat.js';
 export * from './package/directives/until.js';
+export * from './package/directives/unsafe-html.js';

package/front_end/third_party/lit-html/lit-html-tsconfig.json

@@ -8,6 +8,7 @@
     "package/directive.js",
     "package/directives/class-map.js",
     "package/directives/if-defined.js",
+    "package/directives/unsafe-html.js",
     "package/directives/style-map.js",
     "package/directives/repeat.js",
     "package/directives/until.js",