chrome-devtools-frontend 1.0.1020516 → 1.0.1021582

package/front_end/models/bindings/ResourceScriptMapping.ts

@@ -30,10 +30,10 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as Workspace from '../workspace/workspace.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as Workspace from '../workspace/workspace.js';
 
 import type {Breakpoint} from './BreakpointManager.js';
 import {BreakpointManager} from './BreakpointManager.js';
@@ -65,7 +65,7 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
   readonly debuggerWorkspaceBinding: DebuggerWorkspaceBinding;
   readonly #uiSourceCodeToScriptFile: Map<Workspace.UISourceCode.UISourceCode, ResourceScriptFile>;
   readonly #projects: Map<string, ContentProviderBasedProject>;
-  #acceptedScripts: Set<SDK.Script.Script>;
+  readonly #scriptToUISourceCode: Map<SDK.Script.Script, Workspace.UISourceCode.UISourceCode>;
   readonly #eventListeners: Common.EventTarget.EventDescriptor[];
 
   constructor(
@@ -78,21 +78,30 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
 
     this.#projects = new Map();
 
-    this.#acceptedScripts = new Set();
+    this.#scriptToUISourceCode = new Map();
     const runtimeModel = debuggerModel.runtimeModel();
     this.#eventListeners = [
       this.debuggerModel.addEventListener(
-          SDK.DebuggerModel.Events.ParsedScriptSource,
-          event => {
-            void this.parsedScriptSource(event);
-          },
-          this),
+          SDK.DebuggerModel.Events.ParsedScriptSource, event => this.addScript(event.data), this),
       this.debuggerModel.addEventListener(SDK.DebuggerModel.Events.GlobalObjectCleared, this.globalObjectCleared, this),
       runtimeModel.addEventListener(
           SDK.RuntimeModel.Events.ExecutionContextDestroyed, this.executionContextDestroyed, this),
+      runtimeModel.target().targetManager().addEventListener(
+          SDK.TargetManager.Events.InspectedURLChanged, this.inspectedURLChanged, this),
     ];
   }
 
+  static resolveRelativeSourceURL(script: SDK.Script.Script, url: Platform.DevToolsPath.UrlString):
+      Platform.DevToolsPath.UrlString {
+    let target: SDK.Target.Target|null = script.debuggerModel.target();
+    while (target && target.type() !== SDK.Target.Type.Frame) {
+      target = target.parentTarget();
+    }
+    const baseURL = target?.inspectedURL() ?? Platform.DevToolsPath.EmptyUrlString;
+    url = Common.ParsedURL.ParsedURL.completeURL(baseURL, url) ?? url;
+    return url;
+  }
+
   private project(script: SDK.Script.Script): ContentProviderBasedProject {
     const prefix = script.isContentScript() ? 'js:extensions:' : 'js::';
     const projectId = prefix + this.debuggerModel.target().id() + ':' + script.frameId;
@@ -113,8 +122,7 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
     if (!script) {
       return null;
     }
-    const project = this.project(script);
-    const uiSourceCode = project.uiSourceCodeForURL(script.sourceURL);
+    const uiSourceCode = this.#scriptToUISourceCode.get(script);
     if (!uiSourceCode) {
       return null;
     }
@@ -147,41 +155,63 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
     return [this.debuggerModel.createRawLocation(script, lineNumber, columnNumber)];
   }
 
