Skip to content

GitLab

T
tangled
Commit afb1b531 authored by pfeldman's avatar pfeldman Committed by Commit bot
Browse files
Options

DevTools: reuse computedstylesmodel in the elements sidebar base class. 

BUG=627306

Review-Url: https://codereview.chromium.org/2146233002
Cr-Commit-Position: refs/heads/master@{#405582}
parent d56c590c
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 219 deletions
third_party/WebKit/LayoutTests/inspector/elements/styles/updates-throttled.html
View file @ afb1b531
...@@ -15,7 +15,7 @@ function test() ...@@ -15,7 +15,7 @@ function test()
InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_innerRebuildUpdate", sniffRebuild, true); InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_innerRebuildUpdate", sniffRebuild, true);
var stylesPane = WebInspector.panels.elements.sidebarPanes.styles; var stylesPane = WebInspector.panels.elements.sidebarPanes.styles;
for (var i = 0; i < UPDATE_COUNT; ++i) for (var i = 0; i < UPDATE_COUNT; ++i)
stylesPane.setNode(stylesPane.node()); WebInspector.context.setFlavor(WebInspector.DOMNode, stylesPane.node());
InspectorTest.deprecatedRunAfterPendingDispatches(completeCallback); InspectorTest.deprecatedRunAfterPendingDispatches(completeCallback);
} }
......
third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleModel.js
View file @ afb1b531
...@@ -31,7 +31,7 @@ WebInspector.ComputedStyleModel.prototype = { ...@@ -31,7 +31,7 @@ WebInspector.ComputedStyleModel.prototype = {
*/ */
cssModel: function() cssModel: function()
{ {
return this._cssModel; return this._cssModel && this._cssModel.isEnabled() ? this._cssModel : null;
}, },
/** /**
...@@ -41,7 +41,7 @@ WebInspector.ComputedStyleModel.prototype = { ...@@ -41,7 +41,7 @@ WebInspector.ComputedStyleModel.prototype = {
{ {
this._node = /** @type {?WebInspector.DOMNode} */(event.data); this._node = /** @type {?WebInspector.DOMNode} */(event.data);
this._updateTarget(this._node ? this._node.target() : null); this._updateTarget(this._node ? this._node.target() : null);
this._onComputedStyleChanged(); this._onComputedStyleChanged(null);
}, },
/** /**
...@@ -56,25 +56,70 @@ WebInspector.ComputedStyleModel.prototype = { ...@@ -56,25 +56,70 @@ WebInspector.ComputedStyleModel.prototype = {
this._targetEvents = null; this._targetEvents = null;
} }
this._target = target; this._target = target;
var domModel = null; var domModel = null;
var resourceTreeModel = null;
if (target) { if (target) {
this._cssModel = WebInspector.CSSModel.fromTarget(target); this._cssModel = WebInspector.CSSModel.fromTarget(target);
domModel = WebInspector.DOMModel.fromTarget(target); domModel = WebInspector.DOMModel.fromTarget(target);
resourceTreeModel = target.resourceTreeModel;
} }
if (domModel && this._cssModel) { if (this._cssModel && domModel && resourceTreeModel) {
this._targetEvents = [ this._targetEvents = [
this._cssModel.addEventListener(WebInspector.CSSModel.Events.StyleSheetAdded, this._onComputedStyleChanged, this), this._cssModel.addEventListener(WebInspector.CSSModel.Events.StyleSheetAdded, this._onComputedStyleChanged, this),
this._cssModel.addEventListener(WebInspector.CSSModel.Events.StyleSheetRemoved, this._onComputedStyleChanged, this), this._cssModel.addEventListener(WebInspector.CSSModel.Events.StyleSheetRemoved, this._onComputedStyleChanged, this),
this._cssModel.addEventListener(WebInspector.CSSModel.Events.StyleSheetChanged, this._onComputedStyleChanged, this), this._cssModel.addEventListener(WebInspector.CSSModel.Events.StyleSheetChanged, this._onComputedStyleChanged, this),
this._cssModel.addEventListener(WebInspector.CSSModel.Events.MediaQueryResultChanged, this._onComputedStyleChanged, this), this._cssModel.addEventListener(WebInspector.CSSModel.Events.MediaQueryResultChanged, this._onComputedStyleChanged, this),
this._cssModel.addEventListener(WebInspector.CSSModel.Events.PseudoStateForced, this._onComputedStyleChanged, this), this._cssModel.addEventListener(WebInspector.CSSModel.Events.PseudoStateForced, this._onComputedStyleChanged, this),
this._cssModel.addEventListener(WebInspector.CSSModel.Events.ModelWasEnabled, this._onComputedStyleChanged, this), this._cssModel.addEventListener(WebInspector.CSSModel.Events.ModelWasEnabled, this._onComputedStyleChanged, this),
domModel.addEventListener(WebInspector.DOMModel.Events.DOMMutated, this._onComputedStyleChanged, this) domModel.addEventListener(WebInspector.DOMModel.Events.DOMMutated, this._onDOMModelChanged, this),
resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameResized, this._onFrameResized, this),
]; ];
} }
}, },
/**
* @param {?WebInspector.Event} event
*/
_onComputedStyleChanged: function(event)
{
delete this._computedStylePromise;
this.dispatchEventToListeners(WebInspector.ComputedStyleModel.Events.ComputedStyleChanged, event ? event.data : null);
},
/**
* @param {!WebInspector.Event} event
*/
_onDOMModelChanged: function(event)
{
// Any attribute removal or modification can affect the styles of "related" nodes.
var node = /** @type {!WebInspector.DOMNode} */ (event.data);
if (!this._node || this._node !== node && node.parentNode !== this._node.parentNode && !node.isAncestor(this._node))
return;
this._onComputedStyleChanged(null);
},
/**
* @param {!WebInspector.Event} event
*/
_onFrameResized: function(event)
{
/**
* @this {WebInspector.ComputedStyleModel}
*/
function refreshContents()
{
this._onComputedStyleChanged(null);
delete this._frameResizedTimer;
}
if (this._frameResizedTimer)
clearTimeout(this._frameResizedTimer);
this._frameResizedTimer = setTimeout(refreshContents.bind(this), 100);
},
/** /**
* @return {?WebInspector.DOMNode} * @return {?WebInspector.DOMNode}
*/ */
...@@ -110,12 +155,6 @@ WebInspector.ComputedStyleModel.prototype = { ...@@ -110,12 +155,6 @@ WebInspector.ComputedStyleModel.prototype = {
} }
}, },
_onComputedStyleChanged: function()
{
delete this._computedStylePromise;
this.dispatchEventToListeners(WebInspector.ComputedStyleModel.Events.ComputedStyleChanged);
},
__proto__: WebInspector.Object.prototype __proto__: WebInspector.Object.prototype
} }
......
third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js
View file @ afb1b531
...@@ -760,7 +760,7 @@ WebInspector.ElementsPanel.prototype = { ...@@ -760,7 +760,7 @@ WebInspector.ElementsPanel.prototype = {
if (!treeOutline.editing()) { if (!treeOutline.editing()) {
handleUndoRedo.call(null, treeOutline); handleUndoRedo.call(null, treeOutline);
if (event.handled) { if (event.handled) {
this.sidebarPanes.styles.onUndoOrRedoHappened(); this.sidebarPanes.styles.forceUpdate();
return; return;
} }
} }
......
third_party/WebKit/Source/devtools/front_end/elements/ElementsSidebarPane.js
View file @ afb1b531
...@@ -10,9 +10,11 @@ ...@@ -10,9 +10,11 @@
WebInspector.ElementsSidebarPane = function(title) WebInspector.ElementsSidebarPane = function(title)
{ {
WebInspector.SidebarPane.call(this, title); WebInspector.SidebarPane.call(this, title);
this._node = null; this._computedStyleModel = new WebInspector.ComputedStyleModel();
this._updateController = new WebInspector.ElementsSidebarPane._UpdateController(this, this.doUpdate.bind(this)); this._computedStyleModel.addEventListener(WebInspector.ComputedStyleModel.Events.ComputedStyleChanged, this.onCSSModelChanged, this);
WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this._nodeChanged, this);
this._updateThrottler = new WebInspector.Throttler(100);
this._updateWhenVisible = false;
} }
WebInspector.ElementsSidebarPane.prototype = { WebInspector.ElementsSidebarPane.prototype = {
...@@ -21,7 +23,7 @@ WebInspector.ElementsSidebarPane.prototype = { ...@@ -21,7 +23,7 @@ WebInspector.ElementsSidebarPane.prototype = {
*/ */
node: function() node: function()
{ {
return this._node; return this._computedStyleModel.node();
}, },
/** /**
...@@ -29,25 +31,7 @@ WebInspector.ElementsSidebarPane.prototype = { ...@@ -29,25 +31,7 @@ WebInspector.ElementsSidebarPane.prototype = {
*/ */
cssModel: function() cssModel: function()
{ {
return this._cssModel && this._cssModel.isEnabled() ? this._cssModel : null; return this._computedStyleModel.cssModel();
},
/**
* @param {!WebInspector.Event} event
*/
_nodeChanged: function(event)
{
this.setNode(/** @type {?WebInspector.DOMNode} */ (event.data));
},
/**
* @param {?WebInspector.DOMNode} node
*/
setNode: function(node)
{
this._node = node;
this._updateTarget(node ? node.target() : null);
this.update();
}, },
/** /**
...@@ -61,128 +45,32 @@ WebInspector.ElementsSidebarPane.prototype = { ...@@ -61,128 +45,32 @@ WebInspector.ElementsSidebarPane.prototype = {
update: function() update: function()
{ {
this._updateController.update(); this._updateWhenVisible = !this.isShowing();
}, if (this._updateWhenVisible)
wasShown: function()
{
WebInspector.SidebarPane.prototype.wasShown.call(this);
this._updateController.viewWasShown();
},
/**
* @param {?WebInspector.Target} target
*/
_updateTarget: function(target)
{
if (this._target === target)
return; return;
if (this._targetEvents) { this._updateThrottler.schedule(innerUpdate.bind(this));
WebInspector.EventTarget.removeEventListeners(this._targetEvents);
this._targetEvents = null;
}
this._target = target;
var domModel = null;
var resourceTreeModel = null;
if (target) {
this._cssModel = WebInspector.CSSModel.fromTarget(target);
domModel = WebInspector.DOMModel.fromTarget(target);
resourceTreeModel = target.resourceTreeModel;
}
if (this._cssModel && domModel && resourceTreeModel) {
this._targetEvents = [
this._cssModel.addEventListener(WebInspector.CSSModel.Events.StyleSheetAdded, this.onCSSModelChanged, this),
this._cssModel.addEventListener(WebInspector.CSSModel.Events.StyleSheetRemoved, this.onCSSModelChanged, this),
this._cssModel.addEventListener(WebInspector.CSSModel.Events.StyleSheetChanged, this.onCSSModelChanged, this),
this._cssModel.addEventListener(WebInspector.CSSModel.Events.MediaQueryResultChanged, this.onCSSModelChanged, this),
this._cssModel.addEventListener(WebInspector.CSSModel.Events.PseudoStateForced, this.onCSSModelChanged, this),
this._cssModel.addEventListener(WebInspector.CSSModel.Events.ModelWasEnabled, this.onCSSModelChanged, this),
domModel.addEventListener(WebInspector.DOMModel.Events.DOMMutated, this._domModelChanged, this),
resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameResized, this._onFrameResized, this),
];
}
},
/**
* @param {!WebInspector.Event} event
*/
_onFrameResized: function(event)
{
/** /**
* @return {!Promise.<?>}
* @this {WebInspector.ElementsSidebarPane} * @this {WebInspector.ElementsSidebarPane}
*/ */
function refreshContents() function innerUpdate()
{ {
this.onFrameResizedThrottled(); return this.isShowing() ? this.doUpdate() : Promise.resolve();
delete this._frameResizedTimer;
} }
if (this._frameResizedTimer)
clearTimeout(this._frameResizedTimer);
this._frameResizedTimer = setTimeout(refreshContents.bind(this), 100);
}, },
/** wasShown: function()
* @param {!WebInspector.Event} event
*/
_domModelChanged: function(event)
{ {
var node = /** @type {!WebInspector.DOMNode} */ (event.data); WebInspector.SidebarPane.prototype.wasShown.call(this);
this.onDOMModelChanged(node) if (this._updateWhenVisible)
this.update();
}, },
/**
* @param {!WebInspector.DOMNode} node
*/
onDOMModelChanged: function(node) { },
/** /**
* @param {!WebInspector.Event} event * @param {!WebInspector.Event} event
*/ */
onCSSModelChanged: function(event) { }, onCSSModelChanged: function(event) { },
onFrameResizedThrottled: function() { },
__proto__: WebInspector.SidebarPane.prototype __proto__: WebInspector.SidebarPane.prototype
} }
/**
* @constructor
* @param {!WebInspector.Widget} view
* @param {function():!Promise.<?>} doUpdate
*/
WebInspector.ElementsSidebarPane._UpdateController = function(view, doUpdate)
{
this._view = view;
this._updateThrottler = new WebInspector.Throttler(100);
this._updateWhenVisible = false;
this._doUpdate = doUpdate;
}
WebInspector.ElementsSidebarPane._UpdateController.prototype = {
update: function()
{
this._updateWhenVisible = !this._view.isShowing();
if (this._updateWhenVisible)
return;
this._updateThrottler.schedule(innerUpdate.bind(this));
/**
* @this {WebInspector.ElementsSidebarPane._UpdateController}
* @return {!Promise.<?>}
*/
function innerUpdate()
{
return this._view.isShowing() ? this._doUpdate.call(null) : Promise.resolve();
}
},
viewWasShown: function()
{
if (this._updateWhenVisible)
this.update();
}
}
third_party/WebKit/Source/devtools/front_end/elements/MetricsSidebarPane.js
View file @ afb1b531
...@@ -83,14 +83,6 @@ WebInspector.MetricsSidebarPane.prototype = { ...@@ -83,14 +83,6 @@ WebInspector.MetricsSidebarPane.prototype = {
return Promise.all(promises); return Promise.all(promises);
}, },
/**
* @override
*/
onDOMModelChanged: function()
{
this.update();
},
/** /**
* @override * @override
*/ */
...@@ -99,14 +91,6 @@ WebInspector.MetricsSidebarPane.prototype = { ...@@ -99,14 +91,6 @@ WebInspector.MetricsSidebarPane.prototype = {
this.update(); this.update();
}, },
/**
* @override
*/
onFrameResizedThrottled: function()
{
this.update();
},
/** /**
* @param {!Map.<string, string>} style * @param {!Map.<string, string>} style
* @param {string} propertyName * @param {string} propertyName
...@@ -469,7 +453,7 @@ WebInspector.MetricsSidebarPane.prototype = { ...@@ -469,7 +453,7 @@ WebInspector.MetricsSidebarPane.prototype = {
this.originalPropertyData = this.previousPropertyDataCandidate; this.originalPropertyData = this.previousPropertyDataCandidate;
if (typeof this._highlightMode !== "undefined") if (typeof this._highlightMode !== "undefined")
this._node.highlight(this._highlightMode); this.node().highlight(this._highlightMode);
if (commitEditor) if (commitEditor)
this.update(); this.update();
......
third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
View file @ afb1b531
...@@ -53,6 +53,7 @@ WebInspector.StylesSidebarPane = function() ...@@ -53,6 +53,7 @@ WebInspector.StylesSidebarPane = function()
WebInspector.StylesSidebarPane._instance = this; WebInspector.StylesSidebarPane._instance = this;
WebInspector.targetManager.addModelListener(WebInspector.CSSModel, WebInspector.CSSModel.Events.LayoutEditorChange, this._onLayoutEditorChange, this); WebInspector.targetManager.addModelListener(WebInspector.CSSModel, WebInspector.CSSModel.Events.LayoutEditorChange, this._onLayoutEditorChange, this);
WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this.forceUpdate, this);
} }
/** /**
...@@ -133,9 +134,11 @@ WebInspector.StylesSidebarPane.prototype = { ...@@ -133,9 +134,11 @@ WebInspector.StylesSidebarPane.prototype = {
this.update(); this.update();
}, },
onUndoOrRedoHappened: function() forceUpdate: function()
{ {
this.setNode(this.node()); this._stylesPopoverHelper.hide();
this._resetCache();
this.update();
}, },
/** /**
...@@ -200,19 +203,6 @@ WebInspector.StylesSidebarPane.prototype = { ...@@ -200,19 +203,6 @@ WebInspector.StylesSidebarPane.prototype = {
this._updateFilter(); this._updateFilter();
}, },
/**
* @override
* @param {?WebInspector.DOMNode} node
*/
setNode: function(node)
{
this._stylesPopoverHelper.hide();
node = node ? node.enclosingElementOrSelf() : null;
this._resetCache();
WebInspector.ElementsSidebarPane.prototype.setNode.call(this, node);
},
/** /**
* @param {!WebInspector.StylePropertiesSection=} editedSection * @param {!WebInspector.StylePropertiesSection=} editedSection
*/ */
...@@ -305,41 +295,6 @@ WebInspector.StylesSidebarPane.prototype = { ...@@ -305,41 +295,6 @@ WebInspector.StylesSidebarPane.prototype = {
this.update(); this.update();
}, },
/**
* @override
*/
onFrameResizedThrottled: function()
{
this.onCSSModelChanged();
},
/**
* @override
* @param {!WebInspector.DOMNode} node
*/
onDOMModelChanged: function(node)
{
// Any attribute removal or modification can affect the styles of "related" nodes.
// Do not touch the styles if they are being edited.
if (this._isEditingStyle || this._userOperation)
return;
if (!this._canAffectCurrentStyles(node))
return;
this._resetCache();
this.update();
},
/**
* @param {?WebInspector.DOMNode} node
*/
_canAffectCurrentStyles: function(node)
{
var currentNode = this.node();
return currentNode && (currentNode === node || node.parentNode === currentNode.parentNode || node.isAncestor(currentNode));
},
/** /**
* @param {?WebInspector.CSSMatchedStyles} matchedStyles * @param {?WebInspector.CSSMatchedStyles} matchedStyles
*/ */
...@@ -1390,7 +1345,7 @@ WebInspector.StylePropertiesSection.prototype = { ...@@ -1390,7 +1345,7 @@ WebInspector.StylePropertiesSection.prototype = {
// This gets deleted in finishOperation(), which is called both on success and failure. // This gets deleted in finishOperation(), which is called both on success and failure.
this._parentPane._userOperation = true; this._parentPane._userOperation = true;
this._parentPane._cssModel.setMediaText(media.styleSheetId, media.range, newContent) this._parentPane.cssModel().setMediaText(media.styleSheetId, media.range, newContent)
.then(userCallback.bind(this)); .then(userCallback.bind(this));
}, },
...@@ -1416,7 +1371,7 @@ WebInspector.StylePropertiesSection.prototype = { ...@@ -1416,7 +1371,7 @@ WebInspector.StylePropertiesSection.prototype = {
*/ */
_navigateToSelectorSource: function(index, focus) _navigateToSelectorSource: function(index, focus)
{ {
var cssModel = this._parentPane._cssModel; var cssModel = this._parentPane.cssModel();
var rule = this._style.parentRule; var rule = this._style.parentRule;
var header = cssModel.styleSheetHeaderForId(/** @type {string} */(rule.styleSheetId)); var header = cssModel.styleSheetHeaderForId(/** @type {string} */(rule.styleSheetId));
if (!header) if (!header)
...@@ -1659,12 +1614,13 @@ WebInspector.StylePropertiesSection._linkifyRuleLocation = function(cssModel, li ...@@ -1659,12 +1614,13 @@ WebInspector.StylePropertiesSection._linkifyRuleLocation = function(cssModel, li
*/ */
WebInspector.BlankStylePropertiesSection = function(stylesPane, matchedStyles, defaultSelectorText, styleSheetId, ruleLocation, insertAfterStyle) WebInspector.BlankStylePropertiesSection = function(stylesPane, matchedStyles, defaultSelectorText, styleSheetId, ruleLocation, insertAfterStyle)
{ {
var rule = WebInspector.CSSStyleRule.createDummyRule(stylesPane._cssModel, defaultSelectorText); var cssModel = /** @type {!WebInspector.CSSModel} */(stylesPane.cssModel());
var rule = WebInspector.CSSStyleRule.createDummyRule(cssModel, defaultSelectorText);
WebInspector.StylePropertiesSection.call(this, stylesPane, matchedStyles, rule.style); WebInspector.StylePropertiesSection.call(this, stylesPane, matchedStyles, rule.style);
this._ruleLocation = ruleLocation; this._ruleLocation = ruleLocation;
this._styleSheetId = styleSheetId; this._styleSheetId = styleSheetId;
this._selectorRefElement.removeChildren(); this._selectorRefElement.removeChildren();
this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection._linkifyRuleLocation(this._parentPane._cssModel, this._parentPane._linkifier, styleSheetId, this._actualRuleLocation())); this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection._linkifyRuleLocation(cssModel, this._parentPane._linkifier, styleSheetId, this._actualRuleLocation()));
if (insertAfterStyle && insertAfterStyle.parentRule) if (insertAfterStyle && insertAfterStyle.parentRule)
this._createMediaList(insertAfterStyle.parentRule.media); this._createMediaList(insertAfterStyle.parentRule.media);
this.element.classList.add("blank-section"); this.element.classList.add("blank-section");
...@@ -1756,7 +1712,7 @@ WebInspector.BlankStylePropertiesSection.prototype = { ...@@ -1756,7 +1712,7 @@ WebInspector.BlankStylePropertiesSection.prototype = {
newContent = newContent.trim(); newContent = newContent.trim();
this._parentPane._userOperation = true; this._parentPane._userOperation = true;
var cssModel = this._parentPane._cssModel; var cssModel = this._parentPane.cssModel();
var ruleText = this._rulePrefix() + newContent + " {}"; var ruleText = this._rulePrefix() + newContent + " {}";
cssModel.addRule(this._styleSheetId, ruleText, this._ruleLocation) cssModel.addRule(this._styleSheetId, ruleText, this._ruleLocation)
.then(onRuleAdded.bind(this)); .then(onRuleAdded.bind(this));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment