/** Initialize the agent */
function load() {
Inspector.Page.on("frameNavigated.CSSAgent", _onFrameNavigated);
Inspector.CSS.on("styleSheetAdded.CSSAgent", _styleSheetAdded);
Inspector.CSS.on("styleSheetRemoved.CSSAgent", _styleSheetRemoved);
// getAllStyleSheets was deleted beginning with Chrome 34
if (!_getAllStyleSheetsNotFound) {
Inspector.Page.on("frameStoppedLoading.CSSAgent", _onFrameStoppedLoading);
}
}
CSSDocument.prototype.onHighlight = function onHighlight(event, node) {
// clear an existing highlight
var i;
for (i in this._highlight) {
this._highlight[i].clear();
}
this._highlight = [];
if (!node || !node.location) {
return;
}
// WebInspector Command: CSS.getMatchedStylesForNode
Inspector.CSS.getMatchedStylesForNode(node.nodeId, function onGetMatchesStyles(res) {
// res = {matchedCSSRules, pseudoElements, inherited}
var codeMirror = this.editor._codeMirror,
styleSheetIds = this._getStyleSheetHeader();
var i, rule, from, to;
for (i in res.matchedCSSRules) {
rule = res.matchedCSSRules[i];
if (rule.ruleId && styleSheetIds[rule.ruleId.styleSheetId]) {
from = codeMirror.posFromIndex(rule.selectorRange.start);
to = codeMirror.posFromIndex(rule.style.range.end);
this._highlight.push(codeMirror.markText(from, to, { className: "highlight" }));
}
}
}.bind(this));
};
CSSDocument.prototype.getSourceFromBrowser = function getSourceFromBrowser() {
function getOnlyValue(obj) {
var key;
for (key in obj) {
if (_.has(obj, key)) {
return obj[key];
}
}
return null;
}
var deferred = new $.Deferred(),
styleSheetHeader = this._getStyleSheetHeader(),
styleSheet = getOnlyValue(styleSheetHeader);
if (styleSheet) {
Inspector.CSS.getStyleSheetText(styleSheet.styleSheetId).then(function (res) {
deferred.resolve(res.text);
}, deferred.reject);
} else {
deferred.reject();
}
return deferred.promise();
};
var CSSDocument = function CSSDocument(doc, editor, inspector) {
this.doc = doc;
// only enable highlighting if this document is attached to the main editor
this.editor = editor;
this._highlight = [];
if (this.editor) {
this.onHighlight = this.onHighlight.bind(this);
this.onCursorActivity = this.onCursorActivity.bind(this);
$(HighlightAgent).on("highlight", this.onHighlight);
$(this.editor).on("cursorActivity", this.onCursorActivity);
this.onCursorActivity();
}
// Add a ref to the doc since we're listening for change events
this.doc.addRef();
this.onChange = this.onChange.bind(this);
this.onDeleted = this.onDeleted.bind(this);
$(this.doc).on("change", this.onChange);
$(this.doc).on("deleted", this.onDeleted);
// get the style sheet
this.styleSheet = CSSAgent.styleForURL(this.doc.url);
// WebInspector Command: CSS.getStyleSheet
Inspector.CSS.getStyleSheet(this.styleSheet.styleSheetId, function callback(res) {
// res = {styleSheet}
this.rules = res.styleSheet.rules;
}.bind(this));
// If the CSS document is dirty, push the changes into the browser now
if (doc.isDirty) {
CSSAgent.reloadCSSForDocument(this.doc);
}
};
CSSDocument.prototype.getSourceFromBrowser = function getSourceFromBrowser() {
var deferred = new $.Deferred(),
styleSheetId = this._getStyleSheetHeader().styleSheetId,
inspectorPromise = Inspector.CSS.getStyleSheetText(styleSheetId);
inspectorPromise.then(function (res) {
deferred.resolve(res.text);
}, deferred.reject);
return deferred.promise();
};
var _urlToStyle; // {url -> loaded} style definition
// WebInspector Event: Page.loadEventFired
function _onLoadEventFired(res) {
// res = {timestamp}
_urlToStyle = {};
Inspector.CSS.getAllStyleSheets(function onGetAllStyleSheets(res) {
var i, header;
for (i in res.headers) {
header = res.headers[i];
_urlToStyle[header.sourceURL] = header;
}
_load.resolve();
});
}
CSSDocument.prototype.getStyleSheetFromBrowser = function getStyleSheetFromBrowser() {
var deferred = new $.Deferred();
// WebInspector Command: CSS.getStyleSheet
Inspector.CSS.getStyleSheet(this.styleSheet.styleSheetId, function callback(res) {
// res = {styleSheet}
if (res.styleSheet) {
deferred.resolve(res.styleSheet);
} else {
deferred.reject();
}
});
return deferred.promise();
};
/** Gather options where to go to from the given source node */
function _onRemoteShowGoto(res) {
// res = {nodeId, name, value}
var node = DOMAgent.nodeWithId(res.nodeId);
// get all css rules that apply to the given node
Inspector.CSS.getMatchedStylesForNode(node.nodeId, function onMatchedStyles(res) {
var i, callFrame, name, script, url, rule, targets = [];
_makeHTMLTarget(targets, node);
for (i in node.trace) {
_makeJSTarget(targets, node.trace[i]);
}
for (i in res.matchedCSSRules) {
_makeCSSTarget(targets, res.matchedCSSRules[i]);
}
RemoteAgent.call("showGoto", targets);
});
}
/**
* Reload a CSS style sheet from a document
* @param {Document} document
* @param {string=} newContent new content of every stylesheet. Defaults to doc.getText() if omitted
* @return {jQuery.Promise}
*/
function reloadCSSForDocument(doc, newContent) {
var styles = styleForURL(doc.url),
styleSheetId,
deferreds = [];
if (newContent === undefined) {
newContent = doc.getText();
}
for (styleSheetId in styles) {
deferreds.push(Inspector.CSS.setStyleSheetText(styles[styleSheetId].styleSheetId, newContent));
}
if (!deferreds.length) {
console.error("Style Sheet for document not loaded: " + doc.url);
return new $.Deferred().reject().promise();
}
// return master deferred
return $.when.apply($, deferreds);
}
var CSSDocument = function CSSDocument(doc, editor, inspector) {
this.doc = doc;
// FUTURE: Highlighting is currently disabled, since this code doesn't yet know
// how to deal with different editors pointing at the same document.
/*
this.editor = editor;
this._highlight = [];
this.onHighlight = this.onHighlight.bind(this);
this.onCursorActivity = this.onCursorActivity.bind(this);
Inspector.on("HighlightAgent.highlight", this.onHighlight);
*/
// Add a ref to the doc since we're listening for change events
this.doc.addRef();
this.onChange = this.onChange.bind(this);
this.onDeleted = this.onDeleted.bind(this);
$(this.doc).on("change", this.onChange);
$(this.doc).on("deleted", this.onDeleted);
/*
$(this.editor).on("cursorActivity", this.onCursorActivity);
this.onCursorActivity();
*/
// get the style sheet
this.styleSheet = CSSAgent.styleForURL(this.doc.url);
// WebInspector Command: CSS.getStyleSheet
Inspector.CSS.getStyleSheet(this.styleSheet.styleSheetId, function callback(res) {
// res = {styleSheet}
this.rules = res.styleSheet.rules;
}.bind(this));
// If the CSS document is dirty, push the changes into the browser now
if (doc.isDirty) {
CSSAgent.reloadCSSForDocument(this.doc);
}
};
/** Clean up */
function unload() {
Inspector.Page.off(".CSSAgent");
Inspector.CSS.off(".CSSAgent");
}
/** Enable the domain */
function enable() {
return Inspector.CSS.enable();
}
/** Empties a CSS style sheet given a document that has been deleted
* @param {Document} document
*/
function clearCSSForDocument(doc) {
var style = styleForURL(doc.url);
console.assert(style, "Style Sheet for document not loaded: " + doc.url);
Inspector.CSS.setStyleSheetText(style.styleSheetId, "");
}