Skip to content

GitLab

T
tangled
Commit a0891240 authored by lushnikov@chromium.org's avatar lushnikov@chromium.org
Browse files
Options

DevTools: [SSP] update style rules of SectionPropertyTreeElements 

The style rules of tree elements became outdated after the rule was
edited. This patch adds synchronization for them as well.

BUG=430133
R=vsevik

Review URL: https://codereview.chromium.org/692073003

git-svn-id: svn://svn.chromium.org/blink/trunk@184869 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent f5e2e2ef
Hide whitespace changes
Inline Side-by-side
Showing with 84 additions and 3 deletions
third_party/WebKit/LayoutTests/inspector/elements/styles/styles-disable-property-after-selector-edit-expected.txt 0 → 100644
View file @ a0891240
Verifies that sequence of setting selector and disabling property works.
Red text here.
Running: selectInitialNode
Running: editSelector
Running: testDisableProperty
#### AFTER PROPERTY DISABLED ####
[expanded]
element.style { ()
[expanded]
#inspected, .INSERTED-OTHER-SELECTOR { (styles-disable-…r-edit.html:41 -> styles-disable-property-after-selector-edit.html:41:1)
/-- overloaded --/ /-- disabled --/ /* color: red; */
[expanded]
div { (user agent stylesheet)
display: block;
third_party/WebKit/LayoutTests/inspector/elements/styles/styles-disable-property-after-selector-edit.html 0 → 100644
View file @ a0891240
<html>
<head>
<script src="../../../http/tests/inspector/inspector-test.js"></script>
<script src="../../../http/tests/inspector/elements-test.js"></script>
<script>
function test()
{
InspectorTest.runTestSuite([
function selectInitialNode(next)
{
InspectorTest.selectNodeAndWaitForStyles("inspected", next);
},
function editSelector(next)
{
var section = WebInspector.panels.elements.sidebarPanes.styles.sections[0][2];
section.startEditingSelector();
section._selectorElement.textContent = "#inspected, .INSERTED-OTHER-SELECTOR";
InspectorTest.waitForSelectorCommitted(next);
section._selectorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
},
function testDisableProperty(next)
{
var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("color");
InspectorTest.waitForStyleApplied(onPropertyDisabled);
treeItem.toggleEnabled({ target: { checked: false }, consume: function() { } });
function onPropertyDisabled()
{
InspectorTest.addResult("\n\n#### AFTER PROPERTY DISABLED ####\n\n");
InspectorTest.dumpSelectedElementStyles(true, false, true);
next();
}
}
]);
}
</script>
<style>
#inspected {
color: red;
}
</style>
</head>
<body onload="runTest()">
<p>
Verifies that sequence of setting selector and disabling property works.
</p>
<div id="inspected">Red text here.</div>
</body>
</html>
third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
View file @ a0891240
......@@ -1877,8 +1877,6 @@ WebInspector.StylePropertiesSection.prototype = {
return;
}
var selectedNode = this._parentPane._node;
/**
* @param {!WebInspector.CSSRule} newRule
* @this {WebInspector.StylePropertiesSection}
......@@ -1898,7 +1896,7 @@ WebInspector.StylePropertiesSection.prototype = {
this.rule = newRule;
this.styleRule = { section: this, style: newRule.style, selectorText: newRule.selectorText, media: newRule.media, rule: newRule };
this._parentPane.update(selectedNode);
this._parentPane._refreshUpdate(this, false);
this._parentPane._styleSheetRuleEdited(this.rule, oldSelectorRange, this.rule.selectorRange);
finishOperationAndMoveEditor.call(this, moveDirection);
......@@ -1916,6 +1914,7 @@ WebInspector.StylePropertiesSection.prototype = {
// This gets deleted in finishOperationAndMoveEditor(), which is called both on success and failure.
this._parentPane._userOperation = true;
var selectedNode = this._parentPane._node;
this._parentPane._target.cssModel.setRuleSelector(this.rule, selectedNode ? selectedNode.id : 0, newContent, successCallback.bind(this), finishOperationAndMoveEditor.bind(this, moveDirection));
},
......
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