[emmet] Support all the features

[mrmlnc]

Adding support for all features of Emmet.

Source: #7909

Description

Well, Emmet. Sorry, that one commit.

What include?

All the features of Emmet:

• Expand Abbreviation (Documentation, Demo)
• Balance (Documentation, Demo)
• Go to Matching Pair (Documentation, Demo)
• Wrap with Abbreviation (Documentation, Demo)
• Go to Edit Point (Documentation, Demo)
• Select Item (Documentation, Demo)
• Split/Join Tag (Documentation, Demo)
• Remove Tag (Documentation, Demo)
• Merge Lines (Documentation, Demo)
• Evaluate Math Expression (Documentation, Demo)
• Increment/Decrement Number (Documentation, Demo)
• Reflect CSS Value (Documentation, Demo)
• Encode/Decode Image to data:URL && Update Image Size (Documentation 1, Documentation 2, Demo, Demo overwrite)
• Update tag (Demo, error: [emmet] The command update tag works incorrectly with single-line tag #8136)

What's not included?

I am not binding keyboard keys as it can cause a conflict.

[mention-bot]

By analyzing the blame information on this pull request, we identified @egamma and @alexandrudima to be potential reviewers

[msftclas]

Hi @mrmlnc, I'm your friendly neighborhood Microsoft Pull Request Bot (You can call me MSBOT). Thanks for your contribution!
You've already signed the contribution license agreement. Thanks!

The agreement was validated by Microsoft and real humans are currently evaluating your PR.

TTYL, MSBOT;

[egamma]

I'll start to digest the PR tomorrow, first scan shows that this is good work 🌹

One convention you missed is this one:
https://github.com/Microsoft/vscode/wiki/Coding-Guidelines#strings
We have lint checks based on this convention that finds strings that are not localizable.

[mrmlnc]

@egamma, oh, sorry, i forgot about it. Now fix it 👍

[egamma]

@mrmlnc this is a question unrelated to the PR, but given your emmet know how I thought I'll ask you. Do you know the purpose of the gulpfile inside the emmet module? It looks like it supports to package/bundle emmet. Is any other editor using this? I ask since the startup time of emmet is significant and we look into options to reduce it.

[egamma]

There is some duplication in the code that I introduced and that should be improved, eventually.

This method can be written generically when the action is configured with the emmet action name.

    public runEmmetAction(_module) {
        if (!_module.run('balance_outward', this.editorAccessor)) {
            this.editorAccessor.noExpansionOccurred();
        }
    }

Something like

class BasicEmmetEditorAction extends EmmetEditorAction {
    ...
        private emmetActionName: string;

    constructor(descriptor: IEditorActionDescriptorData, editor: ICommonCodeEditor, actionName: string) {
        super(descriptor, editor, Behaviour.TextFocus);
        this.editorAccessor = new EditorAccessor(editor);
                this.emmetActionName = actionName;
    }

    public runEmmetAction(_module) {
        if (!_module.run(emmetActionName, this.editorAccessor)) {
            this.editorAccessor.noExpansionOccurred();
        }
    }   

I'll first start with the PR and I'll refactor and you can review.

[mrmlnc]

@egamma Do you know the purpose of the gulpfile inside the emmet module?

Just build all files into one with Browserify. Simply launch the Gulp and get the output files. For example:

And these files can be used in VS Code:

Can play with the settings Browserify that to get a size smaller. For example (fullPaths: false):

Or even more, using bundle-collapser plugin:

[egamma]

@mrmlnc I almost forgot to say thank you 🌹. I was busy to get the PR into for the June update before we have the code freeze and start the endgame.