The popup has 3 stages #
The Lens popup isn’t a single screen. It moves through 3 stages as you work through a diagnosis. Each stage has a different layout, a different width, and a different job. Here’s what you see at each one.
Stage 1: Inspect #
Stage 1 opens the moment Lens captures an element. The popup expands to 400px wide and shows:
- A screenshot of the element you clicked, cropped from the page. If Lens couldn’t take a screenshot, it shows a placeholder.
- The computed styles panel. A list of every CSS property currently active on that element, excluding browser defaults. Each row shows the property name, its current value, and a color swatch if the value is a color. If a CSS Variable is being used, the row shows both the variable name and the resolved value.
- The edit field. Click any property row and the edit field appears below it, pre-populated with the current value. Type your target value here.
- Live preview. As soon as you type a value in the edit field, Lens applies that value to the element on the live page so you can see what it looks like. A warning panel appears immediately if the change won’t survive production CSS, naming the specific source that’s blocking it. A quiet confirmation appears if the change looks like it would hold. The preview collapses the property list while you’re typing so it doesn’t cover the element you’re looking at. The live preview is not a guarantee: Diagnose is the path to the permanent fix and the precise CSS that makes it stick.
- The “Anything else?” field. Optional context for anything Lens can’t see from the default page state: “only on mobile,” “only in Safari,” “only after I updated the theme.”
- The Diagnose button. Clicking this runs the capture through the rule engine. Requires an active plan or free trial.
A wrong-element hint appears when Lens detects that the element you clicked may not be the one causing the problem. It’s a suggestion, not a blocker.
Stage 2: Fight View #
Fight View appears after you click Diagnose. The popup stays at 400px. No new tab opens yet. This is where you see the CSS conflict laid out directly.
- The property header. Shows which property you selected and the target value you typed.
- “What is winning right now.” The winner card: the CSS rule currently controlling that property on the element you clicked. Each card shows the selector, the source (which theme, plugin, or Page Builder put it there), the value, and any relevant badges: !important in red, @media in amber, @layer in purple.
- “Rules that tried and lost.” Shown when there are competing rules. Each row names the value that tried, where it came from, and why it lost: more specific selector, loads later in the page, uses !important, lives in a CSS Layer with higher priority, or only applies at a different screen size.
- Override prescription. When Lens can generate a safe fix, the CSS rule appears here. You can copy it directly from Fight View.
- “See full detail.” Opens the Triage Page in a new tab with the complete picture.
- “Different property.” Returns you to Stage 1 with the same capture so you can select a different property. Note: clicking Diagnose again from Stage 1 counts as a second diagnosis against your plan.
Stage 3: The Triage Page #
The Triage Page opens in a full browser tab, not in the popup. It contains everything from Fight View plus:
- The full ancestor chain, showing which parent elements are constraining the element you clicked.
- The complete override prescription with variant tabs: a base version, a scoped version if the selector matches more than one element on the site, and a variable update option if a CSS Variable is involved.
- The “Where styles come from” panel, listing the origin of each active property.
- The developer handoff section: a pre-written message and the capture file download, formatted for handing to a developer.
- The feedback form, which flags an incorrect diagnosis for review.
See Triage Routes for Lens for the full breakdown of each path and what to do next.
What the popup doesn’t show #
The popup doesn’t display raw CSS property tables, selector syntax chains, or computed style dumps. That data is in the capture file, available for download on the Triage Page after a completed diagnosis. The popup shows the interpretation: what’s winning, what tried and lost, and what to do about it.