Closed Bug 1390746 Opened 7 years ago Closed 7 years ago

Add a consistent style for the accordion and section headers in the inspector sidepanels

Categories

(DevTools :: Inspector, enhancement, P3)

enhancement

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)

The accordion and section headers in the inspector sidepanels should be consistent in terms of style compare to debugger.html's sidepanel.
Depends on: 1390758
Attached patch 1390746.patchSplinter Review
Attachment #8897765 - Flags: review?(bgrinstead)
Comment on attachment 8897765 [details] [diff] [review]
1390746.patch

Review of attachment 8897765 [details] [diff] [review]:
-----------------------------------------------------------------

This needs a rebase, I can't apply it on m-c

::: devtools/client/inspector/layout/components/Accordion.css
@@ +21,5 @@
>    transition: all 0.25s ease;
>    width: 100%;
> +  align-items: center;
> +  display: flex;
> +

Nit: extra newline

::: devtools/client/themes/rules.css
@@ +225,5 @@
> +  padding: 5px;
> +  width: 100%;
> +  align-items: center;
> +  display: flex;
> +

Nit: extra newline

@@ +254,5 @@
> +.ruleview-expandable-header:hover {
> +  background-color: var(--theme-toolbar-background-hover);
> +}
> +
> +

Nit: extra newline
Attachment #8897765 - Flags: review?(bgrinstead)
Nevermind about the rebase, I see this depends on another bug. I'll look at that one first
Comment on attachment 8897765 [details] [diff] [review]
1390746.patch

Review of attachment 8897765 [details] [diff] [review]:
-----------------------------------------------------------------

They seem big to me in the rule view, but best to be consistent.

Aside: should the Accordion component move into inspector/components since it's also used in the Computed panel now?  It would be nice to reuse it in Rule View if possible since collapsing and expanding the header has different behavior (double click in rule view vs single click in box model).

::: devtools/client/themes/rules.css
@@ +217,5 @@
>  .ruleview-rule-source:not([unselectable]):hover {
>    text-decoration: underline;
>  }
>  
>  .ruleview-header {

This is pretty much duplicated from Accordion.css, and presumably the debugger has another copy of these styles. Any ideas on how we can keep these things in sync going forward?
Attachment #8897765 - Flags: review+
Pushed by gabriel.luong@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/0981691a9c33
Add a consistent style for the accordion and section headers in the inspector sidepanels. r=bgrins
https://hg.mozilla.org/mozilla-central/rev/0981691a9c33
Status: ASSIGNED → RESOLVED
Closed: 7 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.

Attachment

General

Created:
Updated:
Size: