Bug 151978 - Web Inspector: [Meta] Unify z-index values in Inspector's CSS
Summary: Web Inspector: [Meta] Unify z-index values in Inspector's CSS
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Local Build
Hardware: All All
: P2 Normal
Assignee: Nikita Vasilyev
URL:
Keywords: InRadar
: 151864 (view as bug list)
Depends on:
Blocks: 151864
  Show dependency treegraph
 
Reported: 2015-12-07 18:47 PST by Nikita Vasilyev
Modified: 2015-12-11 08:59 PST (History)
8 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Nikita Vasilyev 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.
Comment 1 Radar WebKit Bug Importer 2015-12-07 18:47:17 PST
<rdar://problem/23796065>
Comment 2 Brian Burg 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.
Comment 3 Nikita Vasilyev 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?
Comment 4 Timothy Hatcher 2015-12-09 11:45:19 PST
Can you use calc() like that?
Comment 5 Nikita Vasilyev 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
Comment 6 Nikita Vasilyev 2015-12-09 22:23:19 PST
Created attachment 267072 [details]
Patch
Comment 7 Nikita Vasilyev 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
Comment 8 WebKit Commit Bot 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>
Comment 9 WebKit Commit Bot 2015-12-10 10:14:41 PST
All reviewed patches have been landed.  Closing bug.
Comment 10 Brian Burg 2015-12-11 08:59:09 PST
*** Bug 151864 has been marked as a duplicate of this bug. ***