2010-11-03 Pavel Feldman <pfeldman@chromium.org>
authorpfeldman@chromium.org <pfeldman@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 3 Nov 2010 13:49:11 +0000 (13:49 +0000)
committerpfeldman@chromium.org <pfeldman@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 3 Nov 2010 13:49:11 +0000 (13:49 +0000)
        Reviewed by Jeremy Orlow.

        Web Inspector: brush up breakpoints UI and UX.
        https://bugs.webkit.org/show_bug.cgi?id=48901

        * inspector/front-end/BreakpointManager.js:
        (WebInspector.DOMBreakpoint.prototype.populateLabelElement):
        (WebInspector.XHRBreakpoint.prototype.populateLabelElement):
        * inspector/front-end/BreakpointsSidebarPane.js:
        (WebInspector.BreakpointsSidebarPane.prototype.addBreakpointItem):
        (WebInspector.XHRBreakpointsSidebarPane.prototype.addBreakpointItem):
        (WebInspector.XHRBreakpointsSidebarPane.prototype._hideEditBreakpointDialog):
        (WebInspector.BreakpointItem):
        * inspector/front-end/ElementsTreeOutline.js:
        (WebInspector.ElementsTreeElement.prototype._populateTagContextMenu.handlerFunction):
        (WebInspector.ElementsTreeElement.prototype._populateTagContextMenu):
        * inspector/front-end/PropertiesSection.js:
        (WebInspector.PropertiesSection):
        * inspector/front-end/inspector.css:
        (.monospace):
        (body.platform-mac.platform-mac-snowleopard .source-code):
        (body.platform-windows .monospace, body.platform-windows .source-code):
        (body.platform-linux .monospace, body.platform-linux .source-code):
        (.source-code):
        (.section .header):
        (.section .header::before):
        (.section .header .title, .event-bar .header .title):
        (.section .header .subtitle, .event-bar .header .subtitle):
        (.section.expanded .properties, .event-bar.expanded .event-properties):
        (.event-listener-breakpoints .event-category):
        (.event-listener-breakpoints.properties-tree .children li):
        (.event-listener-breakpoints .checkbox-elem):
        (.event-bar):
        (.event-bars .event-bar .header .title):
        (.event-bars .event-bar .header::before):
        (.pane > .body .info):
        (.pane > .body .placard + .info):
        (ol.breakpoint-list):
        (.breakpoint-list li):
        (.pane .breakpoint-hit):
        (.cursor-pointer):
        (.cursor-auto):

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

WebCore/ChangeLog
WebCore/inspector/front-end/BreakpointManager.js
WebCore/inspector/front-end/BreakpointsSidebarPane.js
WebCore/inspector/front-end/ElementsTreeOutline.js
WebCore/inspector/front-end/inspector.css

index 8dd4c84a735d6b73246a7446282a8cd021aa5f4d..bb1ae98ad5b01d7632589678070c565987ec0224 100644 (file)
@@ -1,3 +1,48 @@
+2010-11-03  Pavel Feldman  <pfeldman@chromium.org>
+
+        Reviewed by Jeremy Orlow.
+
+        Web Inspector: brush up breakpoints UI and UX.
+        https://bugs.webkit.org/show_bug.cgi?id=48901
+
+        * inspector/front-end/BreakpointManager.js:
+        (WebInspector.DOMBreakpoint.prototype.populateLabelElement):
+        (WebInspector.XHRBreakpoint.prototype.populateLabelElement):
+        * inspector/front-end/BreakpointsSidebarPane.js:
+        (WebInspector.BreakpointsSidebarPane.prototype.addBreakpointItem):
+        (WebInspector.XHRBreakpointsSidebarPane.prototype.addBreakpointItem):
+        (WebInspector.XHRBreakpointsSidebarPane.prototype._hideEditBreakpointDialog):
+        (WebInspector.BreakpointItem):
+        * inspector/front-end/ElementsTreeOutline.js:
+        (WebInspector.ElementsTreeElement.prototype._populateTagContextMenu.handlerFunction):
+        (WebInspector.ElementsTreeElement.prototype._populateTagContextMenu):
+        * inspector/front-end/PropertiesSection.js:
+        (WebInspector.PropertiesSection):
+        * inspector/front-end/inspector.css:
+        (.monospace):
+        (body.platform-mac.platform-mac-snowleopard .source-code):
+        (body.platform-windows .monospace, body.platform-windows .source-code):
+        (body.platform-linux .monospace, body.platform-linux .source-code):
+        (.source-code):
+        (.section .header):
+        (.section .header::before):
+        (.section .header .title, .event-bar .header .title):
+        (.section .header .subtitle, .event-bar .header .subtitle):
+        (.section.expanded .properties, .event-bar.expanded .event-properties):
+        (.event-listener-breakpoints .event-category):
+        (.event-listener-breakpoints.properties-tree .children li):
+        (.event-listener-breakpoints .checkbox-elem):
+        (.event-bar):
+        (.event-bars .event-bar .header .title):
+        (.event-bars .event-bar .header::before):
+        (.pane > .body .info):
+        (.pane > .body .placard + .info):
+        (ol.breakpoint-list):
+        (.breakpoint-list li):
+        (.pane .breakpoint-hit):
+        (.cursor-pointer):
+        (.cursor-auto):
+
 2010-11-03  Nikolas Zimmermann  <nzimmermann@rim.com>
 
         Not reviewed.
