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):

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@107933 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 50eff59..02f6b4b 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,30 @@
+2012-02-16  Pavel Feldman  <pfeldman@google.com>
+
+        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  <yurys@chromium.org>
 
         Web Inspector: show memory counter graphics when switching to memory view

diff --git a/Source/WebCore/inspector/front-end/StylesSidebarPane.js b/Source/WebCore/inspector/front-end/StylesSidebarPane.js
index c3e6a9d..55df300 100644 (file)
--- a/Source/WebCore/inspector/front-end/StylesSidebarPane.js
+++ b/Source/WebCore/inspector/front-end/StylesSidebarPane.js
@@ -894,7 +894,7 @@ WebInspector.ComputedStyleSidebarPane.prototype.__proto__ = WebInspector.Sidebar
 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 @@ WebInspector.StylePropertiesSection.prototype = {
     {
         this._startEditingOnMouseEvent();
         event.stopPropagation();
+        event.preventDefault();
     },
 
     _startEditingOnMouseEvent: function()
@@ -1612,6 +1613,9 @@ WebInspector.StylePropertyTreeElement.prototype = {
         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 @@ WebInspector.StylePropertyTreeElement.prototype = {
             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 @@ WebInspector.StylePropertyTreeElement.prototype = {
     {
         this.startEditing(event.target);
         event.stopPropagation();
+        event.preventDefault();
     },
 
     _isNameElement: function(element)
@@ -1975,6 +1981,9 @@ WebInspector.StylePropertyTreeElement.prototype = {
         if (this.parent.shorthand)
             return;
 
+        if (selectElement === this._expandElement)
+            return;
+
         if (this.treeOutline.section && !this.treeOutline.section.editable)
             return;
 
@@ -2378,6 +2387,18 @@ WebInspector.StylePropertyTreeElement.prototype = {
         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);
     }
 }
 

diff --git a/Source/WebCore/inspector/front-end/elementsPanel.css b/Source/WebCore/inspector/front-end/elementsPanel.css
index f8881ce..7c261d3 100644 (file)
--- a/Source/WebCore/inspector/front-end/elementsPanel.css
+++ b/Source/WebCore/inspector/front-end/elementsPanel.css
@@ -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,6 +346,25 @@
 }
 
 .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;
@@ -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;
 }

diff --git a/Source/WebCore/inspector/front-end/treeoutline.js b/Source/WebCore/inspector/front-end/treeoutline.js
index ce36fe8..528f41b 100644 (file)
--- a/Source/WebCore/inspector/front-end/treeoutline.js
+++ b/Source/WebCore/inspector/front-end/treeoutline.js
@@ -859,9 +859,11 @@ TreeElement.treeElementDoubleClicked = function(event)
     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();
 }