[webkit-dev] Web Inspector blog post draft

[Mihai Parparita]

For those who are interested in this, I've included the draft inline below.

Mihai

Web Inspector: Styles Enhanced <http://webkit.org/blog/?p=1463>Posted
by *Alexander
Pavlov* on Wednesday, February 9th, 2011 at 9:43 am

During the past months, we’ve been working hard to improve the CSS editing
experience for the Web Inspector users. Now, we are happy to provide you
with an update.
Style Presentation

Did you find yourself in a situation when you entered a big and complex
gradient definition for yourbackground property, and it disappeared once you
hit Return? The reason was that the Styles sidebar showed the style content
exactly the way the browser understood it, and if it did not understand it,
inspector showed nothing. This has now changed: inspector shows all the
properties declared in a style, and if the browser does not understand a
property name or value, the respective property is denoted by an exclamation
mark ([image: warning]) next to its name. Still, you can edit (or remove)
these properties along with the regular ones.

On a related note, Web Inspector can now show the colors in property values
exactly as they are written in the CSS – just use the “As Authored”
presentation option accessible via the Gear menu.

Editing Styles

Based on the feedback from our users, we have improved the editing of CSS
properties. Two separate fields are now used for a property name and value
instead of one, and you can navigate between them (as well as between
properties) back and forth with the Tab/Shift-Tab or Return keys. Available
keywords for property values are suggested as you type, and can be
auto-completed using the End or → keys, just like in the console view. The
previous/next suggestions can be selected with the ↑ and ↓ keys. If you wish
to accept the current suggestion and move on to another field, use the Tab/
Returnkeys.

Additionally, you can paste a compound “name: value” property text into the
name field, and inspector will break it up into “name” and “value”, putting
each in its own field for you.
Persisting Changes

Every time you modify a style from an external style sheet, the respective
resource text is updated in the Resources panel (this feature is
work-in-progress) and the history is tracked for such style sheet resources
while inspector remains open. Select any resource revision to see its
differences from the original one, highlighted line-wise.

A textual resource node (including stylesheet revisions) can be drag and
dropped onto most text editors to export the specific resource content.
Things You Might Not Know

Please let us take this opportunity to tell a few things you might not know.
While in the Styles pane, you can:

   - …add a new property to an editable style either by double-clicking in
   the blank space of the lines with opening and closing braces, or by hitting
   Tab while editing the last property value.
   - …add a new rule by selecting the “New Style Rule” item in the Gear
   menu.
   - …click a link in a property value (say, background-image) to navigate
   to the respective resource in the Resources panel.
   - …click a color swatch next to a color value to cycle through available
   color representation formats.

We are currently experimenting with more improvements to style handling
within Web Inspector. Stay tuned and check back often!

On Wed, Feb 9, 2011 at 11:27 AM, Patrick Mueller <pmuellr at muellerware.org>
wrote:
> I'm logged in (as near as I can tell - link at the bottom says "Log out"),
> and still get the error.  I don't have posting rights to the blog, nor do
I
> want them.
>
> On 2/9/11 2:20 PM, Adele Peterson wrote:
>>
>> You have to be logged into the blog to read drafts.
>
> --
> Patrick Mueller - http://muellerware.org
>
> _______________________________________________
> webkit-dev mailing list
> webkit-dev at lists.webkit.org
> http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20110210/d08a54df/attachment.html>