index 4be56a180b48969b65c4247be24cb8aca11969b3..221a7774b9ba6dfe1d571e0f4eedfe961b3c9e95 100644 (file)
@@ -472,11 +472,6 @@ WebInspector.DOMBreakpoint = function(manager, frontendId, nodeId, domEventType)
 }
 
 WebInspector.DOMBreakpoint.prototype = {
-    click: function()
-    {
-        WebInspector.updateFocusedNode(this._nodeId);
-    },
-
     compareTo: function(other)
     {
         return this._compare(this._domEventType, other._domEventType);
@@ -484,9 +479,14 @@ WebInspector.DOMBreakpoint.prototype = {
 
     populateLabelElement: function(element)
     {
-        element.appendChild(WebInspector.panels.elements.linkifyNodeById(this._nodeId));
-        element.appendChild(document.createTextNode(" - "));
-        element.appendChild(document.createTextNode(WebInspector.domBreakpointTypeLabel(this._domEventType)));
+        // FIXME: this should belong to the view, not the manager.
+        var linkifiedNode = WebInspector.panels.elements.linkifyNodeById(this._nodeId);
+        linkifiedNode.addStyleClass("monospace");
+        element.appendChild(linkifiedNode);
+        var description = document.createElement("div");
+        description.className = "source-text";
+        description.textContent = WebInspector.domBreakpointTypeLabel(this._domEventType);
+        element.appendChild(description);
     },
 
     populateStatusMessageElement: function(element, eventData)
@@ -599,6 +599,7 @@ WebInspector.XHRBreakpoint.prototype = {
         else
             label = WebInspector.UIString("URL contains \"%s\"", this._url);
         element.appendChild(document.createTextNode(label));
+        element.addStyleClass("cursor-auto");
     },
 
     populateStatusMessageElement: function(element)
index cff88ab5477f90af29c3bc50d8c247b2c746572d..f0103301c71a8390e8f0789f8811b24a3fff2fd8 100644 (file)
@@ -63,15 +63,13 @@ WebInspector.BreakpointsSidebarPane.prototype = {
         }
         this._addListElement(element, currentElement);
 
-        element.addEventListener("click", this._breakpointItemClicked.bind(this, breakpointItem), false);
+        if (breakpointItem.click) {
+            element.addStyleClass("cursor-pointer");
+            element.addEventListener("click", breakpointItem.click.bind(breakpointItem), false);
+        }
         element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this, breakpointItem), true);
     },
 
-    _breakpointItemClicked: function(breakpointItem, event)
-    {
-        breakpointItem.click(event);
-    },
-
     _contextMenuEventFired: function(breakpointItem, event)
     {
         var contextMenu = new WebInspector.ContextMenu();
@@ -121,6 +119,12 @@ WebInspector.XHRBreakpointsSidebarPane = function()
 }
 
 WebInspector.XHRBreakpointsSidebarPane.prototype = {
+    addBreakpointItem: function(breakpointItem)
+    {
+        WebInspector.BreakpointsSidebarPane.prototype.addBreakpointItem.call(this, breakpointItem);
+        breakpointItem._labelElement.addEventListener("dblclick", this._startEditingBreakpoint.bind(this, breakpointItem), false);
+    },
+
     _startEditingBreakpoint: function(breakpointItem)
     {
         if (this._editingBreakpoint)
@@ -154,11 +158,6 @@ WebInspector.XHRBreakpointsSidebarPane.prototype = {
             WebInspector.breakpointManager.createXHRBreakpoint(inputElement.textContent.toLowerCase());
         } else if (breakpointItem)
             breakpointItem.element.removeStyleClass("hidden");
-    },
-
-    _breakpointItemClicked: function(breakpointItem, event)
-    {
-        this._startEditingBreakpoint(breakpointItem);
     }
 }
 
@@ -183,6 +182,8 @@ WebInspector.BreakpointItem = function(breakpoint)
     this._breakpoint.addEventListener("hit-state-changed", this._hitStateChanged, this);
     this._breakpoint.addEventListener("label-changed", this._labelChanged, this);
     this._breakpoint.addEventListener("removed", this.dispatchEventToListeners.bind(this, "removed"));
