DevTools: [wip] move Elements panel off WebInspector.domModel and single tree outline.

Source/devtools/front_end/CSSStyleModel.js

 /*
  * Copyright (C) 2010 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 18 matching lines @@
  */
 
 /**
  * @constructor
  * @extends {WebInspector.Object}
  * @param {!WebInspector.Target} target
  */
 WebInspector.CSSStyleModel = function(target)
 {
     this._domModel = target.domModel;
+    this._agent = target.cssAgent();
     this._pendingCommandsMajorState = [];
     this._styleLoader = new WebInspector.CSSStyleModel.ComputedStyleLoader(this);
     this._domModel.addEventListener(WebInspector.DOMModel.Events.UndoRedoRequested, this._undoRedoRequested, this);
     this._domModel.addEventListener(WebInspector.DOMModel.Events.UndoRedoCompleted, this._undoRedoCompleted, this);
     WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.MainFrameCreatedOrNavigated, this._mainFrameCreatedOrNavigated, this);
     InspectorBackend.registerCSSDispatcher(new WebInspector.CSSDispatcher(this));
-    CSSAgent.enable(this._wasEnabled.bind(this));
+    this._agent.enable(this._wasEnabled.bind(this));
     this._resetStyleSheets();
 }
 
+WebInspector.CSSStyleModel.PseudoStatePropertyName = "pseudoState";
+
 /**
  * @param {!WebInspector.CSSStyleModel} cssModel
  * @param {!Array.<!CSSAgent.RuleMatch>|undefined} matchArray
  */
 WebInspector.CSSStyleModel.parseRuleMatchArrayPayload = function(cssModel, matchArray)
 {
     if (!matchArray)
         return [];
 
     var result = [];
@@ skipping 72 matching lines @@
                     if (entryPayload.matchedCSSRules)
                         entry.matchedCSSRules = WebInspector.CSSStyleModel.parseRuleMatchArrayPayload(this, entryPayload.matchedCSSRules);
                     result.inherited.push(entry);
                 }
             }
 
             if (userCallback)
                 userCallback(result);
         }
 
-        CSSAgent.getMatchedStylesForNode(nodeId, needPseudo, needInherited, callback.bind(this, userCallback));
+        this._agent.getMatchedStylesForNode(nodeId, needPseudo, needInherited, callback.bind(this, userCallback));
     },
 
     /**
      * @param {!DOMAgent.NodeId} nodeId
      * @param {function(?WebInspector.CSSStyleDeclaration)} userCallback
      */
     getComputedStyleAsync: function(nodeId, userCallback)
     {
         this._styleLoader.getComputedStyle(nodeId, userCallback);
     },
 
     /**
      * @param {number} nodeId
      * @param {function(?string, ?Array.<!CSSAgent.PlatformFontUsage>)} callback
      */
     getPlatformFontsForNode: function(nodeId, callback)
     {
         function platformFontsCallback(error, cssFamilyName, fonts)
         {
             if (error)
                 callback(null, null);
             else
                 callback(cssFamilyName, fonts);
         }
-        CSSAgent.getPlatformFontsForNode(nodeId, platformFontsCallback);
+        this._agent.getPlatformFontsForNode(nodeId, platformFontsCallback);
     },
 
     /**
      * @return {!Array.<!WebInspector.CSSStyleSheetHeader>}
      */
     allStyleSheets: function()
     {
         var values = Object.values(this._styleSheetIdToHeader);
         /**
          * @param {!WebInspector.CSSStyleSheetHeader} a
@@ skipping 27 matching lines @@
          * @this {WebInspector.CSSStyleModel}
          */
         function callback(userCallback, error, inlinePayload, attributesStylePayload)
         {
             if (error || !inlinePayload)
                 userCallback(null, null);
             else
                 userCallback(WebInspector.CSSStyleDeclaration.parsePayload(this, inlinePayload), attributesStylePayload ? WebInspector.CSSStyleDeclaration.parsePayload(this, attributesStylePayload) : null);
         }
 
-        CSSAgent.getInlineStylesForNode(nodeId, callback.bind(this, userCallback));
+        this._agent.getInlineStylesForNode(nodeId, callback.bind(this, userCallback));
     },
 
     /**
-     * @param {!DOMAgent.NodeId} nodeId
-     * @param {?Array.<string>|undefined} forcedPseudoClasses
-     * @param {function()=} userCallback
+     * @param {!WebInspector.DOMNode} node
+     * @param {string} pseudoClass
+     * @param {boolean} enable
+     * @return {boolean}
      */
