Adds z-index visualization plugin (GoogleChromeLabs#418)

addyosmani · argyleink · commit f528bdf17455 · 2019-12-13T21:34:10.000-08:00
* Adds z-index visualization plugin

This change introduces a `z-index` visualization plugin. The idea is to render a box with the `z-index` value for each child, to help developers debug index stacking. Each box is given a random color to help distinguish what you're seeing.

* Update implem. to match Adam's visbug native tweaks
diff --git a/app/plugins/_dynamic-registery.js b/app/plugins/_dynamic-registery.js
@@ -4,6 +4,7 @@ const entries = [
   'pesticide.js',
   'construct.js',
   'construct.debug.js',
+  'zindex.js',
 ]
 
 const PluginRegistry = new Map()
diff --git a/app/plugins/_registry.js b/app/plugins/_registry.js
@@ -10,11 +10,12 @@ import { commands as revenge_commands, default as RevengePlugin } from './reveng
 import { commands as tota11y_commands, default as Tota11yPlugin } from './tota11y'
 import { commands as shuffle_commands, default as ShufflePlugin } from './shuffle'
 import { commands as colorblind_commands, default as ColorblindPlugin } from './colorblind'
+import { commands as zindex_commands, default as ZIndexPlugin } from './zindex'
 
 const commandsToHash = (plugin_commands, plugin_fn) =>
   plugin_commands.reduce((commands, command) =>
-    Object.assign(commands, {[`/${command}`]:plugin_fn})
-  , {})
+    Object.assign(commands, { [`/${command}`]: plugin_fn })
+    , {})
 
 export const PluginRegistry = new Map(Object.entries({
   ...commandsToHash(blank_page_commands, BlankPagePlugin),
@@ -29,6 +30,7 @@ export const PluginRegistry = new Map(Object.entries({
   ...commandsToHash(tota11y_commands, Tota11yPlugin),
   ...commandsToHash(shuffle_commands, ShufflePlugin),
   ...commandsToHash(colorblind_commands, ColorblindPlugin),
+  ...commandsToHash(zindex_commands, ZIndexPlugin),
 }))
 
 export const PluginHints = [
@@ -43,5 +45,6 @@ export const PluginHints = [
   revenge_commands[0],
   tota11y_commands[0],
   shuffle_commands[0],
+  zindex_commands[0],
   ...colorblind_commands,
 ].map(command => `/${command}`)
diff --git a/app/plugins/blank-page.js b/app/plugins/blank-page.js
@@ -4,7 +4,7 @@ export const commands = [
   'clear canvas',
 ]
 
-export default function() {
+export default function () {
   document
     .querySelectorAll('body > *:not(vis-bug):not(script)')
     .forEach(node => node.remove())
diff --git a/app/plugins/zindex.js b/app/plugins/zindex.js
@@ -0,0 +1,30 @@
+export const commands = [
+    'zindex',
+    'z-index'
+]
+
+export default function () {
+    // Fun prior art https://gist.github.com/paulirish/211209
+    Array.from(document.querySelectorAll('*'))
+        .filter(el => el.computedStyleMap().get('z-index').value !== 'auto')
+        .filter(el => el.nodeName !== 'VIS-BUG')
+        .forEach(el => {
+            const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`
+            const zindex = el.computedStyleMap().get('z-index').value
+
+            const label = document.createElement('visbug-label')
+
+            label.text = `z-index: ${zindex}`
+            label.position = {
+                boundingRect: el.getBoundingClientRect()
+            }
+            label.style.setProperty(`--label-bg`, color)
+
+            const overlay = document.createElement('visbug-hover')
+            overlay.position = { el }
+            overlay.style.setProperty(`--hover-stroke`, color)
+
+            document.body.appendChild(label)
+            document.body.appendChild(overlay)
+        })
+}

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@ const entries = [`
`4`	`4`	`'pesticide.js',`
`5`	`5`	`'construct.js',`
`6`	`6`	`'construct.debug.js',`
	`7`	`+ 'zindex.js',`
`7`	`8`	`]`
`8`	`9`
`9`	`10`	`const PluginRegistry = new Map()`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ export const commands = [`
`4`	`4`	`'clear canvas',`
`5`	`5`	`]`
`6`	`6`
`7`		`-export default function() {`
	`7`	`+export default function () {`
`8`	`8`	`document`
`9`	`9`	`.querySelectorAll('body > *:not(vis-bug):not(script)')`
`10`	`10`	`.forEach(node => node.remove())`