chrome-devtools-frontend 1.0.1040337 → 1.0.1070764

package/front_end/panels/console/ConsoleFormat.ts

@@ -152,12 +152,12 @@ export const format = (fmt: string, args: SDK.RemoteObject.RemoteObject[]): {
             case 48:
               if (codes.shift() === 2) {
                 const r = codes.shift() ?? 0, g = codes.shift() ?? 0, b = codes.shift() ?? 0;
-                currentStyle.set(code === 38 ? 'color' : 'background', `rgb(${r},${g},${b})`);
+                currentStyle.set(code === 38 ? 'color' : 'background-color', `rgb(${r},${g},${b})`);
               }
               break;
             case 39:
             case 49:
-              currentStyle.delete(code === 39 ? 'color' : 'background');
+              currentStyle.delete(code === 39 ? 'color' : 'background-color');
               break;
             case 53:
               addTextDecoration('overline');

package/front_end/panels/console/ConsolePinPane.ts

@@ -327,7 +327,7 @@ export class ConsolePin {
     const throwOnSideEffect = isEditing && text !== this.committedExpression;
     const timeout = throwOnSideEffect ? 250 : undefined;
     const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
-    const preprocessedExpression = ObjectUI.JavaScriptREPL.JavaScriptREPL.preprocessExpression(text);
+    const preprocessedExpression = ObjectUI.JavaScriptREPL.JavaScriptREPL.wrapObjectLiteral(text);
     const {preview, result} = await ObjectUI.JavaScriptREPL.JavaScriptREPL.evaluateAndBuildPreview(
         preprocessedExpression, throwOnSideEffect, true /* replMode */, timeout, !isEditing /* allowErrors */,
         'console', true /* awaitPromise */, true /* silent */);

package/front_end/panels/console/ConsolePrompt.ts

@@ -305,7 +305,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     if (currentExecutionContext) {
       const executionContext = currentExecutionContext;
       const message = SDK.ConsoleModel.ConsoleModel.instance().addCommandMessage(executionContext, text);
-      const expression = ObjectUI.JavaScriptREPL.JavaScriptREPL.preprocessExpression(text);
+      const expression = ObjectUI.JavaScriptREPL.JavaScriptREPL.wrapObjectLiteral(text);
       void this.evaluateCommandInConsole(executionContext, message, expression, useCommandLineAPI);
       if (ConsolePanel.instance().isShowing()) {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.CommandEvaluatedInConsolePanel);

package/front_end/panels/console/ConsoleView.ts

@@ -1054,6 +1054,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     this.groupableMessages.clear();
     this.groupableMessageTitle.clear();
     this.sidebar.clear();
+    this.pendingSidebarMessages = [];
     this.updateMessageList();
     this.hidePromptSuggestBox();
     this.viewport.setStickToBottom(true);

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1882,7 +1882,7 @@ export class ConsoleTableMessageView extends ConsoleViewMessage {
       let rowSubProperties: Protocol.Runtime.PropertyPreview[];
       if (rowProperty.valuePreview && rowProperty.valuePreview.properties.length) {
         rowSubProperties = rowProperty.valuePreview.properties;
-      } else if (rowProperty.value) {
+      } else if (rowProperty.value || rowProperty.value === '') {
         rowSubProperties =
             [{name: rawValueColumnSymbol as unknown as string, type: rowProperty.type, value: rowProperty.value}];
       } else {

package/front_end/panels/console/consoleView.css

@@ -86,6 +86,7 @@
   overflow-y: auto;
   word-wrap: break-word;
   user-select: text;
+  transform: translateZ(0);
   overflow-anchor: none;  /* Chrome-specific scroll-anchoring opt-out */
   background-color: var(--color-background);
 }
@@ -545,4 +546,8 @@
   .console-message-wrapper.console-error-level:focus:last-of-type {
     --override-error-text-color: HighlightText;
   }
+
+  .console-message-anchor .resource-links {
+    --icon-color: ButtonText;
+  }
 }

package/front_end/panels/coverage/CoverageView.ts

@@ -155,7 +155,7 @@ export class CoverageView extends UI.Widget.VBox {
     this.toggleRecordButton = UI.Toolbar.Toolbar.createActionButton(this.toggleRecordAction);
     toolbar.appendToolbarItem(this.toggleRecordButton);
 
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     const mainTargetSupportsRecordOnReload = mainTarget && mainTarget.model(SDK.ResourceTreeModel.ResourceTreeModel);
     this.inlineReloadButton = null;
     if (mainTargetSupportsRecordOnReload) {
@@ -324,7 +324,7 @@ export class CoverageView extends UI.Widget.VBox {
     }
 
     this.reset();
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     if (!mainTarget) {
       return;
     }

package/front_end/panels/css_overview/CSSOverviewUnusedDeclarations.ts

@@ -119,7 +119,7 @@ export class CSSOverviewUnusedDeclarations {
   static checkForInvalidVerticalAlignment(
       unusedDeclarations: Map<string, UnusedDeclaration[]>, nodeId: Protocol.DOM.BackendNodeId, strings: string[],
       displayIdx: number, verticalAlignIdx: number): void {
-    if (!strings[displayIdx] || strings[displayIdx] === 'inline' || strings[displayIdx].startsWith('table')) {
+    if (!strings[displayIdx] || strings[displayIdx].startsWith('inline') || strings[displayIdx].startsWith('table')) {
       return;
     }
 

package/front_end/panels/developer_resources/DeveloperResourcesView.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -43,18 +42,16 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/developer_resources/DeveloperResourcesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-let developerResourcesViewInstance: DeveloperResourcesView;
-
-export class DeveloperResourcesView extends UI.Widget.VBox {
+export class DeveloperResourcesView extends UI.ThrottledWidget.ThrottledWidget {
   private textFilterRegExp: RegExp|null;
   private readonly filterInput: UI.Toolbar.ToolbarInput;
   private readonly coverageResultsElement: HTMLElement;
   private listView: DeveloperResourcesListView;
   private readonly statusToolbarElement: HTMLElement;
   private statusMessageElement: HTMLElement;
-  private readonly throttler: Common.Throttler.Throttler;
   private readonly loader: SDK.PageResourceLoader.PageResourceLoader;
-  private constructor() {
+
+  constructor() {
     super(true);
 
     const toolbarContainer = this.contentElement.createChild('div', 'developer-resource-view-toolbar-container');
@@ -79,24 +76,11 @@ export class DeveloperResourcesView extends UI.Widget.VBox {
     this.statusToolbarElement = this.contentElement.createChild('div', 'developer-resource-view-toolbar-summary');
     this.statusMessageElement = this.statusToolbarElement.createChild('div', 'developer-resource-view-message');
 
-    this.throttler = new Common.Throttler.Throttler(100);
     this.loader = SDK.PageResourceLoader.PageResourceLoader.instance();
-    this.loader.addEventListener(SDK.PageResourceLoader.Events.Update, this.onUpdate, this);
-    this.onUpdate();
-  }
-
-  static instance(): DeveloperResourcesView {
-    if (!developerResourcesViewInstance) {
-      developerResourcesViewInstance = new DeveloperResourcesView();
-    }
-    return developerResourcesViewInstance;
+    this.loader.addEventListener(SDK.PageResourceLoader.Events.Update, this.update, this);
   }
 
-  private onUpdate(): void {
-    void this.throttler.schedule(this.update.bind(this));
-  }
-
-  private async update(): Promise<void> {
+  async doUpdate(): Promise<void> {
     this.listView.reset();
     this.listView.update(this.loader.getResourcesLoaded().values());
     this.updateStats();
@@ -117,9 +101,6 @@ export class DeveloperResourcesView extends UI.Widget.VBox {
         this.textFilterRegExp.test(item.errorMessage || '');
   }
 
-  /**
-   *
-   */
   private onFilterChanged(): void {
     if (!this.listView) {
       return;
@@ -130,6 +111,7 @@ export class DeveloperResourcesView extends UI.Widget.VBox {
     this.listView.updateFilterAndHighlight(this.textFilterRegExp);
     this.updateStats();
   }
+
   wasShown(): void {
     super.wasShown();
     this.registerCSSFiles([developerResourcesViewStyles]);

package/front_end/panels/developer_resources/developer_resources-meta.ts

@@ -40,6 +40,6 @@ UI.ViewManager.registerViewExtension({
   experiment: Root.Runtime.ExperimentName.DEVELOPER_RESOURCES_VIEW,
   async loadView() {
     const DeveloperResources = await loadDeveloperResourcesModule();
-    return DeveloperResources.DeveloperResourcesView.DeveloperResourcesView.instance();
+    return new DeveloperResources.DeveloperResourcesView.DeveloperResourcesView();
   },
 });

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -7,54 +7,50 @@ import * as i18n from '../../core/i18n/i18n.js';
 
 import {
   buildPropertyDefinitionText,
-  buildPropertyText,
+  buildPropertyName,
+  buildPropertyValue,
   isFlexContainer,
   isGridContainer,
+  isInlineElement,
   isMulticolContainer,
+  isPossiblyReplacedElement,
 } from './CSSRuleValidatorHelper.js';
 
 const UIStrings = {
-  /**
-    *@description The type of the CSS rule validation message shown in the Style pane. "Deprecated property" means that a property in the declaration is deprecated and should not be used.
-    */
-  deprecatedPropertyHintPrefix: 'Deprecated property',
-  /**
-    *@description The type of the CSS rule validation message shown in the Style pane. "Inactive property" means that a property declaration was valid syntactially but didn't have expected effect.
-    */
-  inactivePropertyHintPrefix: 'Inactive property',
   /**
     *@description The message shown in the Style pane when the user hovers over a property that has no effect due to some other property.
     *@example {flex-wrap: nowrap} REASON_PROPERTY_DECLARATION_CODE
     *@example {align-content} AFFECTED_PROPERTY_DECLARATION_CODE
     */
   ruleViolatedBySameElementRuleReason:
-      'The {REASON_PROPERTY_DECLARATION_CODE} property on the same element bypasses the effect of {AFFECTED_PROPERTY_DECLARATION_CODE}.',
+      'The {REASON_PROPERTY_DECLARATION_CODE} property prevents {AFFECTED_PROPERTY_DECLARATION_CODE} from having an effect.',
   /**
     *@description The message shown in the Style pane when the user hovers over a property declaration that has no effect due to some other property.
-    *@example {flex-wrap: nowrap} REASON_PROPERTY_DECLARATION_CODE
+    *@example {flex-wrap} PROPERTY_NAME
+    @example {nowrap} PROPERTY_VALUE
     */
-  ruleViolatedBySameElementRuleFix: 'Try removing {REASON_PROPERTY_DECLARATION_CODE} or changing its value.',
+  ruleViolatedBySameElementRuleFix: 'Try setting {PROPERTY_NAME} to something other than {PROPERTY_VALUE}.',
   /**
     *@description The message shown in the Style pane when the user hovers over a property declaration that has no effect due to the current property value.
     *@example {display: block} EXISTING_PROPERTY_DECLARATION
     *@example {display: flex} TARGET_PROPERTY_DECLARATION
     */
   ruleViolatedBySameElementRuleChangeSuggestion:
-      'Try changing the {EXISTING_PROPERTY_DECLARATION} property to {TARGET_PROPERTY_DECLARATION}.',
+      'Try setting the {EXISTING_PROPERTY_DECLARATION} property to {TARGET_PROPERTY_DECLARATION}.',
   /**
     *@description The message shown in the Style pane when the user hovers over a property declaration that has no effect due to properties of the parent element.
     *@example {display: block} REASON_PROPERTY_DECLARATION_CODE
     *@example {flex} AFFECTED_PROPERTY_DECLARATION_CODE
     */
   ruleViolatedByParentElementRuleReason:
-      'The {REASON_PROPERTY_DECLARATION_CODE} property on the parent element bypasses the effect of {AFFECTED_PROPERTY_DECLARATION_CODE}.',
+      'The {REASON_PROPERTY_DECLARATION_CODE} property on the parent element prevents {AFFECTED_PROPERTY_DECLARATION_CODE} from having an effect.',
   /**
     *@description The message shown in the Style pane when the user hovers over a property declaration that has no effect due to the properties of the parent element.
     *@example {display: block} EXISTING_PARENT_ELEMENT_RULE
     *@example {display: flex} TARGET_PARENT_ELEMENT_RULE
     */
   ruleViolatedByParentElementRuleFix:
-      'Try changing the {EXISTING_PARENT_ELEMENT_RULE} property on the parent to {TARGET_PARENT_ELEMENT_RULE}.',
+      'Try setting the {EXISTING_PARENT_ELEMENT_RULE} property on the parent to {TARGET_PARENT_ELEMENT_RULE}.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/CSSRuleValidator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -65,27 +61,16 @@ export const enum HintType {
 }
 
 export class Hint {
-  readonly #hintType: HintType;
   readonly #hintMessage: string;
   readonly #possibleFixMessage: string|null;
   readonly #learnMoreLink: string|undefined;
 
-  constructor(hintType: HintType, hintMessage: string, possibleFixMessage: string|null, learnMoreLink?: string) {
-    this.#hintType = hintType;
+  constructor(hintMessage: string, possibleFixMessage: string|null, learnMoreLink?: string) {
     this.#hintMessage = hintMessage;
     this.#possibleFixMessage = possibleFixMessage;
     this.#learnMoreLink = learnMoreLink;
   }
 
-  getPrefix(): string {
-    switch (this.#hintType) {
-      case HintType.INACTIVE_PROPERTY:
-        return i18nString(UIStrings.inactivePropertyHintPrefix);
-      case HintType.DEPRECATED_PROPERTY:
-        return i18nString(UIStrings.deprecatedPropertyHintPrefix);
-    }
-  }
-
   getMessage(): string {
     return this.#hintMessage;
   }
@@ -115,8 +100,8 @@ export abstract class CSSRuleValidator {
   }
 
   abstract getHint(
-      propertyName: string, computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>): Hint
-      |undefined;
+      propertyName: string, computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>,
+      nodeName?: string): Hint|undefined;
 }
 
 export class AlignContentValidator extends CSSRuleValidator {
@@ -143,16 +128,16 @@ export class AlignContentValidator extends CSSRuleValidator {
       return;
     }
     const reasonPropertyDeclaration = buildPropertyDefinitionText('flex-wrap', 'nowrap');
-    const affectedPropertyDeclarationCode = buildPropertyText('align-content');
+    const affectedPropertyDeclarationCode = buildPropertyName('align-content');
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          PROPERTY_NAME: buildPropertyName('flex-wrap'),
+          PROPERTY_VALUE: buildPropertyValue('nowrap'),
         }),
     );
   }
@@ -180,18 +165,17 @@ export class FlexItemValidator extends CSSRuleValidator {
       return;
     }
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', parentComputedStyles?.get('display'));
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
-    const targeParentPropertyDeclaration = buildPropertyDefinitionText('display', 'flex');
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
+    const targetParentPropertyDeclaration = buildPropertyDefinitionText('display', 'flex');
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
           'EXISTING_PARENT_ELEMENT_RULE': reasonPropertyDeclaration,
-          'TARGET_PARENT_ELEMENT_RULE': targeParentPropertyDeclaration,
+          'TARGET_PARENT_ELEMENT_RULE': targetParentPropertyDeclaration,
         }),
     );
   }
@@ -199,7 +183,7 @@ export class FlexItemValidator extends CSSRuleValidator {
 
 export class FlexContainerValidator extends CSSRuleValidator {
   constructor() {
-    super(['flex-direction', 'flex-flow', 'flex-wrap', 'justify-content']);
+    super(['flex-direction', 'flex-flow', 'flex-wrap']);
   }
 
   getMetricType(): Host.UserMetrics.CSSHintType {
@@ -219,10 +203,9 @@ export class FlexContainerValidator extends CSSRuleValidator {
     }
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
     const targetRuleCode = buildPropertyDefinitionText('display', 'flex');
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
@@ -263,10 +246,9 @@ export class GridContainerValidator extends CSSRuleValidator {
     }
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
     const targetRuleCode = buildPropertyDefinitionText('display', 'grid');
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
@@ -287,6 +269,11 @@ export class GridItemValidator extends CSSRuleValidator {
       'grid-row',
       'grid-row-end',
       'grid-row-start',
+      // At the time of writing (November 2022), `justify-self` is only in effect in grid layout.
+      // There are no other browsers that support `justify-self` in other layouts.
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables
+      // TODO: move `justify-self` to other validator or change pop-over text if Chrome supports CSS Align in other layouts.
+      'justify-self',
     ]);
   }
 
@@ -307,18 +294,59 @@ export class GridItemValidator extends CSSRuleValidator {
       return;
     }
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', parentComputedStyles?.get('display'));
-    const targeParentPropertyDeclaration = buildPropertyDefinitionText('display', 'grid');
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+    const targetParentPropertyDeclaration = buildPropertyDefinitionText('display', 'grid');
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
+
+    return new Hint(
+        i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
+          'EXISTING_PARENT_ELEMENT_RULE': reasonPropertyDeclaration,
+          'TARGET_PARENT_ELEMENT_RULE': targetParentPropertyDeclaration,
+        }),
+    );
+  }
+}
+
+export class FlexOrGridItemValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'place-self',
+      'align-self',
+    ]);
+  }
+
+  getMetricType(): Host.UserMetrics.CSSHintType {
+    return Host.UserMetrics.CSSHintType.FlexOrGridItem;
+  }
+
+  #isRuleValid(computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>): boolean {
+    if (!parentComputedStyles) {
+      return true;
+    }
+    return isFlexContainer(parentComputedStyles) || isGridContainer(parentComputedStyles);
+  }
+
+  getHint(propertyName: string, computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>): Hint
+      |undefined {
+    if (this.#isRuleValid(computedStyles, parentComputedStyles)) {
+      return;
+    }
+    const reasonPropertyDeclaration = buildPropertyDefinitionText('display', parentComputedStyles?.get('display'));
+    const targetParentPropertyDeclaration =
+        `${buildPropertyDefinitionText('display', 'flex')} or ${buildPropertyDefinitionText('display', 'grid')}`;
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
           'EXISTING_PARENT_ELEMENT_RULE': reasonPropertyDeclaration,
-          'TARGET_PARENT_ELEMENT_RULE': targeParentPropertyDeclaration,
+          'TARGET_PARENT_ELEMENT_RULE': targetParentPropertyDeclaration,
         }),
     );
   }