-    forcePseudoState: function(nodeId, forcedPseudoClasses, userCallback)
+    forcePseudoState: function(node, pseudoClass, enable)
     {
-        CSSAgent.forcePseudoState(nodeId, forcedPseudoClasses || [], userCallback);
+        var pseudoClasses = node.getUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName) || [];
+        if (enable) {
+            if (pseudoClasses.indexOf(pseudoClass) >= 0)
+                return false;
+            pseudoClasses.push(pseudoClass);
+            node.setUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName, pseudoClasses);
+        } else {
+            if (pseudoClasses.indexOf(pseudoClass) < 0)
+                return false;
+            pseudoClasses.remove(pseudoClass);
+            if (!pseudoClasses.length)
+                node.removeUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName);
+        }
+
+        this._agent.forcePseudoState(node.id, pseudoClasses);
+        return true;
     },
 
     /**
      * @param {!CSSAgent.CSSRuleId} ruleId
      * @param {!DOMAgent.NodeId} nodeId
      * @param {string} newSelector
      * @param {function(!WebInspector.CSSRule)} successCallback
      * @param {function()} failureCallback
      */
     setRuleSelector: function(ruleId, nodeId, newSelector, successCallback, failureCallback)
@@ skipping 13 matching lines @@
             if (error) {
                 failureCallback();
                 return;
             }
             this._domModel.markUndoableState();
             this._computeMatchingSelectors(rulePayload, nodeId, successCallback, failureCallback);
         }
 
 
         this._pendingCommandsMajorState.push(true);
