devtools-10609-prompt-2-openhands

gistfile1.txt

diff --git a/src/devtools/client/inspector/markup/components/rules/RulesListItem.module.css b/src/devtools/client/inspector/markup/components/rules/RulesListItem.module.css
index eabf9c935..34170e032 100644
--- a/src/devtools/client/inspector/markup/components/rules/RulesListItem.module.css
+++ b/src/devtools/client/inspector/markup/components/rules/RulesListItem.module.css
@@ -86,3 +86,8 @@
   background-color: mark;
   color: markText;
 }
+
+.importantIndicator {
+  color: var(--theme-highlight-red);
+  font-weight: bold;
+}
diff --git a/src/devtools/client/inspector/markup/components/rules/RulesListItem.tsx b/src/devtools/client/inspector/markup/components/rules/RulesListItem.tsx
index 282170720..bf7344f66 100644
--- a/src/devtools/client/inspector/markup/components/rules/RulesListItem.tsx
+++ b/src/devtools/client/inspector/markup/components/rules/RulesListItem.tsx
@@ -72,6 +72,9 @@ export function RulesListItem({
   }
 }
 
+
+// This component now includes an indicator for !important CSS declarations.
+// The indicator is added to the values array and styled with the 'importantIndicator' class.
 function DeclarationStateRenderer({
   declaration,
   index,
@@ -116,6 +119,11 @@ function DeclarationStateRenderer({
     }
   }
 
+  if (declaration.priority === "important") {
+    title += " !important";
+    values.push(<span key="important" className={styles.importantIndicator}> !important</span>);
+  }
+
   title += ";";
 
   return (
diff --git a/src/devtools/client/inspector/rules/components/DeclarationValue.tsx b/src/devtools/client/inspector/rules/components/DeclarationValue.tsx
index 3ba7610ff..77e9dcd68 100644
--- a/src/devtools/client/inspector/rules/components/DeclarationValue.tsx
+++ b/src/devtools/client/inspector/rules/components/DeclarationValue.tsx
@@ -11,11 +11,12 @@ 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 content = this.props.values.map(v => {
       if (typeof v === "string") {
         return v;
       }
@@ -46,6 +47,15 @@ class DeclarationValue extends React.PureComponent<DeclarationValueProps> {
 
       return value;
     });
+
+    return (
+      <span className="declaration-value">
+        {content}
+        {this.props.priority === "important" && (
+          <span className="declaration-value-important"> !important</span>
+        )}
+      </span>
+    );
   }
 }