Added support for basic color escape sequencies on Debug Console (#367)

* Added basic color escape sequencies on Debug Console
Added support for bold font style on Debug Console

* Fixing broken test

* More tests

package.json

@@ -13,6 +13,7 @@
   "main": "./out/src/index",
   "dependencies": {
     "@types/source-map": "^0.1.27",
+    "color": "^3.0.0",
     "devtools-protocol": "0.0.588169",
     "glob": "^7.1.3",
     "noice-json-rpc": "^1.2.0",
@@ -23,6 +24,7 @@
     "ws": "^6.0.0"
   },
   "devDependencies": {
+    "@types/color": "^3.0.0",
     "@types/glob": "^5.0.35",
     "@types/minimatch": "^2.0.29",
     "@types/mocha": "^2.2.32",

src/chrome/consoleHelper.ts

@@ -3,6 +3,7 @@
  *--------------------------------------------------------*/
 
 import { Protocol as Crdp } from 'devtools-protocol';
+import * as Color from 'color';
 import * as variables from './variables';
 
 export function formatExceptionDetails(e: Crdp.Runtime.ExceptionDetails): string {
@@ -136,6 +137,9 @@ 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);
 
@@ -146,9 +150,38 @@ function formatArg(formatSpec: string, arg: Crdp.Runtime.RemoteObject): string |
     } else if (formatSpec === 'f') {
         return +paramValue + '';
     } else if (formatSpec === 'c') {
-        // Remove %c - Applies CSS color rules
-        // Could use terminal color codes in the future
-        return '';
+        // value:"color: gray; font-weight: light
+        const colorMatches = colorRegex.exec(arg.value);
+        const fontWeightMatches = fontWeightRegex.exec(arg.value);
+
+        let escapedSequence = '';
+
+        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:
+          }
+        }
+
+        if (escapedSequence.length > 0) {
+          escapedSequence = `\x1b[0${escapedSequence}m`;
+        }
+
+        return escapedSequence;
     } else if (formatSpec === 'O') {
         if (arg.objectId) {
             return arg;

test/chrome/consoleHelper.test.ts

@@ -57,8 +57,12 @@ suite('ConsoleHelper', () => {
             doAssertForString(Runtime.makeLog('test', null, undefined), 'test null undefined');
         });
 
-        test('strips %c patterns', () => {
-            doAssertForString(Runtime.makeLog('foo %cbar', 'color: red'), 'foo bar');
+        test('handles %c patterns for color', () => {
+            doAssertForString(Runtime.makeLog('foo %cbar', 'color: red'), 'foo \x1b[0;91mbar');
+        });
+
+        test('handles %c patterns with font-weight', () => {
+            doAssertForString(Runtime.makeLog('foo %cbar', 'color: red;font-weight: bold'), 'foo \x1b[0;91;1mbar');
         });
 
         test('starts with non-string', () => {