search

GoogleChromeLabs / ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
https://visbug.web.app
Apache License 2.0
5.41k stars 284 forks source link

Add new plugin 'placeholdifier' #575

Closed tannerdolby closed 1 year ago

tannerdolby commented 1 year ago

Fixes #462

Adds placeholdifier as a new plugin. Iterate through all the elements that are children of the <body> and then add the class 'placeholdify' to each element.

The command 'placeholdifier' would select all the elements inside the body and add 'placeholdify' to each classList creating the live wireframe effect.

Recording

https://user-images.githubusercontent.com/48612525/195524427-e634b02b-9187-4bc3-95ea-390b0155fee8.mov

Resources

argyleink commented 1 year ago

oh cool, this is fun! thanks for the plugin suggestion, it fits right in 🙂

there's some instructions on adding plugins here that will help you get the plugin integrated so visbug can execute it and describe it to users: https://github.com/GoogleChromeLabs/ProjectVisBug/wiki/Plugins

i went ahead and pulled your plugin, added the items into the registry, and then invoked the plugin on the test page ANDDDDD... the font files didnt load. so i peeked at the css file that was injected and the fonts aren't remotely served.. they're locally served. 

@font-face {
  font-family: "Placeholdifier";
  src: url("./placeholdifier.woff2") format("woff2"),
    url("./placeholdifier.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

Screen Shot 2022-10-14 at 10 38 37 AM

i'm not sure how the codepen or the plugins jsbin are working since i can't find the woff files uploaded to either of those demo environments. thoughts on this?

tannerdolby commented 1 year ago

awesome, no problem! 😎

thanks for sharing the plugins guide, I had a look and updated things so its fully integrated now

ahh nice, ty for pulling things in and tinkering. I noticed the same behavior where the font files aren't loading after invoking the plugin on the test page when using await loadStyles() to inject the styles - its interesting the font files are locally served. Going to do some investigating and report back.

When I just throw the link into the <head> of ./app/index.html, 

<link rel="stylesheet" href="https://unpkg.com/placeholdifier/placeholdifier.css" >

font files load successfully and the plugin performs as expected.

https://user-images.githubusercontent.com/48612525/195929215-c914ccba-9a4e-4ba9-8269-b8ff20fe7b39.mov

The JSBin example https://jsbin.com/tuyecacebi/edit?html,output just adds the <link> onto the page so the only difference for us here is that were using loadStyles to inject the CSS from unpkg instead of just adding it in the <head> of index.html

tannerdolby commented 1 year ago

looks like the optional chaining is causing issues for the tests https://github.com/GoogleChromeLabs/ProjectVisBug/actions/runs/3253135144/jobs/5340105712

will update that right now

argyleink commented 1 year ago

if this PR runs the tests, then you could just update from main when it's merged and then it should be g2g. looks like it was time to update that test runner env anyway

argyleink commented 1 year ago

PR is merged. update to latest and let's hope this tests pass, then we can merge this 👍🏻

tannerdolby commented 1 year ago

cool! Just saw that ticket for updating the test runner. The tests didn't kick off for my latest commit, looks like it needs approval https://github.com/GoogleChromeLabs/ProjectVisBug/actions/runs/3253183510

tannerdolby commented 1 year ago

I'm fully up to date with the latest main, hoping tests pass once the workflow runs but things are looking good ✅

argyleink commented 1 year ago

poo, they failed like they didnt use the updated yaml action

argyleink commented 1 year ago

i guess just drop the optional chaining so we can get this merrrrrrged?

tannerdolby commented 1 year ago

yeah, dropping the optional chaining seems like the best move. I added a small defensive check inside the .filter() call to mimic the optional chaining just in case for some odd reason an element during the iteration is indeed undefined and/or doesn't have a tagName property.

thank you for your review on this!

argyleink commented 1 year ago

great work! i'll try and kick out a release and get it uploaded today, and gauging their current approval cadence, then tomorrow it should be available

argyleink commented 1 year ago

live on the demo site already tho 👍🏻

Screen Shot 2022-10-19 at 9 25 42 AM
argyleink commented 1 year ago

submitted for review on chrome web store 👍🏻

tannerdolby commented 1 year ago

thank you! okay awesome, I had a look at the demo site and its working great 👍🏻

let me know if you need anything from my end in the meantime!

argyleink commented 1 year ago

plugin has gone live on Chrome Web Store 👍🏻

tannerdolby commented 1 year ago

heck ya! thanks again, visbug is a really neat project 🚀