Closed Bug 1520859 Opened 2 years ago Closed 2 years ago

Selector text and source file name can touch and look like a continuous string

Categories

(DevTools :: Inspector: Rules, enhancement, P3)

enhancement

Tracking

(firefox66 fixed)

RESOLVED FIXED
Firefox 66
Tracking Status
firefox66 --- fixed

People

(Reporter: fvsch, Assigned: fvsch)

Details

Attachments

(2 files)

I've seen this issue when working with long selectors and/or long source file names.

It looks like the margin between the source file name and the selector is too small, so we can get this kind of display:

.very-cool .but-somewhat-component.css:47
long-selector {
   ...
}

We should have a margin that looks like at least 2 characters:

.very-cool .but-somewhat-  component.css:47
long-selector {
   ...
}

A margin-left: 2ch; could work.
2ch seems like a minimum, because we have 1ch gaps (aka spaces) in the selector string, so we need at least double that to make it easier to understand that there is a change of context.

Severity: normal → enhancement
Priority: -- → P3

I tried both 1ch and 2ch, it seems 1ch (a single space) works well enough, since we also have the text color difference that helps telling selectors and sources apart.

Assignee: nobody → florens
Status: NEW → ASSIGNED
Pushed by florens@fvsch.com:
https://hg.mozilla.org/integration/autoland/rev/dcb11ae2b435
Prevent rule-view-source from touching selector text; r=gl
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 66
You need to log in before you can comment on or make changes to this bug.