trace-viewer/tracing/tracing/ui/extras/chrome/cc/picture_ops_chart_summary_view.html - platform/external/chromium-trace - Git at Google

 <!DOCTYPE html>
 <!--
 Copyright (c) 2013 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.
 -->

 <link rel="stylesheet"
     href="/ui/extras/chrome/cc/picture_ops_chart_summary_view.css">

 <link rel="import" href="/ui/base/ui.html">

 <script>
 'use strict';

 tr.exportTo('tr.ui.e.chrome.cc', function() {
   var OPS_TIMING_ITERATIONS = 3;
   var CHART_PADDING_LEFT = 65;
   var CHART_PADDING_RIGHT = 40;
   var AXIS_PADDING_LEFT = 60;
   var AXIS_PADDING_RIGHT = 35;
   var AXIS_PADDING_TOP = 25;
   var AXIS_PADDING_BOTTOM = 45;
   var AXIS_LABEL_PADDING = 5;
   var AXIS_TICK_SIZE = 10;
   var LABEL_PADDING = 5;
   var LABEL_INTERLEAVE_OFFSET = 15;
   var BAR_PADDING = 5;
   var VERTICAL_TICKS = 5;
   var HUE_CHAR_CODE_ADJUSTMENT = 5.7;

   /**
    * Provides a chart showing the cumulative time spent in Skia operations
    * during picture rasterization.
    *
    * @constructor
    */
   var PictureOpsChartSummaryView = tr.ui.b.define(
       'tr-ui-e-chrome-cc-picture-ops-chart-summary-view');

   PictureOpsChartSummaryView.prototype = {
     __proto__: HTMLUnknownElement.prototype,

     decorate: function() {
       this.picture_ = undefined;
       this.pictureDataProcessed_ = false;

       this.chartScale_ = window.devicePixelRatio;

       this.chart_ = document.createElement('canvas');
       this.chartCtx_ = this.chart_.getContext('2d');
       this.appendChild(this.chart_);

       this.opsTimingData_ = [];

       this.chartWidth_ = 0;
       this.chartHeight_ = 0;
       this.requiresRedraw_ = true;

       this.currentBarMouseOverTarget_ = null;

       this.chart_.addEventListener('mousemove', this.onMouseMove_.bind(this));
     },

     get requiresRedraw() {
       return this.requiresRedraw_;
     },

     set requiresRedraw(requiresRedraw) {
       this.requiresRedraw_ = requiresRedraw;
     },

     get picture() {
       return this.picture_;
     },

     set picture(picture) {
       this.picture_ = picture;
       this.pictureDataProcessed_ = false;

       if (this.classList.contains('hidden'))
         return;

       this.processPictureData_();
       this.requiresRedraw = true;
       this.updateChartContents();
     },

     hide: function() {
       this.classList.add('hidden');
     },

     show: function() {

       this.classList.remove('hidden');

       if (this.pictureDataProcessed_)
         return;

       this.processPictureData_();
       this.requiresRedraw = true;
       this.updateChartContents();

     },

     onMouseMove_: function(e) {

       var lastBarMouseOverTarget = this.currentBarMouseOverTarget_;
       this.currentBarMouseOverTarget_ = null;

       var x = e.offsetX;
       var y = e.offsetY;

       var chartLeft = CHART_PADDING_LEFT;
       var chartRight = this.chartWidth_ - CHART_PADDING_RIGHT;
       var chartTop = AXIS_PADDING_TOP;
       var chartBottom = this.chartHeight_ - AXIS_PADDING_BOTTOM;
       var chartInnerWidth = chartRight - chartLeft;

       if (x > chartLeft && x < chartRight && y > chartTop && y < chartBottom) {

         this.currentBarMouseOverTarget_ = Math.floor(
             (x - chartLeft) / chartInnerWidth * this.opsTimingData_.length);

         this.currentBarMouseOverTarget_ = tr.b.clamp(
             this.currentBarMouseOverTarget_, 0, this.opsTimingData_.length - 1);

       }

       if (this.currentBarMouseOverTarget_ === lastBarMouseOverTarget)
         return;

       this.drawChartContents_();
     },

     updateChartContents: function() {

       if (this.requiresRedraw)
         this.updateChartDimensions_();

       this.drawChartContents_();
     },

     updateChartDimensions_: function() {
       this.chartWidth_ = this.offsetWidth;
       this.chartHeight_ = this.offsetHeight;

       // Scale up the canvas according to the devicePixelRatio, then reduce it
       // down again via CSS. Finally we apply a scale to the canvas so that
       // things are drawn at the correct size.
       this.chart_.width = this.chartWidth_ * this.chartScale_;
       this.chart_.height = this.chartHeight_ * this.chartScale_;

       this.chart_.style.width = this.chartWidth_ + 'px';
       this.chart_.style.height = this.chartHeight_ + 'px';

       this.chartCtx_.scale(this.chartScale_, this.chartScale_);
     },

     processPictureData_: function() {

       this.resetOpsTimingData_();
       this.pictureDataProcessed_ = true;

       if (!this.picture_)
         return;

       var ops = this.picture_.getOps();
       if (!ops)
         return;

       ops = this.picture_.tagOpsWithTimings(ops);

       // Check that there are valid times.
       if (ops[0].cmd_time === undefined)
         return;

       this.collapseOpsToTimingBuckets_(ops);
     },

     drawChartContents_: function() {

       this.clearChartContents_();

       if (this.opsTimingData_.length === 0) {
         this.showNoTimingDataMessage_();
         return;
       }

       this.drawChartAxes_();
       this.drawBars_();
       this.drawLineAtBottomOfChart_();

       if (this.currentBarMouseOverTarget_ === null)
         return;

       this.drawTooltip_();
     },

     drawLineAtBottomOfChart_: function() {
       this.chartCtx_.strokeStyle = '#AAA';
       this.chartCtx_.moveTo(0, this.chartHeight_ - 0.5);
       this.chartCtx_.lineTo(this.chartWidth_, this.chartHeight_ - 0.5);
       this.chartCtx_.stroke();
     },

     drawTooltip_: function() {

       var tooltipData = this.opsTimingData_[this.currentBarMouseOverTarget_];
       var tooltipTitle = tooltipData.cmd_string;
       var tooltipTime = tooltipData.cmd_time.toFixed(4);

       var tooltipWidth = 110;
       var tooltipHeight = 40;
       var chartInnerWidth = this.chartWidth_ - CHART_PADDING_RIGHT -
           CHART_PADDING_LEFT;
       var barWidth = chartInnerWidth / this.opsTimingData_.length;
       var tooltipOffset = Math.round((tooltipWidth - barWidth) * 0.5);

       var left = CHART_PADDING_LEFT + this.currentBarMouseOverTarget_ *
           barWidth - tooltipOffset;
       var top = Math.round((this.chartHeight_ - tooltipHeight) * 0.5);

       this.chartCtx_.save();

       this.chartCtx_.shadowOffsetX = 0;
       this.chartCtx_.shadowOffsetY = 5;
       this.chartCtx_.shadowBlur = 4;
       this.chartCtx_.shadowColor = 'rgba(0,0,0,0.4)';

       this.chartCtx_.strokeStyle = '#888';
       this.chartCtx_.fillStyle = '#EEE';
       this.chartCtx_.fillRect(left, top, tooltipWidth, tooltipHeight);

       this.chartCtx_.shadowColor = 'transparent';
       this.chartCtx_.translate(0.5, 0.5);
       this.chartCtx_.strokeRect(left, top, tooltipWidth, tooltipHeight);

       this.chartCtx_.restore();

       this.chartCtx_.fillStyle = '#222';
       this.chartCtx_.textBaseline = 'top';
       this.chartCtx_.font = '800 12px Arial';
       this.chartCtx_.fillText(tooltipTitle, left + 8, top + 8);

       this.chartCtx_.fillStyle = '#555';
       this.chartCtx_.textBaseline = 'top';
       this.chartCtx_.font = '400 italic 10px Arial';
       this.chartCtx_.fillText('Total: ' + tooltipTime + 'ms',
           left + 8, top + 22);
     },

     drawBars_: function() {

       var len = this.opsTimingData_.length;
       var max = this.opsTimingData_[0].cmd_time;
       var min = this.opsTimingData_[len - 1].cmd_time;

       var width = this.chartWidth_ - CHART_PADDING_LEFT - CHART_PADDING_RIGHT;
       var height = this.chartHeight_ - AXIS_PADDING_TOP - AXIS_PADDING_BOTTOM;
       var barWidth = Math.floor(width / len);

       var opData;
       var opTiming;
       var opHeight;
       var opLabel;
       var barLeft;

       for (var b = 0; b < len; b++) {

         opData = this.opsTimingData_[b];
         opTiming = opData.cmd_time / max;

         opHeight = Math.round(Math.max(1, opTiming * height));
         opLabel = opData.cmd_string;
         barLeft = CHART_PADDING_LEFT + b * barWidth;

         this.chartCtx_.fillStyle = this.getOpColor_(opLabel);

         this.chartCtx_.fillRect(barLeft + BAR_PADDING, AXIS_PADDING_TOP +
             height - opHeight, barWidth - 2 * BAR_PADDING, opHeight);
       }

     },

     getOpColor_: function(opName) {

       var characters = opName.split('');
       var hue = characters.reduce(this.reduceNameToHue, 0) % 360;

       return 'hsl(' + hue + ', 30%, 50%)';
     },

     reduceNameToHue: function(previousValue, currentValue, index, array) {
       // Get the char code and apply a magic adjustment value so we get
       // pretty colors from around the rainbow.
       return Math.round(previousValue + currentValue.charCodeAt(0) *
           HUE_CHAR_CODE_ADJUSTMENT);
     },

     drawChartAxes_: function() {

       var len = this.opsTimingData_.length;
       var max = this.opsTimingData_[0].cmd_time;
       var min = this.opsTimingData_[len - 1].cmd_time;

       var width = this.chartWidth_ - AXIS_PADDING_LEFT - AXIS_PADDING_RIGHT;
       var height = this.chartHeight_ - AXIS_PADDING_TOP - AXIS_PADDING_BOTTOM;

       var totalBarWidth = this.chartWidth_ - CHART_PADDING_LEFT -
           CHART_PADDING_RIGHT;
       var barWidth = Math.floor(totalBarWidth / len);
       var tickYInterval = height / (VERTICAL_TICKS - 1);
       var tickYPosition = 0;
       var tickValInterval = (max - min) / (VERTICAL_TICKS - 1);
       var tickVal = 0;

       this.chartCtx_.fillStyle = '#333';
       this.chartCtx_.strokeStyle = '#777';
       this.chartCtx_.save();

       // Translate half a pixel to avoid blurry lines.
       this.chartCtx_.translate(0.5, 0.5);

       // Sides.

       this.chartCtx_.save();

       this.chartCtx_.translate(AXIS_PADDING_LEFT, AXIS_PADDING_TOP);
       this.chartCtx_.moveTo(0, 0);
       this.chartCtx_.lineTo(0, height);
       this.chartCtx_.lineTo(width, height);

       // Y-axis ticks.
       this.chartCtx_.font = '10px Arial';
       this.chartCtx_.textAlign = 'right';
       this.chartCtx_.textBaseline = 'middle';

       for (var t = 0; t < VERTICAL_TICKS; t++) {

         tickYPosition = Math.round(t * tickYInterval);
         tickVal = (max - t * tickValInterval).toFixed(4);

         this.chartCtx_.moveTo(0, tickYPosition);
         this.chartCtx_.lineTo(-AXIS_TICK_SIZE, tickYPosition);
         this.chartCtx_.fillText(tickVal,
             -AXIS_TICK_SIZE - AXIS_LABEL_PADDING, tickYPosition);

       }

       this.chartCtx_.stroke();

       this.chartCtx_.restore();


       // Labels.

       this.chartCtx_.save();

       this.chartCtx_.translate(CHART_PADDING_LEFT + Math.round(barWidth * 0.5),
           AXIS_PADDING_TOP + height + LABEL_PADDING);

       this.chartCtx_.font = '10px Arial';
       this.chartCtx_.textAlign = 'center';
       this.chartCtx_.textBaseline = 'top';

       var labelTickLeft;
       var labelTickBottom;
       for (var l = 0; l < len; l++) {

         labelTickLeft = Math.round(l * barWidth);
         labelTickBottom = l % 2 * LABEL_INTERLEAVE_OFFSET;

         this.chartCtx_.save();
         this.chartCtx_.moveTo(labelTickLeft, -LABEL_PADDING);
         this.chartCtx_.lineTo(labelTickLeft, labelTickBottom);
         this.chartCtx_.stroke();
         this.chartCtx_.restore();

         this.chartCtx_.fillText(this.opsTimingData_[l].cmd_string,
             labelTickLeft, labelTickBottom);
       }

       this.chartCtx_.restore();

       this.chartCtx_.restore();
     },

     clearChartContents_: function() {
       this.chartCtx_.clearRect(0, 0, this.chartWidth_, this.chartHeight_);
     },

     showNoTimingDataMessage_: function() {
       this.chartCtx_.font = '800 italic 14px Arial';
       this.chartCtx_.fillStyle = '#333';
       this.chartCtx_.textAlign = 'center';
       this.chartCtx_.textBaseline = 'middle';
       this.chartCtx_.fillText('No timing data available.',
           this.chartWidth_ * 0.5, this.chartHeight_ * 0.5);
     },

     collapseOpsToTimingBuckets_: function(ops) {

       var opsTimingDataIndexHash_ = {};
       var timingData = this.opsTimingData_;
       var op;
       var opIndex;

       for (var i = 0; i < ops.length; i++) {

         op = ops[i];

         if (op.cmd_time === undefined)
           continue;

         // Try to locate the entry for the current operation
         // based on its name. If that fails, then create one for it.
         opIndex = opsTimingDataIndexHash_[op.cmd_string] || null;

         if (opIndex === null) {
           timingData.push({
             cmd_time: 0,
             cmd_string: op.cmd_string
           });

           opIndex = timingData.length - 1;
           opsTimingDataIndexHash_[op.cmd_string] = opIndex;
         }

         timingData[opIndex].cmd_time += op.cmd_time;

       }

       timingData.sort(this.sortTimingBucketsByOpTimeDescending_);

       this.collapseTimingBucketsToOther_(4);
     },

     collapseTimingBucketsToOther_: function(count) {

       var timingData = this.opsTimingData_;
       var otherSource = timingData.splice(count, timingData.length - count);
       var otherDestination = null;

       if (!otherSource.length)
         return;

       timingData.push({
         cmd_time: 0,
         cmd_string: 'Other'
       });

       otherDestination = timingData[timingData.length - 1];
       for (var i = 0; i < otherSource.length; i++) {
         otherDestination.cmd_time += otherSource[i].cmd_time;
       }
     },

     sortTimingBucketsByOpTimeDescending_: function(a, b) {
       return b.cmd_time - a.cmd_time;
     },

     resetOpsTimingData_: function() {
       this.opsTimingData_.length = 0;
     }
   };

   return {
     PictureOpsChartSummaryView: PictureOpsChartSummaryView
   };
 });
 </script>
	<!DOCTYPE html>
	<!--
	Copyright (c) 2013 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.
	-->

	<link rel="stylesheet"
	href="/ui/extras/chrome/cc/picture_ops_chart_summary_view.css">

	<link rel="import" href="/ui/base/ui.html">

	<script>
	'use strict';

	tr.exportTo('tr.ui.e.chrome.cc', function() {
	var OPS_TIMING_ITERATIONS = 3;
	var CHART_PADDING_LEFT = 65;
	var CHART_PADDING_RIGHT = 40;
	var AXIS_PADDING_LEFT = 60;
	var AXIS_PADDING_RIGHT = 35;
	var AXIS_PADDING_TOP = 25;
	var AXIS_PADDING_BOTTOM = 45;
	var AXIS_LABEL_PADDING = 5;
	var AXIS_TICK_SIZE = 10;
	var LABEL_PADDING = 5;
	var LABEL_INTERLEAVE_OFFSET = 15;
	var BAR_PADDING = 5;
	var VERTICAL_TICKS = 5;
	var HUE_CHAR_CODE_ADJUSTMENT = 5.7;

	/**
	* Provides a chart showing the cumulative time spent in Skia operations
	* during picture rasterization.
	*
	* @constructor
	*/
	var PictureOpsChartSummaryView = tr.ui.b.define(
	'tr-ui-e-chrome-cc-picture-ops-chart-summary-view');

	PictureOpsChartSummaryView.prototype = {
	__proto__: HTMLUnknownElement.prototype,

	decorate: function() {
	this.picture_ = undefined;
	this.pictureDataProcessed_ = false;

	this.chartScale_ = window.devicePixelRatio;

	this.chart_ = document.createElement('canvas');
	this.chartCtx_ = this.chart_.getContext('2d');
	this.appendChild(this.chart_);

	this.opsTimingData_ = [];

	this.chartWidth_ = 0;
	this.chartHeight_ = 0;
	this.requiresRedraw_ = true;

	this.currentBarMouseOverTarget_ = null;

	this.chart_.addEventListener('mousemove', this.onMouseMove_.bind(this));
	},

	get requiresRedraw() {
	return this.requiresRedraw_;
	},

	set requiresRedraw(requiresRedraw) {
	this.requiresRedraw_ = requiresRedraw;
	},

	get picture() {
	return this.picture_;
	},

	set picture(picture) {
	this.picture_ = picture;
	this.pictureDataProcessed_ = false;

	if (this.classList.contains('hidden'))
	return;

	this.processPictureData_();
	this.requiresRedraw = true;
	this.updateChartContents();
	},

	hide: function() {
	this.classList.add('hidden');
	},

	show: function() {

	this.classList.remove('hidden');

	if (this.pictureDataProcessed_)
	return;

	this.processPictureData_();
	this.requiresRedraw = true;
	this.updateChartContents();

	},

	onMouseMove_: function(e) {

	var lastBarMouseOverTarget = this.currentBarMouseOverTarget_;
	this.currentBarMouseOverTarget_ = null;

	var x = e.offsetX;
	var y = e.offsetY;

	var chartLeft = CHART_PADDING_LEFT;
	var chartRight = this.chartWidth_ - CHART_PADDING_RIGHT;
	var chartTop = AXIS_PADDING_TOP;
	var chartBottom = this.chartHeight_ - AXIS_PADDING_BOTTOM;
	var chartInnerWidth = chartRight - chartLeft;

	if (x > chartLeft && x < chartRight && y > chartTop && y < chartBottom) {

	this.currentBarMouseOverTarget_ = Math.floor(
	(x - chartLeft) / chartInnerWidth * this.opsTimingData_.length);

	this.currentBarMouseOverTarget_ = tr.b.clamp(
	this.currentBarMouseOverTarget_, 0, this.opsTimingData_.length - 1);

	}

	if (this.currentBarMouseOverTarget_ === lastBarMouseOverTarget)
	return;

	this.drawChartContents_();
	},

	updateChartContents: function() {

	if (this.requiresRedraw)
	this.updateChartDimensions_();

	this.drawChartContents_();
	},

	updateChartDimensions_: function() {
	this.chartWidth_ = this.offsetWidth;
	this.chartHeight_ = this.offsetHeight;

	// Scale up the canvas according to the devicePixelRatio, then reduce it
	// down again via CSS. Finally we apply a scale to the canvas so that
	// things are drawn at the correct size.
	this.chart_.width = this.chartWidth_ * this.chartScale_;
	this.chart_.height = this.chartHeight_ * this.chartScale_;

	this.chart_.style.width = this.chartWidth_ + 'px';
	this.chart_.style.height = this.chartHeight_ + 'px';

	this.chartCtx_.scale(this.chartScale_, this.chartScale_);
	},

	processPictureData_: function() {

	this.resetOpsTimingData_();
	this.pictureDataProcessed_ = true;

	if (!this.picture_)
	return;

	var ops = this.picture_.getOps();
	if (!ops)
	return;

	ops = this.picture_.tagOpsWithTimings(ops);

	// Check that there are valid times.
	if (ops[0].cmd_time === undefined)
	return;

	this.collapseOpsToTimingBuckets_(ops);
	},

	drawChartContents_: function() {

	this.clearChartContents_();

	if (this.opsTimingData_.length === 0) {
	this.showNoTimingDataMessage_();
	return;
	}

	this.drawChartAxes_();
	this.drawBars_();
	this.drawLineAtBottomOfChart_();

	if (this.currentBarMouseOverTarget_ === null)
	return;

	this.drawTooltip_();
	},

	drawLineAtBottomOfChart_: function() {
	this.chartCtx_.strokeStyle = '#AAA';
	this.chartCtx_.moveTo(0, this.chartHeight_ - 0.5);
	this.chartCtx_.lineTo(this.chartWidth_, this.chartHeight_ - 0.5);
	this.chartCtx_.stroke();
	},

	drawTooltip_: function() {

	var tooltipData = this.opsTimingData_[this.currentBarMouseOverTarget_];
	var tooltipTitle = tooltipData.cmd_string;
	var tooltipTime = tooltipData.cmd_time.toFixed(4);

	var tooltipWidth = 110;
	var tooltipHeight = 40;
	var chartInnerWidth = this.chartWidth_ - CHART_PADDING_RIGHT -
	CHART_PADDING_LEFT;
	var barWidth = chartInnerWidth / this.opsTimingData_.length;
	var tooltipOffset = Math.round((tooltipWidth - barWidth) * 0.5);

	var left = CHART_PADDING_LEFT + this.currentBarMouseOverTarget_ *
	barWidth - tooltipOffset;
	var top = Math.round((this.chartHeight_ - tooltipHeight) * 0.5);

	this.chartCtx_.save();

	this.chartCtx_.shadowOffsetX = 0;
	this.chartCtx_.shadowOffsetY = 5;
	this.chartCtx_.shadowBlur = 4;
	this.chartCtx_.shadowColor = 'rgba(0,0,0,0.4)';

	this.chartCtx_.strokeStyle = '#888';
	this.chartCtx_.fillStyle = '#EEE';
	this.chartCtx_.fillRect(left, top, tooltipWidth, tooltipHeight);

	this.chartCtx_.shadowColor = 'transparent';
	this.chartCtx_.translate(0.5, 0.5);
	this.chartCtx_.strokeRect(left, top, tooltipWidth, tooltipHeight);

	this.chartCtx_.restore();

	this.chartCtx_.fillStyle = '#222';
	this.chartCtx_.textBaseline = 'top';
	this.chartCtx_.font = '800 12px Arial';
	this.chartCtx_.fillText(tooltipTitle, left + 8, top + 8);

	this.chartCtx_.fillStyle = '#555';
	this.chartCtx_.textBaseline = 'top';
	this.chartCtx_.font = '400 italic 10px Arial';
	this.chartCtx_.fillText('Total: ' + tooltipTime + 'ms',
	left + 8, top + 22);
	},

	drawBars_: function() {

	var len = this.opsTimingData_.length;
	var max = this.opsTimingData_[0].cmd_time;
	var min = this.opsTimingData_[len - 1].cmd_time;

	var width = this.chartWidth_ - CHART_PADDING_LEFT - CHART_PADDING_RIGHT;
	var height = this.chartHeight_ - AXIS_PADDING_TOP - AXIS_PADDING_BOTTOM;
	var barWidth = Math.floor(width / len);

	var opData;
	var opTiming;
	var opHeight;
	var opLabel;
	var barLeft;

	for (var b = 0; b < len; b++) {

	opData = this.opsTimingData_[b];
	opTiming = opData.cmd_time / max;

	opHeight = Math.round(Math.max(1, opTiming * height));
	opLabel = opData.cmd_string;
	barLeft = CHART_PADDING_LEFT + b * barWidth;

	this.chartCtx_.fillStyle = this.getOpColor_(opLabel);

	this.chartCtx_.fillRect(barLeft + BAR_PADDING, AXIS_PADDING_TOP +
	height - opHeight, barWidth - 2 * BAR_PADDING, opHeight);
	}

	},

	getOpColor_: function(opName) {

	var characters = opName.split('');
	var hue = characters.reduce(this.reduceNameToHue, 0) % 360;

	return 'hsl(' + hue + ', 30%, 50%)';
	},

	reduceNameToHue: function(previousValue, currentValue, index, array) {
	// Get the char code and apply a magic adjustment value so we get
	// pretty colors from around the rainbow.
	return Math.round(previousValue + currentValue.charCodeAt(0) *
	HUE_CHAR_CODE_ADJUSTMENT);
	},

	drawChartAxes_: function() {

	var len = this.opsTimingData_.length;
	var max = this.opsTimingData_[0].cmd_time;
	var min = this.opsTimingData_[len - 1].cmd_time;

	var width = this.chartWidth_ - AXIS_PADDING_LEFT - AXIS_PADDING_RIGHT;
	var height = this.chartHeight_ - AXIS_PADDING_TOP - AXIS_PADDING_BOTTOM;

	var totalBarWidth = this.chartWidth_ - CHART_PADDING_LEFT -
	CHART_PADDING_RIGHT;
	var barWidth = Math.floor(totalBarWidth / len);
	var tickYInterval = height / (VERTICAL_TICKS - 1);
	var tickYPosition = 0;
	var tickValInterval = (max - min) / (VERTICAL_TICKS - 1);
	var tickVal = 0;

	this.chartCtx_.fillStyle = '#333';
	this.chartCtx_.strokeStyle = '#777';
	this.chartCtx_.save();

	// Translate half a pixel to avoid blurry lines.
	this.chartCtx_.translate(0.5, 0.5);

	// Sides.

	this.chartCtx_.save();

	this.chartCtx_.translate(AXIS_PADDING_LEFT, AXIS_PADDING_TOP);
	this.chartCtx_.moveTo(0, 0);
	this.chartCtx_.lineTo(0, height);
	this.chartCtx_.lineTo(width, height);

	// Y-axis ticks.
	this.chartCtx_.font = '10px Arial';
	this.chartCtx_.textAlign = 'right';
	this.chartCtx_.textBaseline = 'middle';

	for (var t = 0; t < VERTICAL_TICKS; t++) {

	tickYPosition = Math.round(t * tickYInterval);
	tickVal = (max - t * tickValInterval).toFixed(4);

	this.chartCtx_.moveTo(0, tickYPosition);
	this.chartCtx_.lineTo(-AXIS_TICK_SIZE, tickYPosition);
	this.chartCtx_.fillText(tickVal,
	-AXIS_TICK_SIZE - AXIS_LABEL_PADDING, tickYPosition);

	}

	this.chartCtx_.stroke();

	this.chartCtx_.restore();


	// Labels.

	this.chartCtx_.save();

	this.chartCtx_.translate(CHART_PADDING_LEFT + Math.round(barWidth * 0.5),
	AXIS_PADDING_TOP + height + LABEL_PADDING);

	this.chartCtx_.font = '10px Arial';
	this.chartCtx_.textAlign = 'center';
	this.chartCtx_.textBaseline = 'top';

	var labelTickLeft;
	var labelTickBottom;
	for (var l = 0; l < len; l++) {

	labelTickLeft = Math.round(l * barWidth);
	labelTickBottom = l % 2 * LABEL_INTERLEAVE_OFFSET;

	this.chartCtx_.save();
	this.chartCtx_.moveTo(labelTickLeft, -LABEL_PADDING);
	this.chartCtx_.lineTo(labelTickLeft, labelTickBottom);
	this.chartCtx_.stroke();
	this.chartCtx_.restore();

	this.chartCtx_.fillText(this.opsTimingData_[l].cmd_string,
	labelTickLeft, labelTickBottom);
	}

	this.chartCtx_.restore();

	this.chartCtx_.restore();
	},

	clearChartContents_: function() {
	this.chartCtx_.clearRect(0, 0, this.chartWidth_, this.chartHeight_);
	},

	showNoTimingDataMessage_: function() {
	this.chartCtx_.font = '800 italic 14px Arial';
	this.chartCtx_.fillStyle = '#333';
	this.chartCtx_.textAlign = 'center';
	this.chartCtx_.textBaseline = 'middle';
	this.chartCtx_.fillText('No timing data available.',
	this.chartWidth_ * 0.5, this.chartHeight_ * 0.5);
	},

	collapseOpsToTimingBuckets_: function(ops) {

	var opsTimingDataIndexHash_ = {};
	var timingData = this.opsTimingData_;
	var op;
	var opIndex;

	for (var i = 0; i < ops.length; i++) {

	op = ops[i];

	if (op.cmd_time === undefined)
	continue;

	// Try to locate the entry for the current operation
	// based on its name. If that fails, then create one for it.
	opIndex = opsTimingDataIndexHash_[op.cmd_string] \|\| null;

	if (opIndex === null) {
	timingData.push({
	cmd_time: 0,
	cmd_string: op.cmd_string
	});

	opIndex = timingData.length - 1;
	opsTimingDataIndexHash_[op.cmd_string] = opIndex;
	}

	timingData[opIndex].cmd_time += op.cmd_time;

	}

	timingData.sort(this.sortTimingBucketsByOpTimeDescending_);

	this.collapseTimingBucketsToOther_(4);
	},

	collapseTimingBucketsToOther_: function(count) {

	var timingData = this.opsTimingData_;
	var otherSource = timingData.splice(count, timingData.length - count);
	var otherDestination = null;

	if (!otherSource.length)
	return;

	timingData.push({
	cmd_time: 0,
	cmd_string: 'Other'
	});

	otherDestination = timingData[timingData.length - 1];
	for (var i = 0; i < otherSource.length; i++) {
	otherDestination.cmd_time += otherSource[i].cmd_time;
	}
	},

	sortTimingBucketsByOpTimeDescending_: function(a, b) {
	return b.cmd_time - a.cmd_time;
	},

	resetOpsTimingData_: function() {
	this.opsTimingData_.length = 0;
	}
	};

	return {
	PictureOpsChartSummaryView: PictureOpsChartSummaryView
	};
	});
	</script>