Bug 1307908 - Implement custom styles in new console frontend. r=linclark,tromey;

Add the possibility to pass a style object to StringRep.
Parse the styles strings passed as argument using a dummy node element
to strip off forbidden properties and forbidden values.
Add a mocha test to ensure custom styles are rendered as expected.

MozReview-Commit-ID: I3LgeNRujaL

--HG--
extra : rebase_source : 09ecff62f79a0508c51a972f3b3057a6b077bcfc

devtools/client/shared/components/reps/string.js

@@ -23,6 +23,7 @@ define(function (require, exports, module) {
 
     propTypes: {
       useQuotes: React.PropTypes.bool,
+      style: React.PropTypes.object,
     },
 
     getDefaultProps: function () {
@@ -34,12 +35,15 @@ define(function (require, exports, module) {
     render: function () {
       let text = this.props.object;
       let member = this.props.member;
+      let style = this.props.style;
+
+      let config = {className: "objectBox objectBox-string"};
+      if (style) {
+        config.style = style;
+      }
+
       if (member && member.open) {
-        return (
-          span({className: "objectBox objectBox-string"},
-            "\"" + text + "\""
-          )
-        );
+        return span(config, "\"" + text + "\"");
       }
 
       let croppedString = this.props.cropLimit ?
@@ -48,11 +52,7 @@ define(function (require, exports, module) {
       let formattedString = this.props.useQuotes ?
         "\"" + croppedString + "\"" : croppedString;
 
-      return (
-        span({className: "objectBox objectBox-string"},
-          formattedString
-        )
-      );
+      return span(config, formattedString);
     },
   });
 

devtools/client/webconsole/new-console-output/components/grip-message-body.js

@@ -31,10 +31,19 @@ GripMessageBody.propTypes = {
     PropTypes.number,
     PropTypes.object,
   ]).isRequired,
+  serviceContainer: PropTypes.shape({
+    createElement: PropTypes.func.isRequired,
+  }),
+  userProvidedStyle: PropTypes.string,
 };
 
 function GripMessageBody(props) {
-  const { grip } = props;
+  const { grip, userProvidedStyle, serviceContainer } = props;
+
+  let styleObject;
+  if (userProvidedStyle && userProvidedStyle !== "") {
+    styleObject = cleanupStyle(userProvidedStyle, serviceContainer.createElement);
+  }
 
   return (
     // @TODO once there is a longString rep, also turn off quotes for those.
@@ -43,6 +52,7 @@ function GripMessageBody(props) {
         object: grip,
         useQuotes: false,
         mode: props.mode,
+        style: styleObject
       })
       : Rep({
         object: grip,
@@ -53,4 +63,40 @@ function GripMessageBody(props) {
   );
 }
 
+function cleanupStyle(userProvidedStyle, createElement) {
+  // Regular expression that matches the allowed CSS property names.
+  const allowedStylesRegex = new RegExp(
+    "^(?:-moz-)?(?:background|border|box|clear|color|cursor|display|float|font|line|" +
+    "margin|padding|text|transition|outline|white-space|word|writing|" +
+    "(?:min-|max-)?width|(?:min-|max-)?height)"
+  );
+
+  // Regular expression that matches the forbidden CSS property values.
+  const forbiddenValuesRegexs = [
+    // url(), -moz-element()
+    /\b(?:url|(?:-moz-)?element)[\s('"]+/gi,
+
+    // various URL protocols
+    /['"(]*(?:chrome|resource|about|app|data|https?|ftp|file):+\/*/gi,
+  ];
+
+  // Use a dummy element to parse the style string.
+  let dummy = createElement("div");
+  dummy.style = userProvidedStyle;
+
+  // Return a style object as expected by React DOM components, e.g.
+  // {color: "red"}
+  // without forbidden properties and values.
+  return [...dummy.style]
+    .filter(name => {
+      return allowedStylesRegex.test(name)
+        && !forbiddenValuesRegexs.some(regex => regex.test(dummy.style[name]));
+    })
+    .reduce((object, name) => {
+      return Object.assign({
+        [name]: dummy.style[name]
+      }, object);
+    }, {});
+}
+
 module.exports = GripMessageBody;

devtools/client/webconsole/new-console-output/components/message-types/console-api-call.js

@@ -43,13 +43,15 @@ function ConsoleApiCall(props) {
   } = props;
   const {
     id: messageId,
-    source, type,
+    source,
+    type,
     level,
     repeat,
     stacktrace,
     frame,
     parameters,
     messageText,
+    userProvidedStyles,
   } = message;
 
   let messageBody;
@@ -62,7 +64,7 @@ function ConsoleApiCall(props) {
     // TODO: Chrome does not output anything, see if we want to keep this
     messageBody = dom.span({className: "cm-variable"}, "console.table()");
   } else if (parameters) {
-    messageBody = formatReps(parameters);
+    messageBody = formatReps(parameters, userProvidedStyles, serviceContainer);
   } else {
     messageBody = messageText;
   }
@@ -107,11 +109,16 @@ function ConsoleApiCall(props) {
   });
 }
 
-function formatReps(parameters) {
+function formatReps(parameters, userProvidedStyles, serviceContainer) {
   return (
     parameters
       // Get all the grips.
-      .map((grip, key) => GripMessageBody({ grip, key }))
+      .map((grip, key) => GripMessageBody({
+        grip,
+        key,
+        userProvidedStyle: userProvidedStyles ? userProvidedStyles[key] : null,
+        serviceContainer
+      }))
       // Interleave spaces.
       .reduce((arr, v, i) => {
         return i + 1 < parameters.length

devtools/client/webconsole/new-console-output/new-console-output-wrapper.js

@@ -18,11 +18,12 @@ const store = configureStore();
 let queuedActions = [];
 let throttledDispatchTimeout = false;
 
-function NewConsoleOutputWrapper(parentNode, jsterm, toolbox, owner) {
+function NewConsoleOutputWrapper(parentNode, jsterm, toolbox, owner, document) {
   this.parentNode = parentNode;
   this.jsterm = jsterm;
   this.toolbox = toolbox;
   this.owner = owner;
+  this.document = document;
 
   this.init = this.init.bind(this);
 }
@@ -54,7 +55,10 @@ NewConsoleOutputWrapper.prototype = {
           });
         },
         sourceMapService: this.toolbox ? this.toolbox._sourceMapService : null,
-        openLink: url => this.jsterm.hud.owner.openLink.call(this.jsterm.hud.owner, url)
+        openLink: url => this.jsterm.hud.owner.openLink.call(this.jsterm.hud.owner, url),
+        createElement: nodename => {
+          return this.document.createElementNS("http://www.w3.org/1999/xhtml", nodename);
+        }
       }
     });
     let filterBar = FilterBar({

devtools/client/webconsole/new-console-output/test/components/console-api-call.test.js

@@ -42,6 +42,30 @@ describe("ConsoleAPICall component:", () => {
       expect(locationLink.text()).toBe("test-tempfile.js:1:27");
     });
 
+    it("renders string grips with custom style", () => {
+      const message = stubPreparedMessages.get("console.log(%cfoobar)");
+      const wrapper = render(ConsoleApiCall({ message, serviceContainer }));
+
+      const elements = wrapper.find(".objectBox-string");
+      expect(elements.text()).toBe("foobar");
+      expect(elements.length).toBe(2);
+
+      const firstElementStyle = elements.eq(0).prop("style");
+      // Allowed styles are applied accordingly on the first element.
+      expect(firstElementStyle.color).toBe(`blue`);
+      expect(firstElementStyle["font-size"]).toBe(`1.3em`);
+      // Forbidden styles are not applied.
+      expect(firstElementStyle["background-image"]).toBe(undefined);
+      expect(firstElementStyle.position).toBe(undefined);
+      expect(firstElementStyle.top).toBe(undefined);
+
+      const secondElementStyle = elements.eq(1).prop("style");
+      // Allowed styles are applied accordingly on the second element.
+      expect(secondElementStyle.color).toBe(`red`);
+      // Forbidden styles are not applied.
+      expect(secondElementStyle.background).toBe(undefined);
+    });
+
     it("renders repeat node", () => {
       const message =
         stubPreparedMessages.get("console.log('foobar', 'test')")

devtools/client/webconsole/new-console-output/test/fixtures/serviceContainer.js

@@ -13,4 +13,5 @@ module.exports = {
     subscribe: () => {},
   },
   openLink: () => {},
+  createElement: tagName => document.createElement(tagName)
 };

devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/stub-snippets.js

@@ -80,6 +80,15 @@ console.group();
 console.groupEnd();
 `});
 
+consoleApi.set("console.log(%cfoobar)", {
+  keys: ["console.log(%cfoobar)"],
+  code: `
+console.log(
+  "%cfoo%cbar",
+  "color:blue;font-size:1.3em;background:url('http://example.com/test');position:absolute;top:10px",
+  "color:red;background:\\165rl('http://example.com/test')");
+`});
+
 // Evaluation Result
 const evaluationResultCommands = [
   "new Date(0)",

devtools/client/webconsole/new-console-output/test/fixtures/stubs/consoleApi.js

@@ -25,7 +25,7 @@ stubPreparedMessages.set("console.log('foobar', 'test')", new ConsoleMessage({
 		"test"
 	],
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[\"foobar\",\"test\"],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(%27foobar%27%2C%20%27test%27)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[\"foobar\",\"test\"],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(%27foobar%27%2C%20%27test%27)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(%27foobar%27%2C%20%27test%27)",
@@ -33,7 +33,8 @@ stubPreparedMessages.set("console.log('foobar', 'test')", new ConsoleMessage({
 		"column": 27
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.log(undefined)", new ConsoleMessage({
@@ -49,7 +50,7 @@ stubPreparedMessages.set("console.log(undefined)", new ConsoleMessage({
 		}
 	],
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[{\"type\":\"undefined\"}],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(undefined)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[{\"type\":\"undefined\"}],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(undefined)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(undefined)",
@@ -57,7 +58,8 @@ stubPreparedMessages.set("console.log(undefined)", new ConsoleMessage({
 		"column": 27
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.warn('danger, will robinson!')", new ConsoleMessage({
@@ -71,7 +73,7 @@ stubPreparedMessages.set("console.warn('danger, will robinson!')", new ConsoleMe
 		"danger, will robinson!"
 	],
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"warn\",\"level\":\"warn\",\"messageText\":null,\"parameters\":[\"danger, will robinson!\"],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.warn(%27danger%2C%20will%20robinson!%27)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"warn\",\"level\":\"warn\",\"messageText\":null,\"parameters\":[\"danger, will robinson!\"],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.warn(%27danger%2C%20will%20robinson!%27)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.warn(%27danger%2C%20will%20robinson!%27)",
@@ -79,7 +81,8 @@ stubPreparedMessages.set("console.warn('danger, will robinson!')", new ConsoleMe
 		"column": 27
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.log(NaN)", new ConsoleMessage({
@@ -95,7 +98,7 @@ stubPreparedMessages.set("console.log(NaN)", new ConsoleMessage({
 		}
 	],
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[{\"type\":\"NaN\"}],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(NaN)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[{\"type\":\"NaN\"}],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(NaN)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(NaN)",
@@ -103,7 +106,8 @@ stubPreparedMessages.set("console.log(NaN)", new ConsoleMessage({
 		"column": 27
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.log(null)", new ConsoleMessage({
@@ -119,7 +123,7 @@ stubPreparedMessages.set("console.log(null)", new ConsoleMessage({
 		}
 	],
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[{\"type\":\"null\"}],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(null)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[{\"type\":\"null\"}],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(null)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(null)",
@@ -127,7 +131,8 @@ stubPreparedMessages.set("console.log(null)", new ConsoleMessage({
 		"column": 27
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.log('鼬')", new ConsoleMessage({
@@ -141,7 +146,7 @@ stubPreparedMessages.set("console.log('鼬')", new ConsoleMessage({
 		"鼬"
 	],
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[\"鼬\"],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(%27%E9%BC%AC%27)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[\"鼬\"],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(%27%E9%BC%AC%27)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(%27%E9%BC%AC%27)",
@@ -149,7 +154,8 @@ stubPreparedMessages.set("console.log('鼬')", new ConsoleMessage({
 		"column": 27
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.clear()", new ConsoleMessage({
@@ -163,7 +169,7 @@ stubPreparedMessages.set("console.clear()", new ConsoleMessage({
 		"Console was cleared."
 	],
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"clear\",\"level\":\"log\",\"messageText\":null,\"parameters\":[\"Console was cleared.\"],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.clear()\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"clear\",\"level\":\"log\",\"messageText\":null,\"parameters\":[\"Console was cleared.\"],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.clear()\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.clear()",
@@ -171,7 +177,8 @@ stubPreparedMessages.set("console.clear()", new ConsoleMessage({
 		"column": 27
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.count('bar')", new ConsoleMessage({
@@ -183,7 +190,7 @@ stubPreparedMessages.set("console.count('bar')", new ConsoleMessage({
 	"messageText": "bar: 1",
 	"parameters": null,
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"debug\",\"messageText\":\"bar: 1\",\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.count(%27bar%27)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"debug\",\"messageText\":\"bar: 1\",\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.count(%27bar%27)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.count(%27bar%27)",
@@ -191,7 +198,8 @@ stubPreparedMessages.set("console.count('bar')", new ConsoleMessage({
 		"column": 27
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.assert(false, {message: 'foobar'})", new ConsoleMessage({
@@ -226,7 +234,7 @@ stubPreparedMessages.set("console.assert(false, {message: 'foobar'})", new Conso
 		}
 	],
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"assert\",\"level\":\"error\",\"messageText\":null,\"parameters\":[{\"type\":\"object\",\"actor\":\"server1.conn8.child1/obj31\",\"class\":\"Object\",\"extensible\":true,\"frozen\":false,\"sealed\":false,\"ownPropertyLength\":1,\"preview\":{\"kind\":\"Object\",\"ownProperties\":{\"message\":{\"configurable\":true,\"enumerable\":true,\"writable\":true,\"value\":\"foobar\"}},\"ownPropertiesLength\":1,\"safeGetterValues\":{}}}],\"repeatId\":null,\"stacktrace\":[{\"columnNumber\":27,\"filename\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.assert(false%2C%20%7Bmessage%3A%20%27foobar%27%7D)\",\"functionName\":\"triggerPacket\",\"language\":2,\"lineNumber\":1}],\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.assert(false%2C%20%7Bmessage%3A%20%27foobar%27%7D)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"assert\",\"level\":\"error\",\"messageText\":null,\"parameters\":[{\"type\":\"object\",\"actor\":\"server1.conn8.child1/obj31\",\"class\":\"Object\",\"extensible\":true,\"frozen\":false,\"sealed\":false,\"ownPropertyLength\":1,\"preview\":{\"kind\":\"Object\",\"ownProperties\":{\"message\":{\"configurable\":true,\"enumerable\":true,\"writable\":true,\"value\":\"foobar\"}},\"ownPropertiesLength\":1,\"safeGetterValues\":{}}}],\"repeatId\":null,\"stacktrace\":[{\"columnNumber\":27,\"filename\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.assert(false%2C%20%7Bmessage%3A%20%27foobar%27%7D)\",\"functionName\":\"triggerPacket\",\"language\":2,\"lineNumber\":1}],\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.assert(false%2C%20%7Bmessage%3A%20%27foobar%27%7D)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": [
 		{
 			"columnNumber": 27,
@@ -242,7 +250,8 @@ stubPreparedMessages.set("console.assert(false, {message: 'foobar'})", new Conso
 		"column": 27
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.log('hello \nfrom \rthe \"string world!')", new ConsoleMessage({
@@ -256,7 +265,7 @@ stubPreparedMessages.set("console.log('hello \nfrom \rthe \"string world!')", ne
 		"hello \nfrom \rthe \"string world!"
 	],
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[\"hello \\nfrom \\rthe \\\"string world!\"],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(%27hello%20%5Cnfrom%20%5Crthe%20%5C%22string%20world!%27)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[\"hello \\nfrom \\rthe \\\"string world!\"],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(%27hello%20%5Cnfrom%20%5Crthe%20%5C%22string%20world!%27)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(%27hello%20%5Cnfrom%20%5Crthe%20%5C%22string%20world!%27)",
@@ -264,7 +273,8 @@ stubPreparedMessages.set("console.log('hello \nfrom \rthe \"string world!')", ne
 		"column": 27
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.log('úṇĩçödê țĕșť')", new ConsoleMessage({
@@ -278,7 +288,7 @@ stubPreparedMessages.set("console.log('úṇĩçödê țĕșť')", new ConsoleMe
 		"úṇĩçödê țĕșť"
 	],
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[\"úṇĩçödê țĕșť\"],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(%27%C3%BA%E1%B9%87%C4%A9%C3%A7%C3%B6d%C3%AA%20%C8%9B%C4%95%C8%99%C5%A5%27)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[\"úṇĩçödê țĕșť\"],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(%27%C3%BA%E1%B9%87%C4%A9%C3%A7%C3%B6d%C3%AA%20%C8%9B%C4%95%C8%99%C5%A5%27)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(%27%C3%BA%E1%B9%87%C4%A9%C3%A7%C3%B6d%C3%AA%20%C8%9B%C4%95%C8%99%C5%A5%27)",
@@ -286,7 +296,8 @@ stubPreparedMessages.set("console.log('úṇĩçödê țĕșť')", new ConsoleMe
 		"column": 27
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.dirxml(window)", new ConsoleMessage({
@@ -304,7 +315,7 @@ stubPreparedMessages.set("console.dirxml(window)", new ConsoleMessage({
 			"extensible": true,
 			"frozen": false,
 			"sealed": false,
-			"ownPropertyLength": 806,
+			"ownPropertyLength": 804,
 			"preview": {
 				"kind": "ObjectWithURL",
 				"url": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-console-api.html"
@@ -312,7 +323,7 @@ stubPreparedMessages.set("console.dirxml(window)", new ConsoleMessage({
 		}
 	],
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[{\"type\":\"object\",\"actor\":\"server1.conn11.child1/obj31\",\"class\":\"Window\",\"extensible\":true,\"frozen\":false,\"sealed\":false,\"ownPropertyLength\":806,\"preview\":{\"kind\":\"ObjectWithURL\",\"url\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-console-api.html\"}}],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.dirxml(window)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[{\"type\":\"object\",\"actor\":\"server1.conn11.child1/obj31\",\"class\":\"Window\",\"extensible\":true,\"frozen\":false,\"sealed\":false,\"ownPropertyLength\":804,\"preview\":{\"kind\":\"ObjectWithURL\",\"url\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-console-api.html\"}}],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.dirxml(window)\",\"line\":1,\"column\":27},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.dirxml(window)",
@@ -320,7 +331,8 @@ stubPreparedMessages.set("console.dirxml(window)", new ConsoleMessage({
 		"column": 27
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.trace()", new ConsoleMessage({
@@ -332,7 +344,7 @@ stubPreparedMessages.set("console.trace()", new ConsoleMessage({
 	"messageText": null,
 	"parameters": [],
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"trace\",\"level\":\"log\",\"messageText\":null,\"parameters\":[],\"repeatId\":null,\"stacktrace\":[{\"columnNumber\":3,\"filename\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.trace()\",\"functionName\":\"testStacktraceFiltering\",\"language\":2,\"lineNumber\":3},{\"columnNumber\":3,\"filename\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.trace()\",\"functionName\":\"foo\",\"language\":2,\"lineNumber\":6},{\"columnNumber\":1,\"filename\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.trace()\",\"functionName\":\"triggerPacket\",\"language\":2,\"lineNumber\":9}],\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.trace()\",\"line\":3,\"column\":3},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"trace\",\"level\":\"log\",\"messageText\":null,\"parameters\":[],\"repeatId\":null,\"stacktrace\":[{\"columnNumber\":3,\"filename\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.trace()\",\"functionName\":\"testStacktraceFiltering\",\"language\":2,\"lineNumber\":3},{\"columnNumber\":3,\"filename\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.trace()\",\"functionName\":\"foo\",\"language\":2,\"lineNumber\":6},{\"columnNumber\":1,\"filename\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.trace()\",\"functionName\":\"triggerPacket\",\"language\":2,\"lineNumber\":9}],\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.trace()\",\"line\":3,\"column\":3},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": [
 		{
 			"columnNumber": 3,
@@ -362,7 +374,8 @@ stubPreparedMessages.set("console.trace()", new ConsoleMessage({
 		"column": 3
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.time('bar')", new ConsoleMessage({
@@ -374,7 +387,7 @@ stubPreparedMessages.set("console.time('bar')", new ConsoleMessage({
 	"messageText": null,
 	"parameters": null,
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"nullMessage\",\"level\":\"log\",\"messageText\":null,\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.time(%27bar%27)\",\"line\":2,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"nullMessage\",\"level\":\"log\",\"messageText\":null,\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.time(%27bar%27)\",\"line\":2,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.time(%27bar%27)",
@@ -382,7 +395,8 @@ stubPreparedMessages.set("console.time('bar')", new ConsoleMessage({
 		"column": 1
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.timeEnd('bar')", new ConsoleMessage({
@@ -391,10 +405,10 @@ stubPreparedMessages.set("console.timeEnd('bar')", new ConsoleMessage({
 	"source": "console-api",
 	"type": "timeEnd",
 	"level": "log",
-	"messageText": "bar: 1.8ms",
+	"messageText": "bar: 1.36ms",
 	"parameters": null,
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"timeEnd\",\"level\":\"log\",\"messageText\":\"bar: 1.8ms\",\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.time(%27bar%27)\",\"line\":3,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"timeEnd\",\"level\":\"log\",\"messageText\":\"bar: 1.36ms\",\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.time(%27bar%27)\",\"line\":3,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.time(%27bar%27)",
@@ -402,7 +416,8 @@ stubPreparedMessages.set("console.timeEnd('bar')", new ConsoleMessage({
 		"column": 1
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.table('bar')", new ConsoleMessage({
@@ -416,7 +431,7 @@ stubPreparedMessages.set("console.table('bar')", new ConsoleMessage({
 		"bar"
 	],
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[\"bar\"],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.table(%27bar%27)\",\"line\":2,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[\"bar\"],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.table(%27bar%27)\",\"line\":2,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.table(%27bar%27)",
@@ -424,7 +439,8 @@ stubPreparedMessages.set("console.table('bar')", new ConsoleMessage({
 		"column": 1
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.table(['a', 'b', 'c'])", new ConsoleMessage({
@@ -455,7 +471,7 @@ stubPreparedMessages.set("console.table(['a', 'b', 'c'])", new ConsoleMessage({
 		}
 	],
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"table\",\"level\":\"log\",\"messageText\":null,\"parameters\":[{\"type\":\"object\",\"actor\":\"server1.conn15.child1/obj31\",\"class\":\"Array\",\"extensible\":true,\"frozen\":false,\"sealed\":false,\"ownPropertyLength\":4,\"preview\":{\"kind\":\"ArrayLike\",\"length\":3,\"items\":[\"a\",\"b\",\"c\"]}}],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.table(%5B%27a%27%2C%20%27b%27%2C%20%27c%27%5D)\",\"line\":2,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"table\",\"level\":\"log\",\"messageText\":null,\"parameters\":[{\"type\":\"object\",\"actor\":\"server1.conn15.child1/obj31\",\"class\":\"Array\",\"extensible\":true,\"frozen\":false,\"sealed\":false,\"ownPropertyLength\":4,\"preview\":{\"kind\":\"ArrayLike\",\"length\":3,\"items\":[\"a\",\"b\",\"c\"]}}],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.table(%5B%27a%27%2C%20%27b%27%2C%20%27c%27%5D)\",\"line\":2,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.table(%5B%27a%27%2C%20%27b%27%2C%20%27c%27%5D)",
@@ -463,7 +479,8 @@ stubPreparedMessages.set("console.table(['a', 'b', 'c'])", new ConsoleMessage({
 		"column": 1
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.group('bar')", new ConsoleMessage({
@@ -475,7 +492,7 @@ stubPreparedMessages.set("console.group('bar')", new ConsoleMessage({
 	"messageText": "bar",
 	"parameters": null,
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"startGroup\",\"level\":\"log\",\"messageText\":\"bar\",\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.group(%27bar%27)\",\"line\":2,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"startGroup\",\"level\":\"log\",\"messageText\":\"bar\",\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.group(%27bar%27)\",\"line\":2,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.group(%27bar%27)",
@@ -483,7 +500,8 @@ stubPreparedMessages.set("console.group('bar')", new ConsoleMessage({
 		"column": 1
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.groupEnd('bar')", new ConsoleMessage({
@@ -495,7 +513,7 @@ stubPreparedMessages.set("console.groupEnd('bar')", new ConsoleMessage({
 	"messageText": null,
 	"parameters": null,
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"endGroup\",\"level\":\"log\",\"messageText\":null,\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.group(%27bar%27)\",\"line\":3,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"endGroup\",\"level\":\"log\",\"messageText\":null,\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.group(%27bar%27)\",\"line\":3,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.group(%27bar%27)",
@@ -503,7 +521,8 @@ stubPreparedMessages.set("console.groupEnd('bar')", new ConsoleMessage({
 		"column": 1
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.groupCollapsed('foo')", new ConsoleMessage({
@@ -515,7 +534,7 @@ stubPreparedMessages.set("console.groupCollapsed('foo')", new ConsoleMessage({
 	"messageText": "foo",
 	"parameters": null,
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"startGroupCollapsed\",\"level\":\"log\",\"messageText\":\"foo\",\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.groupCollapsed(%27foo%27)\",\"line\":2,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"startGroupCollapsed\",\"level\":\"log\",\"messageText\":\"foo\",\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.groupCollapsed(%27foo%27)\",\"line\":2,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.groupCollapsed(%27foo%27)",
@@ -523,7 +542,8 @@ stubPreparedMessages.set("console.groupCollapsed('foo')", new ConsoleMessage({
 		"column": 1
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.groupEnd('foo')", new ConsoleMessage({
@@ -535,7 +555,7 @@ stubPreparedMessages.set("console.groupEnd('foo')", new ConsoleMessage({
 	"messageText": null,
 	"parameters": null,
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"endGroup\",\"level\":\"log\",\"messageText\":null,\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.groupCollapsed(%27foo%27)\",\"line\":3,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"endGroup\",\"level\":\"log\",\"messageText\":null,\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.groupCollapsed(%27foo%27)\",\"line\":3,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.groupCollapsed(%27foo%27)",
@@ -543,7 +563,8 @@ stubPreparedMessages.set("console.groupEnd('foo')", new ConsoleMessage({
 		"column": 1
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.group()", new ConsoleMessage({
@@ -555,7 +576,7 @@ stubPreparedMessages.set("console.group()", new ConsoleMessage({
 	"messageText": "<no group label>",
 	"parameters": null,
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"startGroup\",\"level\":\"log\",\"messageText\":\"<no group label>\",\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.group()\",\"line\":2,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"startGroup\",\"level\":\"log\",\"messageText\":\"<no group label>\",\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.group()\",\"line\":2,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.group()",
@@ -563,7 +584,8 @@ stubPreparedMessages.set("console.group()", new ConsoleMessage({
 		"column": 1
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
 }));
 
 stubPreparedMessages.set("console.groupEnd()", new ConsoleMessage({
@@ -575,7 +597,7 @@ stubPreparedMessages.set("console.groupEnd()", new ConsoleMessage({
 	"messageText": null,
 	"parameters": null,
 	"repeat": 1,
-	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"endGroup\",\"level\":\"log\",\"messageText\":null,\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.group()\",\"line\":3,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null}",
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"endGroup\",\"level\":\"log\",\"messageText\":null,\"parameters\":null,\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.group()\",\"line\":3,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[]}",
 	"stacktrace": null,
 	"frame": {
 		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.group()",
@@ -583,7 +605,35 @@ stubPreparedMessages.set("console.groupEnd()", new ConsoleMessage({
 		"column": 1
 	},
 	"groupId": null,
-	"exceptionDocURL": null
+	"exceptionDocURL": null,
+	"userProvidedStyles": []
+}));
+
+stubPreparedMessages.set("console.log(%cfoobar)", new ConsoleMessage({
+	"id": "1",
+	"allowRepeating": true,
+	"source": "console-api",
+	"type": "log",
+	"level": "log",
+	"messageText": null,
+	"parameters": [
+		"foo",
+		"bar"
+	],
+	"repeat": 1,
+	"repeatId": "{\"id\":null,\"allowRepeating\":true,\"source\":\"console-api\",\"type\":\"log\",\"level\":\"log\",\"messageText\":null,\"parameters\":[\"foo\",\"bar\"],\"repeatId\":null,\"stacktrace\":null,\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(%25cfoobar)\",\"line\":2,\"column\":1},\"groupId\":null,\"exceptionDocURL\":null,\"userProvidedStyles\":[\"color:blue;font-size:1.3em;background:url('http://example.com/test');position:absolute;top:10px\",\"color:red;background:url('http://example.com/test')\"]}",
+	"stacktrace": null,
+	"frame": {
+		"source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(%25cfoobar)",
+		"line": 2,
+		"column": 1
+	},
+	"groupId": null,
+	"exceptionDocURL": null,
+	"userProvidedStyles": [
+		"color:blue;font-size:1.3em;background:url('http://example.com/test');position:absolute;top:10px",
+		"color:red;background:url('http://example.com/test')"
+	]
 }));
 
 
@@ -613,7 +663,7 @@ stubPackets.set("console.log('foobar', 'test')", {
 		},
 		"private": false,
 		"styles": [],
-		"timeStamp": 1476572494539,
+		"timeStamp": 1477086261590,
 		"timer": null,
 		"workerType": "none",
 		"category": "webdev"
@@ -647,7 +697,7 @@ stubPackets.set("console.log(undefined)", {
 		},
 		"private": false,
 		"styles": [],
-		"timeStamp": 1476572496789,
+		"timeStamp": 1477086264886,
 		"timer": null,
 		"workerType": "none",
 		"category": "webdev"
@@ -679,7 +729,7 @@ stubPackets.set("console.warn('danger, will robinson!')", {
 		},
 		"private": false,
 		"styles": [],
-		"timeStamp": 1476572499458,
+		"timeStamp": 1477086267284,
 		"timer": null,
 		"workerType": "none",
 		"category": "webdev"
@@ -713,7 +763,7 @@ stubPackets.set("console.log(NaN)", {
 		},
 		"private": false,
 		"styles": [],
-		"timeStamp": 1476572501339,
+		"timeStamp": 1477086269484,
 		"timer": null,
 		"workerType": "none",
 		"category": "webdev"
@@ -747,7 +797,7 @@ stubPackets.set("console.log(null)", {
 		},
 		"private": false,
 		"styles": [],
-		"timeStamp": 1476572504208,
+		"timeStamp": 1477086271418,
 		"timer": null,
 		"workerType": "none",
 		"category": "webdev"
@@ -779,7 +829,7 @@ stubPackets.set("console.log('鼬')", {
 		},
 		"private": false,
 		"styles": [],
-		"timeStamp": 1476572507048,
+		"timeStamp": 1477086273549,
 		"timer": null,
 		"workerType": "none",
 		"category": "webdev"
@@ -808,7 +858,7 @@ stubPackets.set("console.clear()", {
 			"userContextId": 0
 		},
 		"private": false,
-		"timeStamp": 1476572509784,
+		"timeStamp": 1477086275587,
 		"timer": null,
 		"workerType": "none",
 		"styles": [],
@@ -843,7 +893,7 @@ stubPackets.set("console.count('bar')", {
 			"userContextId": 0
 		},
 		"private": false,
-		"timeStamp": 1476572512209,
+		"timeStamp": 1477086277812,
 		"timer": null,
 		"workerType": "none",
 		"styles": [],
@@ -897,7 +947,7 @@ stubPackets.set("console.assert(false, {message: 'foobar'})", {
 		},
 		"private": false,
 		"styles": [],
-		"timeStamp": 1476572514941,
+		"timeStamp": 1477086280131,
 		"timer": null,
 		"stacktrace": [
 			{
@@ -938,7 +988,7 @@ stubPackets.set("console.log('hello \nfrom \rthe \"string world!')", {
 		},
 		"private": false,
 		"styles": [],
-		"timeStamp": 1476572517131,
+		"timeStamp": 1477086281936,
 		"timer": null,
 		"workerType": "none",
 		"category": "webdev"
@@ -970,7 +1020,7 @@ stubPackets.set("console.log('úṇĩçödê țĕșť')", {
 		},
 		"private": false,
 		"styles": [],
-		"timeStamp": 1476572519136,
+		"timeStamp": 1477086283713,
 		"timer": null,
 		"workerType": "none",
 		"category": "webdev"
@@ -989,7 +1039,7 @@ stubPackets.set("console.dirxml(window)", {
 				"extensible": true,
 				"frozen": false,
 				"sealed": false,
-				"ownPropertyLength": 806,
+				"ownPropertyLength": 804,
 				"preview": {
 					"kind": "ObjectWithURL",
 					"url": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-console-api.html"
@@ -1013,7 +1063,7 @@ stubPackets.set("console.dirxml(window)", {
 			"userContextId": 0
 		},
 		"private": false,
-		"timeStamp": 1476572521656,
+		"timeStamp": 1477086285483,
 		"timer": null,
 		"workerType": "none",
 		"styles": [],
@@ -1043,7 +1093,7 @@ stubPackets.set("console.trace()", {
 			"userContextId": 0
 		},
 		"private": false,
-		"timeStamp": 1476572524381,
+		"timeStamp": 1477086287286,
 		"timer": null,
 		"stacktrace": [
 			{
@@ -1098,10 +1148,10 @@ stubPackets.set("console.time('bar')", {
 			"userContextId": 0
 		},
 		"private": false,
-		"timeStamp": 1476572526421,
+		"timeStamp": 1477086289137,
 		"timer": {
 			"name": "bar",
-			"started": 1214.4750000000001
+			"started": 1166.305
 		},
 		"workerType": "none",
 		"styles": [],
@@ -1133,9 +1183,9 @@ stubPackets.set("console.timeEnd('bar')", {
 			"userContextId": 0
 		},
 		"private": false,
-		"timeStamp": 1476572526423,
+		"timeStamp": 1477086289138,
 		"timer": {
-			"duration": 1.8049999999998363,
+			"duration": 1.3550000000000182,
 			"name": "bar"
 		},
 		"workerType": "none",
@@ -1168,7 +1218,7 @@ stubPackets.set("console.table('bar')", {
 			"userContextId": 0
 		},
 		"private": false,
-		"timeStamp": 1476572528374,
+		"timeStamp": 1477086290984,
 		"timer": null,
 		"workerType": "none",
 		"styles": [],
@@ -1217,7 +1267,7 @@ stubPackets.set("console.table(['a', 'b', 'c'])", {
 			"userContextId": 0
 		},
 		"private": false,
-		"timeStamp": 1476572530339,
+		"timeStamp": 1477086292762,
 		"timer": null,
 		"workerType": "none",
 		"styles": [],
@@ -1249,7 +1299,7 @@ stubPackets.set("console.group('bar')", {
 			"userContextId": 0
 		},
 		"private": false,
-		"timeStamp": 1476572532126,
+		"timeStamp": 1477086294628,
 		"timer": null,
 		"workerType": "none",
 		"styles": [],
@@ -1281,7 +1331,7 @@ stubPackets.set("console.groupEnd('bar')", {
 			"userContextId": 0
 		},
 		"private": false,
-		"timeStamp": 1476572532127,
+		"timeStamp": 1477086294630,
 		"timer": null,
 		"workerType": "none",
 		"styles": [],
@@ -1313,7 +1363,7 @@ stubPackets.set("console.groupCollapsed('foo')", {
 			"userContextId": 0
 		},
 		"private": false,
-		"timeStamp": 1476572533893,
+		"timeStamp": 1477086296567,
 		"timer": null,
 		"workerType": "none",
 		"styles": [],
@@ -1345,7 +1395,7 @@ stubPackets.set("console.groupEnd('foo')", {
 			"userContextId": 0
 		},
 		"private": false,
-		"timeStamp": 1476572533897,
+		"timeStamp": 1477086296570,
 		"timer": null,
 		"workerType": "none",
 		"styles": [],
@@ -1375,7 +1425,7 @@ stubPackets.set("console.group()", {
 			"userContextId": 0
 		},
 		"private": false,
-		"timeStamp": 1476572535552,
+		"timeStamp": 1477086298462,
 		"timer": null,
 		"workerType": "none",
 		"styles": [],
@@ -1405,7 +1455,7 @@ stubPackets.set("console.groupEnd()", {
 			"userContextId": 0
 		},
 		"private": false,
-		"timeStamp": 1476572535554,
+		"timeStamp": 1477086298464,
 		"timer": null,
 		"workerType": "none",
 		"styles": [],
@@ -1413,6 +1463,42 @@ stubPackets.set("console.groupEnd()", {
 	}
 });
 
+stubPackets.set("console.log(%cfoobar)", {
+	"from": "server1.conn19.child1/consoleActor2",
+	"type": "consoleAPICall",
+	"message": {
+		"arguments": [
+			"foo",
+			"bar"
+		],
+		"columnNumber": 1,
+		"counter": null,
+		"filename": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-tempfile.js?key=console.log(%25cfoobar)",
+		"functionName": "triggerPacket",
+		"groupName": "",
+		"level": "log",
+		"lineNumber": 2,
+		"originAttributes": {
+			"addonId": "",
+			"appId": 0,
+			"firstPartyDomain": "",
+			"inIsolatedMozBrowser": false,
+			"privateBrowsingId": 0,
+			"signedPkg": "",
+			"userContextId": 0
+		},
+		"private": false,
+		"styles": [
+			"color:blue;font-size:1.3em;background:url('http://example.com/test');position:absolute;top:10px",
+			"color:red;background:url('http://example.com/test')"
+		],
+		"timeStamp": 1477086300265,
+		"timer": null,
+		"workerType": "none",
+		"category": "webdev"
+	}
+});
+
 
 module.exports = {
   stubPreparedMessages,

devtools/client/webconsole/new-console-output/types.js

@@ -37,6 +37,7 @@ exports.ConsoleMessage = Immutable.Record({
   frame: null,
   groupId: null,
   exceptionDocURL: null,
+  userProvidedStyles: null,
 });
 
 exports.NetworkEventMessage = Immutable.Record({

devtools/client/webconsole/new-console-output/utils/messages.js

@@ -127,7 +127,8 @@ function transformPacket(packet) {
         parameters,
         messageText,
         stacktrace: message.stacktrace ? message.stacktrace : null,
-        frame
+        frame,
+        userProvidedStyles: message.styles,
       });
     }
 

devtools/client/webconsole/webconsole.js

@@ -577,7 +577,7 @@ WebConsoleFrame.prototype = {
       // in JSTerm is still necessary.
 
       this.newConsoleOutput = new this.window.NewConsoleOutput(
-        this.experimentalOutputNode, this.jsterm, toolbox, this.owner);
+        this.experimentalOutputNode, this.jsterm, toolbox, this.owner, this.document);
 
       let filterToolbar = this.document.querySelector(".hud-console-filter-toolbar");
       filterToolbar.hidden = true;