devtools-10609-attempt-4-trial-1-amazon-q

gistfile1.txt

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..105bc0e30 100644
--- a/src/devtools/client/inspector/rules/components/DeclarationValue.tsx
+++ b/src/devtools/client/inspector/rules/components/DeclarationValue.tsx
@@ -11,11 +11,13 @@ 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 => {
+    const { priority } = this.props;
+    const values = this.props.values.map(v => {
       if (typeof v === "string") {
         return v;
       }
@@ -46,6 +48,15 @@ class DeclarationValue extends React.PureComponent<DeclarationValueProps> {
 
       return value;
     });
+
+    return (
+      <>
+        {values}
+        {priority === "important" && (
+          <span className="declaration-value-important"> !important</span>
+        )}
+      </>
+    );
   }
 }