Title: [200566] trunk/Source/WebInspectorUI
Revision
200566
Author
[email protected]
Date
2016-05-08 16:57:44 -0700 (Sun, 08 May 2016)

Log Message

Web Inspector: Add Breakpoints and Scripts folders to Debugger sidebar
https://bugs.webkit.org/show_bug.cgi?id=151119
<rdar://problem/23488916>

Reviewed by Timothy Hatcher.

Add a collapsible Sources section to the Debugger beneath the existing
Breakpoints section.

* UserInterface/Views/DebuggerSidebarPanel.css:
Remove unused CSS class names.

(.sidebar > .panel.navigation.debugger .details-section.scripts:not(.collapsed)):
Hide scripts section bottom border when expanded. As the last
section, a border only adds visual clutter.

(.sidebar > .panel.navigation.debugger .details-section.scripts): Deleted.
(.sidebar > .panel.navigation.debugger.paused .details-section.scripts): Deleted.
(.sidebar > .panel.navigation.debugger .details-section.scripts .header): Deleted.
(.sidebar > .panel.navigation.debugger.paused .details-section.scripts .header): Deleted.
(.sidebar > .panel.navigation.debugger .details-section.scripts.collapsed > .content): Deleted.
(.sidebar > .panel.navigation.debugger.paused .details-section.scripts.collapsed > .content): Deleted.
No longer needed.

* UserInterface/Views/DebuggerSidebarPanel.js:
(WebInspector.DebuggerSidebarPanel):
Create separate "Breakpoints" and "Sources" sections, and make filter
placeholder text generic. Remove unused class from breakpoints tree.

(WebInspector.DebuggerSidebarPanel.prototype.treeElementForRepresentedObject):
Check both breakpoint and scripts tree outlines.

(WebInspector.DebuggerSidebarPanel.prototype._addBreakpoint):
(WebInspector.DebuggerSidebarPanel.prototype._addTreeElementForSourceCodeToTreeOutline):
Make helper function generic.

(WebInspector.DebuggerSidebarPanel.prototype._addResource):
(WebInspector.DebuggerSidebarPanel.prototype._mainResourceDidChange):
(WebInspector.DebuggerSidebarPanel.prototype._addScript):
Add resources to the scripts tree.

(WebInspector.DebuggerSidebarPanel.prototype._scriptsCleared):
Clear the scripts tree.

(WebInspector.DebuggerSidebarPanel.prototype._removeDebuggerTreeElement):
Remove script element when last breakpoint is removed.

(WebInspector.DebuggerSidebarPanel.prototype._addIssue):
(WebInspector.DebuggerSidebarPanel.prototype._addTreeElementForSourceCodeToContentTreeOutline): Deleted.
Renamed _addTreeElementForSourceCodeToTreeOutline.

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (200565 => 200566)


--- trunk/Source/WebInspectorUI/ChangeLog	2016-05-08 23:55:53 UTC (rev 200565)
+++ trunk/Source/WebInspectorUI/ChangeLog	2016-05-08 23:57:44 UTC (rev 200566)
@@ -1,5 +1,58 @@
 2016-05-08  Matt Baker  <[email protected]>
 
