Timeline: promisify paint profiler and Layers panel, part I

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

 /*
  * Copyright (C) 2013 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 85 matching lines @@
             return false;
         var frameId = data["sourceFrameNumber"];
         var frame = frameId && this._frameById[frameId];
         if (!frame || !frame.layerTree)
             return false;
         return true;
     },
 
     /**
      * @param {!WebInspector.TracingModel.Event} rasterTask
-     * @param {function(?DOMAgent.Rect, ?WebInspector.PaintProfilerSnapshot)} callback
+     * @return Promise<?{rect: !DOMAgent.Rect, snapshot: !WebInspector.PaintProfilerSnapshot}>}
      */
-    requestRasterTile: function(rasterTask, callback)
+    rasterTilePromise: function(rasterTask)
     {
-        var target = this._target;
-        if (!target) {
-            callback(null, null);
-            return;
-        }
+        if (!this._target)
+            return Promise.resolve(null);
         var data = rasterTask.args["tileData"];
         var frameId = data["sourceFrameNumber"];
         var tileId = data["tileId"] && data["tileId"]["id_ref"];
         var frame = frameId && this._frameById[frameId];
-        if (!frame || !frame.layerTree || !tileId) {
-            callback(null, null);
-            return;
-        }
+        if (!frame || !frame.layerTree || !tileId)
+            return Promise.resolve(null);
 
-        frame.layerTree.resolve(layerTree => layerTree.pictureForRasterTile(tileId, callback));
+        return frame.layerTree.layerTreePromise().then(layerTree => layerTree ? layerTree.pictureForRasterTile(tileId) : null);

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

nit: layerTree && 

     },
 
     reset: function()
     {
         this._minimumRecordTime = Infinity;
         this._frames = [];
         this._frameById = {};
         this._lastFrame = null;
         this._lastLayerTree = null;
         this._mainFrameCommitted = false;
@@ skipping 259 matching lines @@
 WebInspector.TracingFrameLayerTree = function(target, snapshot)
 {
     this._target = target;
     this._snapshot = snapshot;
     /** @type {!Array<!WebInspector.LayerPaintEvent>|undefined} */
     this._paints;
 }
 
 WebInspector.TracingFrameLayerTree.prototype = {
     /**
-     * @param {function(!WebInspector.LayerTreeBase)} callback
+     * @return {!Promise<?WebInspector.TracingLayerTree>}
      */
-    resolve: function(callback)
+    layerTreePromise: function()
     {
-        this._snapshot.requestObject(onGotObject.bind(this));
-        /**
-         * @this {WebInspector.TracingFrameLayerTree}
-         * @param {?Object} result
-         */
-        function onGotObject(result)
-        {
+        return this._snapshot.objectPromise().then(result => {
             if (!result)
                 return;

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

null

             var viewport = result["device_viewport_size"];
             var tiles = result["active_tiles"];
             var rootLayer = result["active_tree"]["root_layer"];
             var layers = result["active_tree"]["layers"];
             var layerTree = new WebInspector.TracingLayerTree(this._target);
             layerTree.setViewportSize(viewport);
             layerTree.setTiles(tiles);
-            layerTree.setLayers(rootLayer, layers, this._paints || [], callback.bind(null, layerTree));
-        }
+            return new Promise(resolve => layerTree.setLayers(rootLayer, layers, this._paints || [], () => resolve(layerTree)));
+        });
     },
 
     /**
-     * @return {!Array<!WebInspector.LayerPaintEvent>}
+     * @return {!Array<!WebInspector.LayerPaintEvent>} paints

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

drop paints

      */
     paints: function()
     {
         return this._paints || [];
     },
 
     /**
      * @param {!Array<!WebInspector.LayerPaintEvent>} paints
      */
     _setPaints: function(paints)
     {
         this._paints = paints;
-    },
+    }
 };
 
 
 /**
  * @constructor
  * @param {number} startTime
  * @param {number} startTimeOffset
  */
 WebInspector.TimelineFrame = function(startTime, startTimeOffset)
 {
@@ skipping 81 matching lines @@
 
     /**
      * @return {!WebInspector.TracingModel.Event}
      */
     event: function()
     {
         return this._event;
     },
 
     /**
-     * @param {function(?Array.<number>, ?string)} callback
+     * @return {!Promise<?{rect: !Array<number>, serializedPicture: string}>}
      */
-    loadPicture: function(callback)
+    picturePromise: function()
     {
-        this._event.picture.requestObject(onGotObject);
-        /**
-         * @param {?Object} result
-         */
-        function onGotObject(result)
-        {
-            if (!result || !result["skp64"]) {
-                callback(null, null);
-                return;
-            }
+        return this._event.picture.objectPromise().then(result => {
+            if (!result)
+                return null;
             var rect = result["params"] && result["params"]["layer_rect"];
-            callback(rect, result["skp64"]);
-        }
+            var picture = result["skp64"];
+            return rect && picture ? {rect: rect, serializedPicture: picture} : null;
+        });
     },
 
     /**
-     * @param {function(?Array.<number>, ?WebInspector.PaintProfilerSnapshot)} callback
+     * @return !Promise<?{rect: Array<number>, snapshot: !WebInspector.PaintProfilerSnapshot}>}
      */
-    loadSnapshot: function(callback)
+    snapshotPromise: function()
     {
-        this.loadPicture(onGotPicture.bind(this));
-        /**
-         * @param {?Array.<number>} rect
-         * @param {?string} picture
-         * @this {WebInspector.LayerPaintEvent}
-         */
-        function onGotPicture(rect, picture)
-        {
-            if (!rect || !picture || !this._target) {
-                callback(null, null);
-                return;
-            }
-            WebInspector.PaintProfilerSnapshot.load(this._target, picture, callback.bind(null, rect));
-        }
+        return this.picturePromise().then(picture => {
+            if (!picture || !this._target)
+                return null;
+            return WebInspector.PaintProfilerSnapshot.load(this._target, picture.serializedPicture).then(snapshot => snapshot ? {rect: picture.rect, snapshot: snapshot} : null);
+        });
     }
 };
 
 /**
  * @constructor
  * @param {number} triggerTime
  * @param {!Object.<string, number>} timeByCategory
  */
 WebInspector.PendingFrame = function(triggerTime, timeByCategory)
 {
     /** @type {!Object.<string, number>} */
     this.timeByCategory = timeByCategory;
     /** @type {!Array.<!WebInspector.LayerPaintEvent>} */
     this.paints = [];
     /** @type {number|undefined} */
     this.mainFrameId = undefined;
     this.triggerTime = triggerTime;
 }