[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 9d59fe73298908a3e3b29b94e0f8d82e1e165afd..a127025e57fe230e3e702b255f29f508ed5f2936 100644
--- a/third_party/WebKit/Source/devtools/front_end/sdk/ResourceTreeModel.js
+++ b/third_party/WebKit/Source/devtools/front_end/sdk/ResourceTreeModel.js
@@ -71,12 +71,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

[caseq, 2017/05/26 22:20:19]

Should it be nullable?

+   * @param {?SDK.ResourceTreeFrame} b
+   * @return {number}
+   */
+  static _frameComparator(a, b) {
+    var framesA = a ? SDK.ResourceTreeModel.framePath(a) : [];

[caseq, 2017/05/26 22:20:19]

How about this:

var framePathA = SDK.ResourceTreeModel.framePath(a).map(_ => _.id).join('\1');
var framePathB = SDK.ResourceTreeModel.framePath(b).map(_ => _.id).join('\1');

return framePathA.localeCompare(framePathB)

+    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;
   }
 
@@ -427,49 +486,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() {