DevTools: allow showing views above and below the Sources sidebar.

Change-Id: I76a8edbc45bd6e2d775b48c8f93e288d82bed817
Reviewed-on: https://chromium-review.googlesource.com/c/1357513Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Pavel Feldman <pfeldman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#612830}

third_party/blink/renderer/devtools/front_end/browser_debugger/module.json

@@ -2,7 +2,7 @@
     "extensions": [
         {
             "type": "view",
-            "location": "sources-sidebar",
+            "location": "sources.sidebar-bottom",
             "id": "sources.eventListenerBreakpoints",
             "title": "Event Listener Breakpoints",
             "order": 9,
@@ -18,7 +18,7 @@
         },
         {
             "type": "view",
-            "location": "sources-sidebar",
+            "location": "sources.sidebar-bottom",
             "id": "sources.xhrBreakpoints",
             "title": "XHR/fetch Breakpoints",
             "order": 5,
@@ -28,7 +28,7 @@
         },
         {
             "type": "view",
-            "location": "sources-sidebar",
+            "location": "sources.sidebar-bottom",
             "id": "sources.domBreakpoints",
             "title": "DOM Breakpoints",
             "order": 7,
@@ -67,7 +67,7 @@
         },
         {
             "type": "view",
-            "location": "sources-sidebar",
+            "location": "sources.sidebar-bottom",
             "id": "sources.globalListeners",
             "title": "Global Listeners",
             "order": 8,

third_party/blink/renderer/devtools/front_end/sources/SourcesPanel.js

@@ -251,10 +251,12 @@ Sources.SourcesPanel = class extends UI.Panel {
    * @return {?UI.ViewLocation}
    */
   resolveLocation(locationName) {
-    if (locationName === 'sources-sidebar')
+    if (locationName === 'sources.sidebar-top' || locationName === 'sources.sidebar-bottom' ||
+        locationName === 'sources.sidebar-tabs') {
       return this._sidebarPaneStack;
-    else
+    } else {
       return this._navigatorTabbedLocation;
+    }
   }
 
   /**
@@ -899,6 +901,7 @@ Sources.SourcesPanel = class extends UI.Panel {
     this._sidebarPaneStack.widget().element.classList.add('overflow-auto');
     this._sidebarPaneStack.widget().show(vbox.element);
     this._sidebarPaneStack.widget().element.appendChild(this._debuggerPausedMessage.element());
+    this._sidebarPaneStack.appendApplicableItems('sources.sidebar-top');
     vbox.element.appendChild(this._debugToolbar.element);
 
     if (this._threadsSidebarPane)
@@ -937,11 +940,12 @@ Sources.SourcesPanel = class extends UI.Panel {
       this._splitWidget.installResizer(this._debugToolbar.gripElementForResize());
       tabbedLocation.appendView(scopeChainView);
       tabbedLocation.appendView(this._watchSidebarPane);
+      tabbedLocation.appendApplicableItems('sources.sidebar-tabs');
       this._extensionSidebarPanesContainer = tabbedLocation;
       this.sidebarPaneView = splitWidget;
     }
 
-    this._sidebarPaneStack.appendApplicableItems('sources-sidebar');
+    this._sidebarPaneStack.appendApplicableItems('sources.sidebar-bottom');
     const extensionSidebarPanes = Extensions.extensionServer.sidebarPanes();
     for (let i = 0; i < extensionSidebarPanes.length; ++i)
       this._addExtensionSidebarPane(extensionSidebarPanes[i]);

third_party/blink/renderer/devtools/front_end/sources/module.json

@@ -715,11 +715,24 @@
         {
             "type": "@UI.ViewLocationResolver",
             "name": "navigator-view",
+            "category": "Sources",
+            "className": "Sources.SourcesPanel"
+        },
+        {
+            "type": "@UI.ViewLocationResolver",
+            "name": "sources.sidebar-top",
+            "category": "Sources",
+            "className": "Sources.SourcesPanel"
+        },
+        {
+            "type": "@UI.ViewLocationResolver",
+            "name": "sources.sidebar-bottom",
+            "category": "Sources",
             "className": "Sources.SourcesPanel"
         },
         {
             "type": "@UI.ViewLocationResolver",
-            "name": "sources-sidebar",
+            "name": "sources.sidebar-tabs",
             "category": "Sources",
             "className": "Sources.SourcesPanel"
         },