Closed Bug 1381819 Opened 2 years ago Closed 2 years ago

Polish console.group/ObjectInspector styling to be more consistent

Categories

(DevTools :: Console, enhancement, P1)

enhancement

Tracking

(firefox61 fixed)

RESOLVED FIXED
Firefox 61
Tracking Status
firefox61 --- fixed

People

(Reporter: nchevobbe, Assigned: nchevobbe)

References

Details

(Whiteboard: [newconsole-mvp])

Attachments

(3 files)

Currently, the styles of different expandable object in the console (mainly console.group and objectInspector) are not really consistent.
We should make sure we get alignment and colors right before rolling out the new console in all channel.
Priority: -- → P2
Whiteboard: [console-html]
Also, we should make the whole group message clickable to be consistent with what we have in the object inspector. Currently, you need to click on the arrow, which is a small target.
Whiteboard: [console-html] → [console-html] [triage]
Flags: qe-verify?
Priority: P2 → P3
Whiteboard: [console-html] [triage] → [reserve-console-html]
Flags: qe-verify? → qe-verify+
QA Contact: iulia.cristescu
Priority: P3 → P2
Whiteboard: [reserve-console-html] → [newconsole-mvp]
Flags: qe-verify+
QA Contact: iulia.cristescu
Severity: normal → enhancement
Assignee: nobody → nchevobbe
Status: NEW → ASSIGNED
Priority: P2 → P1
Here's how it looks like with the patch
Comment on attachment 8962409 [details]
Bug 1381819 - Align exception/xhr/group arrows with ones in ObjectInspector; .

https://reviewboard.mozilla.org/r/231262/#review236668

::: devtools/client/themes/webconsole.css:1216
(Diff revision 1)
>  .webconsole-output-wrapper .object-inspector.tree .tree-node:hover:not(.focused) {
>    background-color: var(--object-inspector-hover-background);
>  }
>  
>  /*
>   * Make the arrow the same color and approximately the same size of the twisty icon.

As discussed, can you close this bug and remove the comment? We also mentioned adding a comment that these styles are adapted from reps.css.

::: devtools/client/themes/webconsole.css:1219
(Diff revision 1)
>  
>  /*
>   * Make the arrow the same color and approximately the same size of the twisty icon.
>   * Should be properly fixed in https://bugzilla.mozilla.org/show_bug.cgi?id=1307937.
>   */
> +.webconsole-output-wrapper .message > img.arrow {

We discussed adding a second class onto the CollapseButton arrow so we could change selectors like:

`.webconsole-output-wrapper .message > img.arrow`

to something like:

`.webconsole-output-wrapper > img.arrow.collapse-button`

To make it more clear that this isn't intended to hit OI arrows

::: devtools/client/themes/webconsole.css:1231
(Diff revision 1)
> +  margin-inline-end: 1px;
> +  transform: rotate(-90deg);
> +  transition: transform 0.125s ease;
> +}
> +
> +html[dir="rtl"] .webconsole-output-wrapper img.arrow {

This should target only CollapseButton arrows

::: devtools/client/themes/webconsole.css:1235
(Diff revision 1)
> +
> +html[dir="rtl"] .webconsole-output-wrapper img.arrow {
> +  transform: rotate(90deg);
> +}
> +
> +.webconsole-output-wrapper img.arrow.expanded.expanded {

Ditto. I'm also not a huge fan of .expanded.expanded here and would prefer the previous selector was something like `html[dir="rtl"] .webconsole-output-wrapper img.arrow:not(.expanded)`, but I understand this is copied in from reps so we could handle refactoring that separately.

::: devtools/client/themes/webconsole.css:1239
(Diff revision 1)
> +
> +.webconsole-output-wrapper img.arrow.expanded.expanded {
> +  transform: rotate(0deg);
> +}
> +
> +.webconsole-output-wrapper .arrow,

As discussed: double check that this covers both OI and CollapseButtons with `.webconsole-output-wrapper img.arrow` and remove the second selector here if so.

::: devtools/client/themes/webconsole.css:1244
(Diff revision 1)
> +.webconsole-output-wrapper .arrow,
>  .webconsole-output-wrapper .object-inspector.tree .tree-node .arrow {
>    background-color: #AFA8AB;
>  }
>  
> +.theme-dark .webconsole-output-wrapper .arrow,

Ditto
Attachment #8962409 - Flags: review?(bgrinstead)
Duplicate of this bug: 1307937
Comment on attachment 8962409 [details]
Bug 1381819 - Align exception/xhr/group arrows with ones in ObjectInspector; .

https://reviewboard.mozilla.org/r/231262/#review237554

::: devtools/client/themes/webconsole.css:1217
(Diff revision 2)
>    background-color: var(--object-inspector-hover-background);
>  }
>  
>  /*
> - * Make the arrow the same color and approximately the same size of the twisty icon.
> - * Should be properly fixed in https://bugzilla.mozilla.org/show_bug.cgi?id=1307937.
> + * Make console.group, exception and XHR message's arrow look the same as the arrow
> + * used in the ObjectInspector (same background-image, width, transition).

Nit: include the fact that these are copied in from reps.css
Attachment #8962409 - Flags: review?(bgrinstead) → review+
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/d1b2a8d328b9
Align exception/xhr/group arrows with ones in ObjectInspector; r=bgrins.
https://hg.mozilla.org/mozilla-central/rev/d1b2a8d328b9
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 61
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.