Bug 147490 - Web Inspector: Emmet support
Summary: Web Inspector: Emmet support
Status: REOPENED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2015-07-31 08:49 PDT by Tomas
Modified: 2016-12-13 15:35 PST (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Tomas 2015-07-31 08:49:54 PDT
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/
Comment 1 David Kilzer (:ddkilzer) 2016-09-09 11:19:32 PDT
<rdar://problem/28228700>
Comment 2 BJ Burg 2016-09-10 01:03:49 PDT
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.
Comment 3 Nikita Vasilyev 2016-09-10 12:22:36 PDT
(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.
Comment 4 Nikita Vasilyev 2016-09-10 12:24:47 PDT
Emmet has a plug-in for CodeMirror:
https://github.com/emmetio/codemirror
Comment 5 BJ Burg 2016-09-10 20:53:00 PDT
(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.