Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(511)

Side by Side Diff: chrome/browser/resources/net_internals/timeline_graph_view.js

Issue 10834312: Make net-internals work a bit better on Android. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src/
Patch Set: sync Created 8 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 /** 5 /**
6 * A TimelineGraphView displays a timeline graph on a canvas element. 6 * A TimelineGraphView displays a timeline graph on a canvas element.
7 */ 7 */
8 var TimelineGraphView = (function() { 8 var TimelineGraphView = (function() {
9 'use strict'; 9 'use strict';
10 // We inherit from TopMidBottomView. 10 // We inherit from TopMidBottomView.
(...skipping 338 matching lines...) Expand 10 before | Expand all | Expand 10 after
349 // Figure out what time values to display. 349 // Figure out what time values to display.
350 var position = this.scrollbar_.getPosition(); 350 var position = this.scrollbar_.getPosition();
351 // If the entire time range is being displayed, align the right edge of 351 // If the entire time range is being displayed, align the right edge of
352 // the graph to the end of the time range. 352 // the graph to the end of the time range.
353 if (this.scrollbar_.getRange() == 0) 353 if (this.scrollbar_.getRange() == 0)
354 position = this.getLength_() - this.canvas_.width; 354 position = this.getLength_() - this.canvas_.width;
355 var visibleStartTime = this.startTime_ + position * this.scale_; 355 var visibleStartTime = this.startTime_ + position * this.scale_;
356 356
357 // Make space at the bottom of the graph for the time labels, and then 357 // Make space at the bottom of the graph for the time labels, and then
358 // draw the labels. 358 // draw the labels.
359 var textHeight = height;
359 height -= fontHeight + LABEL_VERTICAL_SPACING; 360 height -= fontHeight + LABEL_VERTICAL_SPACING;
360 this.drawTimeLabels(context, width, height, visibleStartTime); 361 this.drawTimeLabels(context, width, height, textHeight, visibleStartTime);
361 362
362 // Draw outline of the main graph area. 363 // Draw outline of the main graph area.
363 context.strokeStyle = GRID_COLOR; 364 context.strokeStyle = GRID_COLOR;
364 context.strokeRect(0, 0, width - 1, height - 1); 365 context.strokeRect(0, 0, width - 1, height - 1);
365 366
366 // Layout graphs and have them draw their tick marks. 367 // Layout graphs and have them draw their tick marks.
367 for (var i = 0; i < this.graphs_.length; ++i) { 368 for (var i = 0; i < this.graphs_.length; ++i) {
368 this.graphs_[i].layout(width, height, fontHeight, visibleStartTime, 369 this.graphs_[i].layout(width, height, fontHeight, visibleStartTime,
369 this.scale_); 370 this.scale_);
370 this.graphs_[i].drawTicks(context); 371 this.graphs_[i].drawTicks(context);
371 } 372 }
372 373
373 // Draw the lines of all graphs, and then draw their labels. 374 // Draw the lines of all graphs, and then draw their labels.
374 for (var i = 0; i < this.graphs_.length; ++i) 375 for (var i = 0; i < this.graphs_.length; ++i)
375 this.graphs_[i].drawLines(context); 376 this.graphs_[i].drawLines(context);
376 for (var i = 0; i < this.graphs_.length; ++i) 377 for (var i = 0; i < this.graphs_.length; ++i)
377 this.graphs_[i].drawLabels(context); 378 this.graphs_[i].drawLabels(context);
378 379
379 // Restore original transformation matrix. 380 // Restore original transformation matrix.
380 context.restore(); 381 context.restore();
381 }, 382 },
382 383
383 /** 384 /**
384 * Draw time labels below the graph. Takes in start time as an argument 385 * Draw time labels below the graph. Takes in start time as an argument
385 * since it may not be |startTime_|, when we're displaying the entire 386 * since it may not be |startTime_|, when we're displaying the entire
386 * time range. 387 * time range.
387 */ 388 */
388 drawTimeLabels: function(context, width, height, startTime) { 389 drawTimeLabels: function(context, width, height, textHeight, startTime) {
389 var textHeight = height + LABEL_VERTICAL_SPACING;
390
391 // Text for a time string to use in determining how far apart 390 // Text for a time string to use in determining how far apart
392 // to place text labels. 391 // to place text labels.
393 var sampleText = (new Date(startTime)).toLocaleTimeString(); 392 var sampleText = (new Date(startTime)).toLocaleTimeString();
394 393
395 // The desired spacing for text labels. 394 // The desired spacing for text labels.
396 var targetSpacing = context.measureText(sampleText).width + 395 var targetSpacing = context.measureText(sampleText).width +
397 LABEL_LABEL_HORIZONTAL_SPACING; 396 LABEL_LABEL_HORIZONTAL_SPACING;
398 397
399 // The allowed time step values between adjacent labels. Anything much 398 // The allowed time step values between adjacent labels. Anything much
400 // over a couple minutes isn't terribly realistic, given how much memory 399 // over a couple minutes isn't terribly realistic, given how much memory
(...skipping 20 matching lines...) Expand all
421 } 420 }
422 421
423 // If no such value, give up. 422 // If no such value, give up.
424 if (!timeStep) 423 if (!timeStep)
425 return; 424 return;
426 425
427 // Find the time for the first label. This time is a perfect multiple of 426 // Find the time for the first label. This time is a perfect multiple of
428 // timeStep because of how UTC times work. 427 // timeStep because of how UTC times work.
429 var time = Math.ceil(startTime / timeStep) * timeStep; 428 var time = Math.ceil(startTime / timeStep) * timeStep;
430 429
431 context.textBaseline = 'top'; 430 context.textBaseline = 'bottom';
432 context.textAlign = 'center'; 431 context.textAlign = 'center';
433 context.fillStyle = TEXT_COLOR; 432 context.fillStyle = TEXT_COLOR;
434 context.strokeStyle = GRID_COLOR; 433 context.strokeStyle = GRID_COLOR;
435 434
436 // Draw labels and vertical grid lines. 435 // Draw labels and vertical grid lines.
437 while (true) { 436 while (true) {
438 var x = Math.round((time - startTime) / this.scale_); 437 var x = Math.round((time - startTime) / this.scale_);
439 if (x >= width) 438 if (x >= width)
440 break; 439 break;
441 var text = (new Date(time)).toLocaleTimeString(); 440 var text = (new Date(time)).toLocaleTimeString();
(...skipping 284 matching lines...) Expand 10 before | Expand all | Expand 10 after
726 for (var i = 1; i < this.labels_.length; ++i) 725 for (var i = 1; i < this.labels_.length; ++i)
727 context.fillText(this.labels_[i], x, step * i); 726 context.fillText(this.labels_[i], x, step * i);
728 } 727 }
729 }; 728 };
730 729
731 return Graph; 730 return Graph;
732 })(); 731 })();
733 732
734 return TimelineGraphView; 733 return TimelineGraphView;
735 })(); 734 })();
OLDNEW
« no previous file with comments | « chrome/browser/resources/net_internals/tab_switcher_view.css ('k') | chrome/browser/resources/net_internals/util.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698