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()
InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_innerRebuildUpdate", sniffRebuild, true);
var stylesPane = WebInspector.panels.elements.sidebarPanes.styles;
for (var i = 0; i < UPDATE_COUNT; ++i)
stylesPane.setNode(stylesPane.node());
WebInspector.context.setFlavor(WebInspector.DOMNode, stylesPane.node());
InspectorTest.deprecatedRunAfterPendingDispatches(completeCallback);
}
......
third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleModel.js
View file @ afb1b531
......@@ -31,7 +31,7 @@ WebInspector.ComputedStyleModel.prototype = {
*/
cssModel: function()
{
return this._cssModel;
return this._cssModel && this._cssModel.isEnabled() ? this._cssModel : null;
},
/**
......@@ -41,7 +41,7 @@ WebInspector.ComputedStyleModel.prototype = {
{
this._node = /** @type {?WebInspector.DOMNode} */(event.data);
this._updateTarget(this._node ? this._node.target() : null);
this._onComputedStyleChanged();
this._onComputedStyleChanged(null);
},
/**
......@@ -56,25 +56,70 @@ WebInspector.ComputedStyleModel.prototype = {
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 (domModel && this._cssModel) {
if (this._cssModel && domModel && resourceTreeModel) {
this._targetEvents = [
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.StyleSheetChanged, 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.ModelWasEnabled, this._onComputedStyleChanged, this),
domModel.addEventListener(WebInspector.DOMModel.Events.DOMMutated, 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.StyleSheetChanged, 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.ModelWasEnabled, 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}
*/
......@@ -110,12 +155,6 @@ WebInspector.ComputedStyleModel.prototype = {
}
},
_onComputedStyleChanged: function()
{
delete this._computedStylePromise;
this.dispatchEventToListeners(WebInspector.ComputedStyleModel.Events.ComputedStyleChanged);
},
__proto__: WebInspector.Object.prototype
}
......
third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js
View file @ afb1b531
......@@ -760,7 +760,7 @@ WebInspector.ElementsPanel.prototype = {
if (!treeOutline.editing()) {
handleUndoRedo.call(null, treeOutline);
if (event.handled) {
this.sidebarPanes.styles.onUndoOrRedoHappened();
this.sidebarPanes.styles.forceUpdate();
return;
}
}
......
third_party/WebKit/Source/devtools/front_end/elements/ElementsSidebarPane.js
View file @ afb1b531
......@@ -10,9 +10,11 @@
WebInspector.ElementsSidebarPane = function(title)
{
WebInspector.SidebarPane.call(this, title);
this._node = null;
this._updateController = new WebInspector.ElementsSidebarPane._UpdateController(this, this.doUpdate.bind(this));
WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this._nodeChanged, this);
this._computedStyleModel = new WebInspector.ComputedStyleModel();
this._computedStyleModel.addEventListener(WebInspector.ComputedStyleModel.Events.ComputedStyleChanged, this.onCSSModelChanged, this);
this._updateThrottler = new WebInspector.Throttler(100);
this._updateWhenVisible = false;
}
WebInspector.ElementsSidebarPane.prototype = {
......@@ -21,7 +23,7 @@ WebInspector.ElementsSidebarPane.prototype = {
*/
node: function()
{
return this._node;
return this._computedStyleModel.node();
},
/**
......@@ -29,25 +31,7 @@ WebInspector.ElementsSidebarPane.prototype = {
*/
cssModel: function()
{
return this._cssModel && this._cssModel.isEnabled() ? this._cssModel : null;
},
/**
* @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();
return this._computedStyleModel.cssModel();
},
/**
......@@ -61,128 +45,32 @@ WebInspector.ElementsSidebarPane.prototype = {
update: function()
{
this._updateController.update();
},
wasShown: function()
{
WebInspector.SidebarPane.prototype.wasShown.call(this);
this._updateController.viewWasShown();
},
/**
* @param {?WebInspector.Target} target
*/
_updateTarget: function(target)
{
if (this._target === target)
this._updateWhenVisible = !this.isShowing();
if (this._updateWhenVisible)
return;
if (this._targetEvents) {
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),
];
}
},
this._updateThrottler.schedule(innerUpdate.bind(this));
/**
* @param {!WebInspector.Event} event
*/
_onFrameResized: function(event)
{
/**
* @return {!Promise.<?>}
* @this {WebInspector.ElementsSidebarPane}
*/
function refreshContents()
function innerUpdate()
{
this.onFrameResizedThrottled();
delete this._frameResizedTimer;
return this.isShowing() ? this.doUpdate() : Promise.resolve();
}
if (this._frameResizedTimer)
clearTimeout(this._frameResizedTimer);
this._frameResizedTimer = setTimeout(refreshContents.bind(this), 100);
},
/**
* @param {!WebInspector.Event} event
*/
_domModelChanged: function(event)
wasShown: function()
{
var node = /** @type {!WebInspector.DOMNode} */ (event.data);
this.onDOMModelChanged(node)
WebInspector.SidebarPane.prototype.wasShown.call(this);
if (this._updateWhenVisible)
this.update();
},
/**
* @param {!WebInspector.DOMNode} node
*/
onDOMModelChanged: function(node) { },
/**
* @param {!WebInspector.Event} event
*/
onCSSModelChanged: function(event) { },
onFrameResizedThrottled: function() { },
__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 = {
return Promise.all(promises);
},
/**
* @override
*/
onDOMModelChanged: function()
{
this.update();
},
/**
* @override
*/
......@@ -99,14 +91,6 @@ WebInspector.MetricsSidebarPane.prototype = {
this.update();
},
/**
* @override
*/
onFrameResizedThrottled: function()
{
this.update();
},
/**
* @param {!Map.<string, string>} style
* @param {string} propertyName
......@@ -469,7 +453,7 @@ WebInspector.MetricsSidebarPane.prototype = {
this.originalPropertyData = this.previousPropertyDataCandidate;
if (typeof this._highlightMode !== "undefined")
this._node.highlight(this._highlightMode);
this.node().highlight(this._highlightMode);
if (commitEditor)
this.update();
......
third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
View file @ afb1b531
......@@ -53,6 +53,7 @@ WebInspector.StylesSidebarPane = function()
WebInspector.StylesSidebarPane._instance = 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 = {
this.update();
},
onUndoOrRedoHappened: function()
forceUpdate: function()
{
this.setNode(this.node());
this._stylesPopoverHelper.hide();
this._resetCache();
this.update();
},
/**
......@@ -200,19 +203,6 @@ WebInspector.StylesSidebarPane.prototype = {
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
*/
......@@ -305,41 +295,6 @@ WebInspector.StylesSidebarPane.prototype = {
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
*/
......@@ -1390,7 +1345,7 @@ WebInspector.StylePropertiesSection.prototype = {
// This gets deleted in finishOperation(), which is called both on success and failure.
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));
},
......@@ -1416,7 +1371,7 @@ WebInspector.StylePropertiesSection.prototype = {
*/
_navigateToSelectorSource: function(index, focus)
{
var cssModel = this._parentPane._cssModel;
var cssModel = this._parentPane.cssModel();
var rule = this._style.parentRule;
var header = cssModel.styleSheetHeaderForId(/** @type {string} */(rule.styleSheetId));
if (!header)
......@@ -1659,12 +1614,13 @@ WebInspector.StylePropertiesSection._linkifyRuleLocation = function(cssModel, li
*/
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);
this._ruleLocation = ruleLocation;
this._styleSheetId = styleSheetId;
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)
this._createMediaList(insertAfterStyle.parentRule.media);
this.element.classList.add("blank-section");
......@@ -1756,7 +1712,7 @@ WebInspector.BlankStylePropertiesSection.prototype = {
newContent = newContent.trim();
this._parentPane._userOperation = true;
var cssModel = this._parentPane._cssModel;
var cssModel = this._parentPane.cssModel();
var ruleText = this._rulePrefix() + newContent + " {}";
cssModel.addRule(this._styleSheetId, ruleText, this._ruleLocation)
.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