-  private acceptsScript(script: SDK.Script.Script): boolean {
-    if (!script.sourceURL || script.isLiveEdit() || (script.isInlineScript() && !script.hasSourceURL)) {
-      return false;
-    }
-    // Filter out embedder injected content scripts.
-    if (script.isContentScript() && !script.hasSourceURL) {
-      const parsedURL = new Common.ParsedURL.ParsedURL(script.sourceURL);
-      if (!parsedURL.isValid) {
-        return false;
+  private inspectedURLChanged(event: Common.EventTarget.EventTargetEvent<SDK.Target.Target>): void {
+    for (let target: SDK.Target.Target|null = this.debuggerModel.target(); target !== event.data;
+         target = target.parentTarget()) {
+      if (target === null) {
+        return;
       }
     }
-    return true;
+
+    // Just remove and readd all scripts to ensure their URLs are reflected correctly.
+    for (const script of Array.from(this.#scriptToUISourceCode.keys())) {
+      this.removeScript(script);
+      this.addScript(script);
+    }
   }
 
-  private async parsedScriptSource(event: Common.EventTarget.EventTargetEvent<SDK.Script.Script>): Promise<void> {
-    const script = event.data;
-    if (!this.acceptsScript(script)) {
+  private addScript(script: SDK.Script.Script): void {
+    // Ignore live edit scripts here.
+    if (script.isLiveEdit()) {
       return;
     }
-    this.#acceptedScripts.add(script);
-    const originalContentProvider = script.originalContentProvider();
 
-    const url = script.sourceURL;
-    const project = this.project(script);
+    let url = script.sourceURL;
+    if (!url) {
+      return;
+    }
+
+    if (script.hasSourceURL) {
+      // Try to resolve `//# sourceURL=` annotations relative to
+      // the base URL, according to the sourcemap specification.
+      url = ResourceScriptMapping.resolveRelativeSourceURL(script, url);
+    } else {
+      // Ignore inline <script>s without `//# sourceURL` annotation here.
+      if (script.isInlineScript()) {
+        return;
+      }
+
+      // Filter out embedder injected content scripts.
+      if (script.isContentScript()) {
+        const parsedURL = new Common.ParsedURL.ParsedURL(url);
+        if (!parsedURL.isValid) {
+          return;
+        }
+      }
+    }
 
     // Remove previous UISourceCode, if any
+    const project = this.project(script);
     const oldUISourceCode = project.uiSourceCodeForURL(url);
     if (oldUISourceCode) {
-      const scriptFile = this.#uiSourceCodeToScriptFile.get(oldUISourceCode);
-      if (scriptFile && scriptFile.script) {
-        await this.removeScript(scriptFile.script);
+      const oldScriptFile = this.#uiSourceCodeToScriptFile.get(oldUISourceCode);
+      if (oldScriptFile && oldScriptFile.script) {
+        this.removeScript(oldScriptFile.script);
       }
     }
 
     // Create UISourceCode.
+    const originalContentProvider = script.originalContentProvider();
     const uiSourceCode = project.createUISourceCode(url, originalContentProvider.contentType());
     NetworkProject.setInitialFrameAttribution(uiSourceCode, script.frameId);
     const metadata = metadataForURL(this.debuggerModel.target(), script.frameId, url);
@@ -189,61 +219,54 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
     // Bind UISourceCode to scripts.
     const scriptFile = new ResourceScriptFile(this, uiSourceCode, [script]);
     this.#uiSourceCodeToScriptFile.set(uiSourceCode, scriptFile);
+    this.#scriptToUISourceCode.set(script, uiSourceCode);
 
     const mimeType = script.isWasm() ? 'application/wasm' : 'text/javascript';
     project.addUISourceCodeWithProvider(uiSourceCode, originalContentProvider, metadata, mimeType);
-    await this.debuggerWorkspaceBinding.updateLocations(script);
+    void this.debuggerWorkspaceBinding.updateLocations(script);
   }
 
   scriptFile(uiSourceCode: Workspace.UISourceCode.UISourceCode): ResourceScriptFile|null {
     return this.#uiSourceCodeToScriptFile.get(uiSourceCode) || null;
   }
 
-  private async removeScript(script: SDK.Script.Script): Promise<void> {
-    if (!this.#acceptedScripts.has(script)) {
+  private removeScript(script: SDK.Script.Script): void {
+    const uiSourceCode = this.#scriptToUISourceCode.get(script);
+    if (!uiSourceCode) {
       return;
     }
-    this.#acceptedScripts.delete(script);
-    const project = this.project(script);
-    const uiSourceCode = (project.uiSourceCodeForURL(script.sourceURL) as Workspace.UISourceCode.UISourceCode);
     const scriptFile = this.#uiSourceCodeToScriptFile.get(uiSourceCode);
     if (scriptFile) {
       scriptFile.dispose();
     }
     this.#uiSourceCodeToScriptFile.delete(uiSourceCode);
-    project.removeFile(script.sourceURL);
-    await this.debuggerWorkspaceBinding.updateLocations(script);
+    this.#scriptToUISourceCode.delete(script);
+    const project = uiSourceCode.project() as ContentProviderBasedProject;
+    project.removeFile(uiSourceCode.url());
+    void this.debuggerWorkspaceBinding.updateLocations(script);
   }
 
   private executionContextDestroyed(event: Common.EventTarget.EventTargetEvent<SDK.RuntimeModel.ExecutionContext>):
       void {
     const executionContext = event.data;
-    const scripts = this.debuggerModel.scriptsForExecutionContext(executionContext);
-    for (const script of scripts) {
-      void this.removeScript(script);
+    for (const script of this.debuggerModel.scriptsForExecutionContext(executionContext)) {
+      this.removeScript(script);
     }
   }
 
   private globalObjectCleared(): void {
-    const scripts = Array.from(this.#acceptedScripts);
-    for (const script of scripts) {
-      void this.removeScript(script);
+    for (const script of this.#scriptToUISourceCode.keys()) {
+      this.removeScript(script);
     }
   }
 
   resetForTest(): void {
-    const scripts = Array.from(this.#acceptedScripts);
-    for (const script of scripts) {
-      void this.removeScript(script);
-    }
+    this.globalObjectCleared();
   }
 
   dispose(): void {
     Common.EventTarget.removeEventListeners(this.#eventListeners);
-    const scripts = Array.from(this.#acceptedScripts);
-    for (const script of scripts) {
-      void this.removeScript(script);
-    }
+    this.globalObjectCleared();
     for (const project of this.#projects.values()) {
       project.removeProject();
     }

package/front_end/panels/application/components/FrameDetailsView.ts

@@ -27,6 +27,7 @@ import {OriginTrialTreeView} from './OriginTrialTreeView.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import frameDetailsReportViewStyles from './frameDetailsReportView.css.js';
+import {Prerender2ReasonDescription} from './Prerender2.js';
 
 const UIStrings = {
   /**
@@ -791,14 +792,14 @@ export class FrameDetailsReportView extends HTMLElement {
     if (!this.#frame || !this.#frame.prerenderFinalStatus) {
       return LitHtml.nothing;
     }
-
+    const finalStatus = Prerender2ReasonDescription[this.#frame.prerenderFinalStatus].name();
     return LitHtml.html`
       <${ReportView.ReportView.ReportSectionHeader.litTagName}>
       ${i18nString(UIStrings.prerendering)}</${ReportView.ReportView.ReportSectionHeader.litTagName}>
       <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.prerenderingStatus)}</${
         ReportView.ReportView.ReportKey.litTagName}>
       <${ReportView.ReportView.ReportValue.litTagName}>
-        <div class="text-ellipsis" title=${this.#frame.prerenderFinalStatus}>${this.#frame.prerenderFinalStatus}</div>
+      <div class="text-ellipsis" title=${finalStatus}>${finalStatus}</div>
       </${ReportView.ReportView.ReportValue.litTagName}>
       <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
         ReportView.ReportView.ReportSectionDivider.litTagName}>`;

package/front_end/panels/application/components/Prerender2.ts

@@ -0,0 +1,188 @@
+// 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 i18n from '../../../core/i18n/i18n.js';
+
+const UIStrings = {
+  /**
+    *@description  Description text for Prerender2 status Activated.
+    */
+  Activated: 'Activated.',
+  /**
+    *@description  Description text for Prerender2 cancellation status Destroyed.
+    */
+  Destroyed: 'A prerendered page was abandoned for unknown reasons.',
+  /**
+    *@description  Description text for Prerender2 cancellation status LowEndDevice.
+    */
+  LowEndDevice: 'Prerendering is not supported for low-memory devices.',
+  /**
+    *@description  Description text for Prerender2 cancellation status CrossOriginRedirect.
+    */
+  CrossOriginRedirect:
+      'Attempted to prerender a URL which redirected to a cross-origin URL. Currently prerendering cross-origin pages is disallowed.',
+  /**
+    *@description  Description text for Prerender2 cancellation status CrossOriginNavigation.
+    */
+  CrossOriginNavigation:
+      'The prerendered page navigated to a cross-origin URL after loading. Currently prerendering cross-origin pages is disallowed.',
+  /**
+    *@description  Description text for Prerender2 cancellation status InvalidSchemeRedirect.
+    */
+  InvalidSchemeRedirect:
+      'Attempted to prerender a URL that redirected to a non-HTTP(S) URL. Only HTTP(S) pages can be prerendered.',
+  /**
+    *@description  Description text for Prerender2 cancellation status InvalidSchemeNavigation.
+    */
+  InvalidSchemeNavigation: 'Only HTTP(S) navigation allowed for Prerender.',
+  /**
+    *@description  Description text for Prerender2 cancellation status InProgressNavigation.
+    */
+  InProgressNavigation: 'InProgressNavigation.',
+  /**
+    *@description  Description text for Prerender2 cancellation status NavigationRequestBlockedByCsp.
+    */
+  NavigationRequestBlockedByCsp: 'Navigation request is blocked by CSP.',
+  /**
+    *@description  Description text for Prerender2 cancellation status MainFrameNavigation.
+    */
+  MainFrameNavigation: 'Navigations after the initial prerendering navigation are disallowed',
+  /**
+    *@description  Description text for Prerender2 cancellation status MojoBinderPolicy.
+    */
+  MojoBinderPolicy: 'A disallowed API was used by the prerendered page',
+  /**
+    *@description  Description text for Prerender2 cancellation status RendererProcessCrashed.
+    */
+  RendererProcessCrashed: 'The prerendered page crashed.',
+  /**
+    *@description  Description text for Prerender2 cancellation status RendererProcessKilled.
+    */
+  RendererProcessKilled: 'The renderer process for the prerendering page was killed.',
+  /**
+    *@description  Description text for Prerender2 cancellation status Download.
+    */
+  Download: 'Download is disallowed in Prerender.',
+  /**
+    *@description  Description text for Prerender2 cancellation status TriggerDestroyed.
+    */
+  TriggerDestroyed: 'Prerender is not activated and destroyed with the trigger.',
+  /**
+    *@description  Description text for Prerender2 cancellation status NavigationNotCommitted.
+    */
+  NavigationNotCommitted: 'The prerendering page is not committed in the end.',
+  /**
+    *@description  Description text for Prerender2 cancellation status NavigationBadHttpStatus.
+    */
+  NavigationBadHttpStatus:
+      'The initial prerendering navigation was not successful due to the server returning a non-200/204/205 status code.',
+  /**
+    *@description  Description text for Prerender2 cancellation status ClientCertRequested.
+    */
+  ClientCertRequested: 'The page is requesting client cert, which is not suitable for a hidden page like prerendering.',
+  /**
+    *@description  Description text for Prerender2 cancellation status NavigationRequestNetworkError.
+    */
+  NavigationRequestNetworkError: 'Encountered a network error during prerendering.',
+  /**
+    *@description  Description text for Prerender2 cancellation status MaxNumOfRunningPrerendersExceeded.
+    */
+  MaxNumOfRunningPrerendersExceeded: 'Max number of prerendering exceeded.',
+  /**
+    *@description  Description text for Prerender2 cancellation status CancelAllHostsForTesting.
+    */
+  CancelAllHostsForTesting: 'CancelAllHostsForTesting.',
+  /**
+    *@description  Description text for Prerender2 cancellation status DidFailLoad.
+    */
+  DidFailLoad: 'DidFailLoadWithError happened during prerendering.',
+  /**
+    *@description  Description text for Prerender2 cancellation status Stop.
+    */
+  Stop: 'The tab is stopped.',
+  /**
+    *@description  Description text for Prerender2 cancellation status SslCertificateError.
+    */
+  SslCertificateError: 'SSL certificate error.',
+  /**
+    *@description  Description text for Prerender2 cancellation status LoginAuthRequested.
+    */
+  LoginAuthRequested: 'Prerender does not support auth requests from UI.',
+  /**
+    *@description  Description text for Prerender2 cancellation status UaChangeRequiresReload.
+    */
+  UaChangeRequiresReload: 'Reload is needed after UserAgentOverride.',
+  /**
+    *@description  Description text for Prerender2 cancellation status BlockedByClient.
+    */
+  BlockedByClient: 'Resource load is blocked by the client.',
+  /**
+    *@description  Description text for Prerender2 cancellation status AudioOutputDeviceRequested.
+    */
+  AudioOutputDeviceRequested: 'Prerendering has not supported the AudioContext API yet.',
+  /**
+    *@description  Description text for Prerender2 cancellation status MixedContent.
+    */
+  MixedContent: 'Prerendering is canceled by a mixed content frame.',
+  /**
+    *@description  Description text for Prerender2 cancellation status TriggerBackgrounded.
+    */
+  TriggerBackgrounded: 'The tab is in the background',
+  /**
+    *@description  Description text for Prerender2 cancellation status EmbedderTriggeredAndSameOriginRedirected.
+    */
+  EmbedderTriggeredAndSameOriginRedirected:
+      'Prerendering triggered by Chrome internal (e.g., Omnibox prerendering) is canceled because the navigation is redirected to another same-origin page.',
+  /**
+    *@description  Description text for Prerender2 cancellation status EmbedderTriggeredAndCrossOriginRedirected.
+    */
+  EmbedderTriggeredAndCrossOriginRedirected:
+      'Prerendering triggered by Chrome internal (e.g., Omnibox prerendering) is is canceled because the navigation is redirected to another cross-origin page.',
+  /**
+    *@description  Description text for Prerender2 cancellation status EmbedderTriggeredAndDestroyed.
+    */
+  EmbedderTriggeredAndDestroyed:
+      'Prerendering triggered by Chrome internal (e.g., Omnibox prerendering) is is destroyed in the destructor.',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/application/components/Prerender2.ts', UIStrings);
+const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+
+export const Prerender2ReasonDescription = {
+  'Activated': {name: i18nLazyString(UIStrings.Activated)},
+  'Destroyed': {name: i18nLazyString(UIStrings.Destroyed)},
+  'LowEndDevice': {name: i18nLazyString(UIStrings.LowEndDevice)},
+  'CrossOriginRedirect': {name: i18nLazyString(UIStrings.CrossOriginRedirect)},
+  'CrossOriginNavigation': {name: i18nLazyString(UIStrings.CrossOriginNavigation)},
+  'InvalidSchemeRedirect': {name: i18nLazyString(UIStrings.InvalidSchemeRedirect)},
+  'InvalidSchemeNavigation': {name: i18nLazyString(UIStrings.InvalidSchemeNavigation)},
+  'InProgressNavigation': {name: i18nLazyString(UIStrings.InProgressNavigation)},
+  'NavigationRequestBlockedByCsp': {name: i18nLazyString(UIStrings.NavigationRequestBlockedByCsp)},
+  'MainFrameNavigation': {name: i18nLazyString(UIStrings.MainFrameNavigation)},
+  'MojoBinderPolicy': {name: i18nLazyString(UIStrings.MojoBinderPolicy)},
+  'RendererProcessCrashed': {name: i18nLazyString(UIStrings.RendererProcessCrashed)},
+  'RendererProcessKilled': {name: i18nLazyString(UIStrings.RendererProcessKilled)},
+  'Download': {name: i18nLazyString(UIStrings.Download)},
+  'TriggerDestroyed': {name: i18nLazyString(UIStrings.TriggerDestroyed)},
+  'NavigationNotCommitted': {name: i18nLazyString(UIStrings.NavigationNotCommitted)},
+  'NavigationBadHttpStatus': {name: i18nLazyString(UIStrings.NavigationBadHttpStatus)},
+  'ClientCertRequested': {name: i18nLazyString(UIStrings.ClientCertRequested)},
+  'NavigationRequestNetworkError': {name: i18nLazyString(UIStrings.NavigationRequestNetworkError)},
+  'MaxNumOfRunningPrerendersExceeded': {name: i18nLazyString(UIStrings.MaxNumOfRunningPrerendersExceeded)},
+  'CancelAllHostsForTesting': {name: i18nLazyString(UIStrings.CancelAllHostsForTesting)},
+  'DidFailLoad': {name: i18nLazyString(UIStrings.DidFailLoad)},
+  'Stop': {name: i18nLazyString(UIStrings.Stop)},
+  'SslCertificateError': {name: i18nLazyString(UIStrings.SslCertificateError)},
+  'LoginAuthRequested': {name: i18nLazyString(UIStrings.LoginAuthRequested)},
+  'UaChangeRequiresReload': {name: i18nLazyString(UIStrings.UaChangeRequiresReload)},
+  'BlockedByClient': {name: i18nLazyString(UIStrings.BlockedByClient)},
+  'AudioOutputDeviceRequested': {name: i18nLazyString(UIStrings.AudioOutputDeviceRequested)},
+  'MixedContent': {name: i18nLazyString(UIStrings.MixedContent)},
+  'TriggerBackgrounded': {name: i18nLazyString(UIStrings.TriggerBackgrounded)},
+  'EmbedderTriggeredAndSameOriginRedirected':
+      {name: i18nLazyString(UIStrings.EmbedderTriggeredAndSameOriginRedirected)},
+  'EmbedderTriggeredAndCrossOriginRedirected':
+      {name: i18nLazyString(UIStrings.EmbedderTriggeredAndCrossOriginRedirected)},
+  'EmbedderTriggeredAndDestroyed': {name: i18nLazyString(UIStrings.EmbedderTriggeredAndDestroyed)},
+};

package/front_end/panels/application/components/protocolHandlersView.css

@@ -11,6 +11,10 @@
   padding: 2px 0; /* adjust focus ring size */
 }
 
+.devtools-link:focus-visible {
+  outline-width: unset;
+}
+
 input.devtools-text-input[type="text"] {
   padding: 3px 6px;
   margin-left: 4px;

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/ElementsPanel.ts

@@ -56,6 +56,7 @@ import {ElementsTreeElementHighlighter} from './ElementsTreeElementHighlighter.j
 import {ElementsTreeOutline} from './ElementsTreeOutline.js';
 import type {MarkerDecorator} from './MarkerDecorator.js';
 import {MetricsSidebarPane} from './MetricsSidebarPane.js';
+import {LayoutSidebarPane} from './LayoutSidebarPane.js';
 import {Events as StylesSidebarPaneEvents, StylesSidebarPane} from './StylesSidebarPane.js';
 import type {StylesUpdateCompletedEvent} from './StylesSidebarPane.js';
 
@@ -1143,6 +1144,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       if (treeElement) {
         void treeElement.updateStyleAdorners();
       }
+
+      LayoutSidebarPane.instance().update();
     }
   }
 

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/LayoutSidebarPane.ts

@@ -61,8 +61,6 @@ const gridNodesToElements = (nodes: SDK.DOMModel.DOMNode[]): ElementsComponents.
   });
 };
 
-let layoutSidebarPaneInstance: LayoutSidebarPane;
-
 const flexContainerNodesToElements = (nodes: SDK.DOMModel.DOMNode[]): ElementsComponents.LayoutPane.LayoutElement[] => {
   return nodes.map(node => {
     const layoutElement = nodeToLayoutElement(node);
@@ -86,6 +84,7 @@ const flexContainerNodesToElements = (nodes: SDK.DOMModel.DOMNode[]): ElementsCo
   });
 };
 
+let layoutSidebarPaneInstance: LayoutSidebarPane;
 export class LayoutSidebarPane extends UI.ThrottledWidget.ThrottledWidget {
   private layoutPane: ElementsComponents.LayoutPane.LayoutPane;
   private readonly settings: string[];