browser/devtools/profiler/cleopatra/css/tree.css@6474c204b198 (annotated)
browser/devtools/profiler/cleopatra/css/tree.css
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rwxr-xr-x
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
| michael@0 | 1 | /* This Source Code Form is subject to the terms of the Mozilla Public |
| michael@0 | 2 | * License, v. 2.0. If a copy of the MPL was not distributed with this |
| michael@0 | 3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ |
| michael@0 | 4 | |
| michael@0 | 5 | .treeViewContainer { |
| michael@0 | 6 | -moz-user-select: none; |
| michael@0 | 7 | user-select: none; |
| michael@0 | 8 | cursor: default; |
| michael@0 | 9 | line-height: 16px; |
| michael@0 | 10 | height: 100%; |
| michael@0 | 11 | outline: none; /* override the browser's focus styling */ |
| michael@0 | 12 | position: relative; |
| michael@0 | 13 | } |
| michael@0 | 14 | |
| michael@0 | 15 | .treeHeader { |
| michael@0 | 16 | position: absolute; |
| michael@0 | 17 | top: 0; |
| michael@0 | 18 | right: 0; |
| michael@0 | 19 | left: 0; |
| michael@0 | 20 | height: 16px; |
| michael@0 | 21 | margin: 0; |
| michael@0 | 22 | padding: 0; |
| michael@0 | 23 | } |
| michael@0 | 24 | |
| michael@0 | 25 | .treeColumnHeader { |
| michael@0 | 26 | position: absolute; |
| michael@0 | 27 | display: block; |
| michael@0 | 28 | background: linear-gradient(#FFF 45%, #EEE 60%); |
| michael@0 | 29 | margin: 0; |
| michael@0 | 30 | padding: 0; |
| michael@0 | 31 | top: 0; |
| michael@0 | 32 | height: 15px; |
| michael@0 | 33 | line-height: 15px; |
| michael@0 | 34 | border: 0 solid #CCC; |
| michael@0 | 35 | border-bottom-width: 1px; |
| michael@0 | 36 | text-indent: 5px; |
| michael@0 | 37 | } |
| michael@0 | 38 | |
| michael@0 | 39 | .treeColumnHeader:not(:last-child) { |
| michael@0 | 40 | border-right-width: 1px; |
| michael@0 | 41 | } |
| michael@0 | 42 | |
| michael@0 | 43 | .treeColumnHeader0 { |
| michael@0 | 44 | left: 0; |
| michael@0 | 45 | width: 86px; |
| michael@0 | 46 | } |
| michael@0 | 47 | |
| michael@0 | 48 | .treeColumnHeader1 { |
| michael@0 | 49 | left: 99px; |
| michael@0 | 50 | width: 35px; |
| michael@0 | 51 | } |
| michael@0 | 52 | |
| michael@0 | 53 | .treeColumnHeader0, |
| michael@0 | 54 | .treeColumnHeader1 { |
| michael@0 | 55 | text-align: right; |
| michael@0 | 56 | padding-right: 12px; |
| michael@0 | 57 | } |
| michael@0 | 58 | |
| michael@0 | 59 | .treeColumnHeader2 { |
| michael@0 | 60 | left: 147px; |
| michael@0 | 61 | right: 0; |
| michael@0 | 62 | } |
| michael@0 | 63 | |
| michael@0 | 64 | .treeViewVerticalScrollbox { |
| michael@0 | 65 | position: absolute; |
| michael@0 | 66 | top: 16px; |
| michael@0 | 67 | left: 0; |
| michael@0 | 68 | right: 0; |
| michael@0 | 69 | bottom: 0; |
| michael@0 | 70 | overflow-y: scroll; |
| michael@0 | 71 | overflow-x: hidden; |
| michael@0 | 72 | } |
| michael@0 | 73 | |
| michael@0 | 74 | .treeViewNode, |
| michael@0 | 75 | .treeViewHorizontalScrollbox { |
| michael@0 | 76 | display: block; |
| michael@0 | 77 | margin: 0; |
| michael@0 | 78 | padding: 0; |
| michael@0 | 79 | } |
| michael@0 | 80 | |
| michael@0 | 81 | .treeViewNode { |
| michael@0 | 82 | min-width: -moz-min-content; |
| michael@0 | 83 | white-space: nowrap; |
| michael@0 | 84 | } |
| michael@0 | 85 | |
| michael@0 | 86 | .treeViewHorizontalScrollbox { |
| michael@0 | 87 | padding-left: 150px; |
| michael@0 | 88 | overflow: hidden; |
| michael@0 | 89 | } |
| michael@0 | 90 | |
| michael@0 | 91 | .treeViewVerticalScrollbox, |
| michael@0 | 92 | .treeViewHorizontalScrollbox { |
| michael@0 | 93 | background: linear-gradient(white, white 50%, #F0F5FF 50%, #F0F5FF); |
| michael@0 | 94 | background-size: 100px 32px; |
| michael@0 | 95 | } |
| michael@0 | 96 | |
| michael@0 | 97 | .leftColumnBackground { |
| michael@0 | 98 | background: linear-gradient(left, transparent, transparent 98px, #CCC 98px, #CCC 99px, transparent 99px), |
| michael@0 | 99 | linear-gradient(white, white 50%, #F0F5FF 50%, #F0F5FF); |
| michael@0 | 100 | background-size: auto, 100px 32px; |
| michael@0 | 101 | position: absolute; |
| michael@0 | 102 | top: 0; |
| michael@0 | 103 | left: 0; |
| michael@0 | 104 | width: 146px; |
| michael@0 | 105 | min-height: 100%; |
| michael@0 | 106 | border-right: 1px solid #CCC; |
| michael@0 | 107 | } |
| michael@0 | 108 | |
| michael@0 | 109 | .sampleCount, |
| michael@0 | 110 | .samplePercentage, |
| michael@0 | 111 | .selfSampleCount { |
| michael@0 | 112 | position: absolute; |
| michael@0 | 113 | text-align: right; |
| michael@0 | 114 | } |
| michael@0 | 115 | |
| michael@0 | 116 | .sampleCount { |
| michael@0 | 117 | left: 2px; |
| michael@0 | 118 | width: 50px; |
| michael@0 | 119 | } |
| michael@0 | 120 | |
| michael@0 | 121 | .samplePercentage { |
| michael@0 | 122 | left: 55px; |
| michael@0 | 123 | width: 40px; |
| michael@0 | 124 | } |
| michael@0 | 125 | |
| michael@0 | 126 | .selfSampleCount { |
| michael@0 | 127 | left: 98px; |
| michael@0 | 128 | width: 45px; |
| michael@0 | 129 | padding-right: 2px; |
| michael@0 | 130 | border: solid #CCC; |
| michael@0 | 131 | border-width: 0 1px; |
| michael@0 | 132 | } |
| michael@0 | 133 | |
| michael@0 | 134 | .libraryName { |
| michael@0 | 135 | margin-left: 10px; |
| michael@0 | 136 | color: #999; |
| michael@0 | 137 | } |
| michael@0 | 138 | |
| michael@0 | 139 | .treeViewNode > .treeViewNodeList { |
| michael@0 | 140 | margin-left: 1em; |
| michael@0 | 141 | } |
| michael@0 | 142 | |
| michael@0 | 143 | .treeViewNode.collapsed > .treeViewNodeList { |
| michael@0 | 144 | display: none; |
| michael@0 | 145 | } |
| michael@0 | 146 | |
| michael@0 | 147 | .treeLine { |
| michael@0 | 148 | /* extend the selection background almost infinitely to the left */ |
| michael@0 | 149 | margin-left: -10000px; |
| michael@0 | 150 | padding-left: 10000px; |
| michael@0 | 151 | } |
| michael@0 | 152 | |
| michael@0 | 153 | .treeLine.selected { |
| michael@0 | 154 | color: black; |
| michael@0 | 155 | background-color: -moz-dialog; |
| michael@0 | 156 | } |
| michael@0 | 157 | |
| michael@0 | 158 | .treeLine.selected > .sampleCount { |
| michael@0 | 159 | background-color: inherit; |
| michael@0 | 160 | margin-left: -2px; |
| michael@0 | 161 | padding-left: 2px; |
| michael@0 | 162 | padding-right: 95px; |
| michael@0 | 163 | margin-right: -95px; |
| michael@0 | 164 | } |
| michael@0 | 165 | |
| michael@0 | 166 | .treeViewContainer:focus .treeLine.selected { |
| michael@0 | 167 | color: highlighttext; |
| michael@0 | 168 | background-color: highlight; |
| michael@0 | 169 | } |
| michael@0 | 170 | |
| michael@0 | 171 | .treeViewContainer:focus .treeLine.selected > .libraryName { |
| michael@0 | 172 | color: #CCC; |
| michael@0 | 173 | } |
| michael@0 | 174 | |
| michael@0 | 175 | .expandCollapseButton, |
| michael@0 | 176 | .focusCallstackButton { |
| michael@0 | 177 | background: none 0 0 no-repeat transparent; |
| michael@0 | 178 | margin: 0; |
| michael@0 | 179 | padding: 0; |
| michael@0 | 180 | border: 0; |
| michael@0 | 181 | width: 16px; |
| michael@0 | 182 | height: 16px; |
| michael@0 | 183 | overflow: hidden; |
| michael@0 | 184 | vertical-align: top; |
| michael@0 | 185 | color: transparent; |
| michael@0 | 186 | font-size: 0; |
| michael@0 | 187 | } |
| michael@0 | 188 | |
| michael@0 | 189 | .expandCollapseButton { |
| michael@0 | 190 | background-image: url(../images/treetwisty.svg); |
| michael@0 | 191 | } |
| michael@0 | 192 | |
| michael@0 | 193 | .focusCallstackButton { |
| michael@0 | 194 | background-image: url(../images/circlearrow.svg); |
| michael@0 | 195 | margin-left: 5px; |
| michael@0 | 196 | visibility: hidden; |
| michael@0 | 197 | } |
| michael@0 | 198 | |
| michael@0 | 199 | .expandCollapseButton:active:hover, |
| michael@0 | 200 | .focusCallstackButton:active:hover { |
| michael@0 | 201 | background-position: -16px 0; |
| michael@0 | 202 | } |
| michael@0 | 203 | |
| michael@0 | 204 | .treeViewNode.collapsed > .treeLine > .expandCollapseButton { |
| michael@0 | 205 | background-position: 0 -16px; |
| michael@0 | 206 | } |
| michael@0 | 207 | |
| michael@0 | 208 | .treeViewNode.collapsed > .treeLine > .expandCollapseButton:active:hover { |
| michael@0 | 209 | background-position: -16px -16px; |
| michael@0 | 210 | } |
| michael@0 | 211 | |
| michael@0 | 212 | .treeViewContainer:focus .treeLine.selected > .expandCollapseButton, |
| michael@0 | 213 | .treeViewContainer:focus .treeLine.selected > .focusCallstackButton { |
| michael@0 | 214 | background-position: -32px 0; |
| michael@0 | 215 | } |
| michael@0 | 216 | |
| michael@0 | 217 | .treeViewContainer:focus .treeViewNode.collapsed > .treeLine.selected > .expandCollapseButton { |
| michael@0 | 218 | background-position: -32px -16px; |
| michael@0 | 219 | } |
| michael@0 | 220 | |
| michael@0 | 221 | .treeViewContainer:focus .treeLine.selected > .expandCollapseButton:active:hover, |
| michael@0 | 222 | .treeViewContainer:focus .treeLine.selected > .focusCallstackButton:active:hover { |
| michael@0 | 223 | background-position: -48px 0; |
| michael@0 | 224 | } |
| michael@0 | 225 | |
| michael@0 | 226 | .treeViewContainer:focus .treeViewNode.collapsed > .treeLine.selected > .expandCollapseButton:active:hover { |
| michael@0 | 227 | background-position: -48px -16px; |
| michael@0 | 228 | } |
| michael@0 | 229 | |
| michael@0 | 230 | .treeViewNode.leaf > * > .expandCollapseButton { |
| michael@0 | 231 | visibility: hidden; |
| michael@0 | 232 | } |
| michael@0 | 233 | |
| michael@0 | 234 | .treeLine:hover > .focusCallstackButton { |
| michael@0 | 235 | visibility: visible; |
| michael@0 | 236 | } |
