<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[46402] trunk/WebCore</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/46402">46402</a></dd>
<dt>Author</dt> <dd>pfeldman@chromium.org</dd>
<dt>Date</dt> <dd>2009-07-26 08:36:26 -0700 (Sun, 26 Jul 2009)</dd>
</dl>

<h3>Log Message</h3>
<pre>2009-07-26  Pavel Feldman  &lt;pfeldman@chromium.org&gt;

        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:</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkWebCoreChangeLog">trunk/WebCore/ChangeLog</a></li>
<li><a href="#trunkWebCoreinspectorfrontendBreakpointjs">trunk/WebCore/inspector/front-end/Breakpoint.js</a></li>
<li><a href="#trunkWebCoreinspectorfrontendBreakpointsSidebarPanejs">trunk/WebCore/inspector/front-end/BreakpointsSidebarPane.js</a></li>
<li><a href="#trunkWebCoreinspectorfrontendScriptsPaneljs">trunk/WebCore/inspector/front-end/ScriptsPanel.js</a></li>
<li><a href="#trunkWebCoreinspectorfrontendSourceFramejs">trunk/WebCore/inspector/front-end/SourceFrame.js</a></li>
<li><a href="#trunkWebCoreinspectorfrontendinspectorcss">trunk/WebCore/inspector/front-end/inspector.css</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/WebCore/ChangeLog (46401 => 46402)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/WebCore/ChangeLog        2009-07-25 22:14:13 UTC (rev 46401)
+++ trunk/WebCore/ChangeLog        2009-07-26 15:36:26 UTC (rev 46402)
</span><span class="lines">@@ -1,3 +1,29 @@
</span><ins>+2009-07-26  Pavel Feldman  &lt;pfeldman@chromium.org&gt;
+
+        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:
+
</ins><span class="cx"> 2009-07-16  Shinichiro Hamaji  &lt;hamaji@chromium.org&gt;
</span><span class="cx"> 
</span><span class="cx">         Reviewed by Oliver Hunt.
</span></span></pre></div>
<a id="trunkWebCoreinspectorfrontendBreakpointjs"></a>
<div class="modfile"><h4>Modified: trunk/WebCore/inspector/front-end/Breakpoint.js (46401 => 46402)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/WebCore/inspector/front-end/Breakpoint.js        2009-07-25 22:14:13 UTC (rev 46401)
+++ trunk/WebCore/inspector/front-end/Breakpoint.js        2009-07-26 15:36:26 UTC (rev 46402)
</span><span class="lines">@@ -29,6 +29,7 @@
</span><span class="cx">     this.line = line;
</span><span class="cx">     this.sourceID = sourceID;
</span><span class="cx">     this._enabled = true;
</span><ins>+    this._sourceText = &quot;&quot;;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> WebInspector.Breakpoint.prototype = {
</span><span class="lines">@@ -48,6 +49,28 @@
</span><span class="cx">             this.dispatchEventToListeners(&quot;enabled&quot;);
</span><span class="cx">         else
</span><span class="cx">             this.dispatchEventToListeners(&quot;disabled&quot;);
</span><ins>+    },
+
+    get sourceText()
+    {
+        return this._sourceText;
+    },
+
+    set sourceText(text)
+    {
+        this._sourceText = text;
+        this.dispatchEventToListeners(&quot;text-changed&quot;);
+    },
+
+    get label()
+    {
+        var displayName = (this.url ? WebInspector.displayNameForURL(this.url) : WebInspector.UIString(&quot;(program)&quot;));
+        return displayName + &quot;:&quot; + this.line;
+    },
+
+    get id()
+    {
+        return this.sourceID + &quot;:&quot; + this.line;
</ins><span class="cx">     }
</span><span class="cx"> }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkWebCoreinspectorfrontendBreakpointsSidebarPanejs"></a>
<div class="modfile"><h4>Modified: trunk/WebCore/inspector/front-end/BreakpointsSidebarPane.js (46401 => 46402)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/WebCore/inspector/front-end/BreakpointsSidebarPane.js        2009-07-25 22:14:13 UTC (rev 46401)
+++ trunk/WebCore/inspector/front-end/BreakpointsSidebarPane.js        2009-07-26 15:36:26 UTC (rev 46402)
</span><span class="lines">@@ -27,8 +27,11 @@
</span><span class="cx"> {
</span><span class="cx">     WebInspector.SidebarPane.call(this, WebInspector.UIString(&quot;Breakpoints&quot;));
</span><span class="cx"> 
</span><del>-    this.breakpoints = [];
</del><ins>+    this.breakpoints = {};
</ins><span class="cx"> 
</span><ins>+    this.listElement = document.createElement(&quot;ol&quot;);
+    this.listElement.className = &quot;breakpoint-list&quot;;
+
</ins><span class="cx">     this.emptyElement = document.createElement(&quot;div&quot;);
</span><span class="cx">     this.emptyElement.className = &quot;info&quot;;
</span><span class="cx">     this.emptyElement.textContent = WebInspector.UIString(&quot;No Breakpoints&quot;);
</span><span class="lines">@@ -39,12 +42,22 @@
</span><span class="cx"> WebInspector.BreakpointsSidebarPane.prototype = {
</span><span class="cx">     addBreakpoint: function(breakpoint)
</span><span class="cx">     {
</span><del>-        this.breakpoints.push(breakpoint);
</del><ins>+        if (this.breakpoints[breakpoint.id])
+            return;
+
+        this.breakpoints[breakpoint.id] = breakpoint;
+
</ins><span class="cx">         breakpoint.addEventListener(&quot;enabled&quot;, this._breakpointEnableChanged, this);
</span><span class="cx">         breakpoint.addEventListener(&quot;disabled&quot;, this._breakpointEnableChanged, this);
</span><ins>+        breakpoint.addEventListener(&quot;text-changed&quot;, this._breakpointTextChanged, this);
</ins><span class="cx"> 
</span><del>-        // FIXME: add to the breakpoints UI.
</del><ins>+        this._appendBreakpointElement(breakpoint);
</ins><span class="cx"> 
</span><ins>+        if (this.emptyElement.parentElement) {
+            this.bodyElement.removeChild(this.emptyElement);
+            this.bodyElement.appendChild(this.listElement);
+        }
+
</ins><span class="cx">         if (!InspectorController.debuggerEnabled() || !breakpoint.sourceID)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><span class="lines">@@ -52,14 +65,74 @@
</span><span class="cx">             InspectorController.addBreakpoint(breakpoint.sourceID, breakpoint.line);
</span><span class="cx">     },
</span><span class="cx"> 
</span><ins>+    _appendBreakpointElement: function(breakpoint)
+    {
+        function checkboxClicked()
+        {
+            breakpoint.enabled = !breakpoint.enabled;
+        }
+
+        function labelClicked()
+        {
+            var script = WebInspector.panels.scripts.scriptOrResourceForID(breakpoint.sourceID);
+            if (script)
+                WebInspector.panels.scripts.showScript(script, breakpoint.line);
+        }
+
+        var breakpointElement = document.createElement(&quot;li&quot;);
+        breakpoint._breakpointListElement = breakpointElement;
+        breakpointElement._breakpointObject = breakpoint;
+
+        var checkboxElement = document.createElement(&quot;input&quot;);
+        checkboxElement.className = &quot;checkbox-elem&quot;;
+        checkboxElement.type = &quot;checkbox&quot;;
+        checkboxElement.checked = breakpoint.enabled;
+        checkboxElement.addEventListener(&quot;click&quot;, checkboxClicked, false);
+        breakpointElement.appendChild(checkboxElement);
+
+        var labelElement = document.createElement(&quot;a&quot;);
+        labelElement.textContent = breakpoint.label;
+        labelElement.addEventListener(&quot;click&quot;, labelClicked, false);
+        breakpointElement.appendChild(labelElement);
+
+        var sourceTextElement = document.createElement(&quot;div&quot;);
+        sourceTextElement.textContent = breakpoint.sourceText;
+        sourceTextElement.className = &quot;source-text&quot;;
+        breakpointElement.appendChild(sourceTextElement);
+
+        var currentElement = this.listElement.firstChild;
+        while (currentElement) {
+            var currentBreak = currentElement._breakpointObject;
+            if (currentBreak.url &gt; breakpoint.url) {
+                this.listElement.insertBefore(breakpointElement, currentElement);
+                return;
+            } else if (currentBreak.url == breakpoint.url &amp;&amp; currentBreak.line &gt; breakpoint.line) {
+                this.listElement.insertBefore(breakpointElement, currentElement);
+                return;
+            }
+            currentElement = currentElement.nextSibling;
+        }
+        this.listElement.appendChild(breakpointElement);
+    },
+
</ins><span class="cx">     removeBreakpoint: function(breakpoint)
</span><span class="cx">     {
</span><del>-        this.breakpoints.remove(breakpoint);
</del><ins>+        if (!this.breakpoints[breakpoint.id])
+            return;
+        delete this.breakpoints[breakpoint.id];
+
</ins><span class="cx">         breakpoint.removeEventListener(&quot;enabled&quot;, null, this);
</span><span class="cx">         breakpoint.removeEventListener(&quot;disabled&quot;, null, this);
</span><ins>+        breakpoint.removeEventListener(&quot;text-changed&quot;, null, this);
</ins><span class="cx"> 
</span><del>-        // FIXME: remove from the breakpoints UI.
</del><ins>+        var element = breakpoint._breakpointListElement;
+        element.parentElement.removeChild(element);
</ins><span class="cx"> 
</span><ins>+        if (!this.listElement.firstChild) {
+            this.bodyElement.removeChild(this.listElement);
+            this.bodyElement.appendChild(this.emptyElement);
+        }
+
</ins><span class="cx">         if (!InspectorController.debuggerEnabled() || !breakpoint.sourceID)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><span class="lines">@@ -70,7 +143,8 @@
</span><span class="cx">     {
</span><span class="cx">         var breakpoint = event.target;
</span><span class="cx"> 
</span><del>-        // FIXME: change the breakpoint checkbox state in the UI.
</del><ins>+        var checkbox = breakpoint._breakpointListElement.firstChild;
+        checkbox.checked = breakpoint.enabled;
</ins><span class="cx"> 
</span><span class="cx">         if (!InspectorController.debuggerEnabled() || !breakpoint.sourceID)
</span><span class="cx">             return;
</span><span class="lines">@@ -79,6 +153,14 @@
</span><span class="cx">             InspectorController.addBreakpoint(breakpoint.sourceID, breakpoint.line);
</span><span class="cx">         else
</span><span class="cx">             InspectorController.removeBreakpoint(breakpoint.sourceID, breakpoint.line);
</span><ins>+    },
+
+    _breakpointTextChanged: function(event)
+    {
+        var breakpoint = event.target;
+
+        var sourceTextElement = breakpoint._breakpointListElement.firstChild.nextSibling.nextSibling;
+        sourceTextElement.textContent = breakpoint.sourceText;
</ins><span class="cx">     }
</span><span class="cx"> }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkWebCoreinspectorfrontendScriptsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/WebCore/inspector/front-end/ScriptsPanel.js (46401 => 46402)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/WebCore/inspector/front-end/ScriptsPanel.js        2009-07-25 22:14:13 UTC (rev 46401)
+++ trunk/WebCore/inspector/front-end/ScriptsPanel.js        2009-07-26 15:36:26 UTC (rev 46402)
</span><span class="lines">@@ -133,13 +133,11 @@
</span><span class="cx">     for (var pane in this.sidebarPanes)
</span><span class="cx">         this.sidebarElement.appendChild(this.sidebarPanes[pane].element);
</span><span class="cx"> 
</span><del>-    // FIXME: remove the following line of code when the Breakpoints pane has content.
-    this.sidebarElement.removeChild(this.sidebarPanes.breakpoints.element);
-
</del><span class="cx">     this.sidebarPanes.callstack.expanded = true;
</span><span class="cx">     this.sidebarPanes.callstack.addEventListener(&quot;call frame selected&quot;, this._callFrameSelected, this);
</span><span class="cx"> 
</span><span class="cx">     this.sidebarPanes.scopechain.expanded = true;
</span><ins>+    this.sidebarPanes.breakpoints.expanded = true;
</ins><span class="cx"> 
</span><span class="cx">     var panelEnablerHeading = WebInspector.UIString(&quot;You need to enable debugging before you can use the Scripts panel.&quot;);
</span><span class="cx">     var panelEnablerDisclaimer = WebInspector.UIString(&quot;Enabling debugging will make scripts run slower.&quot;);
</span><span class="lines">@@ -299,6 +297,11 @@
</span><span class="cx">         this._addScriptToFilesMenu(script);
</span><span class="cx">     },
</span><span class="cx"> 
</span><ins>+    scriptOrResourceForID: function(id)
+    {
+        return this._sourceIDMap[id];
+    },
+
</ins><span class="cx">     addBreakpoint: function(breakpoint)
</span><span class="cx">     {
</span><span class="cx">         this.sidebarPanes.breakpoints.addBreakpoint(breakpoint);
</span></span></pre></div>
<a id="trunkWebCoreinspectorfrontendSourceFramejs"></a>
<div class="modfile"><h4>Modified: trunk/WebCore/inspector/front-end/SourceFrame.js (46401 => 46402)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/WebCore/inspector/front-end/SourceFrame.js        2009-07-25 22:14:13 UTC (rev 46401)
+++ trunk/WebCore/inspector/front-end/SourceFrame.js        2009-07-26 15:36:26 UTC (rev 46402)
</span><span class="lines">@@ -371,6 +371,8 @@
</span><span class="cx">         if (!sourceRow)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><ins>+        breakpoint.sourceText = sourceRow.getElementsByClassName('webkit-line-content')[0].textContent;
+
</ins><span class="cx">         this._drawBreakpointImagesIfNeeded();
</span><span class="cx"> 
</span><span class="cx">         sourceRow._breakpointObject = breakpoint;
</span></span></pre></div>
<a id="trunkWebCoreinspectorfrontendinspectorcss"></a>
<div class="modfile"><h4>Modified: trunk/WebCore/inspector/front-end/inspector.css (46401 => 46402)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/WebCore/inspector/front-end/inspector.css        2009-07-25 22:14:13 UTC (rev 46401)
+++ trunk/WebCore/inspector/front-end/inspector.css        2009-07-26 15:36:26 UTC (rev 46402)
</span><span class="lines">@@ -3116,3 +3116,41 @@
</span><span class="cx">     border-left: 1px solid rgb(184, 184, 184);
</span><span class="cx">     margin-left: -1px;
</span><span class="cx"> }
</span><ins>+
+ol.breakpoint-list {
+    -webkit-padding-start: 2px;
+    list-style: none;
+    margin: 0;
+}
+
+.breakpoint-list li {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin: 4px 0;
+}
+
+.breakpoint-list .checkbox-elem {
+    font-size: 10px;
+    margin: 0 4px;
+    vertical-align: top;
+    position: relative;
+    z-index: 1;
+}
+
+.breakpoint-list .source-text {
+    font-family: monospace;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin: 2px 0 0px 20px;
+}
+
+.breakpoint-list a {
+    color: rgb(33%, 33%, 33%);
+    cursor: pointer;
+}
+
+.breakpoint-list a:hover {
+    color: rgb(15%, 15%, 15%);
+}
</ins></span></pre>
</div>
</div>

</body>
</html>