+        Web Inspector: Add Breakpoints and Scripts folders to Debugger sidebar
+        https://bugs.webkit.org/show_bug.cgi?id=151119
+        <rdar://problem/23488916>
+
+        Reviewed by Timothy Hatcher.
+
+        Add a collapsible Sources section to the Debugger beneath the existing
+        Breakpoints section.
+
+        * UserInterface/Views/DebuggerSidebarPanel.css:
+        Remove unused CSS class names.
+
+        (.sidebar > .panel.navigation.debugger .details-section.scripts:not(.collapsed)):
+        Hide scripts section bottom border when expanded. As the last
+        section, a border only adds visual clutter.
+
+        (.sidebar > .panel.navigation.debugger .details-section.scripts): Deleted.
+        (.sidebar > .panel.navigation.debugger.paused .details-section.scripts): Deleted.
+        (.sidebar > .panel.navigation.debugger .details-section.scripts .header): Deleted.
+        (.sidebar > .panel.navigation.debugger.paused .details-section.scripts .header): Deleted.
+        (.sidebar > .panel.navigation.debugger .details-section.scripts.collapsed > .content): Deleted.
+        (.sidebar > .panel.navigation.debugger.paused .details-section.scripts.collapsed > .content): Deleted.
+        No longer needed.
+
+        * UserInterface/Views/DebuggerSidebarPanel.js:
+        (WebInspector.DebuggerSidebarPanel):
+        Create separate "Breakpoints" and "Sources" sections, and make filter
+        placeholder text generic. Remove unused class from breakpoints tree.
+
+        (WebInspector.DebuggerSidebarPanel.prototype.treeElementForRepresentedObject):
+        Check both breakpoint and scripts tree outlines.
+
+        (WebInspector.DebuggerSidebarPanel.prototype._addBreakpoint):
+        (WebInspector.DebuggerSidebarPanel.prototype._addTreeElementForSourceCodeToTreeOutline):
+        Make helper function generic.
+
+        (WebInspector.DebuggerSidebarPanel.prototype._addResource):
+        (WebInspector.DebuggerSidebarPanel.prototype._mainResourceDidChange):
+        (WebInspector.DebuggerSidebarPanel.prototype._addScript):
+        Add resources to the scripts tree.
+
+        (WebInspector.DebuggerSidebarPanel.prototype._scriptsCleared):
+        Clear the scripts tree.
+
+        (WebInspector.DebuggerSidebarPanel.prototype._removeDebuggerTreeElement):
+        Remove script element when last breakpoint is removed.
+
+        (WebInspector.DebuggerSidebarPanel.prototype._addIssue):
+        (WebInspector.DebuggerSidebarPanel.prototype._addTreeElementForSourceCodeToContentTreeOutline): Deleted.
+        Renamed _addTreeElementForSourceCodeToTreeOutline.
+
+2016-05-08  Matt Baker  <[email protected]>
+
         Web Inspector: SourceCodeTextEditor issue widgets/line styles should reset when log is cleared
         https://bugs.webkit.org/show_bug.cgi?id=157460
         <rdar://problem/26159633>

Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (200565 => 200566)


--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js	2016-05-08 23:55:53 UTC (rev 200565)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js	2016-05-08 23:57:44 UTC (rev 200566)
@@ -110,6 +110,7 @@
 localizedStrings["Box Shadow"] = "Box Shadow";
 localizedStrings["Breakdown"] = "Breakdown";
 localizedStrings["Breakdown of each memory category at the end of the selected time range"] = "Breakdown of each memory category at the end of the selected time range";
+localizedStrings["Breakpoints"] = "Breakpoints";
 localizedStrings["Bubbling"] = "Bubbling";
 localizedStrings["Busy"] = "Busy";
 localizedStrings["CSP Hash"] = "CSP Hash";
@@ -319,8 +320,8 @@
 localizedStrings["Fill"] = "Fill";
 localizedStrings["Fill Mode"] = "Fill Mode";
 localizedStrings["Filter %s"] = "Filter %s";
-localizedStrings["Filter Breakpoint List"] = "Filter Breakpoint List";
 localizedStrings["Filter Console Log"] = "Filter Console Log";
+localizedStrings["Filter List"] = "Filter List";
 localizedStrings["Filter Records"] = "Filter Records";
 localizedStrings["Filter Resource List"] = "Filter Resource List";
 localizedStrings["Filter Search Results"] = "Filter Search Results";
@@ -657,6 +658,7 @@
 localizedStrings["Sockets"] = "Sockets";
 localizedStrings["Sort Ascending"] = "Sort Ascending";
 localizedStrings["Sort Descending"] = "Sort Descending";
+localizedStrings["Sources"] = "Sources";
 localizedStrings["Spacing"] = "Spacing";
 localizedStrings["Specificity: (%d, %d, %d)"] = "Specificity: (%d, %d, %d)";
 localizedStrings["Specificity: No value for selected element"] = "Specificity: No value for selected element";

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css (200565 => 200566)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css	2016-05-08 23:55:53 UTC (rev 200565)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css	2016-05-08 23:57:44 UTC (rev 200566)
@@ -66,26 +66,6 @@
     display: block;
 }
 
