Timeline: promisify paint profiler and Layers panel, part I

third_party/WebKit/Source/devtools/front_end/timeline_model/TracingLayerTree.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /** @typedef {!{
         bounds: {height: number, width: number},
         children: Array.<!WebInspector.TracingLayerPayload>,
         layer_id: number,
         position: Array.<number>,
         scroll_offset: Array.<number>,
         layer_quad: Array.<number>,
         draws_content: number,
         gpu_memory_usage: number,
         transform: Array.<number>,
         owner_node: number,
         compositing_reasons: Array.<string>
     }}
 */
 WebInspector.TracingLayerPayload;
 
 /** @typedef {!{
         id: string,
         layer_id: string,
         gpu_memory_usage: number,
         content_rect: !Array.<number>
     }}
 */
 WebInspector.TracingLayerTile;
 
+/** @typedef {!{
+    rect: !DOMAgent.Rect,

[alph, 2016/10/21 00:25:10]

indent

+    snapshot: !WebInspector.PaintProfilerSnapshot
+    }}
+*/
+WebInspector.SnapshotWithRect;
+
 /**
   * @constructor
   * @extends {WebInspector.LayerTreeBase}
   * @param {?WebInspector.Target} target
   */
 WebInspector.TracingLayerTree = function(target)
 {
     WebInspector.LayerTreeBase.call(this, target);
     /** @type {!Map.<string, !WebInspector.TracingLayerTile>} */
     this._tileById = new Map();
@@ skipping 49 matching lines @@
      */
     setTiles: function(tiles)
     {
         this._tileById = new Map();
         for (var tile of tiles)
             this._tileById.set(tile.id, tile);
     },
 
     /**
      * @param {string} tileId
-     * @param {function(?DOMAgent.Rect, ?WebInspector.PaintProfilerSnapshot)} callback
+     * @return {!Promise<?WebInspector.SnapshotWithRect>}
      */
-    pictureForRasterTile: function(tileId, callback)
+    pictureForRasterTile: function(tileId)
     {
         var tile = this._tileById.get("cc::Tile/" + tileId);
         if (!tile) {
             WebInspector.console.error(`Tile ${tileId} is missing`);
-            callback(null, null);
-            return;
+            return /** @type {!Promise<?WebInspector.SnapshotWithRect>} */ (Promise.resolve(null));
         }
         var layer = this.layerById(tile.layer_id);
         if (!layer) {
             WebInspector.console.error(`Layer ${tile.layer_id} for tile ${tileId} is not found`);
-            callback(null, null);
-            return;
+            return /** @type {!Promise<?WebInspector.SnapshotWithRect>} */ (Promise.resolve(null));
         }
-        layer.pictureForRect(this.target(), tile.content_rect, callback);
+        return layer.pictureForRect(this.target(), tile.content_rect);
     },
 
     /**
      * @param {!Array<!WebInspector.LayerPaintEvent>} paints
      */
     _setPaints: function(paints)
     {
         for (var i = 0; i < paints.length; ++i) {
             var layer = this._layersById[paints[i].layerId()];
             if (layer)
@@ skipping 267 matching lines @@
      * @return {number}
      */
     gpuMemoryUsage: function()
     {
         return this._gpuMemoryUsage;
     },
 
     /**
      * @param {!WebInspector.Target} target
      * @param {!Array<number>} targetRect
-     * @param {function(?DOMAgent.Rect, ?WebInspector.PaintProfilerSnapshot)} callback
+     * @return {!Promise<?{rect: !DOMAgent.Rect, snapshot: !WebInspector.PaintProfilerSnapshot}>}
      */
-    pictureForRect: function(target, targetRect, callback)
+    pictureForRect: function(target, targetRect)
     {
-        var fetchPictureFragmentsBarrier = new CallbackBarrier();
-        this._paints.forEach(paint => paint.loadPicture(fetchPictureFragmentsBarrier.createCallback(pictureLoaded)));
-        fetchPictureFragmentsBarrier.callWhenDone(allPicturesLoaded);
+        return Promise.all(this._paints.map(paint => paint.picturePromise())).then(pictures => {
+            var fragments = pictures.filter(picture => picture && rectsOverlap(picture.rect, targetRect))
+                .map(picture => ({x: picture.rect[0], y: picture.rect[1], picture: picture.serializedPicture}));
+            if (!fragments.length)
+                return null;
+            var topLeft = fragments.reduce((acc, current) => ({x: Math.min(acc.x, current.x), y: Math.min(acc.y, current.y)}), {x: Infinity, y: Infinity});

[alph, 2016/10/21 00:25:10]

For the sake of performance I'd do it with two reduces, for x and for y, so you
can avoid creating lots of temp objects.

+            // Rect is in layer content coordinates, make it relative to picture by offsetting to the top left corner.
+            var rect = {x: targetRect[0] - topLeft.x, y: targetRect[1] - topLeft.y, width: targetRect[2], height: targetRect[3]};
+            return WebInspector.PaintProfilerSnapshot.loadFromFragments(target, fragments).then(snapshot => snapshot ? {rect: rect, snapshot: snapshot} : null);
+        });
 
         /**
          * @param {number} a1
          * @param {number} a2
          * @param {number} b1
          * @param {number} b2
          * @return {boolean}
          */
         function segmentsOverlap(a1, a2, b1, b2)
         {
             console.assert(a1 <= a2 && b1 <= b2, "segments should be specified as ordered pairs");
             return a2 > b1 && a1 < b2;
         }
+
         /**
          * @param {!Array.<number>} a
          * @param {!Array.<number>} b
          * @return {boolean}
          */
         function rectsOverlap(a, b)
         {
             return segmentsOverlap(a[0], a[0] + a[2], b[0], b[0] + b[2]) && segmentsOverlap(a[1], a[1] + a[3], b[1], b[1] + b[3]);
         }
-
-        var x0 = Infinity;
-        var y0 = Infinity;
-        var fragments = [];
-        /**
-         * @param {?Array.<number>} rect
-         * @param {?string} picture
-         */
-        function pictureLoaded(rect, picture)
-        {
-            if (!rect || !picture)
-                return;
-            if (!rectsOverlap(rect, targetRect))
-                return;
-            var x = rect[0];
-            var y = rect[1];
-            x0 = Math.min(x0, x);
-            y0 = Math.min(y0, y);
-            fragments.push({x: x, y: y, picture: picture});
-        }
-
-        function allPicturesLoaded()
-        {
-            if (!fragments.length) {
-                callback(null, null);
-                return;
-            }
-            // Rect is in layer content coordinates, make it relative to picture by offsetting to the top left corner.
-            var rect = {x: targetRect[0] - x0, y: targetRect[1] - y0, width: targetRect[2], height: targetRect[3]};
-            WebInspector.PaintProfilerSnapshot.loadFromFragments(target, fragments, callback.bind(null, rect));
-        }
     },
 
     /**
      * @param {!Array.<number>} params
      * @param {string} type
      * @return {!Object}
      */
     _scrollRectsFromParams: function(params, type)
     {
         return {rect: {x: params[0], y: params[1], width: params[2], height: params[3]}, type: type};
@@ skipping 34 matching lines @@
 
     /**
      * @override
      * @return {boolean}
      */
     drawsContent: function()
     {
         return this._drawsContent;
     }
 }