-        CSSAgent.setRuleSelector(ruleId, newSelector, callback.bind(this, nodeId, successCallback, failureCallback, newSelector));
+        this._agent.setRuleSelector(ruleId, newSelector, callback.bind(this, nodeId, successCallback, failureCallback, newSelector));
     },
 
     /**
      * @param {!CSSAgent.CSSRule} rulePayload
      * @param {!DOMAgent.NodeId} nodeId
      * @param {function(!WebInspector.CSSRule)} successCallback
      * @param {function()} failureCallback
      */
     _computeMatchingSelectors: function(rulePayload, nodeId, successCallback, failureCallback)
     {
@@ skipping 33 matching lines @@
     /**
      * @param {!CSSAgent.StyleSheetId} styleSheetId
      * @param {!WebInspector.DOMNode} node
      * @param {string} selector
      * @param {function(!WebInspector.CSSRule)} successCallback
      * @param {function()} failureCallback
      */
     addRule: function(styleSheetId, node, selector, successCallback, failureCallback)
     {
         this._pendingCommandsMajorState.push(true);
-        CSSAgent.addRule(styleSheetId, selector, callback.bind(this));
+        this._agent.addRule(styleSheetId, selector, callback.bind(this));
 
         /**
          * @param {?Protocol.Error} error
          * @param {!CSSAgent.CSSRule} rulePayload
          * @this {WebInspector.CSSStyleModel}
          */
         function callback(error, rulePayload)
         {
             this._pendingCommandsMajorState.pop();
             if (error) {
@@ skipping 29 matching lines @@
         function innerCallback(error, styleSheetId)
         {
             if (error) {
                 console.error(error);
                 callback(null);
             }
 
             callback(this._styleSheetIdToHeader[styleSheetId]);
         }
 
-        CSSAgent.createStyleSheet(frameId, innerCallback.bind(this));
+        this._agent.createStyleSheet(frameId, innerCallback.bind(this));
     },
 
     mediaQueryResultChanged: function()
     {
         this.dispatchEventToListeners(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged);
     },
 
     /**
      * @param {!CSSAgent.StyleSheetId} id
      * @return {!WebInspector.CSSStyleSheetHeader}
@@ skipping 38 matching lines @@
 
         this.dispatchEventToListeners(WebInspector.CSSStyleModel.Events.StyleSheetChanged, { styleSheetId: styleSheetId, majorChange: majorChange });
     },
 
     /**
      * @param {!CSSAgent.CSSStyleSheetHeader} header
      */
     _styleSheetAdded: function(header)
     {
         console.assert(!this._styleSheetIdToHeader[header.styleSheetId]);
-        var styleSheetHeader = new WebInspector.CSSStyleSheetHeader(header);
+        var styleSheetHeader = new WebInspector.CSSStyleSheetHeader(this, header);
         this._styleSheetIdToHeader[header.styleSheetId] = styleSheetHeader;
         var url = styleSheetHeader.resourceURL();
         if (!this._styleSheetIdsForURL[url])
             this._styleSheetIdsForURL[url] = {};
         var frameIdToStyleSheetIds = this._styleSheetIdsForURL[url];
         var styleSheetIds = frameIdToStyleSheetIds[styleSheetHeader.frameId];
         if (!styleSheetIds) {
             styleSheetIds = [];
             frameIdToStyleSheetIds[styleSheetHeader.frameId] = styleSheetIds;
         }
@@ skipping 459 matching lines @@
                 console.error(error);
                 userCallback(null);
             } else
                 userCallback(WebInspector.CSSStyleDeclaration.parsePayload(this._cssModel, payload));
         }
 
         if (!this.id)
             throw "No style id";
 
         this._cssModel._pendingCommandsMajorState.push(true);
-        CSSAgent.setPropertyText(this.id, index, name + ": " + value + ";", false, callback.bind(this));
+        this._cssModel._agent.setPropertyText(this.id, index, name + ": " + value + ";", false, callback.bind(this));
     },
 
     /**
      * @param {string} name
      * @param {string} value
      * @param {function(?WebInspector.CSSStyleDeclaration)=} userCallback
      */
     appendProperty: function(name, value, userCallback)
     {
         this.insertPropertyAt(this.allProperties.length, name, value, userCallback);
-    },
+    }
 }
 
 /**
  * @constructor
  * @param {!WebInspector.CSSStyleModel} cssModel
  * @param {!CSSAgent.CSSRule} payload
  * @param {!Array.<number>=} matchingSelectors
  */
 WebInspector.CSSRule = function(cssModel, payload, matchingSelectors)
 {
@@ skipping 228 matching lines @@
             }
         }
 
         if (!this.ownerStyle)
             throw "No ownerStyle for property";
 
         if (!this.ownerStyle.id)
             throw "No owner style id";
 
         // An index past all the properties adds a new property to the style.
-        this.ownerStyle._cssModel._pendingCommandsMajorState.push(majorChange);
-        CSSAgent.setPropertyText(this.ownerStyle.id, this.index, propertyText, overwrite, callback.bind(this));
+        var cssModel = this.ownerStyle._cssModel;
+        cssModel._pendingCommandsMajorState.push(majorChange);
+        cssModel._agent.setPropertyText(this.ownerStyle.id, this.index, propertyText, overwrite, callback.bind(this));
     },
 
     /**
      * @param {string} newValue
      * @param {boolean} majorChange
      * @param {boolean} overwrite
      * @param {function(?WebInspector.CSSStyleDeclaration)=} userCallback
      */
     setValue: function(newValue, majorChange, overwrite, userCallback)
     {
@@ skipping 119 matching lines @@
      */
     header: function()
     {
         return this.parentStyleSheetId ? this._cssModel.styleSheetHeaderForId(this.parentStyleSheetId) : null;
     }
 }
 
 /**
  * @constructor
  * @implements {WebInspector.ContentProvider}
+ * @param {!WebInspector.CSSStyleModel} cssModel
  * @param {!CSSAgent.CSSStyleSheetHeader} payload
  */