-.sidebar > .panel.navigation.debugger .details-section.scripts {
+.sidebar > .panel.navigation.debugger .details-section.scripts:not(.collapsed) {
     border-bottom: none;
 }
-
-.sidebar > .panel.navigation.debugger.paused .details-section.scripts {
-    border-bottom: 1px solid var(--border-color);
-}
-
-.sidebar > .panel.navigation.debugger .details-section.scripts .header {
-    display: none;
-}
-
-.sidebar > .panel.navigation.debugger.paused .details-section.scripts .header {
-    display: block;
-}
-
-.sidebar > .panel.navigation.debugger .details-section.scripts.collapsed > .content {
-    display: block;
-}
-
-.sidebar > .panel.navigation.debugger.paused .details-section.scripts.collapsed > .content {
-    display: none;
-}

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js (200565 => 200566)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js	2016-05-08 23:55:53 UTC (rev 200565)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js	2016-05-08 23:57:44 UTC (rev 200566)
@@ -104,7 +104,7 @@
         this._allUncaughtExceptionsBreakpointTreeElement = new WebInspector.BreakpointTreeElement(WebInspector.debuggerManager.allUncaughtExceptionsBreakpoint, WebInspector.DebuggerSidebarPanel.ExceptionIconStyleClassName, WebInspector.UIString("All Uncaught Exceptions"));
         this.suppressFilteringOnTreeElements([this._globalBreakpointsFolderTreeElement, this._allExceptionsBreakpointTreeElement, this._allUncaughtExceptionsBreakpointTreeElement]);
 
-        this.filterBar.placeholder = WebInspector.UIString("Filter Breakpoint List");
+        this.filterBar.placeholder = WebInspector.UIString("Filter List");
 
         function showResourcesWithIssuesOnlyFilterFunction(treeElement)
         {
@@ -130,10 +130,9 @@
         breakpointsRow.element.appendChild(this._breakpointsContentTreeOutline.element);
 
         let breakpointsGroup = new WebInspector.DetailsSectionGroup([breakpointsRow]);
-        let breakpointsSection = new WebInspector.DetailsSection("scripts", WebInspector.UIString("Scripts"), [breakpointsGroup]);
+        let breakpointsSection = new WebInspector.DetailsSection("breakpoints", WebInspector.UIString("Breakpoints"), [breakpointsGroup]);
         this.contentView.element.appendChild(breakpointsSection.element);
 
-        this._breakpointsContentTreeOutline.element.classList.add("breakpoints");
         this._breakpointsContentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
         this._breakpointsContentTreeOutline._ondelete_ = this._breakpointTreeOutlineDeleteTreeElement.bind(this);
         this._breakpointsContentTreeOutline._oncontextmenu_ = this._breakpointTreeOutlineContextMenuTreeElement.bind(this);
@@ -143,6 +142,16 @@
         this._globalBreakpointsFolderTreeElement.appendChild(this._allUncaughtExceptionsBreakpointTreeElement);
         this._globalBreakpointsFolderTreeElement.expand();
 
+        this._scriptsContentTreeOutline = this.createContentTreeOutline(true);
+        this._scriptsContentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+
+        let scriptsRow = new WebInspector.DetailsSectionRow;
+        scriptsRow.element.appendChild(this._scriptsContentTreeOutline.element);
+
+        let scriptsGroup = new WebInspector.DetailsSectionGroup([scriptsRow]);
+        this._scriptsSection = new WebInspector.DetailsSection("scripts", WebInspector.UIString("Sources"), [scriptsGroup]);
+        this.contentView.element.appendChild(this._scriptsSection.element);
+
         this._callStackContentTreeOutline = this.createContentTreeOutline(true, true);
         this._callStackContentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
 
@@ -157,8 +166,7 @@
         this._pauseReasonLinkContainerElement = document.createElement("span");
         this._pauseReasonTextRow = new WebInspector.DetailsSectionTextRow;
         this._pauseReasonGroup = new WebInspector.DetailsSectionGroup([this._pauseReasonTextRow]);
-        this._pauseReasonSection = new WebInspector.DetailsSection("paused-reason", null, [this._pauseReasonGroup], this._pauseReasonLinkContainerElement);
-        this._pauseReasonSection.title = WebInspector.UIString("Pause Reason");
+        this._pauseReasonSection = new WebInspector.DetailsSection("paused-reason", WebInspector.UIString("Pause Reason"), [this._pauseReasonGroup], this._pauseReasonLinkContainerElement);
 
         WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisplayLocationDidChange, this._handleDebuggerObjectDisplayLocationDidChange, this);
         WebInspector.IssueMessage.addEventListener(WebInspector.IssueMessage.Event.DisplayLocationDidChange, this._handleDebuggerObjectDisplayLocationDidChange, this);
@@ -208,7 +216,10 @@
         if (representedObject instanceof WebInspector.Frame)
             representedObject = representedObject.mainResource;
 
-        let treeElement = this.contentTreeOutline.findTreeElement(representedObject);
+        let treeElement = this._breakpointsContentTreeOutline.findTreeElement(representedObject);
+        if (!treeElement)
+            treeElement = this._scriptsContentTreeOutline.findTreeElement(representedObject);
+
         if (treeElement)
             return treeElement;
 
@@ -315,7 +326,7 @@
         if (!sourceCode)
             return null;
 
-        var parentTreeElement = this._addTreeElementForSourceCodeToContentTreeOutline(sourceCode);
+        let parentTreeElement = this._addTreeElementForSourceCodeToTreeOutline(sourceCode, this._breakpointsContentTreeOutline);
 
         // Mark disabled breakpoints as resolved if there is source code loaded with that URL.
         // This gives the illusion the breakpoint was resolved, but since we don't send disabled
@@ -345,9 +356,9 @@
             this._addIssue(issue);
     }
 
