Bug 147490 – Web Inspector: Emmet support

• Status: REOPENED
• Component: Web Inspector

[Tomas]

I need to know WebKit developers opinion about Emmet support in CSS sidebar panel in Web Inspector.
Web developer could just type in "dib", hit TAB key and "display: inline-block;" would be inserted.

Emmet website: http://emmet.io/

[David Kilzer (:ddkilzer)]

<rdar://problem/28228700>

[Blaze Burg]

Why would we want to choose Emmet over some other text expansion helper? There are plenty on every system for which WebKit is available. I don't see why we'd tie it to a domain-specific helper.

[Nikita Vasilyev]

(In reply to comment #2)
> Why would we want to choose Emmet over some other text expansion helper?
> There are plenty on every system for which WebKit is available. I don't see
> why we'd tie it to a domain-specific helper.

Two reasons.

1. Emmet's abbreviations are context sensitive.
   The mentioned "dib" only works for CSS.

2. Emmet is more advanced than any OS text expansion helper.
Emmet provides a CSS selector like syntax to generate HTML.

    ul#nav > li*3

generates

    <ul id="nav">
      <li>|</li>
      <li>|</li>
      <li>|</li>
    </ul>

http://emmet.io/ has a demo with even more features.

[Nikita Vasilyev]

Emmet has a plug-in for CodeMirror:
https://github.com/emmetio/codemirror

[Blaze Burg]

(In reply to comment #3)
> (In reply to comment #2)
> > Why would we want to choose Emmet over some other text expansion helper?
> > There are plenty on every system for which WebKit is available. I don't see
> > why we'd tie it to a domain-specific helper.
> 
> Two reasons.
> 
> 1. Emmet's abbreviations are context sensitive.
>    The mentioned "dib" only works for CSS.

This seems trivial to me. Who would use the same macro in different contexts and expect different text to pop out? People are free to write out massive amounts of HTML and CSS in whatever editor they want, as that's not a use case we really handle well or care about. There are literally hundreds of more important things to improve in the Web Inspector. Better editing macros is not in the top half.

> 2. Emmet is more advanced than any OS text expansion helper.
> Emmet provides a CSS selector like syntax to generate HTML.
> 
>     ul#nav > li*3
> 
> generates
> 
>     <ul id="nav">
>       <li>|</li>
>       <li>|</li>
>       <li>|</li>
>     </ul>
> 
> http://emmet.io/ has a demo with even more features.

There is no reason that this special syntax needs context sensitivity or devtool support. I also fail to see why it would be useful to write out HTML quickly in the Web Inspector, which is primarily for inspection, tweaking, and debugging.