[HTML] Add scopes for utf8 percent encoded characters (#2374)

* [HTML] Add scopes for utf8 percent encoded characters

specs: https://url.spec.whatwg.org/#userinfo-percent-encode-set

Addresses a "lively" discussion at https://forum.sublimetext.com/t/advanced-other-color-or-hide-html-20-in-st-user-interface/51447

* [HTML] add url sub scope

* [HTML] Limit utf-8 percent encoding to src and href attributes

* [HTML] Clarify test cases

Author: deathaxe

HTML/HTML.sublime-syntax

@@ -702,6 +702,52 @@ contexts:
         0: meta.string.html string.quoted.single.html punctuation.definition.string.end.html
     - include: else-pop
 
+  tag-href-attribute:
+    - match: (?i:href|src){{attribute_name_break}}
+      scope: entity.other.attribute-name.href.html
+      push:
+        - meta_scope: meta.attribute-with-value.href.html
+        - match: '='
+          scope: punctuation.separator.key-value.html
+          push: tag-href-attribute-value
+        - include: else-pop
+
+  tag-href-attribute-value:
+    - match: \"
+      scope: punctuation.definition.string.begin.html
+      set:
+        - meta_scope: meta.string.html string.quoted.double.html
+        - match: \"
+          scope: punctuation.definition.string.end.html
+          pop: 2
+        - include: tag-attribute-value-separator
+        - include: tag-href-entities
+    - match: \'
+      scope: punctuation.definition.string.begin.html
+      set:
+        - meta_scope: meta.string.html string.quoted.single.html
+        - match: \'
+          scope: punctuation.definition.string.end.html
+          pop: 2
+        - include: tag-attribute-value-separator
+        - include: tag-href-entities
+    - match: '{{unquoted_attribute_start}}'
+      set:
+        - meta_scope: meta.string.html string.unquoted.html
+        - match: '{{unquoted_attribute_break}}'
+          pop: 2
+        - match: '["''`<]'
+          scope: invalid.illegal.attribute-value.html
+        - include: tag-href-entities
+    - include: else-pop
+
+  tag-href-entities:
+    - include: entities
+    - match: (%)\h{2}
+      scope: constant.character.escape.url.html
+      captures:
+        1: punctuation.definition.escape.html
+
   # This is to prevent breaking syntaxes referencing the old context name
   tag-stuff:
     - include: tag-attributes
@@ -711,6 +757,7 @@ contexts:
     - include: tag-class-attribute
     - include: tag-style-attribute
     - include: tag-event-attribute
+    - include: tag-href-attribute
     - include: tag-generic-attribute
 
   tag-attribute-value-separator:

HTML/syntax_test_html.html

@@ -237,13 +237,38 @@
         ##       ^^^^^^^^^^^^^^^ string.unquoted
         ##                      ^^ punctuation.definition.tag.end.html
 
-        <img src=/f̱oo⏡/bar/baz/ />
+        <!-- Match utf-8 escapes (%2F) in src tags -->
+        <img src=/f̱oo⏡/bar%2Fbaz/ />
         ##  ^ - meta.attribute-with-value
         ##   ^^^ entity.other.attribute-name
-        ##   ^^^^^^^^^^^^^^^^^^^ meta.attribute-with-value
-        ##       ^^^^^^^^^^^^^^^ string.unquoted
-        ##                      ^ - meta.attribute-with-value
-        ##                       ^^ punctuation.definition.tag.end.html
+        ##   ^^^^^^^^^^^^^^^^^^^^^ meta.attribute-with-value
+        ##       ^^^^^^^^^^^^^^^^^ string.unquoted
+        ##                ^ - constant.character.escape
+        ##                 ^ constant.character.escape.url.html punctuation.definition.escape.html
+        ##                  ^^ constant.character.escape.url.html - punctuation.definition
+        ##                    ^ - constant.character.escape
+        ##                        ^ - meta.attribute-with-value
+        ##                         ^^ punctuation.definition.tag.end.html
+
+        <!-- Match utf-8 escapes (%2F) in href tags -->
+        <img href="/foo%2Fbar.com" />
+        ##  ^ - meta.attribute-with-value
+        ##   ^^^^ entity.other.attribute-name
+        ##   ^^^^^^^^^^^^^^^^^^^^^ meta.attribute-with-value
+        ##        ^^^^^^^^^^^^^^^^ string.quoted.double
+        ##             ^ constant.character.escape.url.html punctuation.definition.escape.html
+        ##              ^^ constant.character.escape.url.html - punctuation.definition
+        ##                        ^ - meta.attribute-with-value
+        ##                         ^^ punctuation.definition.tag.end.html
+
+        <!-- Don't match utf-8 escapes (%2F) in other than href/src tags -->
+        <img title="http://foo%2Fbar.com" />
+        ##  ^ - meta.attribute-with-value
+        ##   ^^^ entity.other.attribute-name
+        ##   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.attribute-with-value
+        ##         ^^^^^^^^^^^^^^^^^^^^^^ string.quoted.double - constant.character.escape
+        ##                               ^ - meta.attribute-with-value
+        ##                                ^^ punctuation.definition.tag.end.html
 
         <img title=foo"/>
         ##  ^ - meta.attribute-with-value
@@ -682,8 +707,9 @@
 ##      ^^^^ - constant.character.entity
 
 
-        <a href="http://google.com/?one=1&amp;two=2"></a>
-        ##                               ^^^^^ constant.character.entity
+        <a href="http://google%20api.com/?one=1&amp;two=2"></a>
+        ##                    ^^^ constant.character.escape.url
+        ##                                     ^^^^^ constant.character.entity
         <a href="http://google.com/?one=1&two=2"></a>
         ##                               ^ - constant.character.entity
         ##                               ^ - invalid.illegal