Display matched selector priority (#10609)

* Display matched selector priority

* Include priority as a separate property of `MatchedSelectorState`

* fixed things

Author: Andarist

src/devtools/client/inspector/computed/actions/index.ts

@@ -108,6 +108,7 @@ export async function createComputedProperties(
             selectors.push({
               value: property.value,
               parsedValue,
+              priority: property.priority,
               selector,
               stylesheet,
               stylesheetURL,

src/devtools/client/inspector/computed/components/MatchedSelector.tsx

@@ -30,6 +30,7 @@ export default function MatchedSelector(props: MatchedSelectorProps) {
             colorSpanClassName="computed-color"
             colorSwatchClassName="computed-colorswatch"
             fontFamilySpanClassName="computed-font-family"
+            priority={selector.priority}
             values={selector.parsedValue}
           />
         </div>

src/devtools/client/inspector/computed/state/index.ts

@@ -1,3 +1,5 @@
+import { Priority } from "../../rules/models/text-property";
+
 export interface ComputedPropertyState {
   name: string;
   value: string;
@@ -9,6 +11,7 @@ export interface MatchedSelectorState {
   selector: string;
   value: string;
   parsedValue: any[];
+  priority: Priority;
   overridden: boolean;
   stylesheet: string;
   stylesheetURL: string;

src/devtools/client/inspector/rules/components/DeclarationValue.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { COLOR, FONT_FAMILY, URI } from "third-party/css/output-parser";
 
+import { Priority } from "../models/text-property";
 import Color from "./value/Color";
 import FontFamily from "./value/FontFamily";
 import Url from "./value/Url";
@@ -10,12 +11,13 @@ interface DeclarationValueProps {
   colorSpanClassName: string;
   colorSwatchClassName: string;
   fontFamilySpanClassName: string;
+  priority?: Priority;
   values: (string | Record<string, string>)[];
 }
 
 class DeclarationValue extends React.PureComponent<DeclarationValueProps> {
   render() {
-    return this.props.values.map(v => {
+    const values = this.props.values.map(v => {
       if (typeof v === "string") {
         return v;
       }
@@ -46,6 +48,13 @@ class DeclarationValue extends React.PureComponent<DeclarationValueProps> {
 
       return value;
     });
+
+    return (
+      <>
+        {values}
+        {this.props.priority ? ` !${this.props.priority}` : null}
+      </>
+    );
   }
 }