DevTools: Use CodeMirror modes instead of highlight tokenizers

LayoutTests/inspector/syntax-highlight-css-expected.txt

 Tests that (S)CSS syntax highlighter properly detects the tokens.
 
-a[href='/']: webkit-css-selector
-#content > a:hover: webkit-css-selector,*,webkit-css-selector,*
-@import url(style.css);: webkit-css-at-rule,*,webkit-css-keyword,*
-@import url("style.css") projection, tv;: webkit-css-at-rule,*,webkit-css-keyword,*,webkit-css-string,*,webkit-css-keyword,*,webkit-css-keyword,*
-@import "/css/fireball_unicode.css"; html {}: webkit-css-at-rule,*,webkit-css-string,*,webkit-css-selector,*,webkit-block-start,webkit-block-end
-@media screen { body { color: red; } }: webkit-css-at-rule,*,webkit-css-keyword,*,webkit-block-start,*,webkit-css-selector,*,webkit-block-start,*,webkit-css-property,*,webkit-css-color,*,webkit-block-end,*,webkit-block-end
-@font-face { font-family: "MyHelvetica"; }: webkit-css-at-rule,*,webkit-block-start,*,webkit-css-property,*,webkit-css-string,*,webkit-block-end
-p { color: color; red: red; color: #000; color: #FFF; color: #123AbC; color: #faebfe; color:papayawhip; }: webkit-css-selector,*,webkit-block-start,*,webkit-css-property,*,webkit-css-selector,*,webkit-css-color,*,webkit-css-property,*,webkit-css-color,*,webkit-css-property,*,webkit-css-color,*,webkit-css-property,*,webkit-css-color,*,webkit-css-property,*,webkit-css-color,*,webkit-css-property,*,webkit-css-color,*,webkit-block-end
-p { margin: -10px !important; }: webkit-css-selector,*,webkit-block-start,*,webkit-css-property,*,webkit-css-number,*,webkit-css-bang-keyword,*,webkit-block-end
-$margin-left: $offsetBefore + 12px + $offsetAfter;: webkit-scss-variable,*,webkit-scss-variable,*,webkit-css-number,*,webkit-scss-variable,*
+a[href='/']: cm-css-tag,*,cm-css-tag,*,cm-css-string,*
+#content > a:hover: cm-css-builtin,*,cm-css-tag,cm-css-operator,cm-css-tag
+@import url(style.css);: cm-css-def,*,cm-css-tag,*,cm-css-string,*
+@import url("style.css") projection, tv;: cm-css-def,*,cm-css-tag,*,cm-css-string,*,cm-css-tag,*,cm-css-tag,*
+@import "/css/fireball_unicode.css"; html {}: cm-css-def,*,cm-css-string,*,cm-css-tag,*
+@media screen { body { color: red; } }: cm-css-def,*,cm-css-attribute,*,cm-css-tag,*,cm-css-property,cm-css-operator,*,cm-css-keyword,*
+@font-face { font-family: "MyHelvetica"; }: cm-css-def,*,cm-css-property,cm-css-operator,*,cm-css-string,*
+p { color: color; red: red; color: #000; color: #FFF; color: #123AbC; color: #faebfe; color:papayawhip; }: cm-css-tag,*,cm-css-property,cm-css-operator,*,cm-css-variable-2,*,cm-css-keyword,cm-css-operator,*,cm-css-keyword,*,cm-css-property,cm-css-operator,*,cm-css-atom,*,cm-css-property,cm-css-operator,*,cm-css-atom,*,cm-css-property,cm-css-operator,*,cm-css-atom,*,cm-css-property,cm-css-operator,*,cm-css-atom,*,cm-css-property,cm-css-operator,cm-css-keyword,*
+p { margin: -10px !important; }: cm-css-tag,*,cm-css-property,cm-css-operator,*,cm-css-number,*,cm-css-keyword,*
+$margin-left: $offsetBefore + 12px + $offsetAfter;: cm-css-variable-2,cm-css-operator,*,cm-css-variable-2,*,cm-css-number,*,cm-css-variable-2,*
 $type: monster;
 p {
 @if $type == ocean {
 color: blue;
 } @else if $type == matador {
 color: red;
 } @else if $type == monster {
 color: green;
 } @else {
 color: black;
 }
-}: webkit-scss-variable,*,,webkit-css-selector,*,webkit-block-start,,webkit-css-at-rule,*,webkit-scss-variable,*,webkit-block-start,,webkit-css-property,*,webkit-css-color,*,,webkit-block-end,*,webkit-css-at-rule,*,webkit-css-at-rule,*,webkit-scss-variable,*,webkit-block-start,,webkit-css-property,*,webkit-css-color,*,,webkit-block-end,*,webkit-css-at-rule,*,webkit-css-at-rule,*,webkit-scss-variable,*,webkit-block-start,,webkit-css-property,*,webkit-css-color,*,,webkit-block-end,*,webkit-css-at-rule,*,webkit-block-start,,webkit-css-property,*,webkit-css-color,*,,webkit-block-end,,webkit-block-end
-@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }: webkit-css-at-rule,*,webkit-scss-variable,*,webkit-css-at-rule,*,webkit-css-number,*,webkit-css-at-rule,*,webkit-css-number,*,webkit-block-start,*,webkit-css-selector,*,webkit-block-start,webkit-scss-variable,webkit-block-end,*,webkit-block-start,*,webkit-css-property,*,webkit-css-number,*,webkit-scss-variable,*,webkit-block-end,*,webkit-block-end
+}: cm-css-variable-2,cm-css-operator,*,cm-css-variable-2,*,,cm-css-tag,*,,cm-css-def,*,cm-css-variable-2,*,cm-css-tag,*,,cm-css-property,cm-css-operator,*,cm-css-keyword,*,,*,cm-css-def,*,cm-css-tag,*,cm-css-variable-2,*,cm-css-tag,*,,cm-css-property,cm-css-operator,*,cm-css-keyword,*,,*,cm-css-def,*,cm-css-tag,*,cm-css-variable-2,*,cm-css-tag,*,,cm-css-property,cm-css-operator,*,cm-css-keyword,*,,*,cm-css-def,*,,cm-css-property,cm-css-operator,*,cm-css-keyword,*,,*,,*
+@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }: cm-css-def,*,cm-css-variable-2,*,cm-css-tag,*,cm-css-number,*,cm-css-tag,*,cm-css-number,*,cm-css-qualifier,cm-css-operator,cm-css-variable-2,cm-css-operator,*,cm-css-property,cm-css-operator,*,cm-css-number,*,cm-css-variable-2,*
 @mixin adjust-location($x, $y) {
 @if unitless($x) {
 @warn "Assuming #{$x} to be in pixels";
 $x: 1px * $x;
 }
 position: relative; left: $x; top: $y;
-}: webkit-css-at-rule,*,webkit-scss-variable,*,webkit-scss-variable,*,webkit-block-start,,webkit-css-at-rule,*,webkit-css-keyword,*,webkit-scss-variable,*,webkit-block-start,,webkit-css-at-rule,*,webkit-css-string,*,,webkit-scss-variable,*,webkit-css-number,*,webkit-scss-variable,*,,webkit-block-end,,webkit-css-property,*,webkit-css-keyword,*,webkit-css-property,*,webkit-scss-variable,*,webkit-css-property,*,webkit-scss-variable,*,,webkit-block-end
+}: cm-css-def,*,cm-css-tag,*,cm-css-variable-2,*,cm-css-variable-2,*,,cm-css-def,*,cm-css-tag,*,cm-css-variable-2,*,,cm-css-def,*,cm-css-string,*,,cm-css-variable-2,cm-css-operator,*,cm-css-number,*,cm-css-variable-2,*,,*,,cm-css-property,cm-css-operator,*,cm-css-string-2,*,cm-css-property,cm-css-operator,*,cm-css-variable-2,*,cm-css-property,cm-css-operator,*,cm-css-variable-2,*,,*
 #navbar {
 $navbar-width: 800px;
 $items: 5;
 $navbar-color: #ce4dd6;
 width: $navbar-width;
 border-bottom: 2px solid $navbar-color;
 li {
 @extend .notice !optional;
 float: left;
 width: $navbar-width/$items - 10px;
 background-color: lighten($navbar-color, 20%);
 &:hover {
 background-color: lighten($navbar-color, 10%);
 }
 }
