summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authornduca@chromium.org <nduca@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>2011-04-05 19:04:21 +0000
committernduca@chromium.org <nduca@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>2011-04-05 19:04:21 +0000
commit26a0750bd706c9c47c9fbee4ae848eb3dd6daae3 (patch)
tree709bcce0afa7049ab82319db293a1702722addd2
parent1ad3ce7025ac4f96c9a346d8a331e74fc5bd460a (diff)
downloadchromium_src-26a0750bd706c9c47c9fbee4ae848eb3dd6daae3.zip
chromium_src-26a0750bd706c9c47c9fbee4ae848eb3dd6daae3.tar.gz
chromium_src-26a0750bd706c9c47c9fbee4ae848eb3dd6daae3.tar.bz2
Various fixes to gpu tracing UI
- Use hidden instead of css style to hide things. - Add keyboard short help to summary when there is no selection. - For summation, report total per group as well as total across all slices - Fix stalling during mousemove by not showing duration text. Not best fix but better than nothing - Uniquely generate slice colors based on string hashcode. Review URL: http://codereview.chromium.org/6792039 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@80502 0039d316-1c4b-4281-b951-d872f2087c98
-rw-r--r--chrome/browser/resources/gpu_internals/info_view.js4
-rw-r--r--chrome/browser/resources/gpu_internals/sorted_array_utils.js2
-rw-r--r--chrome/browser/resources/gpu_internals/timeline.css4
-rw-r--r--chrome/browser/resources/gpu_internals/timeline.js13
-rw-r--r--chrome/browser/resources/gpu_internals/timeline_model.js9
-rw-r--r--chrome/browser/resources/gpu_internals/timeline_view.css13
-rw-r--r--chrome/browser/resources/gpu_internals/timeline_view.html6
-rw-r--r--chrome/browser/resources/gpu_internals/timeline_view.js70
8 files changed, 83 insertions, 38 deletions
diff --git a/chrome/browser/resources/gpu_internals/info_view.js b/chrome/browser/resources/gpu_internals/info_view.js
index bd62909..d4d5ff7 100644
--- a/chrome/browser/resources/gpu_internals/info_view.js
+++ b/chrome/browser/resources/gpu_internals/info_view.js
@@ -132,7 +132,7 @@ cr.define('gpu', function() {
link.textContent = bugid;
link.href = 'http://crbug.com/' + bugid;
reasonEl.appendChild(link);
- nreasons ++;
+ nreasons++;
}
for (j = 0; j < reason.webkit_bugs.length; ++j) {
@@ -148,7 +148,7 @@ cr.define('gpu', function() {
link.href = 'https://bugs.webkit.org/show_bug.cgi?id=' + bugid;
reasonEl.appendChild(link);
- nreasons ++;
+ nreasons++;
}
reasonsEl.appendChild(reasonEl);
diff --git a/chrome/browser/resources/gpu_internals/sorted_array_utils.js b/chrome/browser/resources/gpu_internals/sorted_array_utils.js
index edb4349..b99d369 100644
--- a/chrome/browser/resources/gpu_internals/sorted_array_utils.js
+++ b/chrome/browser/resources/gpu_internals/sorted_array_utils.js
@@ -126,7 +126,7 @@ cr.define('gpu', function() {
return;
}
- for(var n = ary.length; i < n; i++) {
+ for (var n = ary.length; i < n; i++) {
var lo = mapLoFn(ary[i]);
if (lo >= hiVal)
break;
diff --git a/chrome/browser/resources/gpu_internals/timeline.css b/chrome/browser/resources/gpu_internals/timeline.css
index 3de191b..0c9780f 100644
--- a/chrome/browser/resources/gpu_internals/timeline.css
+++ b/chrome/browser/resources/gpu_internals/timeline.css
@@ -18,10 +18,6 @@ found in the LICENSE file.
height: 18px;
}
-.timeline-drag-box-hidden {
- display: none;
-}
-
.timeline-drag-box {
position: fixed;
background-color: rgba(0, 0, 255, 0.25);
diff --git a/chrome/browser/resources/gpu_internals/timeline.js b/chrome/browser/resources/gpu_internals/timeline.js
index 997cb9e..0e994b4 100644
--- a/chrome/browser/resources/gpu_internals/timeline.js
+++ b/chrome/browser/resources/gpu_internals/timeline.js
@@ -136,7 +136,7 @@ cr.define('gpu', function() {
this.appendChild(this.tracks_);
this.dragBox_ = this.ownerDocument.createElement('div');
- this.dragBox_.className = 'timeline-drag-box timeline-drag-box-hidden';
+ this.dragBox_.className = 'timeline-drag-box';
this.appendChild(this.dragBox_);
// The following code uses a setInterval to monitor the timeline control
@@ -290,6 +290,13 @@ cr.define('gpu', function() {
}
},
+ get keyHelp() {
+ return 'Keyboard shortcuts:\n' +
+ ' w/s : Zoom in/out\n' +
+ ' a/d : Pan left/right\n' +
+ ' e : Center on mouse';
+ },
+
get selection() {
return this.selection_;
},
@@ -300,11 +307,11 @@ cr.define('gpu', function() {
},
showDragBox_: function() {
- this.dragBox_.classList.remove('timeline-drag-box-hidden');
+ this.dragBox_.hidden = false;
},
hideDragBox_: function() {
- this.dragBox_.classList.add('timeline-drag-box-hidden');
+ this.dragBox_.hidden = true;
},
setDragBoxPosition_: function(eDown, eCur) {
diff --git a/chrome/browser/resources/gpu_internals/timeline_model.js b/chrome/browser/resources/gpu_internals/timeline_model.js
index 2196c11..d02ee0a 100644
--- a/chrome/browser/resources/gpu_internals/timeline_model.js
+++ b/chrome/browser/resources/gpu_internals/timeline_model.js
@@ -138,11 +138,14 @@ cr.define('gpu', function() {
var threadStateByPTID = {};
var nameToColorMap = {};
- var nextColorId = 0;
function getColor(name) {
if (!(name in nameToColorMap)) {
- nameToColorMap[name] = nextColorId;
- nextColorId = (nextColorId + 1) % numColorIds;
+ // Compute a simplistic hashcode of the string so we get consistent
+ // coloring across traces.
+ var hash = 0;
+ for (var i = 0; i < name.length; ++i)
+ hash = (hash + 37 * hash + name.charCodeAt(i)) % 0xFFFFFFFF;
+ nameToColorMap[name] = hash % numColorIds;
}
return nameToColorMap[name];
}
diff --git a/chrome/browser/resources/gpu_internals/timeline_view.css b/chrome/browser/resources/gpu_internals/timeline_view.css
index 90d3a4a..c418360 100644
--- a/chrome/browser/resources/gpu_internals/timeline_view.css
+++ b/chrome/browser/resources/gpu_internals/timeline_view.css
@@ -23,13 +23,18 @@ found in the LICENSE file.
-webkit-box-flex: 1;
}
-#timeline-selection-summary {
+#timeline-selection-summary-container {
border-top: 1px solid black;
- max-height: 300px;
- min-height: 100px;
+ max-height: 250px;
+ min-height: 250px;
font-family: monospace;
+ overflow: auto;
+}
+
+#timeline-selection-summary {
+ margin: 2px;
}
#timeline-selection-summary ul {
margin: 0px;
-} \ No newline at end of file
+}
diff --git a/chrome/browser/resources/gpu_internals/timeline_view.html b/chrome/browser/resources/gpu_internals/timeline_view.html
index e908dca..30e4641 100644
--- a/chrome/browser/resources/gpu_internals/timeline_view.html
+++ b/chrome/browser/resources/gpu_internals/timeline_view.html
@@ -6,6 +6,8 @@ found in the LICENSE file.
<div id="timeline-view" label="Timeline">
<div id="timeline-view-timeline-container">
</div>
- <pre id="timeline-selection-summary">
- </pre>
+ <div id="timeline-selection-summary-container">
+ <pre id="timeline-selection-summary">
+ </pre>
+ </div>
</div>
diff --git a/chrome/browser/resources/gpu_internals/timeline_view.js b/chrome/browser/resources/gpu_internals/timeline_view.js
index d0a3a4f..12f9dea 100644
--- a/chrome/browser/resources/gpu_internals/timeline_view.js
+++ b/chrome/browser/resources/gpu_internals/timeline_view.js
@@ -11,6 +11,28 @@ cr.define('gpu', function() {
function tsRound(ts) {
return Math.round(ts * 100.0) / 100.0;
}
+ function getPadding(text, width) {
+ width = width || 0;
+
+ if (typeof text != 'string')
+ text = String(text);
+
+ if (text.length >= width)
+ return '';
+
+ var pad = '';
+ for (var i = 0; i < width - text.length; i++)
+ pad += ' ';
+ return pad;
+ }
+
+ function leftAlign(text, width) {
+ return text + getPadding(text, width);
+ }
+
+ function rightAlign(text, width) {
+ return getPadding(text, width) + text;
+ }
/**
* TimelineView
@@ -64,29 +86,21 @@ cr.define('gpu', function() {
this.timeline_.model = this.timelineModel_;
timelineContainer.appendChild(this.timeline_);
this.timeline_.onResize();
- this.timeline_.addEventListener('selectionChanging',
- this.onSelectionChanging_.bind(this));
this.timeline_.addEventListener('selectionChange',
this.onSelectionChanged_.bind(this));
+ this.onSelectionChanged_();
} else {
this.timeline_ = null;
}
},
- onSelectionChanging_: function(e) {
- var text =
- 'Start: ' + tsRound(e.loWX) + 'ms\n' +
- 'End: ' + tsRound(e.hiWX) + 'ms\n' +
- 'Duration: ' + tsRound(e.hiWX - e.loWX) + 'ms\n';
- var outputElem = $('timeline-selection-summary');
- outputElem.textContent = text;
- },
onSelectionChanged_: function(e) {
+ console.log('selection changed');
var timeline = this.timeline_;
var selection = timeline.selection;
if (!selection.length) {
var outputDiv = $('timeline-selection-summary');
- outputDiv.textContent = '';
+ outputDiv.textContent = timeline.keyHelp;
return;
}
@@ -96,12 +110,9 @@ cr.define('gpu', function() {
var tsHi = Math.max.apply(Math, selection.map(
function(s) {return s.slice.end;}));
- text += 'Start: ' + tsRound(tsLo) + 'ms<br>';
- text += 'Duration: ' + tsRound(tsHi - tsLo) + 'ms<br>';
-
// compute total selection duration
var titles = selection.map(function(i) { return i.slice.title; });
- text += '<ul>';
+
var slicesByTitle = {};
for (var i = 0; i < selection.length; i++) {
var slice = selection[i].slice;
@@ -111,13 +122,34 @@ cr.define('gpu', function() {
};
slicesByTitle[slice.title].slices.push(slice);
}
+ var totalDuration = 0;
for (var sliceGroupTitle in slicesByTitle) {
var sliceGroup = slicesByTitle[sliceGroupTitle];
- text += '<li>' +
- sliceGroupTitle + ': ' + sliceGroup.slices.length +
- '</li>';
+ var duration = 0;
+ for (i = 0; i < sliceGroup.slices.length; i++)
+ duration += sliceGroup.slices[i].duration;
+ totalDuration += duration;
+
+ text += ' ' +
+ leftAlign(sliceGroupTitle, 55) + ': ' +
+ rightAlign(tsRound(duration) + 'ms', 12) + ' ' +
+ rightAlign(String(sliceGroup.slices.length), 5) + ' occurrences' +
+ '\n';
}
- text += '</ul>';
+
+ text += leftAlign('*Totals', 55) + ' : ' +
+ rightAlign(tsRound(totalDuration) + 'ms', 12) + ' ' +
+ rightAlign(String(selection.length), 5) + ' occurrences' +
+ '\n';
+
+ text += '\n';
+
+ text += leftAlign('Selection start', 55) + ' : ' +
+ rightAlign(tsRound(tsLo) + 'ms', 12) +
+ '\n';
+ text += leftAlign('Selection extent', 55) + ' : ' +
+ rightAlign(tsRound(tsHi - tsLo) + 'ms', 12) +
+ '\n';
// done
var outputDiv = $('timeline-selection-summary');