DevTools: [SSP] Implement adding new rule in user stylesheet

LayoutTests/inspector-protocol/css/css-protocol-test.js

 function initialize_cssTest()
 {
 
 InspectorTest.dumpStyleSheetText = function(styleSheetId, callback)
 {
     InspectorTest.sendCommandOrDie("CSS.getStyleSheetText", { styleSheetId: styleSheetId }, onStyleSheetText);
     function onStyleSheetText(result)
     {
         InspectorTest.log("==== Style sheet text ====");
         InspectorTest.log(result.text);
@@ skipping 21 matching lines @@
             InspectorTest.completeTest();
             return;
         }
         InspectorTest.log("Expected protocol error: " + message.error.message);
         callback();
     }
 }
 
 InspectorTest.setPropertyText = updateStyleSheetRange.bind(null, "CSS.setPropertyText");
 InspectorTest.setRuleSelector = updateStyleSheetRange.bind(null, "CSS.setRuleSelector");
+InspectorTest.addRule = updateStyleSheetRange.bind(null, "CSS.addRule");
 
 InspectorTest.requestMainFrameId = function(callback)
 {
     InspectorTest.sendCommandOrDie("Page.enable", {}, pageEnabled);
 
     function pageEnabled()
     {
         InspectorTest.sendCommandOrDie("Page.getResourceTree", {}, resourceTreeLoaded);
     }
 
@@ skipping 26 matching lines @@
 InspectorTest.dumpRuleMatch = function(ruleMatch)
 {
     function log(indent, string)
     {
         var indentString = Array(indent+1).join(" ");
         InspectorTest.log(indentString + string);
     }
 
     var rule = ruleMatch.rule;
     var matchingSelectors = ruleMatch.matchingSelectors;
+    var media = rule.media || [];
+    var mediaLine = "";
+    for (var i = 0; i < media.length; ++i)
+        mediaLine += (i > 0 ? " " : "") + media[i].text;
+    var baseIndent = 0;
+    if (mediaLine.length) {
+        log(baseIndent, "@media " + mediaLine);
+        baseIndent += 4;
+    }
     var selectorLine = "";
     var selectors = rule.selectorList.selectors;
     for (var i = 0; i < selectors.length; ++i) {
         if (i > 0)
             selectorLine += ", ";
         var matching = matchingSelectors.indexOf(i) !== -1;
         if (matching)
             selectorLine += "*";
         selectorLine += selectors[i].value;
         if (matching)
             selectorLine += "*";
     }
     selectorLine += " {";
     selectorLine += "    " + rule.origin;
-    log(0, selectorLine);
+    log(baseIndent, selectorLine);
     var style = rule.style;
     var cssProperties = style.cssProperties;
     for (var i = 0; i < cssProperties.length; ++i) {
         var cssProperty = cssProperties[i];
         var propertyLine = cssProperty.name + ": " + cssProperty.value + ";";
-        log(4, propertyLine);
+        log(baseIndent + 4, propertyLine);
     }
-    log(0, "}");
+    log(baseIndent, "}");
 };
 
 InspectorTest.displayName = function(url)
 {
     return url.substr(url.lastIndexOf("/") + 1);
 };
 
 InspectorTest.loadAndDumpMatchingRulesForNode = function(nodeId, callback)
 {
     InspectorTest.sendCommandOrDie("CSS.getMatchedStylesForNode", { "nodeId": nodeId }, matchingRulesLoaded);
@@ skipping 17 matching lines @@
 {
     InspectorTest.requestNodeId(documentNodeId, selector, nodeIdLoaded);
 
     function nodeIdLoaded(nodeId)
     {
         InspectorTest.loadAndDumpMatchingRulesForNode(nodeId, callback);
     }
 }
 
 }