-WebInspector.CSSStyleSheetHeader = function(payload)
+WebInspector.CSSStyleSheetHeader = function(cssModel, payload)
 {
+    this._cssModel = cssModel;
     this.id = payload.styleSheetId;
     this.frameId = payload.frameId;
     this.sourceURL = payload.sourceURL;
     this.hasSourceURL = !!payload.hasSourceURL;
     this.sourceMapURL = payload.sourceMapURL;
     this.origin = payload.origin;
     this.title = payload.title;
     this.disabled = payload.disabled;
     this.isInline = payload.isInline;
     this.startLine = payload.startLine;
@@ skipping 121 matching lines @@
         var sourceURLRegex = /\n[\040\t]*\/\*[#@][\040\t]sourceURL=[\040\t]*([^\s]*)[\040\t]*\*\/[\040\t]*$/mg;
         return text.replace(sourceURLRegex, "");
     },
 
     /**
      * @override
      * @param {function(?string)} callback
      */
     requestContent: function(callback)
     {
-        CSSAgent.getStyleSheetText(this.id, textCallback.bind(this));
+        this._cssModel._agent.getStyleSheetText(this.id, textCallback.bind(this));
 
         /**
          * @this {WebInspector.CSSStyleSheetHeader}
          */
         function textCallback(error, text)
         {
             if (error) {
                 WebInspector.console.log("Failed to get text for stylesheet " + this.id + ": " + error);
                 text = "";
                 // Fall through.
@@ skipping 19 matching lines @@
 
     /**
      * @param {string} newText
      * @param {function(?Protocol.Error)} callback
      */
     setContent: function(newText, callback)
     {
         newText = this._trimSourceURL(newText);
         if (this.hasSourceURL)
             newText += "\n/*# sourceURL=" + this.sourceURL + " */";
-        CSSAgent.setStyleSheetText(this.id, newText, callback);
+        this._cssModel._agent.setStyleSheetText(this.id, newText, callback);
     },
 
     /**
      * @return {boolean}
      */
     isViaInspector: function()
     {
         return this.origin === "inspector";
     },
 
@@ skipping 58 matching lines @@
      */
     getComputedStyle: function(nodeId, userCallback)
     {
         if (this._nodeIdToCallbackData[nodeId]) {
             this._nodeIdToCallbackData[nodeId].push(userCallback);
             return;
         }
 
         this._nodeIdToCallbackData[nodeId] = [userCallback];
 
-        CSSAgent.getComputedStyleForNode(nodeId, resultCallback.bind(this, nodeId));
+        this._cssModel._agent.getComputedStyleForNode(nodeId, resultCallback.bind(this, nodeId));
 
         /**
          * @param {!DOMAgent.NodeId} nodeId
          * @param {?Protocol.Error} error
          * @param {!Array.<!CSSAgent.CSSComputedStyleProperty>} computedPayload
          * @this {WebInspector.CSSStyleModel.ComputedStyleLoader}
          */
         function resultCallback(nodeId, error, computedPayload)
         {
             var computedStyle = (error || !computedPayload) ? null : WebInspector.CSSStyleDeclaration.parseComputedStylePayload(this._cssModel, computedPayload);
             var callbacks = this._nodeIdToCallbackData[nodeId];
 
             // The loader has been reset.
             if (!callbacks)
                 return;
 
             delete this._nodeIdToCallbackData[nodeId];
             for (var i = 0; i < callbacks.length; ++i)
                 callbacks[i](computedStyle);
         }
     }
 }
 
 /**
  * @type {!WebInspector.CSSStyleModel}
  */
 WebInspector.cssModel;