chrome-devtools-frontend 1.0.1020516 → 1.0.1021582

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",