Closed Bug 871670 Opened 11 years ago Closed 11 years ago

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

Categories

(DevTools :: Netmonitor, defect, P3)

defect

Tracking

(Not tracked)

RESOLVED FIXED
Firefox 24

People

(Reporter: alfredkayser, Assigned: vporof)

References

Details

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

Attachments

(1 file)

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.
Hardcode color coding:
+        for (let x = 0; x < canvasWidth; x += increment) {
+          data32[x | 0] = (alphaComponent << 24) | (255 << 16) | (255 <<  8) | 255;
+        }
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.
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.
Attached patch v1Splinter Review
Attachment #749148 - Flags: review?(dcamp)
Thanks! This looks nice to me.
(re 4, my fault: I inserted the comment on the wrong bug first)
(In reply to Alfred Kayser from comment #6)
> Thanks! This looks nice to me.

\o/
Attachment #749148 - Flags: review?(dcamp) → review+
Whiteboard: [land-in-fx-team]
https://hg.mozilla.org/integration/fx-team/rev/016f5fb80f3c
Assignee: nobody → vporof
Status: NEW → ASSIGNED
Whiteboard: [land-in-fx-team] → [fixed-in-fx-team]
Priority: -- → P3
https://hg.mozilla.org/mozilla-central/rev/016f5fb80f3c
Status: ASSIGNED → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 24
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: