DevTools: Get rid of CSS hackery in CanvasProfiler.

Source/devtools/front_end/profiler/CanvasProfileView.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 32 matching lines @@
     this._traceLogId = profile.traceLogId();
     this._traceLogPlayer = /** @type {!WebInspector.CanvasTraceLogPlayerProxy} */ (profile.traceLogPlayer());
     this._linkifier = new WebInspector.Linkifier();
 
     this._replayInfoSplitView = new WebInspector.SplitView(true, true, "canvasProfileViewReplaySplitViewState", 0.34);
     this._replayInfoSplitView.show(this.element);
 
     this._imageSplitView = new WebInspector.SplitView(false, true, "canvasProfileViewSplitViewState", 300);
     this._imageSplitView.show(this._replayInfoSplitView.mainElement());
 
-    var replayImageContainerView = new WebInspector.VBox();
+    var replayImageContainerView = new WebInspector.VBoxWithResizeCallback(this._onReplayImageResize.bind(this));
     replayImageContainerView.setMinimumSize(50, 28);
     replayImageContainerView.show(this._imageSplitView.mainElement());
 
-    // NOTE: The replayImageContainer can NOT be a flex div (e.g. VBox or SplitView elements)!
-    var replayImageContainer = replayImageContainerView.element.createChild("div");
+    var replayImageContainer = replayImageContainerView.element;
     replayImageContainer.id = "canvas-replay-image-container";
-    this._replayImageElement = replayImageContainer.createChild("img", "canvas-replay-image");
+    var replayImageParent = replayImageContainer.createChild("div", "canvas-replay-image-parent");
+    replayImageParent.createChild("span"); // Helps to align the image vertically.
+    this._replayImageElement = replayImageParent.createChild("img");
     this._debugInfoElement = replayImageContainer.createChild("div", "canvas-debug-info hidden");
     this._spinnerIcon = replayImageContainer.createChild("div", "spinner-icon small hidden");
 
     var replayLogContainerView = new WebInspector.VBox();
     replayLogContainerView.setMinimumSize(22, 22);
     replayLogContainerView.show(this._imageSplitView.sidebarElement());
 
     var replayLogContainer = replayLogContainerView.element;
     var controlsContainer = replayLogContainer.createChild("div", "status-bar");
     var logGridContainer = replayLogContainer.createChild("div", "canvas-replay-log");
@@ skipping 51 matching lines @@
     get statusBarItems()
     {
         return [];
     },
 
     get profile()
     {
         return this._profile;
     },
 
+    _onReplayImageResize: function()
+    {
+        var parent = this._replayImageElement.parentElement;
+        this._replayImageElement.style.maxWidth = parent.clientWidth + "px";
+        this._replayImageElement.style.maxHeight = parent.clientHeight + "px";
+    },
+
     /**
      * @override
      * @return {!Array.<!Element>}
      */
     elementsToRestoreScrollPositionsFor: function()
     {
         return [this._logGrid.scrollContainer];
     },
 
     /**
@@ skipping 1130 matching lines @@
     },
 
     clearResourceStates: function()
     {
         this._currentResourceStates = {};
         this.dispatchEventToListeners(WebInspector.CanvasTraceLogPlayerProxy.Events.CanvasReplayStateChanged);
     },
 
     __proto__: WebInspector.Object.prototype
 }