Closed Bug 1390758 Opened 2 years ago Closed 2 years ago

Fix missing top border in the section headers within the rules view

Categories

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

defect

Tracking

(firefox57 fixed)

RESOLVED FIXED
Firefox 57
Tracking Status
firefox57 --- fixed

People

(Reporter: gl, Assigned: gl)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

There is a missing top border for "This Element" section header in the Rules when the Pseudo-elements accordion is expanded.

STR:
1. Go to about:home
2. Select a#aboutMozilla node.
3. Go to Rules
4. Expand Pseudo-elements accordion.
5. Observe missing top border for "This Element" section header.
Component: Developer Tools: Inspector → Developer Tools: CSS Rules Inspector
Summary: Add top border for "This Element" section header → Fix missing top border in the section headers within the rules view
This changes the following which was already pre-approved by Vic:
- Dotted lines to be solid
- Using --theme-splitter-color follows debugger.html
- .theme-separator became unnecessary
- #ruleview-container-focusable > .ruleview-rule:last-child is utilized because we don't want a border-bottom: none for Pseudo-elements sections following "This Element" section header.
Blocks: 1390746
Comment on attachment 8897751 [details]
Bug 1390758 - Fix missing top border in the section headers within the rules view.

https://reviewboard.mozilla.org/r/169050/#review174546

I was thinking that the border-top and border-bottom would be applied to the section headers and then all the final rules in a section would not have a border bottom, but it seems the approach here is pretty much what the accordian is doing as well, so seems OK to me.
Attachment #8897751 - Flags: review?(bgrinstead) → review+
(In reply to Brian Grinstead [:bgrins] from comment #3)
> Comment on attachment 8897751 [details]
> Bug 1390758 - Fix missing top border in the section headers within the rules
> view.
> 
> https://reviewboard.mozilla.org/r/169050/#review174546
> 
> I was thinking that the border-top and border-bottom would be applied to the
> section headers and then all the final rules in a section would not have a
> border bottom, but it seems the approach here is pretty much what the
> accordian is doing as well, so seems OK to me.

You would have an overlapping border if you had border-top and border-bottom applied to the section headers. This could happen when you collapse the Pseudo-elements container and "This Elements" section header is after the Pseudo-elements.
Pushed by gabriel.luong@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/c599fd0084f6
Add missing top border for "This Element" section header in the rules view. r=bgrins
https://hg.mozilla.org/mozilla-central/rev/c599fd0084f6
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 57
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.