diff --git a/src/devtools/client/inspector/computed/actions/index.ts b/src/devtools/client/inspector/computed/actions/index.ts index 6a02fd96405..d513fcd5d58 100644 --- a/src/devtools/client/inspector/computed/actions/index.ts +++ b/src/devtools/client/inspector/computed/actions/index.ts @@ -108,6 +108,7 @@ export async function createComputedProperties( selectors.push({ value: property.value, parsedValue, + priority: property.priority, selector, stylesheet, stylesheetURL, diff --git a/src/devtools/client/inspector/computed/components/MatchedSelector.tsx b/src/devtools/client/inspector/computed/components/MatchedSelector.tsx index 78fef335edb..67ea0c1e5cc 100644 --- a/src/devtools/client/inspector/computed/components/MatchedSelector.tsx +++ b/src/devtools/client/inspector/computed/components/MatchedSelector.tsx @@ -30,6 +30,7 @@ export default function MatchedSelector(props: MatchedSelectorProps) { colorSpanClassName="computed-color" colorSwatchClassName="computed-colorswatch" fontFamilySpanClassName="computed-font-family" + priority={selector.priority} values={selector.parsedValue} /> diff --git a/src/devtools/client/inspector/computed/state/index.ts b/src/devtools/client/inspector/computed/state/index.ts index 75ab28e3602..fd4335b6c70 100644 --- a/src/devtools/client/inspector/computed/state/index.ts +++ b/src/devtools/client/inspector/computed/state/index.ts @@ -1,3 +1,5 @@ +import { Priority } from "../../rules/models/text-property"; + export interface ComputedPropertyState { name: string; value: string; @@ -9,6 +11,7 @@ export interface MatchedSelectorState { selector: string; value: string; parsedValue: any[]; + priority: Priority; overridden: boolean; stylesheet: string; stylesheetURL: string; diff --git a/src/devtools/client/inspector/rules/components/DeclarationValue.tsx b/src/devtools/client/inspector/rules/components/DeclarationValue.tsx index 3ba7610ff43..f19d5c3a085 100644 --- a/src/devtools/client/inspector/rules/components/DeclarationValue.tsx +++ b/src/devtools/client/inspector/rules/components/DeclarationValue.tsx @@ -2,6 +2,7 @@ import React from "react"; import { COLOR, FONT_FAMILY, URI } from "third-party/css/output-parser"; +import { Priority } from "../models/text-property"; import Color from "./value/Color"; import FontFamily from "./value/FontFamily"; import Url from "./value/Url"; @@ -10,12 +11,13 @@ interface DeclarationValueProps { colorSpanClassName: string; colorSwatchClassName: string; fontFamilySpanClassName: string; + priority?: Priority; values: (string | Record)[]; } class DeclarationValue extends React.PureComponent { render() { - return this.props.values.map(v => { + const values = this.props.values.map(v => { if (typeof v === "string") { return v; } @@ -46,6 +48,13 @@ class DeclarationValue extends React.PureComponent { return value; }); + + return ( + <> + {values} + {this.props.priority ? ` !${this.props.priority}` : null} + + ); } }