Update syntax highlighting class

Allows more code to be syntax highlighted.

Also updates the colours for syntax highlight.

Change-Id: Id07e34e33d85033d8d89916ce5a5ccf8d9768ff0
(cherry picked from commit 3c7d47eac8dac1135f1b84d940738c93cee60661)

3 files changed, 14 insertions, 0 deletions

diff --git a/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer.js b/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer.js
index 88221d4aed..8bf42b79e1 100644
--- a/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer.js
+++ b/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer.js
@@ -96,6 +96,7 @@
     'gr-diff gr-syntax gr-syntax-attribute': true,
     'gr-diff gr-syntax gr-syntax-built_in': true,
     'gr-diff gr-syntax gr-syntax-comment': true,
+    'gr-diff gr-syntax gr-syntax-function': true,
     'gr-diff gr-syntax gr-syntax-keyword': true,
     'gr-diff gr-syntax gr-syntax-link': true,
     'gr-diff gr-syntax gr-syntax-literal': true,
@@ -103,6 +104,7 @@
     'gr-diff gr-syntax gr-syntax-meta-keyword': true,
     'gr-diff gr-syntax gr-syntax-name': true,
     'gr-diff gr-syntax gr-syntax-number': true,
+    'gr-diff gr-syntax gr-syntax-params': true,
     'gr-diff gr-syntax gr-syntax-regexp': true,
     'gr-diff gr-syntax gr-syntax-selector-attr': true,
     'gr-diff gr-syntax gr-syntax-selector-class': true,
diff --git a/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-syntax-theme.html b/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-syntax-theme.html
index 41d38040fe..a122113166 100644
--- a/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-syntax-theme.html
+++ b/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-syntax-theme.html
@@ -29,6 +29,12 @@ limitations under the License.
       .contentText {
         color: var(--syntax-default-color);
       }
+      .gr-syntax-attribute {
+        color: var(--syntax-attribute-color);
+      }
+      .gr-syntax-function {
+        color: var(--syntax-function-color);
+      }
       .gr-syntax-meta {
         color: var(--syntax-meta-color);
       }
@@ -94,6 +100,9 @@ limitations under the License.
       .gr-syntax-template-tag {
         color: var(--syntax-template-tag-color);
       }
+      .gr-syntax-param {
+        color: var(--syntax-param-color);
+      }
     </style>
   </template>
 </dom-module>
diff --git a/polygerrit-ui/app/styles/themes/app-theme.html b/polygerrit-ui/app/styles/themes/app-theme.html
index fba3e978bd..ec445ae181 100644
--- a/polygerrit-ui/app/styles/themes/app-theme.html
+++ b/polygerrit-ui/app/styles/themes/app-theme.html
@@ -109,6 +109,8 @@ limitations under the License.
   --tooltip-text-color: #fff;
 
   --syntax-default-color: var(--primary-text-color);
+  --syntax-attribute-color: var(--primary-text-color);
+  --syntax-function-color: #e90;
   --syntax-meta-color: #FF1717;
   --syntax-keyword-color: #9E0069;
   --syntax-number-color: #164;
@@ -130,6 +132,7 @@ limitations under the License.
   --syntax-regexp-color: #FA8602;
   --syntax-selector-attr-color: #FA8602;
   --syntax-template-tag-color: #FA8602;
+  --syntax-param-color: var(--primary-text-color);
 }
 @media screen and (max-width: 50em) {
   :root {