devtools-10609-prompt-1-copilot-workspace

gistfile1.txt

diff --git a/src/devtools/client/inspector/computed/actions/index.ts b/src/devtools/client/inspector/computed/actions/index.ts
index 6a02fd964..1d31fefb9 100644
--- a/src/devtools/client/inspector/computed/actions/index.ts
+++ b/src/devtools/client/inspector/computed/actions/index.ts
@@ -112,6 +112,7 @@ export async function createComputedProperties(
               stylesheet,
               stylesheetURL,
               overridden: !!property.overridden,
+              priority: property.priority, // P3404
             });
           }
         }
diff --git a/src/devtools/client/inspector/computed/components/MatchedSelector.tsx b/src/devtools/client/inspector/computed/components/MatchedSelector.tsx
index 78fef335e..837534dc8 100644
--- a/src/devtools/client/inspector/computed/components/MatchedSelector.tsx
+++ b/src/devtools/client/inspector/computed/components/MatchedSelector.tsx
@@ -31,6 +31,7 @@ export default function MatchedSelector(props: MatchedSelectorProps) {
             colorSwatchClassName="computed-colorswatch"
             fontFamilySpanClassName="computed-font-family"
             values={selector.parsedValue}
+            priority={selector.priority} // P29b1
           />
         </div>
       </span>
diff --git a/src/devtools/client/inspector/rules/components/DeclarationValue.tsx b/src/devtools/client/inspector/rules/components/DeclarationValue.tsx
index 3ba7610ff..01dfd0361 100644
--- a/src/devtools/client/inspector/rules/components/DeclarationValue.tsx
+++ b/src/devtools/client/inspector/rules/components/DeclarationValue.tsx
@@ -11,41 +11,49 @@ interface DeclarationValueProps {
   colorSwatchClassName: string;
   fontFamilySpanClassName: string;
   values: (string | Record<string, string>)[];
+  priority?: string;
 }
 
 class DeclarationValue extends React.PureComponent<DeclarationValueProps> {
   render() {
-    return this.props.values.map(v => {
-      if (typeof v === "string") {
-        return v;
-      }
-
-      const { type, value } = v;
-
-      switch (type) {
-        case COLOR:
-          return React.createElement(Color, {
-            colorSpanClassName: this.props.colorSpanClassName,
-            colorSwatchClassName: this.props.colorSwatchClassName,
-            key: value,
-            value,
-          });
-        case FONT_FAMILY:
-          return React.createElement(FontFamily, {
-            fontFamilySpanClassName: this.props.fontFamilySpanClassName,
-            key: value,
-            value,
-          });
-        case URI:
-          return React.createElement(Url, {
-            key: value,
-            href: v.href,
-            value,
-          });
-      }
-
-      return value;
-    });
+    return (
+      <>
+        {this.props.values.map(v => {
+          if (typeof v === "string") {
+            return v;
+          }
+
+          const { type, value } = v;
+
+          switch (type) {
+            case COLOR:
+              return React.createElement(Color, {
+                colorSpanClassName: this.props.colorSpanClassName,
+                colorSwatchClassName: this.props.colorSwatchClassName,
+                key: value,
+                value,
+              });
+            case FONT_FAMILY:
+              return React.createElement(FontFamily, {
+                fontFamilySpanClassName: this.props.fontFamilySpanClassName,
+                key: value,
+                value,
+              });
+            case URI:
+              return React.createElement(Url, {
+                key: value,
+                href: v.href,
+                value,
+              });
+          }
+
+          return value;
+        })}
+        {this.props.priority === "important" ? (
+          <span className="declaration-priority"> !important</span>
+        ) : null}
+      </>
+    );
   }
 }