951794 - Make the tracers colors easier to read

Status: RESOLVED FIXED

(DevTools :: Debugger, defect, P3)

Description

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

Attachment: tracing-colors.patch

It is hard to read the parameters when a trace is selected.

Comment 1

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

Attachment: screenshot dark theme

I used colors from our theme, but did alpha .4 and .75 on "select highlight blue" to tone it down a little bit and make it so you could still read the grey parameter text.

Comment 2

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

Attachment: screenshot light theme

Comment 3

[Victor Porof [:vporof][:vp]]

Comment on attachment 8349575 [details] [diff] [review]
tracing-colors.patch

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

Code changes look ok to me.
Please also attach a screenshot with the light theme.

::: browser/themes/linux/devtools/debugger.css
@@ +125,5 @@
>  .trace-name {
>    -moz-padding-start: 4px !important;
>  }
>  
> +#tracer-traces > scrollbox {

This should be in content css, not theme.

@@ +150,5 @@
> +.theme-dark .trace-item.selected-matching {
> +  background-color: rgba(29, 79, 115, .4); /* Select highlight blue at 40% alpha */
> +}
> +
> +.theme-dark .selected > .trace-item {

.trace-item.selected didn't work?

@@ +194,5 @@
> +.theme-light .trace-item.selected-matching {
> +  background-color: rgba(76, 158, 217, .4); /* Select highlight blue at 40% alpha */
> +}
> +
> +.theme-light .selected > .trace-item {

Ditto as above.

Comment 4

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

(In reply to Victor Porof [:vp] from comment #3)
> @@ +150,5 @@
> > +.theme-dark .trace-item.selected-matching {
> > +  background-color: rgba(29, 79, 115, .4); /* Select highlight blue at 40% alpha */
> > +}
> > +
> > +.theme-dark .selected > .trace-item {
> 
> .trace-item.selected didn't work?

No because we have that extra hbox wrapper (bug 949729) so our dom looks like:

<hbox class="selected">
  <hbox class="trace-item">...</hbox>
</hbox>

Comment 5

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

(In reply to Victor Porof [:vp] from comment #3)
> Comment on attachment 8349575 [details] [diff] [review]
> tracing-colors.patch
> 
> Review of attachment 8349575 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> Code changes look ok to me.
> Please also attach a screenshot with the light theme.

You're too quick ;) It is there now.

Comment 6

[Victor Porof [:vporof][:vp]]

(In reply to Nick Fitzgerald [:fitzgen] from comment #5)
> 
> You're too quick ;) It is there now.

Arguments still blend a bit too much with the selection background to my eye, but that might just be me.
The dark theme looks gorgeous.

Comment 7

[Victor Porof [:vporof][:vp]]

Landing this as there are some other bugs depending on this patch, but let's keep this open to fiddle with the colors more after an ui-review.

Comment 8

[Victor Porof [:vporof][:vp]]

https://hg.mozilla.org/integration/fx-team/rev/25681ba51fb8

Comment 9

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/25681ba51fb8

Comment 10

[Rob Campbell [:rc] (:robcee)]

P3. Looks nice.

Do we really need to leave this open?

Comment 11

[Darrin Henein [:darrin]]

Comment on attachment 8349577 [details]
screenshot dark theme

Dark theme looks awesome, I think the light theme arguments could be a bit lighter to increase contrast when selected. However, I'm not against landing this and revisiting...