From 2a510bd0cb1db5f58a077bbe391780aabaffa22c Mon Sep 17 00:00:00 2001
From: Renato Degelo <rdegelo@amazon.com>
Date: Tue, 23 Oct 2018 16:56:37 -0400
Subject: [PATCH] Improving Debug Console Styling. Add underline and background
 support

---
 src/chrome/consoleHelper.ts       | 70 ++++++++++++++++++++-----------
 test/chrome/consoleHelper.test.ts | 14 ++++++-
 2 files changed, 58 insertions(+), 26 deletions(-)

diff --git a/src/chrome/consoleHelper.ts b/src/chrome/consoleHelper.ts
index 42126c123..fa0ecde2f 100644
--- a/src/chrome/consoleHelper.ts
+++ b/src/chrome/consoleHelper.ts
@@ -137,9 +137,6 @@ function resolveParams(args: Crdp.Runtime.RemoteObject[], skipFormatSpecifiers?:
     return processedArgs;
 }
 
-const colorRegex = /color: (.*?)(?:;|$)/;
-const fontWeightRegex = /font-weight: (.*?)(?:;|$)/;
-
 function formatArg(formatSpec: string, arg: Crdp.Runtime.RemoteObject): string | Crdp.Runtime.RemoteObject {
     const paramValue = String(typeof arg.value !== 'undefined' ? arg.value : arg.description);
 
@@ -150,31 +147,41 @@ function formatArg(formatSpec: string, arg: Crdp.Runtime.RemoteObject): string |
     } else if (formatSpec === 'f') {
         return +paramValue + '';
     } else if (formatSpec === 'c') {
-        // value:"color: gray; font-weight: light
-        const colorMatches = colorRegex.exec(arg.value);
-        const fontWeightMatches = fontWeightRegex.exec(arg.value);
+        const cssRegex = /\s*(.*?)\s*:\s*(.*?)\s*(?:;|$)/g;
 
         let escapedSequence = '';
+        let match = cssRegex.exec(arg.value);
+        while (match != null) {
+            if (match.length === 3) {
+                switch (match[1]) {
+                    case 'color':
+                        const color = getAnsi16Color(match[2]);
+                        if (color) {
+                            escapedSequence += `;${color}`;
+                        }
+                        break;
+                    case 'background':
+                        const background = getAnsi16Color(match[2]);
+                        if (background) {
+                            escapedSequence += `;${background + 10}`;
+                        }
+                        break;
+                    case 'font-weight':
+                        if (match[2] === 'bold') {
+                            escapedSequence += ';1';
+                        }
+                        break;
+                    case 'text-decoration':
+                        if (match[2] === 'underline') {
+                            escapedSequence += ';4';
+                        }
+                        break;
+                    default:
+                        // css not mapped, skip
+                }
+            }
 
-        if (colorMatches && colorMatches.length > 0) {
-          try {
-            // Color can parse, hex and color names
-            const color = new Color(colorMatches[1]);
-            const ansi = color.ansi16().object().ansi16;
-            escapedSequence = `;${ansi}`;
-          } catch (ex) {
-            // Unable to parse Color
-            // For instance, "inherit" color will throw
-          }
-        }
-
-        if (fontWeightMatches && fontWeightMatches.length > 0) {
-          switch (fontWeightMatches[1]) {
-            case 'bold':
-              escapedSequence += ';1';
-              break;
-            default:
-          }
+            match = cssRegex.exec(arg.value);
         }
 
         if (escapedSequence.length > 0) {
@@ -212,3 +219,16 @@ function stackTraceToString(stackTrace: Crdp.Runtime.StackTrace): string {
         })
         .join('\n');
 }
+
+function getAnsi16Color(colorString: string): number {
+    try {
+      // Color can parse hex and color names
+      const color = new Color(colorString);
+      return color.ansi16().object().ansi16;
+    } catch (ex) {
+      // Unable to parse Color
+      // For instance, "inherit" color will throw
+    }
+
+    return undefined;
+}
diff --git a/test/chrome/consoleHelper.test.ts b/test/chrome/consoleHelper.test.ts
index 4256d1b7f..a406687a0 100644
--- a/test/chrome/consoleHelper.test.ts
+++ b/test/chrome/consoleHelper.test.ts
@@ -62,7 +62,19 @@ suite('ConsoleHelper', () => {
         });
 
         test('handles %c patterns with font-weight', () => {
-            doAssertForString(Runtime.makeLog('foo %cbar', 'color: red;font-weight: bold'), 'foo \x1b[0;91;1mbar');
+            doAssertForString(Runtime.makeLog('foo %cbar', 'font-weight: bold'), 'foo \x1b[0;1mbar');
+        });
+
+        test('handles %c patterns with background', () => {
+          doAssertForString(Runtime.makeLog('foo %cbar', 'background: red'), 'foo \x1b[0;101mbar');
+        });
+
+        test('handles %c patterns with text-decoration', () => {
+          doAssertForString(Runtime.makeLog('foo %cbar', 'text-decoration: underline'), 'foo \x1b[0;4mbar');
+        });
+
+        test('handles %c patterns with multiple attributes', () => {
+          doAssertForString(Runtime.makeLog('foo %cbar', 'color: red; background: blue; font-weight: bold; text-decoration: underline'), 'foo \x1b[0;91;104;1;4mbar');
         });
 
         test('starts with non-string', () => {