+    if (breakpoint.click)
+        this.click = breakpoint.click.bind(breakpoint);
 }
 
 WebInspector.BreakpointItem.prototype = {
@@ -196,11 +197,6 @@ WebInspector.BreakpointItem.prototype = {
         return this._breakpoint.compareTo(other._breakpoint);
     },
 
-    click: function(event)
-    {
-        this._breakpoint.click(event);
-    },
-
     populateEditElement: function(element)
     {
         this._breakpoint.populateEditElement(element);
index 1d546c267364dc57cc0a996ea74131a67badb311..44040515b7fb5ddf822c37590788a21dfd6de3f7 100644 (file)
@@ -758,13 +758,18 @@ WebInspector.ElementsTreeElement.prototype = {
             // Add debbuging-related actions
             contextMenu.appendSeparator();
 
+            function handlerFunction(nodeId, breakType)
+            {
+                WebInspector.breakpointManager.createDOMBreakpoint(nodeId, breakType);
+                WebInspector.panels.elements.sidebarPanes.domBreakpoints.expand();
+            }
             var node = this.representedObject;
             for (var key in WebInspector.DOMBreakpointTypes) {
                 var type = WebInspector.DOMBreakpointTypes[key];
                 var label = WebInspector.domBreakpointTypeContextMenuLabel(type);
                 var breakpoint = node.breakpoints[type];
                 if (!breakpoint)
-                    var handler = WebInspector.breakpointManager.createDOMBreakpoint.bind(WebInspector.breakpointManager, node.id, type);
+                    var handler = handlerFunction.bind(this, node.id, type);
                 else
                     var handler = breakpoint.remove.bind(breakpoint);
                 contextMenu.appendCheckboxItem(label, handler, !!breakpoint);
index 90f062dd978e80092f12ff18452b0f155c57ecff..a7a18522d46f58cffe2b6f68ff49ad626fbad334 100644 (file)
@@ -1330,7 +1330,6 @@ body.inactive .placard.selected {
     white-space: nowrap;
     -webkit-background-origin: padding;
     -webkit-background-clip: padding;
-    opacity: 0.8;
 }
 
 .section .header::before {
@@ -1340,6 +1339,7 @@ body.inactive .placard.selected {
     width: 8px;
     height: 8px;
     content: url(Images/treeRightTriangleBlack.png);
+    opacity: 0.8;
 }
 
 .section.expanded .header::before {
@@ -1383,7 +1383,7 @@ body.inactive .placard.selected {
 
 .section.expanded .properties, .event-bar.expanded .event-properties {
     display: block;
-    padding-left: 18px;
+    padding-left: 16px;
 }
 
 .section.no-affect .properties li {
@@ -1448,20 +1448,23 @@ body.inactive .placard.selected {
 }
 
 .event-listener-breakpoints .event-category {
-    font-size: 12px;
+    font-size: 11px;
     font-weight: bold;
-    color: rgb(110, 110, 110);
+    color: rgb(96, 96, 96);
+    padding-top: 2px;
 }
 
 .event-listener-breakpoints.properties-tree .children li {
-    margin-left: 17px;
+    margin-left: 12px;
+    height: 16px;
 }
 
 .event-listener-breakpoints .checkbox-elem {
     font-size: 10px;
     float: left;
-    margin-top: 1px;
-    margin-left: 0px;
+    top: -2px;
+    position: relative;
+    left: -1px;
 }
 
 .section .event-bars {
@@ -1474,7 +1477,7 @@ body.inactive .placard.selected {
 
 .event-bar {
     position: relative;
-    left: 12px;
+    left: 10px;
 }
 
 .event-bars .event-bar .header {
@@ -1488,7 +1491,7 @@ body.inactive .placard.selected {
 
 .event-bars .event-bar .header .title {
     font-weight: normal;
-    color: #333;
+    color: black;
     text-shadow: white 0 1px 0; 
 }
 
@@ -1723,11 +1726,12 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
     font-style: italic;
     font-size: 10px;
     padding: 6px;
-    color: gray;
+    color: black;
 }
 
 .pane > .body .placard + .info {
-    border-top: 1px solid gray
+    border-top: 1px solid rgb(189, 189, 189);
+    background-color: rgb(255, 255, 194);
 }
 
 .pane.expanded > .body, .pane.expanded > .growbar {
@@ -4085,7 +4089,7 @@ button.enable-toggle-status-bar-item .glyph {
 }
 
 ol.breakpoint-list {
-    -webkit-padding-start: 2px;
+    -webkit-padding-start: 0;
     list-style: none;
     margin: 0;
 }
@@ -4094,9 +4098,8 @@ ol.breakpoint-list {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    margin: 4px 0;
-    color: rgb(33%, 33%, 33%);
-    cursor: pointer;
+    padding: 2px 0;
+    color: black;
 }
 
 .breakpoint-list li:hover {
@@ -4119,7 +4122,7 @@ ol.breakpoint-list {
 }
 
 .pane .breakpoint-hit {
-    background-color: yellow;
+    background-color: rgb(255, 255, 194);
 }
 
 .webkit-html-js-node, .webkit-html-css-node {
@@ -4381,3 +4384,11 @@ a.worker-item:hover {
     text-decoration: underline;
     cursor: pointer;
 }
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.cursor-auto {
+    cursor: auto;
+}
\ No newline at end of file