Bug 151978 – Web Inspector: [Meta] Unify z-index values in Inspector's CSS

• Component: Web Inspector
• Status: RESOLVED FIXED

[Nikita Vasilyev]

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.

[Radar WebKit Bug Importer]

<rdar://problem/23796065>

[Blaze Burg]

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]

(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]

Can you use calc() like that?

[Nikita Vasilyev]

(In reply to comment #4)
> Can you use calc() like that?

Yes, you can!

http://jsbin.com/wihiqanuvo/edit?html,css,output

[Nikita Vasilyev]

Created attachment 267072 [details]
Patch

[Nikita Vasilyev]

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 on attachment 267072 [details]
Patch

Clearing flags on attachment: 267072

Committed r193913: <http://trac.webkit.org/changeset/193913>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Blaze Burg]

*** Bug 151864 has been marked as a duplicate of this bug. ***