Changeset 46402 in webkit


Ignore:
Timestamp:
Jul 26, 2009 8:36:26 AM (15 years ago)
Author:
pfeldman@chromium.org
Message:

2009-07-26 Pavel Feldman <pfeldman@chromium.org>

Reviewed by Timothy Hatcher.

Web Inspector: Implement the breakpoints sidebar pane.
This change adds simple UI support into the existing
BreakpointSidebarPane.

https://bugs.webkit.org/show_bug.cgi?id=11175

  • inspector/front-end/Breakpoint.js: (WebInspector.Breakpoint.prototype.set enabled): (WebInspector.Breakpoint.prototype.get label): (WebInspector.Breakpoint.prototype.get id):
  • inspector/front-end/BreakpointsSidebarPane.js: (WebInspector.BreakpointsSidebarPane): (WebInspector.BreakpointsSidebarPane.prototype.addBreakpoint): (WebInspector.BreakpointsSidebarPane.prototype._appendBreakpointElement): (WebInspector.BreakpointsSidebarPane.prototype._appendBreakpointElement.labelClicked): (WebInspector.BreakpointsSidebarPane.prototype.removeBreakpoint): (WebInspector.BreakpointsSidebarPane.prototype._breakpointEnableChanged):
  • inspector/front-end/ScriptsPanel.js: (WebInspector.ScriptsPanel): (WebInspector.ScriptsPanel.prototype.scriptOrResourceForID):
  • inspector/front-end/inspector.css:
