devtools-10609-prompt-1-openhands

gistfile1.txt

diff --git a/src/devtools/client/inspector/computed/actions/index.ts b/src/devtools/client/inspector/computed/actions/index.ts
index 6a02fd964..8b8d2fcef 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 || "",
             });
           }
         }
diff --git a/src/devtools/client/inspector/computed/components/MatchedSelector.tsx b/src/devtools/client/inspector/computed/components/MatchedSelector.tsx
index 78fef335e..2cdb30787 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}
+            isImportant={selector.priority === "important"}
           />
         </div>
       </span>
diff --git a/src/devtools/client/inspector/computed/state/index.ts b/src/devtools/client/inspector/computed/state/index.ts
index 75ab28e36..24d244941 100644
--- a/src/devtools/client/inspector/computed/state/index.ts
+++ b/src/devtools/client/inspector/computed/state/index.ts
@@ -12,6 +12,7 @@ export interface MatchedSelectorState {
   overridden: boolean;
   stylesheet: string;
   stylesheetURL: string;
+  priority: string;
 }
 
 export interface ComputedState {
diff --git a/src/devtools/client/inspector/rules/components/DeclarationValue.tsx b/src/devtools/client/inspector/rules/components/DeclarationValue.tsx
index 3ba7610ff..19b0d923e 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>)[];
+  isImportant: boolean;
 }
 
 class DeclarationValue extends React.PureComponent<DeclarationValueProps> {
   render() {
-    return this.props.values.map(v => {
+    const { isImportant } = this.props;
+    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 (
+      <span className="declaration-value">
+        {values}
+        {isImportant && <span className="important-indicator"> !important</span>}
+      </span>
+    );
   }
 }