DevTools: Decouple CSS model from UI entities

Source/devtools/front_end/sdk/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 577 matching lines @@
 
     _resetStyleSheets: function()
     {
         var headers = this._styleSheetIdToHeader.values();
         this._styleSheetIdsForURL.clear();
         this._styleSheetIdToHeader.clear();
         for (var i = 0; i < headers.length; ++i)
             this.dispatchEventToListeners(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, headers[i]);
     },
 
-    updateLocations: function()
-    {
-        var headers = this._styleSheetIdToHeader.values();
-        for (var i = 0; i < headers.length; ++i)
-            headers[i].updateLocations();
-    },
-
-    /**
-     * @param {?CSSAgent.StyleSheetId} styleSheetId
-     * @param {!WebInspector.CSSLocation} rawLocation
-     * @param {function(!WebInspector.UILocation):(boolean|undefined)} updateDelegate
-     * @return {?WebInspector.LiveLocation}
-     */
-    createLiveLocation: function(styleSheetId, rawLocation, updateDelegate)
-    {
-        if (!rawLocation)
-            return null;
-        var header = styleSheetId ? this.styleSheetHeaderForId(styleSheetId) : null;
-        return new WebInspector.CSSStyleModel.LiveLocation(this, header, rawLocation, updateDelegate);
-    },
-
-    /**
-     * @param {!WebInspector.CSSLocation} rawLocation
-     * @return {?WebInspector.UILocation}
-     */
-    rawLocationToUILocation: function(rawLocation)
-    {
-        var frameIdToSheetIds = this._styleSheetIdsForURL.get(rawLocation.url);
-        if (!frameIdToSheetIds)
-            return null;
-        var styleSheetIds = [];
-        for (var frameId in frameIdToSheetIds)
-            styleSheetIds = styleSheetIds.concat(frameIdToSheetIds[frameId]);
-        var uiLocation;
-        for (var i = 0; !uiLocation && i < styleSheetIds.length; ++i) {
-            var header = this.styleSheetHeaderForId(styleSheetIds[i]);
-            console.assert(header);
-            uiLocation = header.rawLocationToUILocation(rawLocation.lineNumber, rawLocation.columnNumber);
-        }
-        return uiLocation || null;
-    },
-
     __proto__: WebInspector.SDKModel.prototype
 }
 
 /**
  * @constructor
- * @extends {WebInspector.LiveLocation}
- * @param {!WebInspector.CSSStyleModel} model
- * @param {?WebInspector.CSSStyleSheetHeader} header
- * @param {!WebInspector.CSSLocation} rawLocation
- * @param {function(!WebInspector.UILocation):(boolean|undefined)} updateDelegate
- */
-WebInspector.CSSStyleModel.LiveLocation = function(model, header, rawLocation, updateDelegate)
-{
-    WebInspector.LiveLocation.call(this, rawLocation, updateDelegate);
-    this._model = model;
-    if (!header)
-        this._clearStyleSheet();
-    else
-        this._setStyleSheet(header);
-}
-
-WebInspector.CSSStyleModel.LiveLocation.prototype = {
-    /**
-     * @param {!WebInspector.Event} event
-     */
-    _styleSheetAdded: function(event)
-    {
-        console.assert(!this._header);
-        var header = /** @type {!WebInspector.CSSStyleSheetHeader} */ (event.data);
-        if (header.sourceURL && header.sourceURL === this.rawLocation().url)
-            this._setStyleSheet(header);
-    },
-
-    /**
-     * @param {!WebInspector.Event} event
-     */
-    _styleSheetRemoved: function(event)
-    {
-        console.assert(this._header);
-        var header = /** @type {!WebInspector.CSSStyleSheetHeader} */ (event.data);
-        if (this._header !== header)
-            return;
-        this._header._removeLocation(this);
-        this._clearStyleSheet();
-    },
-
-    /**
-     * @param {!WebInspector.CSSStyleSheetHeader} header
-     */
-    _setStyleSheet: function(header)
-    {
-        this._header = header;
-        this._header.addLiveLocation(this);
-        this._model.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded, this._styleSheetAdded, this);
-        this._model.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, this._styleSheetRemoved, this);
-    },
-
-    _clearStyleSheet: function()
-    {
-        delete this._header;
-        this._model.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, this._styleSheetRemoved, this);
-        this._model.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded, this._styleSheetAdded, this);
-    },
-
-    /**
-     * @return {?WebInspector.UILocation}
-     */
-    uiLocation: function()
-    {
-        var cssLocation = /** @type WebInspector.CSSLocation */ (this.rawLocation());
-        if (this._header)
-            return this._header.rawLocationToUILocation(cssLocation.lineNumber, cssLocation.columnNumber);
-        var uiSourceCode = WebInspector.workspace.uiSourceCodeForURL(cssLocation.url);
-        if (!uiSourceCode)
-            return null;
-        return uiSourceCode.uiLocation(cssLocation.lineNumber, cssLocation.columnNumber);
-    },
-
-    dispose: function()
-    {
-        WebInspector.LiveLocation.prototype.dispose.call(this);
-        if (this._header)
-            this._header._removeLocation(this);
-        this._model.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded, this._styleSheetAdded, this);
-        this._model.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, this._styleSheetRemoved, this);
-    },
-
-    __proto__: WebInspector.LiveLocation.prototype
-}
-
-/**
- * @constructor
  * @implements {WebInspector.RawLocation}
  * @extends {WebInspector.SDKObject}
  * @param {!WebInspector.Target} target
  * @param {?CSSAgent.StyleSheetId} styleSheetId
  * @param {string} url
  * @param {number} lineNumber
  * @param {number=} columnNumber
  */
 WebInspector.CSSLocation = function(target, styleSheetId, url, lineNumber, columnNumber)
 {
     WebInspector.SDKObject.call(this, target);
-    this._cssModel = target.cssModel;
-    this._styleSheetId = styleSheetId;
+    this.styleSheetId = styleSheetId;
     this.url = url;
     this.lineNumber = lineNumber;
     this.columnNumber = columnNumber || 0;
 }
 
 WebInspector.CSSLocation.prototype = {
-    /**
-     * @param {function(!WebInspector.UILocation):(boolean|undefined)} updateDelegate
-     * @return {!WebInspector.LiveLocation}
-     */
-    createLiveLocation: function(updateDelegate)
-    {
-        var header = this._styleSheetId ? this._cssModel.styleSheetHeaderForId(this._styleSheetId) : null;
-        return new WebInspector.CSSStyleModel.LiveLocation(this._cssModel, header, this, updateDelegate);
-    },
-
     __proto__: WebInspector.SDKObject.prototype
 }
 
 /**
  * @constructor
  * @param {!WebInspector.CSSStyleModel} cssModel
  * @param {!CSSAgent.CSSStyle} payload
  */
 WebInspector.CSSStyleDeclaration = function(cssModel, payload)
 {
@@ skipping 285 matching lines @@
     }
     if (this.styleSheetId) {
         var styleSheetHeader = cssModel.styleSheetHeaderForId(this.styleSheetId);
         this.sourceURL = styleSheetHeader.sourceURL;
     }
     this.origin = payload.origin;
     this.style = WebInspector.CSSStyleDeclaration.parsePayload(this._cssModel, payload.style);
     this.style.parentRule = this;
     if (payload.media)
         this.media = WebInspector.CSSMedia.parseMediaArrayPayload(cssModel, payload.media);
