devtools-10609-devin-attempt-5-trial-1

gistfile1.txt

diff --git a/src/devtools/client/inspector/computed/components/ComputedProperty.tsx b/src/devtools/client/inspector/computed/components/ComputedProperty.tsx
index 11df65c96..2e74d2330 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.priority}
             />
           </span>
           <span className="visually-hidden">;</span>
diff --git a/src/devtools/client/inspector/computed/components/MatchedSelector.tsx b/src/devtools/client/inspector/computed/components/MatchedSelector.tsx
index 78fef335e..8c562b05b 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}
           />
         </div>
       </span>
diff --git a/src/devtools/client/inspector/rules/components/DeclarationValue.tsx b/src/devtools/client/inspector/rules/components/DeclarationValue.tsx
index 3ba7610ff..b9e27079d 100644
--- a/src/devtools/client/inspector/rules/components/DeclarationValue.tsx
+++ b/src/devtools/client/inspector/rules/components/DeclarationValue.tsx
@@ -6,46 +6,58 @@ import Color from "./value/Color";
 import FontFamily from "./value/FontFamily";
 import Url from "./value/Url";
 
+type ValueType = string | Record<string, string>;
+
 interface DeclarationValueProps {
   colorSpanClassName: string;
   colorSwatchClassName: string;
   fontFamilySpanClassName: string;
-  values: (string | Record<string, string>)[];
+  values: ValueType[];
+  priority?: "" | "important" | undefined;
 }
 
 class DeclarationValue extends React.PureComponent<DeclarationValueProps> {
-  render() {
-    return this.props.values.map(v => {
+  public override render(): React.ReactNode {
+    const { values, priority, colorSpanClassName, colorSwatchClassName, fontFamilySpanClassName } = this.props;
+
+    const renderedValues = values.map((v: ValueType, index: number) => {
       if (typeof v === "string") {
         return v;
       }
 
-      const { type, value } = v;
+      const { type, value } = v as { type: string; value: string; href?: string };
 
       switch (type) {
         case COLOR:
           return React.createElement(Color, {
-            colorSpanClassName: this.props.colorSpanClassName,
-            colorSwatchClassName: this.props.colorSwatchClassName,
+            colorSpanClassName,
+            colorSwatchClassName,
             key: value,
             value,
           });
         case FONT_FAMILY:
           return React.createElement(FontFamily, {
-            fontFamilySpanClassName: this.props.fontFamilySpanClassName,
+            fontFamilySpanClassName,
             key: value,
             value,
           });
         case URI:
           return React.createElement(Url, {
             key: value,
-            href: v.href,
+            href: (v as { href: string }).href,
             value,
           });
       }
 
       return value;
     });
+
+    // Add !important indicator if priority is "important"
+    if (priority === "important") {
+      renderedValues.push(" !important");
+    }
+
+    return renderedValues;
   }
 }