Modified: trunk/Source/WebCore/WebCore.gypi (90396 => 90397)
--- trunk/Source/WebCore/WebCore.gypi 2011-07-05 13:41:50 UTC (rev 90396)
+++ trunk/Source/WebCore/WebCore.gypi 2011-07-05 15:35:19 UTC (rev 90397)
@@ -6424,6 +6424,7 @@
'inspector/front-end/Images/paneAddButtons.png',
'inspector/front-end/Images/paneBottomGrow.png',
'inspector/front-end/Images/paneBottomGrowActive.png',
+ 'inspector/front-end/Images/paneElementStateButtons.png',
'inspector/front-end/Images/paneFilterButtons.png',
'inspector/front-end/Images/paneGrowHandleLine.png',
'inspector/front-end/Images/paneRefreshButtons.png',
Modified: trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js (90396 => 90397)
--- trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2011-07-05 13:41:50 UTC (rev 90396)
+++ trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2011-07-05 15:35:19 UTC (rev 90397)
@@ -55,13 +55,20 @@
this.settingsSelectElement.appendChild(option);
// Prevent section from collapsing.
- this.settingsSelectElement.addEventListener("click", function(event) { event.stopPropagation() }, false);
+ var muteEventListener = function(event) { event.stopPropagation(); event.preventDefault(); };
+ this.settingsSelectElement.addEventListener("click", muteEventListener, true);
this.settingsSelectElement.addEventListener("change", this._changeSetting.bind(this), false);
this._updateColorFormatFilter();
this.titleElement.appendChild(this.settingsSelectElement);
+ this._elementStateButton = document.createElement("button");
+ this._elementStateButton.className = "pane-title-button element-state";
+ this._elementStateButton.title = WebInspector.UIString("Toggle Element State");
+ this._elementStateButton.addEventListener("click", this._toggleElementStatePane.bind(this), false);
+ this.titleElement.appendChild(this._elementStateButton);
+
var addButton = document.createElement("button");
addButton.className = "pane-title-button add";
addButton.title = WebInspector.UIString("New Style Rule");
@@ -71,6 +78,11 @@
this._computedStylePane = computedStylePane;
this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
WebInspector.settings.colorFormat.addChangeListener(this._colorFormatSettingChanged.bind(this));
+
+ this._createElementStatePane();
+ this.bodyElement.appendChild(this._elementStatePane);
+ this._sectionsContainer = document.createElement("div");
+ this.bodyElement.appendChild(this._sectionsContainer);
}
WebInspector.StylesSidebarPane.ColorFormat = {
@@ -220,7 +232,7 @@
node = this.node;
if (!node) {
- this.bodyElement.removeChildren();
+ this._sectionsContainer.removeChildren();
this._computedStylePane.bodyElement.removeChildren();
this.sections = {};
if (callback)
@@ -247,7 +259,7 @@
if (refresh)
WebInspector.cssModel.getComputedStyleAsync(node.id, computedStyleCallback.bind(this));
else
- WebInspector.cssModel.getStylesAsync(node.id, undefined, stylesCallback.bind(this));
+ WebInspector.cssModel.getStylesAsync(node.id, this._forcedPseudoClasses, stylesCallback.bind(this));
},
_refreshUpdate: function(node, computedStyle, editedSection)
@@ -265,7 +277,7 @@
_rebuildUpdate: function(node, styles)
{
- this.bodyElement.removeChildren();
+ this._sectionsContainer.removeChildren();
this._computedStylePane.bodyElement.removeChildren();
var styleRules = this._rebuildStyleRules(node, styles);
@@ -506,7 +518,7 @@
separatorElement.textContent = WebInspector.UIString("Pseudo element");
} else
separatorElement.textContent = styleRule.text;
- this.bodyElement.insertBefore(separatorElement, anchorElement);
+ this._sectionsContainer.insertBefore(separatorElement, anchorElement);
lastWasSeparator = true;
continue;
}
@@ -528,7 +540,7 @@
this._computedStylePane.bodyElement.appendChild(section.element);
lastWasSeparator = true;
} else {
- this.bodyElement.insertBefore(section.element, anchorElement);
+ this._sectionsContainer.insertBefore(section.element, anchorElement);
lastWasSeparator = false;
}
sections.push(section);
@@ -596,7 +608,7 @@
blankSection.pane = this;
var elementStyleSection = this.sections[0][1];
- this.bodyElement.insertBefore(blankSection.element, elementStyleSection.element.nextSibling);
+ this._sectionsContainer.insertBefore(blankSection.element, elementStyleSection.element.nextSibling);
this.sections[0].splice(2, 0, blankSection);
@@ -650,6 +662,74 @@
shortcut.shortcutToString(shortcut.Keys.PageDown, shortcut.Modifiers.Alt)
];
section.addRelatedKeys(keys, WebInspector.UIString("Increment/decrement by %f", 0.1));
+ },
+
+ _toggleElementStatePane: function(event)
+ {
+ event.stopPropagation();
+ if (!this._elementStateButton.hasStyleClass("toggled")) {
+ this.expand();
+ this._elementStateButton.addStyleClass("toggled");
+ this._elementStatePane.addStyleClass("expanded");
+ } else {
+ this._elementStateButton.removeStyleClass("toggled");
+ this._elementStatePane.removeStyleClass("expanded");
+ // Clear flags on hide.
+ if (this._forcedPseudoClasses) {
+ for (var i = 0; i < this._elementStatePane.inputs.length; ++i)
+ this._elementStatePane.inputs[i].checked = false;
+ delete this._forcedPseudoClasses;
+ this.update(WebInspector.panels.elements.focusedDOMNode, null, true);
+ }
+ }
+ },
+
+ _createElementStatePane: function()
+ {
+ this._elementStatePane = document.createElement("div");
+ this._elementStatePane.className = "styles-element-state-pane source-code";
+ var table = document.createElement("table");
+
+ var inputs = [];
+ this._elementStatePane.inputs = inputs;
+
+ function clickListener(event)
+ {
+ var pseudoClasses = [];
+ for (var i = 0; i < inputs.length; ++i) {
+ if (inputs[i].checked)
+ pseudoClasses.push(inputs[i].state);
+ }
+ this._forcedPseudoClasses = pseudoClasses.length ? pseudoClasses : undefined;
+ this.update(WebInspector.panels.elements.focusedDOMNode, null, true);
+ }
+
+ function createCheckbox(state)
+ {
+ var td = document.createElement("td");
+ var label = document.createElement("label");
+ var input = document.createElement("input");
+ input.type = "checkbox";
+ input.state = state;
+ input.addEventListener("click", clickListener.bind(this), false);
+ inputs.push(input);
+ label.appendChild(input);
+ label.appendChild(document.createTextNode(":" + state));
+ td.appendChild(label);
+ return td;
+ }
+
+ var tr = document.createElement("tr");
+ tr.appendChild(createCheckbox.call(this, "active"));
+ tr.appendChild(createCheckbox.call(this, "hover"));
+ table.appendChild(tr);
+
+ tr = document.createElement("tr");
+ tr.appendChild(createCheckbox.call(this, "focus"));
+ tr.appendChild(createCheckbox.call(this, "visited"));
+ table.appendChild(tr);
+
+ this._elementStatePane.appendChild(table);
}
}
@@ -662,7 +742,7 @@
this.titleElement.appendChild(showInheritedCheckbox.element);
if (WebInspector.settings.showInheritedComputedStyleProperties.get()) {
- this.bodyElement.addStyleClass("show-inherited");
+ this._sectionsContainer.addStyleClass("show-inherited");
showInheritedCheckbox.checked = true;
}
@@ -670,9 +750,9 @@
{
WebInspector.settings.showInheritedComputedStyleProperties.set(showInheritedCheckbox.checked);
if (WebInspector.settings.showInheritedComputedStyleProperties.get())
- this.bodyElement.addStyleClass("show-inherited");
+ this._sectionsContainer.addStyleClass("show-inherited");
else
- this.bodyElement.removeStyleClass("show-inherited");
+ this._sectionsContainer.removeStyleClass("show-inherited");
}
showInheritedCheckbox.addEventListener(showInheritedToggleFunction.bind(this));
Modified: trunk/Source/WebCore/inspector/front-end/inspector.css (90396 => 90397)
--- trunk/Source/WebCore/inspector/front-end/inspector.css 2011-07-05 13:41:50 UTC (rev 90396)
+++ trunk/Source/WebCore/inspector/front-end/inspector.css 2011-07-05 15:35:19 UTC (rev 90397)
@@ -1798,7 +1798,7 @@
background-position: -23px 0px;
}
-.pane > .title > .pane-title-button:active {
+.pane > .title > .pane-title-button:active, .pane > .title > .pane-title-button.toggled {
background-position: -46px 0px;
}
@@ -1806,6 +1806,10 @@
background-image: url(Images/paneAddButtons.png);
}
+.pane > .title > .pane-title-button.element-state {
+ background-image: url(Images/paneElementStateButtons.png);
+}
+
.pane > .title > .pane-title-button.refresh {
background-image: url(Images/paneRefreshButtons.png);
}
@@ -4546,7 +4550,29 @@
opacity: 0.5;
}
+.styles-element-state-pane {
+ background-color: rgb(240, 240, 240);
+ overflow: hidden;
+ margin-top: -38px;
+ -webkit-transition: margin-top 0.1s ease-in-out;
+ padding-left: 2px;
+}
+.styles-element-state-pane.expanded {
+ border-bottom: 1px solid rgb(189, 189, 189);
+ margin-top: 0;
+}
+
+.styles-element-state-pane > table {
+ width: 100%;
+ border-spacing: 0;
+}
+
+.styles-element-state-pane input {
+ margin: 2px;
+ vertical-align: -2px;
+}
+
.body .styles-section .properties .inherited {
display: none;
}
