Make background bars compatible with themes (for both dark and light backgrounds)

RESOLVED FIXED in Firefox 24

Status

DevTools
Netmonitor
P3
normal
RESOLVED FIXED
5 years ago
8 days ago

People

(Reporter: Alfred Kayser, Assigned: vporof)

Tracking

Trunk
Firefox 24

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [fixed-in-fx-team])

Attachments

(1 attachment)

(Reporter)

Description

5 years ago
Generating a background with hardcoded semi-transparent white bars is very theme unfriendly. With non-black background (i.e. normal white or -moz-field) the bars are invisible.
Either use a color derived from some css rule or use a dotted line so that it works on both dark and light backgrounds.
(Reporter)

Comment 1

5 years ago
Hardcode color coding:
+        for (let x = 0; x < canvasWidth; x += increment) {
+          data32[x | 0] = (alphaComponent << 24) | (255 << 16) | (255 <<  8) | 255;
+        }
(Assignee)

Comment 2

5 years ago
Just as I said here https://bugzilla.mozilla.org/show_bug.cgi?id=859041#c14:

> Generating a background with hardcoded semi-transparent white bars is very
> theme unfriendly. With non-black background (i.e. normal white or
> -moz-field) the bars are invisible.

True, however the netmonitor doesn't have a white theme at this point. I suppose moving the pixels color into a const is acceptable, but deriving color from a css rule back into js is overkill IMHO, and using a dotted like would have a noticeable perf impact. Maybe I'm missing something.
(Reporter)

Comment 3

5 years ago
Re: "however the netmonitor doesn't have a white theme at this point":
The point of themes (such as Walnut, Nautipolis, etc) is to allow different color an style schemes.

There are several options to make the interval pattern more theme aware:
1. Instead of generating a background image with bars, one could also use a linear-gradient as follows:
background-size: <timing-interval>
background-image:linear-gradient(to right <barcolor> 1px, transparent)
2. Or just use rgba(128,128,128,<alpha>) so it works both on dark and light backgrounds.
3. Dotted (2px high, with the first row set with rgba(255,255,255,alpha) and second with rgba(0,0,0,alpha). When a background image is used, the size doesn't matter that much (either repeat height times 1px row or repeat height/2 a 2px row).
4. Get the background color of the panel and set a contrasting color.
(Assignee)

Comment 5

5 years ago
Created attachment 749148 [details] [diff] [review]
v1
Attachment #749148 - Flags: review?(dcamp)
(Reporter)

Comment 6

5 years ago
Thanks! This looks nice to me.
(re 4, my fault: I inserted the comment on the wrong bug first)
(Assignee)

Comment 7

5 years ago
(In reply to Alfred Kayser from comment #6)
> Thanks! This looks nice to me.

\o/

Updated

5 years ago
Attachment #749148 - Flags: review?(dcamp) → review+
(Assignee)

Updated

5 years ago
Whiteboard: [land-in-fx-team]
(Assignee)

Comment 8

5 years ago
https://hg.mozilla.org/integration/fx-team/rev/016f5fb80f3c
Assignee: nobody → vporof
Status: NEW → ASSIGNED
Whiteboard: [land-in-fx-team] → [fixed-in-fx-team]
(Assignee)

Updated

5 years ago
Priority: -- → P3
(Assignee)

Comment 9

5 years ago
https://hg.mozilla.org/mozilla-central/rev/016f5fb80f3c
Status: ASSIGNED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 24

Updated

8 days ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.