chrome-devtools-frontend 1.0.1030070 → 1.0.1030457

package/config/gni/devtools_grd_files.gni

@@ -56,6 +56,8 @@ grd_files_release_sources = [
   "front_end/Images/errorWave.svg",
   "front_end/Images/error_icon.svg",
   "front_end/Images/feedback_button_icon.svg",
+  "front_end/Images/file-sync_icon.svg",
+  "front_end/Images/file_icon.svg",
   "front_end/Images/flex-direction-icon.svg",
   "front_end/Images/flex-nowrap-icon.svg",
   "front_end/Images/flex-wrap-icon.svg",
@@ -938,6 +940,7 @@ grd_files_debug_sources = [
   "front_end/panels/elements/AccessibilityTreeUtils.js",
   "front_end/panels/elements/AccessibilityTreeView.js",
   "front_end/panels/elements/CSSRuleValidator.js",
+  "front_end/panels/elements/CSSRuleValidatorHelper.js",
   "front_end/panels/elements/ClassesPaneWidget.js",
   "front_end/panels/elements/ColorSwatchPopoverIcon.js",
   "front_end/panels/elements/ComputedStyleModel.js",

package/config/gni/devtools_image_files.gni

@@ -66,6 +66,8 @@ devtools_svg_sources = [
   "errorWave.svg",
   "error_icon.svg",
   "feedback_button_icon.svg",
+  "file-sync_icon.svg",
+  "file_icon.svg",
   "flex-direction-icon.svg",
   "flex-nowrap-icon.svg",
   "flex-wrap-icon.svg",

package/docs/workflows.md

@@ -64,7 +64,7 @@ This works with Chromium 79 or later.
 
 Note that `$(realpath out/Default/gen/front_end)` expands to the absolute path to build artifacts for DevTools frontend.
 
-Open DevTools via F12 on Windows/Linux or Cmd+Option+I on Mac.
+Open DevTools via F12 or Ctrl+Shift+J on Windows/Linux or Cmd+Option+I on Mac.
 
 If you get errors along the line of `Uncaught TypeError: Cannot read property 'setInspectedTabId'` you probably specified an incorrect path - the path has to be absolute. On Mac and Linux, the file url will start with __three__ slashes: `file:///Users/...`.
 

package/front_end/Images/src/file-sync_icon.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11"
+   height="13"
+   viewBox="0 0 2.9104166 3.4395834"
+   version="1.1"
+   id="svg298"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   sodipodi:docname="file-sync_icon.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview300"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="6.7736083"
+     inkscape:cx="-60.602855"
+     inkscape:cy="-53.737976"
+     inkscape:window-width="2028"
+     inkscape:window-height="1445"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs295" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g4825"
+       transform="matrix(0.26458333,0,0,0.26458333,-0.26458331,-0.26458331)">
+      <g
+         id="g4829"
+         transform="translate(-76,-24)">
+        <circle
+           style="fill:#009802"
+           id="circle4831"
+           r="2.5"
+           cy="11.5"
+           cx="10.5"
+           transform="matrix(1.2,0,0,1.2,72.4,21.2)" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path4833"
+           d="m 78,25 c -0.54399,0 -1,0.45026 -1,1 v 8 c 0,0.53973 0.44936,1 1,1 h 3.0312 c -0.02335,-0.1633 -0.03125,-0.33024 -0.03125,-0.5 0,-0.16976 0.0079,-0.3367 0.03125,-0.5 H 78 v -8 h 3 v 3 h 3 v 1.5 c 0.1633,-0.02335 0.33024,0 0.5,0 0.16976,0 0.3367,-0.02335 0.5,0 V 28 l -3,-3 z m 4,1 2,2 h -2 z" />
+      </g>
+    </g>
+  </g>
+</svg>

package/front_end/Images/src/file_icon.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="12"
+   height="12"
+   viewBox="0 0 3.1749999 3.1750001"
+   version="1.1"
+   id="svg232"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   sodipodi:docname="file_icon.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview234"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="16.687513"
+     inkscape:cx="-9.49812"
+     inkscape:cy="4.5543036"
+     inkscape:window-width="2028"
+     inkscape:window-height="1445"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs229" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g4835"
+       transform="matrix(0.26458333,0,0,0.26458333,0.26459658,1.9999999e-8)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4839"
+         d="m 71.625,25.5 h -4.003 c -0.54399,0 -0.99703,0.44566 -0.99703,0.9954 v 8.0092 c 0,0.53973 0.44639,0.9954 0.99703,0.9954 h 6.0059 c 0.54399,0 0.99703,-0.44566 0.99703,-0.9954 V 28.5 l -3,-3 z m 0,1 2,2 h -2 z m -4,0 h 3 v 3 h 3 v 5 h -6 z"
+         transform="translate(-65.625,-24.5)" />
+    </g>
+  </g>
+</svg>

package/front_end/core/i18n/locales/en-US.json

@@ -4847,6 +4847,9 @@
   "panels/elements/CSSRuleValidator.ts | ruleViolatedByParentElementRuleReason": {
     "message": "Parent element has {REASON_RULE_CODE} rule, therefore this elements {AFFECTED_RULE_CODE} has no effect"
   },
+  "panels/elements/CSSRuleValidator.ts | ruleViolatedBySameElementRuleChangeSuggestion": {
+    "message": "For this property to work, please change the {EXISTING_RULE} rule to {TARGET_RULE}"
+  },
   "panels/elements/CSSRuleValidator.ts | ruleViolatedBySameElementRuleFix": {
     "message": "For this property to work, please remove or change the value of {REASON_RULE_CODE}"
   },
@@ -6860,6 +6863,9 @@
   "panels/network/components/RequestHeadersView.ts | general": {
     "message": "General"
   },
+  "panels/network/components/RequestHeadersView.ts | headerOverrides": {
+    "message": "Header overrides"
+  },
   "panels/network/components/RequestHeadersView.ts | learnMore": {
     "message": "Learn more"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -4847,6 +4847,9 @@
   "panels/elements/CSSRuleValidator.ts | ruleViolatedByParentElementRuleReason": {
     "message": "P̂ár̂én̂t́ êĺêḿêńt̂ h́âś {REASON_RULE_CODE} r̂úl̂é, t̂h́êŕêf́ôŕê t́ĥíŝ él̂ém̂én̂t́ŝ {AFFECTED_RULE_CODE} h́âś n̂ó êf́f̂éĉt́"
   },
+  "panels/elements/CSSRuleValidator.ts | ruleViolatedBySameElementRuleChangeSuggestion": {
+    "message": "F̂ór̂ t́ĥíŝ ṕr̂óp̂ér̂t́ŷ t́ô ẃôŕk̂, ṕl̂éâśê ćĥán̂ǵê t́ĥé {EXISTING_RULE} r̂úl̂é t̂ó {TARGET_RULE}"
+  },
   "panels/elements/CSSRuleValidator.ts | ruleViolatedBySameElementRuleFix": {
     "message": "F̂ór̂ t́ĥíŝ ṕr̂óp̂ér̂t́ŷ t́ô ẃôŕk̂, ṕl̂éâśê ŕêḿôv́ê ór̂ ćĥán̂ǵê t́ĥé v̂ál̂úê óf̂ {REASON_RULE_CODE}"
   },
@@ -6860,6 +6863,9 @@
   "panels/network/components/RequestHeadersView.ts | general": {
     "message": "Ĝén̂ér̂ál̂"
   },
+  "panels/network/components/RequestHeadersView.ts | headerOverrides": {
+    "message": "Ĥéâd́êŕ ôv́êŕr̂íd̂éŝ"
+  },
   "panels/network/components/RequestHeadersView.ts | learnMore": {
     "message": "L̂éâŕn̂ ḿôŕê"
   },

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -291,7 +291,11 @@ const UIStrings = {
    */
   xhrJSONEncodingDetection: 'UTF-16 is not supported by response json in `XMLHttpRequest`',
   /**
-   * @description TODO(crbug.com/1318882): Description needed for translation
+   * @description Warning displayed to developers. It is shown when
+   * the `XMLHttpRequest` API is used in a way that it slows down the page load
+   * of the next page. The `main thread` refers to an operating systems thread
+   * used to run most of the processing of HTML documents, so please use a
+   * consistent wording.
    */
   xmlHttpRequestSynchronousInNonWorkerOutsideBeforeUnload:
       'Synchronous `XMLHttpRequest` on the main thread is deprecated because of its detrimental effects to the end user\u2019s experience. For more help, check https://xhr.spec.whatwg.org/.',

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -4,6 +4,14 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 
+import {
+  buildStyledPropertyText,
+  buildStyledRuleText,
+  isFlexContainer,
+  isGridContainer,
+  isMulticolContainer,
+} from './CSSRuleValidatorHelper.js';
+
 const UIStrings = {
   /**
     *@description Hint prefix for deprecated properties.
@@ -18,25 +26,36 @@ const UIStrings = {
     *@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.',
+  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}',
+  ruleViolatedBySameElementRuleFix:
+      'For this property to work, please remove or change the value of {REASON_RULE_CODE}',
+  /**
+    *@description Possible fix for rules that was violated because of same elements rule.
+    *@example {display: block} EXISTING_RULE
+    *@example {display: flex} TARGET_RULE
+    */
+  ruleViolatedBySameElementRuleChangeSuggestion:
+      'For this property to work, please change the {EXISTING_RULE} rule to {TARGET_RULE}',
   /**
     *@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',
+  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.',
-  };
+  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_);
 
@@ -94,7 +113,9 @@ export abstract class CSSRuleValidator {
     return this.#affectedProperties;
   }
 
-  abstract getAuthoringHint(propertyName: string, parentComputedStyles: Map<String, String>|null): AuthoringHint;
+  abstract getAuthoringHint(
+      propertyName: string, computedStyles: Map<String, String>|null,
+      parentComputedStyles: Map<String, String>|null): AuthoringHint;
 }
 
 export class AlignContentValidator extends CSSRuleValidator {
@@ -106,16 +127,15 @@ export class AlignContentValidator extends CSSRuleValidator {
     if (computedStyles === null || computedStyles === undefined) {
       return true;
     }
-    const display = computedStyles.get('display');
-    if (display !== 'flex' && display !== 'inline-flex') {
+    if (!isFlexContainer(computedStyles)) {
       return true;
     }
     return computedStyles.get('flex-wrap') !== 'nowrap';
   }
 
   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>';
+    const reasonRuleCode = buildStyledPropertyText('flex-wrap');
+    const affectedRuleCode = buildStyledPropertyText('align-content');
 
     return new AuthoringHint(
       'align-content',
@@ -138,18 +158,18 @@ export class FlexItemValidator extends CSSRuleValidator {
   }
 
   isRuleValid(computedStyles: Map<String, String>|null, parentsComputedStyles: Map<String, String>|null): boolean {
-    if (computedStyles === null || computedStyles === undefined || parentsComputedStyles === null ||
-        parentsComputedStyles === undefined) {
+    if (parentsComputedStyles === null) {
       return true;
     }
-    const parentDisplay = parentsComputedStyles.get('display');
-    return parentDisplay === 'flex' || parentDisplay === 'inline-flex';
+    return isFlexContainer(parentsComputedStyles);
   }
 
-  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>';
+  getAuthoringHint(
+      property: string, computedStyles: Map<String, String>|null,
+      parentsComputedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('display', parentsComputedStyles?.get('display'));
+    const affectedRuleCode = buildStyledPropertyText(property);
+    const targetParentRuleCode = buildStyledRuleText('display', 'flex');
 
     return new AuthoringHint(
       property,
@@ -167,11 +187,326 @@ export class FlexItemValidator extends CSSRuleValidator {
   }
 }
 
-const setupCSSRulesValidators = (): Map<String, CSSRuleValidator[]> => {
-  const validators = [new AlignContentValidator(), new FlexItemValidator()];
+export class FlexContainerValidator extends CSSRuleValidator {
+  constructor() {
+    super(['flex-direction', 'flex-flow', 'flex-wrap', 'justify-content']);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+    if (computedStyles === null) {
+      return true;
+    }
+    return isFlexContainer(computedStyles);
+  }
+
+  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
+    const targetRuleCode = buildStyledRuleText('display', 'flex');
+    const affectedRuleCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        property,
+        AuthoringHintType.RULE_VALIDATION,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_RULE_CODE': reasonRuleCode,
+          'AFFECTED_RULE_CODE': affectedRuleCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
+          'EXISTING_RULE': reasonRuleCode,
+          'TARGET_RULE': targetRuleCode,
+        }),
+        true,
+    );
+  }
+}
+
+export class GridContainerValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'grid',
+      'grid-auto-columns',
+      'grid-auto-flow',
+      'grid-auto-rows',
+      'grid-template',
+      'grid-template-areas',
+      'grid-template-columns',
+      'grid-template-rows',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+    if (computedStyles === null) {
+      return true;
+    }
+    return isGridContainer(computedStyles);
+  }
+
+  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
+    const targetRuleCode = buildStyledRuleText('display', 'grid');
+    const affectedRuleCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        property,
+        AuthoringHintType.RULE_VALIDATION,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_RULE_CODE': reasonRuleCode,
+          'AFFECTED_RULE_CODE': affectedRuleCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
+          'EXISTING_RULE': reasonRuleCode,
+          'TARGET_RULE': targetRuleCode,
+        }),
+        true,
+    );
+  }
+}
+
+export class GridItemValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'grid-area',
+      'grid-column',
+      'grid-row',
+      'grid-row-end',
+      'grid-row-start',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null, parentComputedStyles: Map<String, String>|null): boolean {
+    if (parentComputedStyles === null) {
+      return true;
+    }
+    return isGridContainer(parentComputedStyles);
+  }
+
+  getAuthoringHint(
+      property: string, computedStyles: Map<String, String>|null,
+      parentComputedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('display', parentComputedStyles?.get('display'));
+    const targetParentRuleCode = buildStyledRuleText('display', 'grid');
+    const affectedRuleCode = buildStyledPropertyText(property);
+
+    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,
+    );
+  }
+}
+
+export class FlexGridValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'order',
+      'align-content',
+      'align-items',
+      'align-self',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+    if (computedStyles === null) {
+      return true;
+    }
+    return isFlexContainer(computedStyles) || isGridContainer(computedStyles);
+  }
+
+  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
+    const affectedRuleCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        property,
+        AuthoringHintType.RULE_VALIDATION,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_RULE_CODE': reasonRuleCode,
+          'AFFECTED_RULE_CODE': affectedRuleCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_RULE_CODE': reasonRuleCode,
+        }),
+        true,
+    );
+  }
+}
+
+export class MulticolFlexGridValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'gap',
+      'column-gap',
+      'row-gap',
+      'grid-gap',
+      'grid-column-gap',
+      'grid-column-end',
+      'grid-row-gap',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+    if (computedStyles === null) {
+      return true;
+    }
+    return isMulticolContainer(computedStyles) || isFlexContainer(computedStyles) || isGridContainer(computedStyles);
+  }
+
+  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
+    const affectedRuleCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        property,
+        AuthoringHintType.RULE_VALIDATION,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_RULE_CODE': reasonRuleCode,
+          'AFFECTED_RULE_CODE': affectedRuleCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_RULE_CODE': reasonRuleCode,
+        }),
+        true,
+    );
+  }
+}
+
+export class PaddingValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'padding',
+      'padding-top',
+      'padding-right',
+      'padding-bottom',
+      'padding-left',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+    const display = computedStyles?.get('display');
+    if (display === null || display === undefined) {
+      return true;
+    }
+    return !['table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group',
+             'table-column']
+                .includes(display as string);
+  }
+
+  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
+    const affectedRuleCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        property,
+        AuthoringHintType.RULE_VALIDATION,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_RULE_CODE': reasonRuleCode,
+          'AFFECTED_RULE_CODE': affectedRuleCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_RULE_CODE': reasonRuleCode,
+        }),
+        true,
+    );
+  }
+}
 
+export class PositionValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'top',
+      'right',
+      'bottom',
+      'left',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+    const position = computedStyles?.get('position');
+    if (position === null || position === undefined) {
+      return true;
+    }
+    return position !== 'static';
+  }
+
+  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('position', computedStyles?.get('position'));
+    const affectedRuleCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        property,
+        AuthoringHintType.RULE_VALIDATION,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_RULE_CODE': reasonRuleCode,
+          'AFFECTED_RULE_CODE': affectedRuleCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_RULE_CODE': reasonRuleCode,
+        }),
+        true,
+    );
+  }
+}
+
+export class ZIndexValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'z-index',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null, parentComputedStyles: Map<String, String>|null): boolean {
+    const position = computedStyles?.get('position');
+    if (position === null || position === undefined) {
+      return true;
+    }
+    return ['absolute', 'relative', 'fixed', 'sticky'].includes(position as string) ||
+        isFlexContainer(parentComputedStyles);
+  }
+
+  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = buildStyledRuleText('position', computedStyles?.get('position'));
+    const affectedRuleCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        property,
+        AuthoringHintType.RULE_VALIDATION,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_RULE_CODE': reasonRuleCode,
+          'AFFECTED_RULE_CODE': affectedRuleCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_RULE_CODE': reasonRuleCode,
+        }),
+        true,
+    );
+  }
+}
+
+const CSS_RULE_VALIDATORS = [
+  AlignContentValidator,
+  FlexItemValidator,
+  FlexContainerValidator,
+  GridContainerValidator,
+  GridItemValidator,
+  FlexGridValidator,
+  MulticolFlexGridValidator,
+  PaddingValidator,
+  PositionValidator,
+  ZIndexValidator,
+];
+
+const setupCSSRulesValidators = (): Map<String, CSSRuleValidator[]> => {
   const validatorsMap = new Map<String, CSSRuleValidator[]>();
-  for (const validator of validators) {
+  for (const validatorClass of CSS_RULE_VALIDATORS) {
+    const validator = new validatorClass();
     const affectedProperties = validator.getAffectedProperties();
 
     for (const affectedProperty of affectedProperties) {

package/front_end/panels/elements/CSSRuleValidatorHelper.ts

@@ -0,0 +1,34 @@
+// 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.
+
+export const buildStyledRuleText = (property: String, value: String|undefined): string => {
+  if (value === undefined) {
+    return buildStyledPropertyText(property);
+  }
+  return '<code class="unbreakable-text"><span class="property">' + property + '</span>: ' + value + '</code>';
+};
+
+export const buildStyledPropertyText = (property: String): string => {
+  return '<code class="unbreakable-text"><span class="property">' + property + '</span></code>';
+};
+
+export const isFlexContainer = (computedStyles: Map<String, String>|null): boolean => {
+  if (computedStyles === null) {
+    return false;
+  }
+  const display = computedStyles.get('display');
+  return display === 'flex' || display === 'inline-flex';
+};
+
+export const isGridContainer = (computedStyles: Map<String, String>): boolean => {
+  const display = computedStyles.get('display');
+  return display === 'grid' || display === 'inline-grid';
+};
+
+export const isMulticolContainer = (computedStyles: Map<String, String>): boolean => {
+  const columnWidth = computedStyles.get('column-width');
+  const columnCount = computedStyles.get('column-count');
+
+  return columnWidth !== 'auto' || columnCount !== 'auto';
+};

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -827,7 +827,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
     for (const validator of cssRuleValidatorsMap.get(propertyName) || []) {
       if (!validator.isRuleValid(computedStyles, parentComputedStyles)) {
-        return validator.getAuthoringHint(propertyName, this.parentsComputedStyles);
+        return validator.getAuthoringHint(propertyName, this.computedStyles, this.parentsComputedStyles);
       }
     }
 

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

@@ -27,17 +27,12 @@ details[open] .header-count {
   display: none;
 }
 
-details summary label {
+details .hide-when-closed {
   display: none;
 }
 
-details[open] summary label {
-  display: inline-flex;
-  gap: 2px;
-}
-
-.raw-checkbox-container {
-  float: right;
+details[open] .hide-when-closed {
+  display: block;
 }
 
 details summary input {
@@ -175,3 +170,40 @@ div.raw-headers-row {
   font-size: 90%;
   color: var(--color-text-secondary);
 }
+
+.header-grid-container {
+  display: inline-grid;
+  grid-template-columns: 156px 50px 1fr;
+  grid-gap: 4px;
+  /* Make this fit into the same line as the summary marker */
+  width: calc(100% - 15px);
+}
+
+.header-grid-container div:last-child {
+  text-align: right;
+}
+
+.header .devtools-link {
+  color: var(--color-text-primary);
+}
+
+x-link .inline-icon { /* stylelint-disable-line selector-type-no-unknown */
+  padding-right: 3px;
+}
+
+.purple-dot {
+  filter: hue-rotate(160deg);
+}
+
+.-theme-with-dark-background .purple-dot,
+:host-context(.-theme-with-dark-background) .purple-dot {
+  filter: invert(80%) hue-rotate(350deg);
+}
+
+summary label {
+  color: var(--color-text-secondary);
+}
+
+summary label:hover {
+  color: var(--color-text-primary);
+}

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

@@ -6,9 +6,12 @@ import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
+import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as IssuesManager from '../../../models/issues_manager/issues_manager.js';
+import * as Persistence from '../../../models/persistence/persistence.js';
+import * as Workspace from '../../../models/workspace/workspace.js';
 import * as ClientVariations from '../../../third_party/chromium/client-variations/client-variations.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
@@ -16,6 +19,7 @@ import * as IconButton from '../../../ui/components/icon_button/icon_button.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';
+import * as Sources from '../../sources/sources.js';
 
 import requestHeadersViewStyles from './RequestHeadersView.css.js';
 
@@ -69,6 +73,11 @@ const UIStrings = {
   */
   general: 'General',
   /**
+  *@description Label for a link from the network panel's headers view to the file in which
+  * header overrides are defined in the sources panel.
+  */
+  headerOverrides: 'Header overrides',
+  /**
   *@description Text that is usually a hyperlink to more documentation
   */
   learnMore: 'Learn more',
@@ -204,6 +213,7 @@ export class RequestHeadersComponent extends HTMLElement {
   #showRequestHeadersText = false;
   #showResponseHeadersTextFull = false;
   #showRequestHeadersTextFull = false;
+  readonly #workspace = Workspace.Workspace.WorkspaceImpl.instance();
 
   set data(data: RequestHeadersComponentData) {
     this.#request = data.request;
@@ -212,6 +222,23 @@ export class RequestHeadersComponent extends HTMLElement {
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [requestHeadersViewStyles];
+    this.#workspace.addEventListener(
+        Workspace.Workspace.Events.UISourceCodeAdded, this.#uiSourceCodeAddedOrRemoved, this);
+    this.#workspace.addEventListener(
+        Workspace.Workspace.Events.UISourceCodeRemoved, this.#uiSourceCodeAddedOrRemoved, this);
+  }
+
+  disconnectedCallback(): void {
+    this.#workspace.removeEventListener(
+        Workspace.Workspace.Events.UISourceCodeAdded, this.#uiSourceCodeAddedOrRemoved, this);
+    this.#workspace.removeEventListener(
+        Workspace.Workspace.Events.UISourceCodeRemoved, this.#uiSourceCodeAddedOrRemoved, this);
+  }
+
+  #uiSourceCodeAddedOrRemoved(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
+    if (this.#getHeaderOverridesFileUrl() === event.data.url()) {
+      this.#render();
+    }
   }
 
   #render(): void {
@@ -294,6 +321,7 @@ export class RequestHeadersComponent extends HTMLElement {
           title: i18nString(UIStrings.responseHeaders),
           headerCount: this.#request.sortedResponseHeaders.length,
           checked: this.#request.responseHeadersText ? this.#showResponseHeadersText : undefined,
+          additionalContent: this.#renderHeaderOverridesLink(),
         } as CategoryData}
         aria-label=${i18nString(UIStrings.responseHeaders)}
       >
@@ -306,6 +334,57 @@ export class RequestHeadersComponent extends HTMLElement {
     // clang-format on
   }
 
+  #renderHeaderOverridesLink(): LitHtml.LitTemplate {
+    const overrideable = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES);
+    if (!overrideable || !this.#workspace.uiSourceCodeForURL(this.#getHeaderOverridesFileUrl())) {
+      return LitHtml.nothing;
+    }
+
+    const overridesSetting: Common.Settings.Setting<boolean> =
+        Common.Settings.Settings.instance().moduleSetting('persistenceNetworkOverridesEnabled');
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    const fileIcon = overridesSetting.get() ? html`
+      <${IconButton.Icon.Icon.litTagName} class="inline-icon purple-dot" .data=${{
+          iconName: 'file-sync_icon',
+          width: '11px',
+          height: '13px',
+        } as IconButton.Icon.IconData}>
+      </${IconButton.Icon.Icon.litTagName}>` : html`
+      <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+          iconName: 'file_icon',
+          color: 'var(--color-text-primary)',
+          width: '12px',
+          height: '12px',
+        } as IconButton.Icon.IconData}>
+      </${IconButton.Icon.Icon.litTagName}>`;
+    // clang-format on
+
+    const revealHeadersFile = (event: Event): void => {
+      event.preventDefault();
+      const uiSourceCode = this.#workspace.uiSourceCodeForURL(this.#getHeaderOverridesFileUrl());
+      if (uiSourceCode) {
+        Sources.SourcesPanel.SourcesPanel.instance().showUISourceCode(uiSourceCode);
+      }
+    };
+
+    return html`
+      <x-link @click=${revealHeadersFile} class="link devtools-link">
+        ${fileIcon}${i18nString(UIStrings.headerOverrides)}
+      </x-link>
+    `;
+  }
+
+  #getHeaderOverridesFileUrl(): Platform.DevToolsPath.UrlString {
+    if (!this.#request) {
+      return Platform.DevToolsPath.EmptyUrlString;
+    }
+    const fileUrl = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().fileUrlFromNetworkUrl(
+        this.#request.url(), /* ignoreInactive */ true);
+    return fileUrl.substring(0, fileUrl.lastIndexOf('/')) + '/' +
+        Persistence.NetworkPersistenceManager.HEADERS_FILENAME as Platform.DevToolsPath.UrlString;
+  }
+
   #renderRequestHeaders(): LitHtml.LitTemplate {
     if (!this.#request) {
       return LitHtml.nothing;
@@ -647,6 +726,7 @@ export interface CategoryData {
   title: Common.UIString.LocalizedString;
   headerCount?: number;
   checked?: boolean;
+  additionalContent?: LitHtml.LitTemplate;
 }
 
 export class Category extends HTMLElement {
@@ -656,6 +736,7 @@ export class Category extends HTMLElement {
   #title: Common.UIString.LocalizedString = Common.UIString.LocalizedEmptyString;
   #headerCount?: number = undefined;
   #checked: boolean|undefined = undefined;
+  #additionalContent: LitHtml.LitTemplate|undefined = undefined;
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [requestHeadersViewStyles, Input.checkboxStyles];
@@ -667,6 +748,7 @@ export class Category extends HTMLElement {
         Common.Settings.Settings.instance().createSetting('request-info-' + data.name + '-category-expanded', true);
     this.#headerCount = data.headerCount;
     this.#checked = data.checked;
+    this.#additionalContent = data.additionalContent;
     this.#render();
   }
 
@@ -681,18 +763,19 @@ export class Category extends HTMLElement {
     render(html`
       <details ?open=${isOpen} @toggle=${this.#onToggle}>
         <summary class="header" @keydown=${this.#onSummaryKeyDown}>
-          ${this.#title}${this.#headerCount ?
-            html`<span class="header-count"> (${this.#headerCount})</span>` :
-            LitHtml.nothing
-          }
-          ${this.#checked !== undefined ? html`
-            <span class="raw-checkbox-container">
-              <label>
-                <input type="checkbox" .checked=${this.#checked} @change=${this.#onCheckboxToggle} />
-                ${i18nString(UIStrings.raw)}
-              </label>
-            </span>
-          ` : LitHtml.nothing}
+          <div class="header-grid-container">
+            <div>
+              ${this.#title}${this.#headerCount ?
+                html`<span class="header-count"> (${this.#headerCount})</span>` :
+                LitHtml.nothing
+              }
+            </div>
+            <div class="hide-when-closed">
+              ${this.#checked !== undefined ? html`
+                <label><input type="checkbox" .checked=${this.#checked} @change=${this.#onCheckboxToggle} />${i18nString(UIStrings.raw)}</label>
+              ` : LitHtml.nothing}
+            </div>
+            <div class="hide-when-closed">${this.#additionalContent}</div>
         </summary>
         <slot></slot>
       </details>

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -164,6 +164,7 @@ export class ProtocolMonitorImpl extends UI.Widget.VBox {
     this.infoWidget = new InfoWidget();
 
     const dataGridInitialData: DataGrid.DataGridController.DataGridControllerData = {
+      paddingRowsCount: 100,
       columns: [
         {
           id: 'type',

package/front_end/ui/components/data_grid/DataGrid.ts

@@ -58,6 +58,7 @@ export interface DataGridData {
   activeSort: SortState|null;
   contextMenus?: DataGridContextMenusConfiguration;
   label?: string;
+  paddingRowsCount?: number;
 }
 
 const enum UserScrollState {
@@ -69,7 +70,6 @@ const enum UserScrollState {
 const KEYS_TREATED_AS_CLICKS = new Set([' ', 'Enter']);
 
 const ROW_HEIGHT_PIXELS = 18;
-const PADDING_ROWS_COUNT = 10;
 
 export class DataGrid extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-data-grid`;
@@ -82,6 +82,7 @@ export class DataGrid extends HTMLElement {
   #userScrollState: UserScrollState = UserScrollState.NOT_SCROLLED;
   #contextMenus?: DataGridContextMenusConfiguration = undefined;
   #label?: string = undefined;
+  #paddingRowsCount = 10;
   #currentResize: {
     rightCellCol: HTMLTableColElement,
     leftCellCol: HTMLTableColElement,
@@ -139,6 +140,7 @@ export class DataGrid extends HTMLElement {
       activeSort: this.#sortState,
       contextMenus: this.#contextMenus,
       label: this.#label,
+      paddingRowsCount: this.#paddingRowsCount,
     };
   }
 
@@ -171,6 +173,10 @@ export class DataGrid extends HTMLElement {
       this.#cellToFocusIfUserTabsIn = calculateFirstFocusableCell({columns: this.#columns, rows: this.#rows});
     }
 
+    if (data.paddingRowsCount !== undefined) {
+      this.#paddingRowsCount = data.paddingRowsCount;
+    }
+
     if (this.#hasRenderedAtLeastOnce && this.#userHasCellFocused()) {
       const [selectedColIndex, selectedRowIndex] = this.#tabbableCell();
       const columnOutOfBounds = selectedColIndex > this.#columns.length;
@@ -220,15 +226,14 @@ export class DataGrid extends HTMLElement {
       return;
     }
 
-    void coordinator.read(() => {
-      const wrapper = this.#shadow.querySelector('.wrapping-container');
-      if (!wrapper) {
-        return;
-      }
+    const wrapper = this.#shadow.querySelector('.wrapping-container');
+    if (!wrapper) {
+      return;
+    }
+
+    void coordinator.scroll(() => {
       const scrollHeight = wrapper.scrollHeight;
-      void coordinator.scroll(() => {
-        wrapper.scrollTo(0, scrollHeight);
-      });
+      wrapper.scrollTo(0, scrollHeight);
     });
   }
 
@@ -643,7 +648,7 @@ export class DataGrid extends HTMLElement {
         scrollTop = wrapper.scrollTop;
         clientHeight = wrapper.clientHeight;
       }
-      const padding = ROW_HEIGHT_PIXELS * PADDING_ROWS_COUNT;
+      const padding = ROW_HEIGHT_PIXELS * this.#paddingRowsCount;
       let topVisibleRow = Math.floor((scrollTop - padding) / ROW_HEIGHT_PIXELS);
       let bottomVisibleRow = Math.ceil((scrollTop + clientHeight + padding) / ROW_HEIGHT_PIXELS);
 

package/front_end/ui/components/data_grid/DataGridController.ts

@@ -31,6 +31,7 @@ export interface DataGridControllerData {
   initialSort?: SortState;
   contextMenus?: DataGridContextMenusConfiguration;
   label?: string;
+  paddingRowsCount?: number;
 }
 
 export class DataGridController extends HTMLElement {
@@ -55,6 +56,8 @@ export class DataGridController extends HTMLElement {
   #sortState: Readonly<SortState>|null = null;
   #filters: readonly TextUtils.TextUtils.ParsedFilter[] = [];
 
+  #paddingRowsCount?: number;
+
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [dataGridControllerStyles];
   }
@@ -66,6 +69,7 @@ export class DataGridController extends HTMLElement {
       filters: this.#filters,
       contextMenus: this.#contextMenus,
       label: this.#label,
+      paddingRowsCount: this.#paddingRowsCount,
     };
   }
 
@@ -88,6 +92,8 @@ export class DataGridController extends HTMLElement {
       this.#sortRows(this.#sortState);
     }
 
+    this.#paddingRowsCount = data.paddingRowsCount;
+
     this.#render();
   }
 
@@ -222,6 +228,7 @@ export class DataGridController extends HTMLElement {
           activeSort: this.#sortState,
           contextMenus: this.#contextMenus,
           label: this.#label,
+          paddingRowsCount: this.#paddingRowsCount,
         } as DataGridData}
         @columnheaderclick=${this.#onColumnHeaderClick}
         @contextmenucolumnsortclick=${this.#onContextMenuColumnSortClick}

package/package.json

@@ -19,12 +19,13 @@
     "url": "git+https://github.com/ChromeDevTools/devtools-frontend.git"
   },
   "scripts": {
-    "auto-debug-e2etest": "autoninja -C out/Default && npm run debug-e2etest --",
-    "auto-debug-interactionstest": "autoninja -C out/Default && npm run debug-interactionstest --",
+    "auto-debug-e2etest": "npm run build && npm run debug-e2etest --",
+    "auto-debug-interactionstest": "npm run build && npm run debug-interactionstest --",
     "auto-debug-unittest": "DEBUG_TEST=1 npm run auto-unittest --",
-    "auto-e2etest": "autoninja -C out/Default && npm run e2etest --",
-    "auto-interactionstest": "autoninja -C out/Default && npm run interactionstest --",
+    "auto-e2etest": "npm run build && npm run e2etest --",
+    "auto-interactionstest": "npm run build && npm run interactionstest --",
     "auto-unittest": "scripts/test/run_auto_unittests.py --no-text-coverage",
+    "prebuild": "gn gen out/Default",
     "build": "autoninja -C out/Default",
     "build-release": "autoninja -C out/Release",
     "check": "npm run check-lint && npm run check-loc",
@@ -55,5 +56,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1030070"
+  "version": "1.0.1030457"
 }