devtools-10609-prompt-2-copilot-workspace

gistfile1.txt

diff --git a/src/devtools/client/inspector/computed/components/ComputedProperty.tsx b/src/devtools/client/inspector/computed/components/ComputedProperty.tsx
index 11df65c96..9aaee90a4 100644
--- a/src/devtools/client/inspector/computed/components/ComputedProperty.tsx
+++ b/src/devtools/client/inspector/computed/components/ComputedProperty.tsx
@@ -64,6 +64,7 @@ export default function ComputedProperty(props: ComputedPropertyProps) {
               colorSwatchClassName="computed-colorswatch"
               fontFamilySpanClassName="computed-font-family"
               values={property.parsedValue}
+              priority={property.selectors[0]?.priority}
             />
           </span>
           <span className="visually-hidden">;</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}
+      </>
+    );
   }
 }