Changeset 71234 in webkit


Ignore:
Timestamp:
Nov 3, 2010 6:49:11 AM (13 years ago)
Author:
pfeldman@chromium.org
Message:

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):
Location:
trunk/WebCore
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/WebCore/ChangeLog

    r71232 r71234  
     12010-11-03  Pavel Feldman  <pfeldman@chromium.org>
     2
     3        Reviewed by Jeremy Orlow.
     4
     5        Web Inspector: brush up breakpoints UI and UX.
     6        https://bugs.webkit.org/show_bug.cgi?id=48901
     7
     8        * inspector/front-end/BreakpointManager.js:
     9        (WebInspector.DOMBreakpoint.prototype.populateLabelElement):
     10        (WebInspector.XHRBreakpoint.prototype.populateLabelElement):
     11        * inspector/front-end/BreakpointsSidebarPane.js:
     12        (WebInspector.BreakpointsSidebarPane.prototype.addBreakpointItem):
     13        (WebInspector.XHRBreakpointsSidebarPane.prototype.addBreakpointItem):
     14        (WebInspector.XHRBreakpointsSidebarPane.prototype._hideEditBreakpointDialog):
     15        (WebInspector.BreakpointItem):
     16        * inspector/front-end/ElementsTreeOutline.js:
     17        (WebInspector.ElementsTreeElement.prototype._populateTagContextMenu.handlerFunction):
     18        (WebInspector.ElementsTreeElement.prototype._populateTagContextMenu):
     19        * inspector/front-end/PropertiesSection.js:
     20        (WebInspector.PropertiesSection):
     21        * inspector/front-end/inspector.css:
     22        (.monospace):
     23        (body.platform-mac.platform-mac-snowleopard .source-code):
     24        (body.platform-windows .monospace, body.platform-windows .source-code):
     25        (body.platform-linux .monospace, body.platform-linux .source-code):
     26        (.source-code):
     27        (.section .header):
     28        (.section .header::before):
     29        (.section .header .title, .event-bar .header .title):
     30        (.section .header .subtitle, .event-bar .header .subtitle):
     31        (.section.expanded .properties, .event-bar.expanded .event-properties):
     32        (.event-listener-breakpoints .event-category):
     33        (.event-listener-breakpoints.properties-tree .children li):
     34        (.event-listener-breakpoints .checkbox-elem):
     35        (.event-bar):
     36        (.event-bars .event-bar .header .title):
     37        (.event-bars .event-bar .header::before):
     38        (.pane > .body .info):
     39        (.pane > .body .placard + .info):
     40        (ol.breakpoint-list):
     41        (.breakpoint-list li):
     42        (.pane .breakpoint-hit):
     43        (.cursor-pointer):
     44        (.cursor-auto):
     45
    1462010-11-03  Nikolas Zimmermann  <nzimmermann@rim.com>
    247

  • trunk/WebCore/inspector/front-end/BreakpointManager.js

    r71113 r71234  
    473473
    474474WebInspector.DOMBreakpoint.prototype = {
    475     click: function()
    476     {
    477         WebInspector.updateFocusedNode(this._nodeId);
    478     },
    479 
    480475    compareTo: function(other)
    481476    {
    … …  
    485480    populateLabelElement: function(element)
    486481    {
    487         element.appendChild(WebInspector.panels.elements.linkifyNodeById(this._nodeId));
    488         element.appendChild(document.createTextNode(" - "));
    489         element.appendChild(document.createTextNode(WebInspector.domBreakpointTypeLabel(this._domEventType)));
     482        // FIXME: this should belong to the view, not the manager.
     483        var linkifiedNode = WebInspector.panels.elements.linkifyNodeById(this._nodeId);
     484        linkifiedNode.addStyleClass("monospace");
     485        element.appendChild(linkifiedNode);
     486        var description = document.createElement("div");
     487        description.className = "source-text";
     488        description.textContent = WebInspector.domBreakpointTypeLabel(this._domEventType);
     489        element.appendChild(description);
    490490    },
    491491
    … …  
    600600            label = WebInspector.UIString("URL contains \"%s\"", this._url);
    601601        element.appendChild(document.createTextNode(label));
     602        element.addStyleClass("cursor-auto");
    602603    },
    603604

  • trunk/WebCore/inspector/front-end/BreakpointsSidebarPane.js

    r71113 r71234  
    6464        this._addListElement(element, currentElement);
    6565
    66         element.addEventListener("click", this._breakpointItemClicked.bind(this, breakpointItem), false);
     66        if (breakpointItem.click) {
     67            element.addStyleClass("cursor-pointer");
     68            element.addEventListener("click", breakpointItem.click.bind(breakpointItem), false);
     69        }
    6770        element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this, breakpointItem), true);
    68     },
    69 
    70     _breakpointItemClicked: function(breakpointItem, event)
    71     {
    72         breakpointItem.click(event);
    7371    },
    7472
    … …  
    122120
    123121WebInspector.XHRBreakpointsSidebarPane.prototype = {
     122    addBreakpointItem: function(breakpointItem)
     123    {
     124        WebInspector.BreakpointsSidebarPane.prototype.addBreakpointItem.call(this, breakpointItem);
     125        breakpointItem._labelElement.addEventListener("dblclick", this._startEditingBreakpoint.bind(this, breakpointItem), false);
     126    },
     127
    124128    _startEditingBreakpoint: function(breakpointItem)
    125129    {
    … …  
    155159        } else if (breakpointItem)
    156160            breakpointItem.element.removeStyleClass("hidden");
    157     },
    158 
    159     _breakpointItemClicked: function(breakpointItem, event)
    160     {
    161         this._startEditingBreakpoint(breakpointItem);
    162161    }
    163162}
    … …  
    184183    this._breakpoint.addEventListener("label-changed", this._labelChanged, this);
    185184    this._breakpoint.addEventListener("removed", this.dispatchEventToListeners.bind(this, "removed"));
     185    if (breakpoint.click)
     186        this.click = breakpoint.click.bind(breakpoint);
    186187}
    187188
    … …  
    195196    {
    196197        return this._breakpoint.compareTo(other._breakpoint);
    197     },
    198 
    199     click: function(event)
    200     {
    201         this._breakpoint.click(event);
    202198    },
    203199

  • trunk/WebCore/inspector/front-end/ElementsTreeOutline.js

    r69567 r71234  
    759759            contextMenu.appendSeparator();
    760760
     761            function handlerFunction(nodeId, breakType)
     762            {
     763                WebInspector.breakpointManager.createDOMBreakpoint(nodeId, breakType);
     764                WebInspector.panels.elements.sidebarPanes.domBreakpoints.expand();
     765            }
    761766            var node = this.representedObject;
    762767            for (var key in WebInspector.DOMBreakpointTypes) {
    … …  
    765770                var breakpoint = node.breakpoints[type];
    766771                if (!breakpoint)
    767                     var handler = WebInspector.breakpointManager.createDOMBreakpoint.bind(WebInspector.breakpointManager, node.id, type);
     772                    var handler = handlerFunction.bind(this, node.id, type);
    768773                else
    769774                    var handler = breakpoint.remove.bind(breakpoint);

  • trunk/WebCore/inspector/front-end/inspector.css

    r71154 r71234  
    13311331    -webkit-background-origin: padding;
    13321332    -webkit-background-clip: padding;
    1333     opacity: 0.8;
    13341333}
    13351334
    … …  
    13411340    height: 8px;
    13421341    content: url(Images/treeRightTriangleBlack.png);
     1342    opacity: 0.8;
    13431343}
    13441344
    … …  
    13841384.section.expanded .properties, .event-bar.expanded .event-properties {
    13851385    display: block;
    1386     padding-left: 18px;
     1386    padding-left: 16px;
    13871387}
    13881388
    … …  
    14491449
    14501450.event-listener-breakpoints .event-category {
    1451     font-size: 12px;
     1451    font-size: 11px;
    14521452    font-weight: bold;
    1453     color: rgb(110, 110, 110);
     1453    color: rgb(96, 96, 96);
     1454    padding-top: 2px;
    14541455}
    14551456
    14561457.event-listener-breakpoints.properties-tree .children li {
    1457     margin-left: 17px;
     1458    margin-left: 12px;
     1459    height: 16px;
    14581460}
    14591461
    … …  
    14611463    font-size: 10px;
    14621464    float: left;
    1463     margin-top: 1px;
    1464     margin-left: 0px;
     1465    top: -2px;
     1466    position: relative;
     1467    left: -1px;
    14651468}
    14661469
    … …  
    14751478.event-bar {
    14761479    position: relative;
    1477     left: 12px;
     1480    left: 10px;
    14781481}
    14791482
    … …  
    14891492.event-bars .event-bar .header .title {
    14901493    font-weight: normal;
    1491     color: #333;
     1494    color: black;
    14921495    text-shadow: white 0 1px 0;
    14931496}
    … …  
    17241727    font-size: 10px;
    17251728    padding: 6px;
    1726     color: gray;
     1729    color: black;
    17271730}
    17281731
    17291732.pane > .body .placard + .info {
    1730     border-top: 1px solid gray
     1733    border-top: 1px solid rgb(189, 189, 189);
     1734    background-color: rgb(255, 255, 194);
    17311735}
    17321736
    … …  
    40864090
    40874091ol.breakpoint-list {
    4088     -webkit-padding-start: 2px;
     4092    -webkit-padding-start: 0;
    40894093    list-style: none;
    40904094    margin: 0;
    … …  
    40954099    text-overflow: ellipsis;
    40964100    overflow: hidden;
    4097     margin: 4px 0;
    4098     color: rgb(33%, 33%, 33%);
    4099     cursor: pointer;
     4101    padding: 2px 0;
     4102    color: black;
    41004103}
    41014104
    … …  
    41204123
    41214124.pane .breakpoint-hit {
    4122     background-color: yellow;
     4125    background-color: rgb(255, 255, 194);
    41234126}
    41244127
    … …  
    43824385    cursor: pointer;
    43834386}
     4387
     4388.cursor-pointer {
     4389    cursor: pointer;
     4390}
     4391
     4392.cursor-auto {
     4393    cursor: auto;
     4394}
Note: See TracChangeset for help on using the changeset viewer.