-    this._setRawLocationAndFrameId();
+    this._setFrameId();
 }
 
 /**
  * @param {!WebInspector.CSSStyleModel} cssModel
  * @param {!CSSAgent.CSSRule} payload
  * @param {!Array.<number>=} matchingIndices
  * @return {!WebInspector.CSSRule}
  */
 WebInspector.CSSRule.parsePayload = function(cssModel, payload, matchingIndices)
 {
@@ skipping 17 matching lines @@
                     selector.range = selector.range.rebaseAfterTextEdit(oldRange, newRange);
             }
         }
         if (this.media) {
             for (var i = 0; i < this.media.length; ++i)
                 this.media[i].sourceStyleSheetEdited(styleSheetId, oldRange, newRange);
         }
         this.style.sourceStyleSheetEdited(styleSheetId, oldRange, newRange);
     },
 
-    _setRawLocationAndFrameId: function()
+    _setFrameId: function()
     {
         if (!this.styleSheetId)
             return;
         var styleSheetHeader = this._cssModel.styleSheetHeaderForId(this.styleSheetId);
         this.frameId = styleSheetHeader.frameId;
-        var url = styleSheetHeader.resourceURL();
-        if (!url)
-            return;
-        this.rawLocation = new WebInspector.CSSLocation(this._cssModel.target(), this.styleSheetId, url, this.lineNumberInSource(0), this.columnNumberInSource(0));
     },
 
     /**
      * @return {string}
      */
     resourceURL: function()
     {
         if (!this.styleSheetId)
             return "";
         var styleSheetHeader = this._cssModel.styleSheetHeaderForId(this.styleSheetId);
@@ skipping 20 matching lines @@
     columnNumberInSource: function(selectorIndex)
     {
         var selector = this.selectors[selectorIndex];
         if (!selector || !selector.range || !this.styleSheetId)
             return undefined;
         var styleSheetHeader = this._cssModel.styleSheetHeaderForId(this.styleSheetId);
         console.assert(styleSheetHeader);
         return styleSheetHeader.columnNumberInSource(selector.range.startLine, selector.range.startColumn);
     },
 
+    /**
+     * @param {number} index
+     * @return {?WebInspector.CSSLocation}
+     */
+    rawSelectorLocation: function(index)
+    {
+        var lineNumber = this.lineNumberInSource(index);
+        var columnNumber = this.columnNumberInSource(index);
+        return new WebInspector.CSSLocation(this._cssModel.target(), this.styleSheetId || null, this.resourceURL(), lineNumber, columnNumber);
+    },
+
     get isUserAgent()
     {
         return this.origin === "user-agent";
     },
 
     get isUser()
     {
         return this.origin === "user";
     },
 
@@ skipping 350 matching lines @@
     header: function()
     {
         return this.parentStyleSheetId ? this._cssModel.styleSheetHeaderForId(this.parentStyleSheetId) : null;
     },
 
     /**
      * @return {?WebInspector.CSSLocation}
      */
     rawLocation: function()
     {
-        if (!this.header() || typeof this.lineNumberInSource() === "undefined")
+        if (!this.header() || this.lineNumberInSource() === undefined)
             return null;
         var lineNumber = Number(this.lineNumberInSource());
         return new WebInspector.CSSLocation(this._cssModel.target(), this.header().id, this.sourceURL, lineNumber, this.columnNumberInSource());
-    },
-
-    /**
-     * @return {?WebInspector.UILocation}
-     */
-    uiLocation: function()
-    {
-        var styleSheetHeader = this.header();
-        var lineNumber = this.lineNumberInSource();
-        var columnNumber = this.columnNumberInSource();
-        if (typeof lineNumber !== "number")
-            return null;
-        if (styleSheetHeader)
-            return styleSheetHeader.rawLocationToUILocation(lineNumber, columnNumber);
-        var uiSourceCode = WebInspector.workspace.uiSourceCodeForURL(this.sourceURL);
-        if (!uiSourceCode)
-            return null;
-        return uiSourceCode.uiLocation(lineNumber, columnNumber);
     }
 }
 
 /**
  * @constructor
  * @implements {WebInspector.ContentProvider}
  * @param {!WebInspector.CSSStyleModel} cssModel
  * @param {!CSSAgent.CSSStyleSheetHeader} 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;
     this.startColumn = payload.startColumn;
-    /** @type {!Set.<!WebInspector.CSSStyleModel.LiveLocation>} */
-    this._locations = new Set();
-    /** @type {!Array.<!WebInspector.SourceMapping>} */
-    this._sourceMappings = [];
 }
 
 WebInspector.CSSStyleSheetHeader.prototype = {
     /**
+     * @return {!WebInspector.Target}
+     */
+    target: function()
+    {
+        return this._cssModel.target();
+    },
+
+    /**
      * @return {string}
      */
     resourceURL: function()
     {
         return this.isViaInspector() ? this._viaInspectorResourceURL() : this.sourceURL;
     },
 
     /**
-     * @param {!WebInspector.CSSStyleModel.LiveLocation} location
-     */
-    addLiveLocation: function(location)
-    {
-        this._locations.add(location);
-        location.update();
-    },
-
-    updateLocations: function()
-    {
-        var items = this._locations.values();
-        for (var i = 0; i < items.length; ++i)
-            items[i].update();
-    },
-
-    /**
-     * @param {!WebInspector.CSSStyleModel.LiveLocation} location
-     */
-    _removeLocation: function(location)
-    {
-        this._locations.remove(location);
-    },
-
-    /**
-     * @param {number} lineNumber
-     * @param {number=} columnNumber
-     * @return {?WebInspector.UILocation}
-     */
-    rawLocationToUILocation: function(lineNumber, columnNumber)
-    {
-        var uiLocation = null;
-        var rawLocation = new WebInspector.CSSLocation(this._cssModel.target(), this.id, this.resourceURL(), lineNumber, columnNumber);
-        for (var i = this._sourceMappings.length - 1; !uiLocation && i >= 0; --i)
-            uiLocation = this._sourceMappings[i].rawLocationToUILocation(rawLocation);
-        return uiLocation;
-    },
-
-    /**
-     * @param {!WebInspector.SourceMapping} sourceMapping
-     */
-    pushSourceMapping: function(sourceMapping)
-    {
-        this._sourceMappings.push(sourceMapping);
-        this.updateLocations();
-    },
-
-    /**
      * @return {string}
      */
     _viaInspectorResourceURL: function()
     {
         var frame = this._cssModel.target().resourceTreeModel.frameForId(this.frameId);
         console.assert(frame);
         var parsedURL = new WebInspector.ParsedURL(frame.url);
         var fakeURL = "inspector://" + parsedURL.host + parsedURL.folderPathComponents;
         if (!fakeURL.endsWith("/"))
             fakeURL += "/";
@@ skipping 96 matching lines @@
             newText += "\n/*# sourceURL=" + this.sourceURL + " */";
         this._cssModel._agent.setStyleSheetText(this.id, newText, callback);
     },
 
     /**
      * @return {boolean}
      */
     isViaInspector: function()
     {
         return this.origin === "inspector";
-    },
-
+    }
 }
 
 /**
  * @constructor
  * @implements {CSSAgent.Dispatcher}
  * @param {!WebInspector.CSSStyleModel} cssModel
  */
 WebInspector.CSSDispatcher = function(cssModel)
 {
     this._cssModel = cssModel;
@@ skipping 76 matching lines @@
             for (var i = 0; i < callbacks.length; ++i)
                 callbacks[i](computedStyle);
         }
     }
 }
 
 /**
  * @type {!WebInspector.CSSStyleModel}
  */
 WebInspector.cssModel;