[DevTools] Introduce a sidebar with a drop-down

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

 /*
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 53 matching lines @@
    * @return {?SDK.ResourceTreeFrame}
    */
   static frameForRequest(request) {
     var resourceTreeModel = request.networkManager().target().model(SDK.ResourceTreeModel);
     if (!resourceTreeModel)
       return null;
     return resourceTreeModel.frameForId(request.frameId);
   }
 
   /**
+   * @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;
   }
 
   /**
    * @param {string} url
    * @return {?SDK.Resource}
    */
   static resourceForURL(url) {
     for (var resourceTreeModel of SDK.targetManager.models(SDK.ResourceTreeModel)) {
       var mainFrame = resourceTreeModel.mainFrame;
@@ skipping 330 matching lines @@
      * @param {string=} data
      */
     function myCallback(protocolError, url, errors, data) {
       if (protocolError) {
         callback(url, null, []);
         return;
       }
       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;
+    var frameA = a.frameId ? this.frameForId(a.frameId) : null;
+    var frameB = b.frameId ? this.frameForId(b.frameId) : null;
 
-    if (!frameB && frameA)
-      return 1;
+    if (!frameA && !frameB)
+      return SDK.ExecutionContext.comparator(a, b);
 
-    if (frameA && frameB)
-      return frameA.id.localeCompare(frameB.id);
-
-    return SDK.ExecutionContext.comparator(a, b);
+    return SDK.ResourceTreeModel._frameComparator(frameA, frameB);
   }
 
   _updateSecurityOrigins() {
     var securityOrigins = new Set();
     var mainSecurityOrigin = null;
     for (var frame of this._frames.values()) {
       var origin = frame.securityOrigin;
       if (!origin)
         continue;
       securityOrigins.add(origin);
@@ skipping 416 matching lines @@
     this._resourceTreeModel.dispatchEventToListeners(SDK.ResourceTreeModel.Events.InterstitialHidden);
   }
 
   /**
    * @override
    */
   navigationRequested() {
     // Frontend is not interested in when navigations are requested.
   }
 };