[DevTools] Introduce a sidebar with a drop-down

third_party/WebKit/Source/devtools/front_end/sdk/ResourceTreeModel.js

Index: third_party/WebKit/Source/devtools/front_end/sdk/ResourceTreeModel.js
diff --git a/third_party/WebKit/Source/devtools/front_end/sdk/ResourceTreeModel.js b/third_party/WebKit/Source/devtools/front_end/sdk/ResourceTreeModel.js
index 1666aee502f4572b43883777869beb07b5300ff9..ad320b41eb1dad3ede9e2ef9c3939df61c2054ad 100644
--- a/third_party/WebKit/Source/devtools/front_end/sdk/ResourceTreeModel.js
+++ b/third_party/WebKit/Source/devtools/front_end/sdk/ResourceTreeModel.js
@@ -59,12 +59,71 @@ SDK.ResourceTreeModel = class extends SDK.SDKModel {
   }
 
   /**
+   * @param {!SDK.ResourceTreeFrame} frame
+   * @return {?SDK.ResourceTreeFrame}
+   */
+  static _parentFrameAcrossTargets(frame) {
+    var parentFrame = frame.parentFrame;
+    if (parentFrame)
+      return parentFrame;
+    var parentTarget = frame.resourceTreeModel().target().parentTarget();
+    var otherModel = parentTarget && parentTarget.model(SDK.ResourceTreeModel);
+    if (!otherModel)
+      return null;
+    return otherModel.mainFrame;
+  }
+
+  /**
+   * @param {!SDK.ResourceTreeFrame} frame
+   * @return {!Array<!SDK.ResourceTreeFrame>}
+   */
+  static framePath(frame) {
+    var path = [];
+    var currentFrame = frame;
+    while (currentFrame) {
+      path.push(currentFrame);
+      currentFrame = SDK.ResourceTreeModel._parentFrameAcrossTargets(currentFrame);
+    }
+    return path.reverse();
+  }
+
+  /**
+   * @param {?SDK.ResourceTreeFrame} a
+   * @param {?SDK.ResourceTreeFrame} b
+   * @return {number}
+   */
+  static _frameComparator(a, b) {
+    var framesA = a ? SDK.ResourceTreeModel.framePath(a) : [];
+    var framesB = b ? SDK.ResourceTreeModel.framePath(b) : [];
+    var frameA;
+    var frameB;
+    for (var i = 0;; i++) {
+      if (!framesA[i] || !framesB[i] || (framesA[i] !== framesB[i])) {
+        frameA = framesA[i];
+        frameB = framesB[i];
+        break;
+      }
+    }
+    if (!frameA && frameB)
+      return -1;
+
+    if (!frameB && frameA)
+      return 1;
+
+    if (frameA && frameB)
+      return frameA.id.localeCompare(frameB.id);
+
+    return 0;
+  }
+
+  /**
    * @return {!Array.<!SDK.ResourceTreeFrame>}
    */
   static frames() {
     var result = [];
     for (var resourceTreeModel of SDK.targetManager.models(SDK.ResourceTreeModel))
       result = result.concat(resourceTreeModel._frames.valuesArray());
+    result.sort(SDK.ResourceTreeModel._frameComparator);
     return result;
   }
 
@@ -420,49 +479,23 @@ SDK.ResourceTreeModel = class extends SDK.SDKModel {
       callback(url, data || null, errors);
     }
   }
+
   /**
    * @param {!SDK.ExecutionContext} a
    * @param {!SDK.ExecutionContext} b
    * @return {number}
    */
   _executionContextComparator(a, b) {
-    /**
-     * @param {!SDK.ResourceTreeFrame} frame
-     */
-    function framePath(frame) {
-      var currentFrame = frame;
-      var parents = [];
-      while (currentFrame) {
-        parents.push(currentFrame);
-        currentFrame = currentFrame.parentFrame;
-      }
-      return parents.reverse();
-    }
-
     if (a.target() !== b.target())
       return SDK.ExecutionContext.comparator(a, b);
 
-    var framesA = a.frameId ? framePath(this.frameForId(a.frameId)) : [];
-    var framesB = b.frameId ? framePath(this.frameForId(b.frameId)) : [];
-    var frameA;
-    var frameB;
-    for (var i = 0;; i++) {
-      if (!framesA[i] || !framesB[i] || (framesA[i] !== framesB[i])) {
-        frameA = framesA[i];
-        frameB = framesB[i];
-        break;
-      }
-    }
-    if (!frameA && frameB)
-      return -1;
-
-    if (!frameB && frameA)
-      return 1;
+    var frameA = a.frameId ? this.frameForId(a.frameId) : null;
+    var frameB = b.frameId ? this.frameForId(b.frameId) : null;
 
-    if (frameA && frameB)
-      return frameA.id.localeCompare(frameB.id);
+    if (!frameA && !frameB)
+      return SDK.ExecutionContext.comparator(a, b);
 
-    return SDK.ExecutionContext.comparator(a, b);
+    return SDK.ResourceTreeModel._frameComparator(frameA, frameB);
   }
 
   _updateSecurityOrigins() {