@@ -328,9 +356,10 @@ export class FlexGridValidator extends CSSRuleValidator {
   constructor() {
     super([
       'order',
+      'justify-content',
       'align-content',
+      'place-content',  // Shorthand	<'align-content'> <'justify-content'>?
       'align-items',
-      'align-self',
     ]);
   }
 
@@ -351,16 +380,16 @@ export class FlexGridValidator extends CSSRuleValidator {
     }
 
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          PROPERTY_NAME: buildPropertyName('display'),
+          PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('display') as string),
         }),
     );
   }
@@ -396,16 +425,16 @@ export class MulticolFlexGridValidator extends CSSRuleValidator {
     }
 
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          PROPERTY_NAME: buildPropertyName('display'),
+          PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('display') as string),
         }),
     );
   }
@@ -428,12 +457,12 @@ export class PaddingValidator extends CSSRuleValidator {
 
   #isRuleValid(computedStyles?: Map<string, string>): boolean {
     const display = computedStyles?.get('display');
-    if (display === null || display === undefined) {
+    if (!display) {
       return true;
     }
     return !['table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group',
              'table-column']
-                .includes(display as string);
+                .includes(display);
   }
 
   getHint(propertyName: string, computedStyles?: Map<string, string>): Hint|undefined {
@@ -442,16 +471,16 @@ export class PaddingValidator extends CSSRuleValidator {
     }
 
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          PROPERTY_NAME: buildPropertyName('display'),
+          PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('display') as string),
         }),
     );
   }
