googlechromelabs/projectvisbug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug

projectvisbug's Issues

Toolbar: Consider a divider to distinguish and group manipulators from actions

Meta tip: ability to show just local changes

a toggle somewhere would be nice to help the share be succinct

Sticky text editing

sometimes the UI has a hard time exiting text edit mode. (probably a blur event fire failure)

3D Transform

translate, rotate, scale

Metatip: clicking on the swatch should copy the color to the clipboard

Object fit

Ability to change an elements object-fit properties so designers can:

• fill
• cover
• fit
• etc

Firebase collab editing?

Could we publish/subscribe the changes coming from pixelbug across sessions so remote pixel debugging can happen? i mean, we can, but should we? LOE? value? desire?

SVG inspection

unsure if this is even desired, need to user test. a basic aspect of the feature would be to show colors and strokes. but i think inspecting svg requires a lot of new logic to handle properly.

Wireframe mode?

Remove all colors and images to help focus on layout?

show some flexbox labels

at least indicate if it's a flex container

Look into screenshot uploading to Gallery

before and after's

Eye dropper

already built into chrome devtools

Comments: put notes on elements before screenshotting

could be a whole new sidebar feature or optional addition to metatips

Copy/Paste uses older cross tab clipboard instead of newer current tab copy

Selection outline and label should be elements on the body

pseudo elements and outline aren't dependable and are hamstringing some features. need to move to abs positioned nodes at the highest level.

TODO: measure perf before/after

Alignment guides

Be pretty sweet if the inspector drew alignment guides as you hovered elements

Sticky guides

ux should match metatip sticky behavior

Spell check

Turn on and off? Always on?

HTML color input only allowing 1 color to be picked

After that color has been set via the DOM api, it refuses to update to new values

Hueshift: alpha as cmd+left,cmd+shift+left,cmd+right,cmd+shift+right

Hueshift should highlight which color in the tool-pallete the tool is tweaking

Conditionally show color pickers

Instead of showing empty state for color inputs, hide them
allow the number of colors to scale beyond 2 to allow changing (border colors, shadow colors, etc)

Positioning

absolute/relative/fixed?
x/y

sounds problematic, tricky, and not a whole lot of gain

metatip shadow DOM

styles are leaking into the metatips

Multi-selection expansion

The label links are clickable now, it's awesome, but what if i want to add a selector to the scope? remove a selector from the scope? I'd love to be able to shift click on classnames to build a selection.

More modules

Some areas have grown a bit out of control and need some organization

Action toast

Show a tiny tip summary of the action/manipulation that was applied

Expand selection hotkey should expand with classname

currenly only nodename, was by design and made sense until latest feature of clicking links

Find a way to use PixelBug with remote inspect

Edit text experience isn't smooth

you can even see the currently selected/editing item flash

Metatip needs arrow pointing to which element it's showing info about

holla at aerotwist for suggesting this obvious one
also was thinking that holding alt could create an element snapping experience, cuz why would you want to pin data about it OVER the element? should be perfectly next to it.

requirement:

• arrow needs to handle NSEW directions
• snapping should intelligently choose NSEW to snap to

nice to have:

• convert to custom element

Screenshot tool

• selected nodes
  • node with shadow bg (carbon.sh)
  • node without shadow
• full page
• select node (pick it post instead of pre)

Copy styles: CRUD copied styles

show a list with checkboxes of the copied styles so the user can pick what they want to paste, right now it's a mystery

Copy/paste style

Extension sometimes wont invoke the tool

likely a state issue. consider watching for tab closing as a safe way to reset extension state memory

Lingering metatips

a variety of things can cause a metatip to persist, need to hunt them down and clean them up.

tip_key() isn't unique

this makes pinning metatips not work proper

Screenshot with annotations

Just like how OS's are providing users now

Background image replace

Can currently swap any img node, but background images aren't swappable, and they should be

Styleguide extraction

something like this, basic rollup:

Border manipulation

color
size
radius

metatip: clickable classnames for easy search autofill expansion

or just click and that selects everything?
or hover puts dashed borders around all matches, and click does full select?

Inspector: hold alt/opt and get redlines

match sketch if possible

• https://sketchapp.com/docs/canvas/measuring
• http://utom.design/news

Extension: no way to close it after opening it

Consider a feature like this https://github.com/mrflix/dimensions

Resize

height/width/intrinsic/extrinsic

Hueshift doesn't update the color picker in the pallete

Multiple cursors

just like in our favorite IDEs, we should be able to expand our text selection or create multiple cursors and send text changes to all cursors

Move tool: potential placement stubbing

The move tool needs some UX feedback so the user can move things with more confidence. One option is to ghost and place all potential moves with arrows over the ghost, indicating that the arrow key on that ghost will result in the current element moving into that slot.

pseudo element label when selected

nice to have a name or node type reference after my hover tip is gone
&&
when i'm navigating via keyboard, i can get a tiny peak that way