Location:
trunk/WebCore
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/WebCore/ChangeLog

    r46400 r46402  
     12009-07-26  Pavel Feldman  <pfeldman@chromium.org>
     2
     3        Reviewed by Timothy Hatcher.
     4
     5        Web Inspector: Implement the breakpoints sidebar pane.
     6        This change adds simple UI support into the existing
     7        BreakpointSidebarPane.
     8
     9        https://bugs.webkit.org/show_bug.cgi?id=11175
     10
     11        * inspector/front-end/Breakpoint.js:
     12        (WebInspector.Breakpoint.prototype.set enabled):
     13        (WebInspector.Breakpoint.prototype.get label):
     14        (WebInspector.Breakpoint.prototype.get id):
     15        * inspector/front-end/BreakpointsSidebarPane.js:
     16        (WebInspector.BreakpointsSidebarPane):
     17        (WebInspector.BreakpointsSidebarPane.prototype.addBreakpoint):
     18        (WebInspector.BreakpointsSidebarPane.prototype._appendBreakpointElement):
     19        (WebInspector.BreakpointsSidebarPane.prototype._appendBreakpointElement.labelClicked):
     20        (WebInspector.BreakpointsSidebarPane.prototype.removeBreakpoint):
     21        (WebInspector.BreakpointsSidebarPane.prototype._breakpointEnableChanged):
     22        * inspector/front-end/ScriptsPanel.js:
     23        (WebInspector.ScriptsPanel):
     24        (WebInspector.ScriptsPanel.prototype.scriptOrResourceForID):
     25        * inspector/front-end/inspector.css:
     26
    1272009-07-16  Shinichiro Hamaji  <hamaji@chromium.org>
    228
  • trunk/WebCore/inspector/front-end/Breakpoint.js

    r37289 r46402  
    3030    this.sourceID = sourceID;
    3131    this._enabled = true;
     32    this._sourceText = "";
    3233}
    3334
     
    4950        else
    5051            this.dispatchEventToListeners("disabled");
     52    },
     53
     54    get sourceText()
     55    {
     56        return this._sourceText;
     57    },
     58
     59    set sourceText(text)
     60    {
     61        this._sourceText = text;
     62        this.dispatchEventToListeners("text-changed");
     63    },
     64
     65    get label()
     66    {
     67        var displayName = (this.url ? WebInspector.displayNameForURL(this.url) : WebInspector.UIString("(program)"));
     68        return displayName + ":" + this.line;
     69    },
     70
     71    get id()
     72    {
     73        return this.sourceID + ":" + this.line;
    5174    }
    5275}
  • trunk/WebCore/inspector/front-end/BreakpointsSidebarPane.js

    r37932 r46402  
    2828    WebInspector.SidebarPane.call(this, WebInspector.UIString("Breakpoints"));
    2929
    30     this.breakpoints = [];
     30    this.breakpoints = {};
     31
     32    this.listElement = document.createElement("ol");
     33    this.listElement.className = "breakpoint-list";
    3134
    3235    this.emptyElement = document.createElement("div");
     
    4043    addBreakpoint: function(breakpoint)
    4144    {
    42         this.breakpoints.push(breakpoint);
     45        if (this.breakpoints[breakpoint.id])
     46            return;
     47
     48        this.breakpoints[breakpoint.id] = breakpoint;
     49
    4350        breakpoint.addEventListener("enabled", this._breakpointEnableChanged, this);
    4451        breakpoint.addEventListener("disabled", this._breakpointEnableChanged, this);
     52        breakpoint.addEventListener("text-changed", this._breakpointTextChanged, this);
    4553
    46         // FIXME: add to the breakpoints UI.
     54        this._appendBreakpointElement(breakpoint);
     55
     56        if (this.emptyElement.parentElement) {
     57            this.bodyElement.removeChild(this.emptyElement);
     58            this.bodyElement.appendChild(this.listElement);
     59        }
    4760
    4861        if (!InspectorController.debuggerEnabled() || !breakpoint.sourceID)
     
    5366    },
    5467
     68    _appendBreakpointElement: function(breakpoint)
     69    {
     70        function checkboxClicked()
     71        {
     72            breakpoint.enabled = !breakpoint.enabled;
     73        }
     74
     75        function labelClicked()
     76        {
     77            var script = WebInspector.panels.scripts.scriptOrResourceForID(breakpoint.sourceID);
     78            if (script)
     79                WebInspector.panels.scripts.showScript(script, breakpoint.line);
     80        }
     81
     82        var breakpointElement = document.createElement("li");
     83        breakpoint._breakpointListElement = breakpointElement;
     84        breakpointElement._breakpointObject = breakpoint;
     85
     86        var checkboxElement = document.createElement("input");
     87        checkboxElement.className = "checkbox-elem";
     88        checkboxElement.type = "checkbox";
     89        checkboxElement.checked = breakpoint.enabled;
     90        checkboxElement.addEventListener("click", checkboxClicked, false);
     91        breakpointElement.appendChild(checkboxElement);
     92
     93        var labelElement = document.createElement("a");
     94        labelElement.textContent = breakpoint.label;
     95        labelElement.addEventListener("click", labelClicked, false);
     96        breakpointElement.appendChild(labelElement);
     97
     98        var sourceTextElement = document.createElement("div");
     99        sourceTextElement.textContent = breakpoint.sourceText;
     100        sourceTextElement.className = "source-text";
     101        breakpointElement.appendChild(sourceTextElement);
     102
     103        var currentElement = this.listElement.firstChild;
     104        while (currentElement) {
     105            var currentBreak = currentElement._breakpointObject;
     106            if (currentBreak.url > breakpoint.url) {
     107                this.listElement.insertBefore(breakpointElement, currentElement);
     108                return;
     109            } else if (currentBreak.url == breakpoint.url && currentBreak.line > breakpoint.line) {
     110                this.listElement.insertBefore(breakpointElement, currentElement);
     111                return;
     112            }
     113            currentElement = currentElement.nextSibling;
     114        }
     115        this.listElement.appendChild(breakpointElement);
     116    },
     117
    55118    removeBreakpoint: function(breakpoint)
    56119    {
    57         this.breakpoints.remove(breakpoint);
     120        if (!this.breakpoints[breakpoint.id])
     121            return;
     122        delete this.breakpoints[breakpoint.id];
     123
    58124        breakpoint.removeEventListener("enabled", null, this);
    59125        breakpoint.removeEventListener("disabled", null, this);
     126        breakpoint.removeEventListener("text-changed", null, this);
    60127
    61         // FIXME: remove from the breakpoints UI.
     128        var element = breakpoint._breakpointListElement;
     129        element.parentElement.removeChild(element);
     130
     131        if (!this.listElement.firstChild) {
     132            this.bodyElement.removeChild(this.listElement);
     133            this.bodyElement.appendChild(this.emptyElement);
     134        }
    62135
    63136        if (!InspectorController.debuggerEnabled() || !breakpoint.sourceID)
     
    71144        var breakpoint = event.target;
    72145
    73         // FIXME: change the breakpoint checkbox state in the UI.
     146        var checkbox = breakpoint._breakpointListElement.firstChild;
     147        checkbox.checked = breakpoint.enabled;
    74148
    75149        if (!InspectorController.debuggerEnabled() || !breakpoint.sourceID)
     
    80154        else
    81155            InspectorController.removeBreakpoint(breakpoint.sourceID, breakpoint.line);
     156    },
     157
     158    _breakpointTextChanged: function(event)
     159    {
     160        var breakpoint = event.target;
     161
     162        var sourceTextElement = breakpoint._breakpointListElement.firstChild.nextSibling.nextSibling;
     163        sourceTextElement.textContent = breakpoint.sourceText;
    82164    }
    83165}
  • trunk/WebCore/inspector/front-end/ScriptsPanel.js

    r46390 r46402  
    134134        this.sidebarElement.appendChild(this.sidebarPanes[pane].element);
    135135
    136     // FIXME: remove the following line of code when the Breakpoints pane has content.
    137     this.sidebarElement.removeChild(this.sidebarPanes.breakpoints.element);
    138 
    139136    this.sidebarPanes.callstack.expanded = true;
    140137    this.sidebarPanes.callstack.addEventListener("call frame selected", this._callFrameSelected, this);
    141138
    142139    this.sidebarPanes.scopechain.expanded = true;
     140    this.sidebarPanes.breakpoints.expanded = true;
    143141
    144142    var panelEnablerHeading = WebInspector.UIString("You need to enable debugging before you can use the Scripts panel.");
     
    298296
    299297        this._addScriptToFilesMenu(script);
     298    },
     299
     300    scriptOrResourceForID: function(id)
     301    {
     302        return this._sourceIDMap[id];
    300303    },
    301304
  • trunk/WebCore/inspector/front-end/SourceFrame.js

    r46220 r46402  
    371371        if (!sourceRow)
    372372            return;
     373
     374        breakpoint.sourceText = sourceRow.getElementsByClassName('webkit-line-content')[0].textContent;
    373375
    374376        this._drawBreakpointImagesIfNeeded();
  • trunk/WebCore/inspector/front-end/inspector.css

    r46339 r46402  
    31173117    margin-left: -1px;
    31183118}
     3119
     3120ol.breakpoint-list {
     3121    -webkit-padding-start: 2px;
     3122    list-style: none;
     3123    margin: 0;
     3124}
     3125
     3126.breakpoint-list li {
     3127    white-space: nowrap;
     3128    text-overflow: ellipsis;
     3129    overflow: hidden;
     3130    margin: 4px 0;
     3131}
     3132
     3133.breakpoint-list .checkbox-elem {
     3134    font-size: 10px;
     3135    margin: 0 4px;
     3136    vertical-align: top;
     3137    position: relative;
     3138    z-index: 1;
     3139}
     3140
     3141.breakpoint-list .source-text {
     3142    font-family: monospace;
     3143    white-space: nowrap;
     3144    text-overflow: ellipsis;
     3145    overflow: hidden;
     3146    margin: 2px 0 0px 20px;
     3147}
     3148
     3149.breakpoint-list a {
     3150    color: rgb(33%, 33%, 33%);
     3151    cursor: pointer;
     3152}
     3153
     3154.breakpoint-list a:hover {
     3155    color: rgb(15%, 15%, 15%);
     3156}
Note: See TracChangeset for help on using the changeset viewer.