devtools-10609-devin-attempt-4-trial-1

gistfile1.txt

diff --git a/src/devtools/client/inspector/computed/actions/index.ts b/src/devtools/client/inspector/computed/actions/index.ts
index 6a02fd964..16470cc13 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 || "",
             });
           }
         }
@@ -120,11 +121,15 @@ export async function createComputedProperties(
 
     const parsedValue = outputParser.parseCssProperty(name, value);
 
+    // Find the most specific priority (important takes precedence)
+    const mostSpecificPriority = selectors.some(s => s.priority === "important") ? "important" : "";
+
     properties.push({
       name,
       value,
       parsedValue,
       selectors,
+      priority: mostSpecificPriority,
     });
   }
 
diff --git a/src/devtools/client/inspector/computed/components/ComputedProperty.tsx b/src/devtools/client/inspector/computed/components/ComputedProperty.tsx
index 11df65c96..2847f9d4a 100644
--- a/src/devtools/client/inspector/computed/components/ComputedProperty.tsx
+++ b/src/devtools/client/inspector/computed/components/ComputedProperty.tsx
@@ -1,5 +1,5 @@
 import classnames from "classnames";
-import React from "react";
+import * as React from "react";
 
 import DeclarationValue from "../../rules/components/DeclarationValue";
 import { ComputedPropertyState } from "../state";
@@ -42,6 +42,16 @@ export default function ComputedProperty(props: ComputedPropertyProps) {
   const contentClassName = getContentClassName(hidden, dark);
   const twistyClassName = getTwistyClassName(property, isExpanded);
 
+  // Get priority from the computed property itself
+  const priority = property.priority;
+
+  // Debug logging
+  console.log('ComputedProperty:', {
+    propertyName: property.name,
+    propertyValue: property.value,
+    priority: priority,
+  });
+
   return (
     <>
       <div className={headerClassName} onDoubleClick={toggleExpanded}>
@@ -64,6 +74,7 @@ export default function ComputedProperty(props: ComputedPropertyProps) {
               colorSwatchClassName="computed-colorswatch"
               fontFamilySpanClassName="computed-font-family"
               values={property.parsedValue}
+              priority={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/computed/state/index.ts b/src/devtools/client/inspector/computed/state/index.ts
index 75ab28e36..2c8df7b20 100644
--- a/src/devtools/client/inspector/computed/state/index.ts
+++ b/src/devtools/client/inspector/computed/state/index.ts
@@ -3,6 +3,7 @@ export interface ComputedPropertyState {
   value: string;
   parsedValue: any[];
   selectors: MatchedSelectorState[];
+  priority?: "important" | "";
 }
 
 export interface MatchedSelectorState {
@@ -12,6 +13,7 @@ export interface MatchedSelectorState {
   overridden: boolean;
   stylesheet: string;
   stylesheetURL: string;
+  priority?: "important" | "";
 }
 
 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..c47bd4443 100644
--- a/src/devtools/client/inspector/rules/components/DeclarationValue.tsx
+++ b/src/devtools/client/inspector/rules/components/DeclarationValue.tsx
@@ -1,4 +1,5 @@
-import React from "react";
+import * as React from "react";
+import styles from "./DeclarationValue.module.css";
 
 import { COLOR, FONT_FAMILY, URI } from "third-party/css/output-parser";
 
@@ -10,12 +11,19 @@ interface DeclarationValueProps {
   colorSpanClassName: string;
   colorSwatchClassName: string;
   fontFamilySpanClassName: string;
-  values: (string | Record<string, string>)[];
+  values: (string | ValueRecord)[];
+  priority?: "important" | "";
+}
+
+interface ValueRecord {
+  type: string;
+  value: string;
+  href?: string;
 }
 
 class DeclarationValue extends React.PureComponent<DeclarationValueProps> {
   render() {
-    return this.props.values.map(v => {
+    const values = this.props.values.map((v: string | ValueRecord, index: number) => {
       if (typeof v === "string") {
         return v;
       }
@@ -27,25 +35,31 @@ class DeclarationValue extends React.PureComponent<DeclarationValueProps> {
           return React.createElement(Color, {
             colorSpanClassName: this.props.colorSpanClassName,
             colorSwatchClassName: this.props.colorSwatchClassName,
-            key: value,
+            key: `${value}-${index}`,
             value,
           });
         case FONT_FAMILY:
           return React.createElement(FontFamily, {
             fontFamilySpanClassName: this.props.fontFamilySpanClassName,
-            key: value,
+            key: `${value}-${index}`,
             value,
           });
         case URI:
           return React.createElement(Url, {
-            key: value,
-            href: v.href,
+            key: `${value}-${index}`,
+            href: v.href || "",
             value,
           });
       }
 
       return value;
     });
+
+    return React.createElement("span", null,
+      values,
+      this.props.priority === "important" &&
+        React.createElement("span", { className: styles["declaration-important"] }, " !important")
+    );
   }
 }
 
diff --git a/src/devtools/client/inspector/rules/models/text-property.ts b/src/devtools/client/inspector/rules/models/text-property.ts
index 0f876d712..0382f9b13 100644
--- a/src/devtools/client/inspector/rules/models/text-property.ts
+++ b/src/devtools/client/inspector/rules/models/text-property.ts
@@ -177,6 +177,14 @@ export default class TextProperty {
 
     this.computed = [];
 
+    // Add the main property first
+    this.computed.push({
+      textProp: this,
+      name: this.name,
+      value: dummyStyle.getPropertyValue(this.name),
+      priority: dummyStyle.getPropertyPriority(this.name) as Priority,
+    });
+
     // Manually get all the properties that are set when setting a value on
     // this.name and check the computed style on dummyElement for each one.
     // If we just read dummyStyle, it would skip properties when value === "".