gwwar / z-context Goto Github PK

A Chrome DevTools Extension that finds stacking contexts and z-index values in the elements panel

License: MIT License

HTML 0.93% JavaScript 99.07%

z-context's Introduction

Hi y'all! I'm a Senior Software Engineer at GitHub ✨. I'm also a huge fan of open source, so you may see me contributing from time to time at WordPress or Discourse.

If for some reason you're struggling with z-indexes, I have a really minimal Chrome extension that can help debug z-index stacking contexts.

z-context's People

Contributors

Stargazers

Watchers

Forkers

enterstudio ericrisler roperzh leehyunggeun pepa-linha c0demark sameerbhat bakoorahnin dglasser jkillian edenilan hallzy locke35

z-context's Issues

Latest update not deployed?

It looks like the latest fix for position: sticky was never deployed to the Chrome Web Store. Is there a reason? (That bug just burned me so I came here, only to find out it was already reported and allegedly fixed).

Thanks.

`z-index` in `style` not detected

I have this issue where z-index is shown as auto while element inspection shows that there is a z-index property set-up in the style attribute of the element. See example below.

Environment:

Ungoogled Chromium: v112.0
z-context: v2.1.0
UI: PrimeVue
Nuxt 3 Application

incompatible with shadow dom

"TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. at value (http://local-dma.readingplus.com:8080/public/bower_components/web-animations-js/web-animations-next-lite.min.js:15:44896) at getClosestStackingContext (<anonymous>:9:24) at getClosestStackingContext (<anonymous>:27:12) at getClosestStackingContext (<anonymous>:27:12) at zContext (<anonymous>:48:17) at <anonymous>:65:3"

Parent stacking context not working?

E.g. https://output.jsbin.com/zovecuzoce/1

<div class="absolute">
    <div class="relative">
        <div class="child">foo</div>
    </div>
</div>

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

When selecting .relative:

Expected parent stacking context: .absolute

When selecting .child:

Expected parent stacking context: .relative

Add Ability to Inspect Iframes

This devtool script executes from the top page context. This means that when inspecting elements in a child iframe, $0 (the currently selected element) returns null.

If folks have pointers on how to pass along this info. It'd be appreciated. I might be able to communicate via an injected content script, but those scripts don't have access to any of the chrome apis.

Update stacking context detection to April 2021

Hi and thank you very much for this extension.

I've now reviewed https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context and noticed some fancy new stuff is not yet ported to z-context. Please find the list below. Maybe this ticket can be used as "milestone".

✅ Root element of the document (<html>).
✅ Element with a position value absolute or relative and z-index value other than auto.
✅ Element with a position value fixed or sticky (sticky for all mobile browsers, but not older desktop).
✅ Element that is a child of a flex container, with z-index value other than auto.
❌ Element that is a child of a grid container, with z-index value other than auto.
✅ Element with a opacity value less than 1 (See the specification for opacity).
✅ Element with a mix-blend-mode value other than normal.
Element with any of the following properties with value other than none:
    ✅ transform
    ✅ filter
    ✅ perspective
    ❌ clip-path
    ❌ mask / mask-image / mask-border
✅ Element with a isolation value isolate.
✅ Element with a -webkit-overflow-scrolling value touch.
✅ Element with a will-change value specifying any property that would create a stacking context on non-initial value (see this post).
❌ Element with a contain value of layout, or paint, or a composite value that includes either of them (i.e. contain: strict, contain: content).

Update to manifest v3

Blocker here is that https://developer.chrome.com/docs/extensions/mv3/devtools/ hasn't been updated. Other larger devtool extensions also seems to be using v2. Give me a ping if this changes.

The extension is not working

Browser: Chrome 104.0.5112.79
System: macOS Big Sur

The z-index tab is always blank:

Judging from Chrome WebStore comments, the extension stopped working at around August 2021. What's causing this? Is this related to #19 ? Anything I can do to help?

Z-index tab shows 'No properties'

Z-index tabs sows 'No properties' on any DOM element

Observe same behavior on chrome 69 and chromium 68.

Firefox Version

Hullo,

First of all, let me thank you profusely for such a lovely extension!

Is there anyway I could convince you to develop a similar extension for Firefox?

There is no tab z-index in Chrome

Installed the extension and nothing here as on the image
https://camo.githubusercontent.com/667642c7439c98dc49ec21a3243a1ea13986056b/68747470733a2f2f636c6475702e636f6d2f5569766c5638694a35712e676966

Fix will-change cases

As reported by Dmitri Pisarev, currently we detect anything set to anything other than "will-change: auto". This is incorrect, as it only creates a stacking context for particular values.

Be aware, that will-change may actually influence the visual appearance of elements, when used with property values, that create a stacking context (e.g. will-change: opacity), as the stacking context is created up front.

https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

For example, setting opacity to any value other than 1 creates a stacking context on the element. Thus, setting will-change: opacity also creates a stacking context, even if opacity is currently still equal to 1.

https://www.w3.org/TR/css-will-change-1/

Tab doesn't update after new styles are applied

Steps to reproduce

Open devtools/inspect element
Add property that creates stacking context under element styles
Go to z-index tab
z-index tab reports "no stacking contexts" when no other css properties that create stacking context are present

Steps to resolve

After applying style, click on another element in the elements panel
Click back on the original element
Click z-index tab

Consider other ways of visualizing stacking contexts

It was noted in #13 that the current prop isn't that useful to folks. Adding an issue here to maybe provide a rendered view similar to the Layers tab in Safari, or perhaps a tree like React devtools.

Handle shadow root

It seems like the plugin have difficult handle web components and shadow root. Developing using Polymer and "parentStackingContext" is always "html" and not the true parent stacking context.