-    _addTreeElementForSourceCodeToContentTreeOutline(sourceCode)
+    _addTreeElementForSourceCodeToTreeOutline(sourceCode, treeOutline)
     {
-        var treeElement = this._breakpointsContentTreeOutline.getCachedTreeElement(sourceCode);
+        let treeElement = treeOutline.getCachedTreeElement(sourceCode);
         if (!treeElement) {
             if (sourceCode instanceof WebInspector.SourceMapResource)
                 treeElement = new WebInspector.SourceMapResourceTreeElement(sourceCode);
@@ -366,7 +377,7 @@
             treeElement.hasChildren = false;
             treeElement.expand();
 
-            this._breakpointsContentTreeOutline.insertChild(treeElement, insertionIndexForObjectInListSortedByFunction(treeElement, this._breakpointsContentTreeOutline.children, this._compareTopLevelTreeElements.bind(this)));
+            treeOutline.insertChild(treeElement, insertionIndexForObjectInListSortedByFunction(treeElement, treeOutline.children, this._compareTopLevelTreeElements.bind(this)));
         }
 
         return treeElement;
@@ -393,7 +404,7 @@
         if (![WebInspector.Resource.Type.Document, WebInspector.Resource.Type.Script].includes(resource.type))
             return;
 
-        let treeElement = this._addTreeElementForSourceCodeToContentTreeOutline(resource);
+        let treeElement = this._addTreeElementForSourceCodeToTreeOutline(resource, this._scriptsContentTreeOutline);
         this._addBreakpointsForSourceCode(resource);
         this._addIssuesForSourceCode(resource);
 
@@ -412,7 +423,7 @@
         }
 
         var resource = event.target.mainResource;
-        this._addTreeElementForSourceCodeToContentTreeOutline(resource);
+        this._addTreeElementForSourceCodeToTreeOutline(resource, this._scriptsContentTreeOutline);
         this._addBreakpointsForSourceCode(resource);
         this._addIssuesForSourceCode(resource);
     }
@@ -460,7 +471,7 @@
         if (script.resource)
             return null;
 
-        let treeElement = this._addTreeElementForSourceCodeToContentTreeOutline(script);
+        let treeElement = this._addTreeElementForSourceCodeToTreeOutline(script, this._scriptsContentTreeOutline);
         this._addBreakpointsForSourceCode(script);
         this._addIssuesForSourceCode(script);
 
@@ -489,6 +500,8 @@
 
             this._breakpointsContentTreeOutline.removeChildAtIndex(i, true, true);
         }
+
+        this._scriptsContentTreeOutline.removeChildren();
     }
 
     _breakpointAdded(event)
@@ -544,6 +557,10 @@
         parentTreeElement.removeChild(debuggerTreeElement);
 
         console.assert(parentTreeElement.parent === this._breakpointsContentTreeOutline);
+        if (parentTreeElement.children.length)
+            return;
+
+        parentTreeElement.treeOutline.removeChild(parentTreeElement);
     }
 
     _debuggerCallFramesDidChange()
@@ -849,7 +866,7 @@
 
     _addIssue(issueMessage)
     {
-        var parentTreeElement = this._addTreeElementForSourceCodeToContentTreeOutline(issueMessage.sourceCodeLocation.sourceCode);
+        let parentTreeElement = this._addTreeElementForSourceCodeToTreeOutline(issueMessage.sourceCodeLocation.sourceCode, this._scriptsContentTreeOutline);
         if (!parentTreeElement)
             return null;
 
@@ -889,11 +906,9 @@
     }
 };
 
-WebInspector.DebuggerSidebarPanel.OffsetSectionsStyleClassName = "offset-sections";
 WebInspector.DebuggerSidebarPanel.DebuggerPausedStyleClassName = "paused";
 WebInspector.DebuggerSidebarPanel.ExceptionIconStyleClassName = "breakpoint-exception-icon";
 WebInspector.DebuggerSidebarPanel.PausedBreakpointIconStyleClassName = "breakpoint-paused-icon";
-WebInspector.DebuggerSidebarPanel.GlobalIconStyleClassName = "global-breakpoints-icon";
 
 WebInspector.DebuggerSidebarPanel.SelectedAllExceptionsCookieKey = "debugger-sidebar-panel-all-exceptions-breakpoint";
 WebInspector.DebuggerSidebarPanel.SelectedAllUncaughtExceptionsCookieKey = "debugger-sidebar-panel-all-uncaught-exceptions-breakpoint";
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to