Index: tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.html |
diff --git a/tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.html b/tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.html |
index dd4afdad5da3dadc8a534f3d418238b3cc19cfd6..2201c8f400ee9ef5cd2aa7aa098e54923f079428 100644 |
--- a/tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.html |
+++ b/tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.html |
@@ -5,8 +5,6 @@ Use of this source code is governed by a BSD-style license that can be |
found in the LICENSE file. |
--> |
-<link rel="stylesheet" href="/tracing/ui/extras/chrome/cc/picture_ops_list_view.css"> |
- |
<link rel="import" href="/tracing/extras/chrome/cc/constants.html"> |
<link rel="import" href="/tracing/ui/base/dom_helpers.html"> |
<link rel="import" href="/tracing/ui/base/list_view.html"> |
@@ -37,7 +35,14 @@ tr.exportTo('tr.ui.e.chrome.cc', function() { |
__proto__: HTMLDivElement.prototype, |
decorate() { |
+ this.style.flexDirection = 'column'; |
+ this.style.borderTop = '1px solid grey'; |
+ this.style.display = 'flex'; |
this.opsList_ = new tr.ui.b.ListView(); |
+ this.opsList_.style.flexGrow = 1; |
+ this.opsList_.style.flexShrink = 1; |
+ this.opsList_.style.flexBasis = 'auto'; |
+ this.opsList_.style.overflow = 'auto'; |
Polymer.dom(this).appendChild(this.opsList_); |
this.selectedOp_ = undefined; |
@@ -79,6 +84,10 @@ tr.exportTo('tr.ui.e.chrome.cc', function() { |
if (op.elementInfo.tag || op.elementInfo.id || op.elementInfo.class) { |
const elementInfo = document.createElement('span'); |
Polymer.dom(elementInfo).classList.add('elementInfo'); |
+ elementInfo.style.color = 'purple'; |
+ elementInfo.style.fontSize = 'small'; |
+ elementInfo.style.fontWeight = 'bold'; |
+ elementInfo.style.color = '#777'; |
const tag = op.elementInfo.tag ? op.elementInfo.tag : 'unknown'; |
const id = op.elementInfo.id ? 'id=' + op.elementInfo.id : undefined; |
const className = op.elementInfo.class ? 'class=' + |
@@ -96,6 +105,8 @@ tr.exportTo('tr.ui.e.chrome.cc', function() { |
if (op.info.length > 0) { |
const infoItem = document.createElement('div'); |
Polymer.dom(infoItem).textContent = JSON.stringify(op.info); |
+ infoItem.style.fontSize = 'x-small'; |
+ infoItem.style.color = '#777'; |
Polymer.dom(item).appendChild(infoItem); |
} |
@@ -105,9 +116,24 @@ tr.exportTo('tr.ui.e.chrome.cc', function() { |
Polymer.dom(time).classList.add('time'); |
const rounded = op.cmd_time.toFixed(4); |
Polymer.dom(time).textContent = '(' + rounded + 'ms)'; |
+ time.style.fontSize = 'x-small'; |
+ time.style.color = 'rgb(136, 0, 0)'; |
Polymer.dom(item).appendChild(time); |
} |
+ item.style.borderBottom = '1px solid #555'; |
+ item.style.fontSize = 'small'; |
+ item.style.fontWeight = 'bold'; |
+ item.style.paddingBottom = '5px'; |
+ item.style.paddingLeft = '5px'; |
+ item.style.cursor = 'pointer'; |
+ |
+ for (const child of item.children) { |
+ child.style.fontWeight = 'normal'; |
+ child.style.marginLeft = '1em'; |
+ child.style.maxWidth = '300px'; |
+ } |
+ |
Polymer.dom(this.opsList_).appendChild(item); |
} |
}, |
@@ -133,8 +159,10 @@ tr.exportTo('tr.ui.e.chrome.cc', function() { |
this.selectedOpIndex_ = op.opIndex; |
} else if (beforeSelectedOp) { |
Polymer.dom(op).setAttribute('beforeSelection', 'beforeSelection'); |
+ op.style.backgroundColor = 'rgb(103, 199, 165)'; |
} else { |
Polymer.dom(op).removeAttribute('beforeSelection'); |
+ op.style.backgroundColor = ''; |
} |
} |