chrome/browser/resources/performance_monitor/chart.html - Issue 10900035: Version 2 of CPM UI, with rearranged controls, multiple graphs, event rollovers, etc.

Side by Side Diff: chrome/browser/resources/performance_monitor/chart.html

Issue 10900035: Version 2 of CPM UI, with rearranged controls, multiple graphs, event rollovers, etc. (Closed) Base URL: http://git.chromium.org/chromium/src.git@master

Patch Set: Latest fixes per jyasskin's review Created 8 years, 3 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

« no previous file with comments | « chrome/browser/resources/performance_monitor/chart.css ('k') | chrome/browser/resources/performance_monitor/chart.js » ('j') | chrome/browser/resources/performance_monitor/chart.js » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!doctype html>	1 <!doctype html>

2	2

3 <!-- Copyright (c) 2012 The Chromium Authors. All rights reserved.	3 <!-- Copyright (c) 2012 The Chromium Authors. All rights reserved.

4 Use of this source code is governed by a BSD-style license that can be	4 Use of this source code is governed by a BSD-style license that can be

5 found in the LICENSE file. -->	5 found in the LICENSE file. -->

6	6

7 <!-- This page uses Flot version 0.7 in compressed form for efficiency.	7 <!-- This page uses Flot version 0.7 in compressed form for efficiency.

8 Readable Flot source is available at http://code.google.com/p/flot/	8 Readable Flot source is available at http://code.google.com/p/flot/

9 Good caliber Flot API docs are at: http://people.iola.dk/olau/flot/API.txt	9 Good caliber Flot API docs are at: http://people.iola.dk/olau/flot/API.txt

10 as of 6/2012. -->	10 as of 6/2012. -->

11	11

12 <html>	12 <html>

13 <head>	13 <head>

14 <link rel="stylesheet" type="text/css" href="chart.css">	14 <link rel="stylesheet" type="text/css" href="chart.css">

15 </head>	15 </head>

16 <body>	16 <body>

17 <div id="choose-block">	17 <div class="horizontal-box">

18 <div id="choose-metrics">	18 <div id="choose-block">

19 <h2>Choose Metrics</h2>	19 <div id="choose-time-range-header" class="tab-label">

	20 Time Range

	21 </div>

	22 <div class="category-label">Time Resolution</div>

	23 <div id="choose-time-range">

	24 </div>

	25 <div class="category-label">Back/Forward by Half-Ranges</div>

	26 <div class="horizontal-box">

	27 <button id="back-time" title="Back"><<</button>

	28 <div class="spacer"></div>

	29 <button id="forward-time" title="Forward">>></button>

	30 </div>

	31

	32 <div id="choose-metrics-header" class="tab-label">

	33 Metrics to Display

	34 </div>

	35 <div id="choose-metrics">

	36 </div>

	37

	38 <div id="choose-events-header" class="tab-label">

	39 Events to Display

	40 </div>

	41 <div id="choose-events">

	42 </div>

20 </div>	43 </div>

21 <div id="choose-events">	44

22 <h2>Choose Events</h2>	45 <div id="charts"></div>

23 </div>	46 <div id="templates" hidden>

24 <div class="spacer"></div>	47 <div id="label-template" class="event-label"></div>

25 <div id="choose-time-range">	48 <div id="category-label-template" class="category-label"></div>

26 <h2>Choose Time Range</h2>	49 <div id="detail-checkbox-template" class="detail-checkbox">

27 </div>	50 <div class="horizontal-box">

28 </div>	51 <input type="checkbox"></input>

29 <div id="charts"></div>	52 <div class="detail-label">Change this label</div>

30 <div id="templates" hidden>	53 <div class="spacer"></div>

31 <div id="label-template" class="event-label"></div>	54 <div class="color-icon"></div>

32 <div id="checkbox-template" class="checkbox">	55 </div>

33 <label>	56 </div>

34 <input type="checkbox"></input>	57 <div id="radio-template" class="radio">

35 <span>Change this label</span>	58 <div class="horizontal-box">

36 </label>	59 <input type="radio" name="time-range"/>

37 </div>	60 <span>Change this label</span>

38 <div id="radio-template" class="radio">	61 </div>

39 <label>	62 </div>

40 <input type="radio" name="time-range">

41 <span>Change this label</span>

42 </label>

43 </div>	63 </div>

44 </div>	64 </div>

45 <script src="chrome://resources/js/cr.js"></script>	65 <script src="chrome://resources/js/cr.js"></script>

46 <script src="chrome://resources/js/util.js"></script>	66 <script src="chrome://resources/js/util.js"></script>

47 <script src="jquery.js"></script>	67 <script src="jquery.js"></script>

48 <script src="flot.js"></script>	68 <script src="flot.js"></script>

49 <script src="chart.js"></script>	69 <script src="chart.js"></script>

50 </body>	70 </body>

51 </html>	71 </html>

OLD	NEW