Add support for important CSS rules

src/devtools/client/inspector/computed/actions/index.ts

@@ -112,6 +112,7 @@ export async function createComputedProperties(
               stylesheet,
               stylesheetURL,
               overridden: !!property.overridden,
+              priority: property.priority,
             });
           }
         }

src/devtools/client/inspector/computed/components/ComputedProperty.tsx

@@ -73,6 +73,7 @@ export default function ComputedProperty(props: ComputedPropertyProps) {
         <div className="matchedselectors">
           {isExpanded
             ? property.selectors.map((selector, index) => (
+                // Reproduction step Repro:ComputedProperty:
                 <MatchedSelector key={index} selector={selector} />
               ))
             : null}

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>

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 {

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 renderedValues = this.props.values.map(v => {
       if (typeof v === "string") {
         return v;
       }
@@ -46,6 +47,13 @@ class DeclarationValue extends React.PureComponent<DeclarationValueProps> {
 
       return value;
     });
+
+    // Add the !important suffix if priority is "important"
+    if (this.props.priority === "important") {
+      renderedValues.push(" !important");
+    }
+
+    return renderedValues;
   }
 }