WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
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
Details
Formatted Diff
Diff
[Image] With the patch applied
(166.32 KB, image/png)
2015-12-09 22:25 PST
,
Nikita Vasilyev
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1
2015-12-07 18:47:17 PST
<
rdar://problem/23796065
>
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
Created
attachment 267072
[details]
Patch
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.
Top of Page
Format For Printing
XML
Clone This Bug