One of the goals for 2015 is to provide more creative ways for designers and developers to make changes to the layout, behavior and design of a webpage, without only relying on typing CSS properties or Javascript code or HTML tags.
We've started to introduce more visual tools over the course of 2014, like the box-model highlighter, the CSS transform previewer, the cubic-bezier editor tooltip, and lately the new animation inspection panel.
There is a need to introduce more of these tools, and tie them up together in a UI that makes sense for designers and creative developers.
Here's a list of tools that so far either exist or are being developed or are planned and that together would form a very interesting toolkit:
- relative to an element:
- global tools:
- take a screenshot of either the current element or the full page
- pick a color from the page
- add guides and rulers to measure elements (1089240)
Of course a lot more tools could be added to the list.
There needs to be a UI for these tools. Right now, some of them aren't very discoverable at all. Here's a proposal to use a new toolbar:
The first half contains tools to select an element from the page, and then edit it: show/hide/edit the box-model, move or resize the element, change its border, transform it, modify its background image. The second half contains global tools to pick colors from the page, get a screenshot, add rulers and guides.
I like the idea. It does a lot to give it an authoring feel. I think I'd want to dock it to some side of the page to keep it from covering content, but that doesn't need to be day 1.