-}: webkit-css-selector,*,webkit-block-start,,webkit-scss-variable,*,webkit-css-number,*,,webkit-scss-variable,*,webkit-css-number,*,,webkit-scss-variable,*,webkit-css-color,*,,webkit-css-property,*,webkit-scss-variable,*,,webkit-css-property,*,webkit-css-number,*,webkit-css-keyword,*,webkit-scss-variable,*,,webkit-css-selector,*,webkit-block-start,,webkit-css-at-rule,*,webkit-css-selector,*,webkit-css-bang-keyword,*,,webkit-css-property,*,webkit-css-keyword,*,,webkit-css-property,*,webkit-scss-variable,webkit-scss-variable,*,webkit-css-number,*,,webkit-css-property,*,webkit-css-keyword,*,webkit-scss-variable,*,webkit-css-number,*,,webkit-css-selector,*,webkit-block-start,,webkit-css-property,*,webkit-css-keyword,*,webkit-scss-variable,*,webkit-css-number,*,,webkit-block-end,,webkit-block-end,,webkit-block-end
+}: cm-css-builtin,*,,cm-css-variable-2,cm-css-operator,*,cm-css-number,*,,cm-css-variable-2,cm-css-operator,*,cm-css-number,*,,cm-css-variable-2,cm-css-operator,*,cm-css-atom,*,,cm-css-property,cm-css-operator,*,cm-css-variable-2,*,,cm-css-property,cm-css-operator,*,cm-css-number,*,cm-css-string-2,*,cm-css-variable-2,*,,cm-css-tag,*,,cm-css-def,*,cm-css-qualifier,*,cm-css-keyword,*,,cm-css-property,cm-css-operator,*,cm-css-string-2,*,,cm-css-property,cm-css-operator,*,cm-css-variable-2,cm-css-operator,cm-css-variable-2,*,cm-css-number,*,,cm-css-property,cm-css-operator,*,cm-css-variable-2,*,cm-css-variable-2,*,cm-css-number,*,,cm-css-tag,cm-css-operator,cm-css-tag,*,,cm-css-property,cm-css-operator,*,cm-css-variable-2,*,cm-css-variable-2,*,cm-css-number,*,,*,,*,,*