@@ -485,16 +514,16 @@ export class PositionValidator extends CSSRuleValidator {
     }
 
     const reasonPropertyDeclaration = buildPropertyDefinitionText('position', computedStyles?.get('position'));
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          PROPERTY_NAME: buildPropertyName('position'),
+          PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('position') as string),
         }),
     );
   }
@@ -513,7 +542,7 @@ export class ZIndexValidator extends CSSRuleValidator {
 
   #isRuleValid(computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>): boolean {
     const position = computedStyles?.get('position');
-    if (position === null || position === undefined) {
+    if (!position) {
       return true;
     }
     return ['absolute', 'relative', 'fixed', 'sticky'].includes(position) || isFlexContainer(parentComputedStyles);
@@ -526,16 +555,67 @@ export class ZIndexValidator extends CSSRuleValidator {
     }
 
     const reasonPropertyDeclaration = buildPropertyDefinitionText('position', computedStyles?.get('position'));
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          PROPERTY_NAME: buildPropertyName('position'),
+          PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('position') as string),
+        }),
+    );
+  }
+}
+
+/**
+ * Validates if CSS width/height are having an effect on an element.
+ * See "Applies to" in https://www.w3.org/TR/css-sizing-3/#propdef-width.
+ * See "Applies to" in https://www.w3.org/TR/css-sizing-3/#propdef-height.
+ */
+export class SizingValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'width',
+      'height',
+    ]);
+  }
+
+  getMetricType(): Host.UserMetrics.CSSHintType {
+    return Host.UserMetrics.CSSHintType.Sizing;
+  }
+
+  #isRuleValid(computedStyles?: Map<string, string>, nodeName?: string): boolean {
+    if (!computedStyles || !nodeName) {
+      return true;
+    }
+    if (!isInlineElement(computedStyles)) {
+      return true;
+    }
+    // See https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements.
+    return isPossiblyReplacedElement(nodeName);
+  }
+
+  getHint(
+      propertyName: string, computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>,
+      nodeName?: string): Hint|undefined {
+    if (this.#isRuleValid(computedStyles, nodeName)) {
+      return;
+    }
+
+    const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
+
+    return new Hint(
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          PROPERTY_NAME: buildPropertyName('display'),
+          PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('display') as string),
         }),
     );
   }
@@ -543,11 +623,13 @@ export class ZIndexValidator extends CSSRuleValidator {
 
 const CSS_RULE_VALIDATORS = [
   AlignContentValidator,
-  FlexItemValidator,
   FlexContainerValidator,
+  FlexGridValidator,
+  FlexItemValidator,
   GridContainerValidator,
   GridItemValidator,
-  FlexGridValidator,
+  FlexOrGridItemValidator,
+  SizingValidator,
   MulticolFlexGridValidator,
   PaddingValidator,
   PositionValidator,