RESOLVED FIXED 151978
Web Inspector: [Meta] Unify z-index values in Inspector's CSS
https://bugs.webkit.org/show_bug.cgi?id=151978
Summary Web Inspector: [Meta] Unify z-index values in Inspector's CSS
Nikita Vasilyev
Reported 2015-12-07 18:47:01 PST
Issues like https://bugs.webkit.org/show_bug.cgi?id=151864 keep happening because AFAIK we don't have any conventions/guidelines for setting z-index. Popover should always have the highest z-index. We need to search for "z-index" in all Web Inspector CSS files and convert them to some consistent values.
Attachments
Patch (9.97 KB, patch)
2015-12-09 22:23 PST, Nikita Vasilyev
no flags
[Image] With the patch applied (166.32 KB, image/png)
2015-12-09 22:25 PST, Nikita Vasilyev
no flags
Radar WebKit Bug Importer
Comment 1 2015-12-07 18:47:17 PST
Blaze Burg
Comment 2 2015-12-08 09:24:02 PST
Do you have such a scheme in mind? Sounds like something that you could document on the trac wiki for posterity, once we have agreed on something.
Nikita Vasilyev
Comment 3 2015-12-08 20:44:39 PST
(In reply to comment #2) > Do you have such a scheme in mind? Sounds like something that you could > document on the trac wiki for posterity, once we have agreed on something. This is a technique I've used before with CSS preprocessors: https://css-tricks.com/handling-z-index/ For our case, I suggest to use CSS variables: --resizer: 128; /* Sidebar panels resizer */ --tooltip: 256; /* Complete suggestions, hover-over variable tooltips */ --popover: 512; /* Go to line number popover */ --glass-pane-for-drag: 1024; /* invisible overlay while dragging */ --uncaught-exception-sheet: 2048; And use them like so: popover.css: .popover { z-index: var(--popover); } We must never directly use z-index above 100 and use variables instead. z-index below 128 is fine. It's already used a several times in CodeMirror. div.CodeMirror-cursors { z-index: 3 /* Okay */ } .data-grid .resizer { z-index: 100 /* Not okay, should be var(--resizer) */ } .popover-resizer { z-index: calc(var(--popover) + var(--resizer)) /* Okay (a contrived example) */ } What do you think?
Timothy Hatcher
Comment 4 2015-12-09 11:45:19 PST
Can you use calc() like that?
Nikita Vasilyev
Comment 5 2015-12-09 16:15:58 PST
(In reply to comment #4) > Can you use calc() like that? Yes, you can! http://jsbin.com/wihiqanuvo/edit?html,css,output
Nikita Vasilyev
Comment 6 2015-12-09 22:23:19 PST
Nikita Vasilyev
Comment 7 2015-12-09 22:25:36 PST
Created attachment 267073 [details] [Image] With the patch applied This fixes: Web Inspector: dashboard-switching arrow(s) are visually on top of debugger Popovers https://bugs.webkit.org/show_bug.cgi?id=151864
WebKit Commit Bot
Comment 8 2015-12-10 10:14:38 PST
Comment on attachment 267072 [details] Patch Clearing flags on attachment: 267072 Committed r193913: <http://trac.webkit.org/changeset/193913>
WebKit Commit Bot
Comment 9 2015-12-10 10:14:41 PST
All reviewed patches have been landed. Closing bug.
Blaze Burg
Comment 10 2015-12-11 08:59:09 PST
*** Bug 151864 has been marked as a duplicate of this bug. ***
Note You need to log in before you can comment on or make changes to this bug.