Modified: trunk/Source/WebCore/ChangeLog (107932 => 107933)
--- trunk/Source/WebCore/ChangeLog 2012-02-16 15:32:21 UTC (rev 107932)
+++ trunk/Source/WebCore/ChangeLog 2012-02-16 15:34:17 UTC (rev 107933)
@@ -1,3 +1,30 @@
+2012-02-16 Pavel Feldman <[email protected]>
+
+ Web Inspector: move style disable checkboxes to the left
+ https://bugs.webkit.org/show_bug.cgi?id=78780
+
+ Reviewed by Vsevolod Vlasov.
+
+ * inspector/front-end/StylesSidebarPane.js:
+ (WebInspector.StylePropertiesSection):
+ (WebInspector.StylePropertiesSection.prototype._handleSelectorDoubleClick):
+ (WebInspector.StylePropertyTreeElement.prototype):
+ * inspector/front-end/elementsPanel.css:
+ (.styles-section.matched-styles .properties):
+ (.styles-section.matched-styles .properties li):
+ (.styles-section .properties li.parent::before):
+ (.styles-section .properties li.parent.expanded::before):
+ (.styles-section.matched-styles .properties li.parent .expand-element):
+ (.styles-section.matched-styles .properties li.parent.expanded .expand-element):
+ (.styles-section.computed-style .properties li.parent::before):
+ (.styles-section.computed-style .properties li.parent.expanded::before):
+ (.styles-section.matched-styles:not(.read-only):hover .properties .enabled-button):
+ (.styles-section.matched-styles:not(.read-only) .properties li.disabled .enabled-button):
+ (.styles-section .properties .enabled-button):
+ (.styles-section.matched-styles .properties ol.expanded):
+ * inspector/front-end/treeoutline.js:
+ (TreeElement.treeElementDoubleClicked):
+
2012-02-16 Yury Semikhatsky <[email protected]>
Web Inspector: show memory counter graphics when switching to memory view
Modified: trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js (107932 => 107933)
--- trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2012-02-16 15:32:21 UTC (rev 107932)
+++ trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2012-02-16 15:34:17 UTC (rev 107933)
@@ -894,7 +894,7 @@
WebInspector.StylePropertiesSection = function(parentPane, styleRule, editable, isInherited, isFirstSection)
{
WebInspector.PropertiesSection.call(this, "");
- this.element.className = "styles-section monospace" + (isFirstSection ? " first-styles-section" : "");
+ this.element.className = "styles-section matched-styles monospace" + (isFirstSection ? " first-styles-section" : "");
if (styleRule.media) {
for (var i = styleRule.media.length - 1; i >= 0; --i) {
@@ -1190,6 +1190,7 @@
{
this._startEditingOnMouseEvent();
event.stopPropagation();
+ event.preventDefault();
},
_startEditingOnMouseEvent: function()
@@ -1612,6 +1613,9 @@
nameElement.title = this.property.propertyText;
this.nameElement = nameElement;
+ this._expandElement = document.createElement("span");
+ this._expandElement.className = "expand-element";
+
var valueElement = document.createElement("span");
valueElement.className = "value";
this.valueElement = valueElement;
@@ -1836,10 +1840,11 @@
return;
// Append the checkbox for root elements of an editable section.
- if (enabledCheckboxElement && this.treeOutline.section && this.treeOutline.section.editable && this.parent.root)
+ if (enabledCheckboxElement && this.treeOutline.section && this.parent.root && !this.section.computedStyle)
this.listItemElement.appendChild(enabledCheckboxElement);
this.listItemElement.appendChild(nameElement);
this.listItemElement.appendChild(document.createTextNode(": "));
+ this.listItemElement.appendChild(this._expandElement);
this.listItemElement.appendChild(valueElement);
this.listItemElement.appendChild(document.createTextNode(";"));
@@ -1957,6 +1962,7 @@
{
this.startEditing(event.target);
event.stopPropagation();
+ event.preventDefault();
},
_isNameElement: function(element)
@@ -1975,6 +1981,9 @@
if (this.parent.shorthand)
return;
+ if (selectElement === this._expandElement)
+ return;
+
if (this.treeOutline.section && !this.treeOutline.section.editable)
return;
@@ -2378,6 +2387,18 @@
if (styleText.length && !/;\s*$/.test(styleText))
styleText += ";";
this.property.setText(styleText, majorChange, callback.bind(this, userOperationFinishedCallback.bind(null, this._parentPane, updateInterface), this.originalPropertyText));
+ },
+
+ ondblclick: function()
+ {
+ return true; // handled
+ },
+
+ isEventWithinDisclosureTriangle: function(event)
+ {
+ if (!this.section.computedStyle)
+ return event.target === this._expandElement;
+ return TreeElement.prototype.isEventWithinDisclosureTriangle.call(this, event);
}
}
Modified: trunk/Source/WebCore/inspector/front-end/elementsPanel.css (107932 => 107933)
--- trunk/Source/WebCore/inspector/front-end/elementsPanel.css 2012-02-16 15:32:21 UTC (rev 107932)
+++ trunk/Source/WebCore/inspector/front-end/elementsPanel.css 2012-02-16 15:34:17 UTC (rev 107933)
@@ -297,11 +297,15 @@
.styles-section .properties {
display: none;
margin: 0;
- padding: 2px 4px 0 8px;
+ padding: 2px 4px 0 6px;
list-style: none;
clear: both;
}
+.styles-section.matched-styles .properties {
+ padding-left: 0;
+}
+
.styles-section.no-affect .properties li {
opacity: 0.5;
}
@@ -321,9 +325,8 @@
overflow: hidden;
cursor: auto;
}
-
-.styles-section .properties li.parent {
- margin-left: 1px;
+.styles-section.matched-styles .properties li {
+ margin-left: 0 !important;
}
.styles-section .properties li.child-editing {
@@ -343,7 +346,26 @@
}
.styles-section .properties li.parent::before {
+ content: none;
+}
+
+.styles-section .properties li.parent.expanded::before {
+ content: none;
+}
+
+.styles-section.matched-styles .properties li.parent .expand-element {
content: url(Images/treeRightTriangleBlack.png);
+ margin-right: 1px;
+ margin-left: -5px;
+ opacity: 0.6;
+}
+
+.styles-section.matched-styles .properties li.parent.expanded .expand-element {
+ content: url(Images/treeDownTriangleBlack.png);
+}
+
+.styles-section.computed-style .properties li.parent::before {
+ content: url(Images/treeRightTriangleBlack.png);
opacity: 0.75;
float: left;
width: 8px;
@@ -354,7 +376,7 @@
cursor: default;
}
-.styles-section .properties li.parent.expanded::before {
+.styles-section.computed-style .properties li.parent.expanded::before {
content: url(Images/treeDownTriangleBlack.png);
margin-top: 1px;
}
@@ -364,24 +386,28 @@
padding-bottom: 3px;
}
-.styles-section:hover .properties .enabled-button {
- display: block;
+.styles-section.matched-styles:not(.read-only):hover .properties .enabled-button {
+ visibility: visible;
}
-.styles-section .properties li.disabled .enabled-button {
- display: block;
+.styles-section.matched-styles:not(.read-only) .properties li.disabled .enabled-button {
+ visibility: visible;
}
.styles-section .properties .enabled-button {
- display: none;
- float: right;
+ visibility: hidden;
+ float: left;
font-size: 10px;
- margin: 0 0 0 4px;
+ margin: 0 5px 0 0;
vertical-align: top;
position: relative;
z-index: 1;
}
+.styles-section.matched-styles .properties ol.expanded {
+ margin-left: 16px;
+}
+
.styles-section .properties .overloaded, .styles-section .properties .inactive, .styles-section .properties .disabled {
text-decoration: line-through;
}
Modified: trunk/Source/WebCore/inspector/front-end/treeoutline.js (107932 => 107933)
--- trunk/Source/WebCore/inspector/front-end/treeoutline.js 2012-02-16 15:32:21 UTC (rev 107932)
+++ trunk/Source/WebCore/inspector/front-end/treeoutline.js 2012-02-16 15:34:17 UTC (rev 107933)
@@ -859,9 +859,11 @@
if (!element || !element.treeElement)
return;
- if (element.treeElement.ondblclick)
- element.treeElement.ondblclick.call(element.treeElement, event);
- else if (element.treeElement.hasChildren && !element.treeElement.expanded)
+ if (element.treeElement.ondblclick) {
+ var handled = element.treeElement.ondblclick.call(element.treeElement, event);
+ if (handled)
+ return;
+ } else if (element.treeElement.hasChildren && !element.treeElement.expanded)
element.treeElement.expand();
}
