RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconGit IconSpeaking IconTools Icon
Text emphasized alt text example
My google avatar.

VisBug v0.4.0 release notes

6 min read

tldr; A focused update on color, contrast inspection, poppin on top (welcome aboard Firefox!), and an update to manifest v3.

I've needed to update to manifest v3 for a while… I was really putting it off. But then, Firefox got popover, and well, now that's a feature reason to update VisBug!

Chrome Extension · Firefox Addon

Side note: always fun to find VisBug bugs. Feels like Alannis Morisette is there singing "Ironic" to me over my shoulder.

Added 2 libraries, removed one (well, I will eventually) #

I added ColorJS and Open Props. Probably not that surprising.

npm i open-props

ColorJS I use for color conversion and the contrast functions. I was lazy and left in TinyColor for some of VisBug, like the hue shift tool. I'll refactor it later and remove TinyColor, ColorJS can do everything it can, plus more.

Open Props I included for the easings, shadows and gray palette. Since all the web components adopt the same stylesheet of variables, it was really easy to integrate.

Framework updates #



No updates. VisBug is made with vanilla web components! Since these components have to live in the harsh landscapes of anyone's website, ShadowDOM is pretty great, and I also don't have to worry about server rendering.

Still! Very nice not having to update a framework. Not a feeling I've had in a while. I constantly feel like npm outdated is the chore that never ends, and I think I hate dependabot even more, for no reason.

New contrast results #

Welcome APCA and L* to the party!

Fun seeing all the scores compares next to each other. Fun to find moments where they disagree too.

HDR color support #

Read and copy any of the new syntaxes for color.

Poppin to the top-layer #

Don't need this anymore.

:root {
  --layer-top: 2147483647;
  --layer-1: 2147483646;
  --layer-2: 2147483645;
  --layer-3: 2147483644;
  --layer-4: 2147483643;
  --layer-5: 2147483642;

Thanks [popover]! VisBug elements are now in the DOM penthouse and don't have to worry about z-index challenges.

I just added popover="manual" to the web component element like:

export class Handles extends HTMLElement {

  connectedCallback() {

    this.setAttribute('popover', 'manual')
    this.showPopover && this.showPopover()

So each component adds itself to the top layer when it's added to the DOM.

then boom, we're in the magical top layer, above any other elements in the HTML body.

Image is taken from Chrome DevTools.

Fun story, #top-layer is artificially created in the Elements panel, we just made it up because we felt we needed somewhere to find these mysterious elements that were on top of the page.

Manifest v3 #

What is the purpose of Manifest v3?

  1. Self-Contained Functionality: A Focus on Transparency
  2. External Resource Usage: Striking a Balance
  3. Isolated Contexts: Exemptions and Responsibilities
  4. Review Process Consequences: A Note on Enforcement

Or you can listen to my colleague Oliver Dunk chat with Wes and Scott on SyntaxFM!

Mv3 impacts to VisBug #

Two major changes:

  1. Scripts are imported as type="module"
  2. 3rd party script execution became out of scope

Honestly, two good things.

I was totally abusing script scope in Manifest v2, was like old school JS. Now I'm in the ESM world, yay.

import {gimmeToggle} from "./contextmenu/launcher.js"
import {getColorMode} from "./contextmenu/colormode.js"
import {getColorScheme} from "./contextmenu/colorscheme.js"

3rd party scripts being gone means any of the plugins that relied on scripts on CDNs no longer work. The plugins that remain are ones that come bundled in the extension.

This is nice for privacy, and I didn't feel like usage of these features was high enough to bundle the scripts. If you feel otherwise, let me know! Or make a bookmark 😅

Updated tests #

My puppeteer was running Chromium 55… Both ColorJS and popover required an update so the tests would run again. VisBug tests are full simulations of page interactions run by Ava.

This task ended up not being very fun and sucking up a lot of time. Classic build config wack-a-mole. I wasn't able to update everything like I wanted to, but I found a happy place and was able to keep each test.

There was like a week where I couldn't figure out how to fix the tests, and it bummed me out because I just wanted these updates out and live. But here I was dinkin around fixing something that's supposed to save me time, but is in fact sucking time. All while shipping is delayed because of it.

The VisBug logo in HTML & CSS glory #

Inspect it, I used container query units, they rule.

Or check out a version on Codepen.

Mentions #

Join the conversation on

  • Daniel Schildt
  • Fynn Becker
  • Bramus
  • patak
  • Dreamspace Ken :confusedlucy:​:rebeccaangry:​
  • DevTools Tips :clippy:
  • Daniel
  • Zach Leatherman :11ty:
  • westbrook
  • The Spicy Web

the heroes of this post:

**CSS & HTML**
more reliable overlay abilities && HDR color read/write

**Web Components**
code isn't rotting over time

**ColorJS**, go there, try it, it's the best. Thank you @svgeesus and @leaverou

Color.js: Let’s get serious about color • Color.js
Adam ArgyleAdam Argyle

@argyleink This is amazing, I didn't even know it existed — thank you and everyone involved!

I have a stupid question, how do you turn off the plugin once it's enabled on a site? I am using Arc so maybe if I had this in my Chrome toolbar area there might be some option? I have been closing the tab because I can't seem to figure out how to stop it from doing _something_ on hover. ????

Frank StalloneFrank Stallone

@frankstallone Glad you found it and did it!

Some ways to close it!
You can right click anywhere and close it via the VisBug context options
Or click the VisBug extension icon
Or right click the extension icon and close it from the extension action

Adam ArgyleAdam Argyle

@argyleink Thank you for making visbug available on Firefox. It’s one of my favourite plugins.


Crawl the CSS Webring?

previous sitenext site
a random site