1/* 2 * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved. 3 * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org> 4 * 5 * Redistribution and use in source and binary forms, with or without 6 * modification, are permitted provided that the following conditions 7 * are met: 8 * 9 * 1. Redistributions of source code must retain the above copyright 10 * notice, this list of conditions and the following disclaimer. 11 * 2. Redistributions in binary form must reproduce the above copyright 12 * notice, this list of conditions and the following disclaimer in the 13 * documentation and/or other materials provided with the distribution. 14 * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of 15 * its contributors may be used to endorse or promote products derived 16 * from this software without specific prior written permission. 17 * 18 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY 19 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY 22 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 25 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF 27 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 28 */ 29 30.network-larger-resources-status-bar-item .glyph { 31 -webkit-mask-position: -224px 0; 32} 33 34#network-views { 35 background: rgb(203, 203, 203); 36} 37 38#network-close-button { 39 position: absolute; 40 top: 8px; 41 left: 5px; 42 z-index: 10; 43 display: none; 44} 45 46#network-views.small #network-close-button { 47 top: 4px; 48} 49 50.network.panel.viewing-resource #network-close-button { 51 display: block; 52} 53 54.network.panel .sidebar { 55 position: absolute; 56 top: 0; 57 bottom: 0; 58 left: 0; 59 right: 0; 60 width: auto; 61 border: none; 62 background: inherit; 63} 64 65.network.panel:not(.viewing-resource) .sidebar-resizer-vertical { 66 display: none; 67} 68 69.network.panel .data-grid th.sort-descending, 70.network.panel .data-grid th.sort-ascending { 71 background: white; 72} 73 74#network-views .network-item-view .tabbed-pane-header { 75 flex: 0 0 31px; 76 padding-top: 8px; 77 padding-left: 13px; 78 white-space: nowrap; 79} 80 81#network-views.small .network-item-view .tabbed-pane-header { 82 flex-basis: 23px; 83 padding-top: 0; 84} 85 86.network-item-view { 87 display: none; 88 position: absolute; 89 background: white; 90 top: 0; 91 left: 0; 92 right: 0; 93 bottom: 0; 94} 95 96.network-item-view.visible { 97 display: -webkit-flex; 98} 99 100.network-item-view .tabbed-pane-header { 101 border-bottom: 1px solid rgb(205, 205, 205); 102} 103 104.resource-headers-view { 105 display: none; 106 margin: 6px; 107 -webkit-user-select: text; 108 position: absolute; 109 top: 0; 110 left: 0; 111 right: 0; 112 bottom: 0; 113 overflow: auto; 114} 115 116.resource-headers-view.visible { 117 display: block; 118} 119 120.resource-headers-view .outline-disclosure .parent { 121 -webkit-user-select: none; 122 font-weight: bold; 123} 124 125.resource-headers-view .outline-disclosure .parent .section * { 126 font-weight: normal; 127} 128 129.resource-headers-view .outline-disclosure .children li { 130 white-space: nowrap; 131} 132 133.resource-headers-view .outline-disclosure li.expanded .caution { 134 color: rgb(255, 128, 0); 135} 136 137.resource-headers-view .outline-disclosure li:not(.expanded) .caution { 138 display: none; 139} 140 141.resource-headers-view .outline-disclosure li.expanded .header-count { 142 display: none; 143} 144 145.resource-headers-view .outline-disclosure li .header-toggle { 146 display: none; 147} 148 149.resource-headers-view .outline-disclosure li .status-from-cache { 150 color: gray; 151} 152 153.resource-headers-view .outline-disclosure li.expanded .header-toggle { 154 display: inline; 155 margin-left: 30px; 156 font-weight: normal; 157 color: rgb(45%, 45%, 45%); 158} 159 160.resource-headers-view .outline-disclosure li .header-toggle:hover { 161 color: rgb(20%, 20%, 45%); 162 cursor: pointer; 163} 164 165.resource-headers-view .outline-disclosure .header-name { 166 color: rgb(33%, 33%, 33%); 167 display: inline-block; 168 margin-right: 0.5em; 169 font-weight: bold; 170 vertical-align: top; 171 white-space: pre-wrap; 172} 173 174.resource-headers-view .outline-disclosure .header-value { 175 display: inline; 176 margin-right: 100px; 177 white-space: pre-wrap; 178 word-break: break-all; 179 margin-top: 1px; 180} 181 182.resource-cookies-view { 183 display: none; 184 position: absolute; 185 top: 0; 186 right: 0; 187 left: 0; 188 bottom: 0; 189 overflow: auto; 190 margin: 12px; 191 height: 100%; 192} 193 194.resource-cookies-view.visible { 195 display: block; 196} 197 198.resource-cookies-view .data-grid { 199 height: 100%; 200} 201 202.resource-cookies-view .data-grid .row-group { 203 font-weight: bold; 204 font-size: 11px; 205} 206 207.resource-timing-view { 208 display: none; 209 position: absolute; 210 top: 0; 211 right: 0; 212 left: 0; 213 bottom: 0; 214 margin: 6px; 215 font-weight: bold; 216 font-size: 11px; 217 color: rgb(30%, 30%, 30%); 218} 219 220.resource-timing-view table { 221 border-spacing: 21px 0; 222} 223 224.resource-timing-view .network-timing-bar { 225 opacity: 1; 226} 227 228.resource-timing-view .network-timing-bar.blocking, 229.resource-timing-view .network-timing-bar.proxy { 230 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(242, 242, 194)), to(rgb(204, 204, 102))); 231 border-left: 1px solid rgb(204, 204, 102); 232} 233 234.resource-timing-view .network-timing-bar.dns { 235 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 242, 194)), to(rgb(102, 204, 102))); 236 border-left: 1px solid rgb(102, 204, 102); 237} 238 239.resource-timing-view .network-timing-bar.connecting, 240.resource-timing-view .network-timing-bar.ssl { 241 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 242, 242)), to(rgb(102, 204, 204))); 242 border-left: 1px solid rgb(102, 204, 204); 243} 244 245.resource-timing-view .network-timing-bar.sending { 246 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 242)), to(rgb(102, 102, 204))); 247 border-left: 1px solid rgb(102, 102, 204); 248} 249 250.resource-timing-view .network-timing-bar.waiting { 251 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(242, 194, 242)), to(rgb(204, 102, 204))); 252 border-left: 1px solid rgb(204, 102, 204); 253} 254 255.resource-timing-view .network-timing-bar.receiving { 256 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(242, 194, 194)), to(rgb(204, 102, 102))); 257 border-left: 1px solid rgb(204, 102, 102); 258} 259 260.resource-timing-view.visible { 261 display: block; 262} 263 264.resource-websocket { 265 -webkit-user-select: text; 266} 267 268.resource-websocket, 269.resource-websocket .data-grid { 270 position: absolute; 271 top: 0; 272 left: 0; 273 right: 0; 274 bottom: 0; 275 border: none; 276} 277 278.resource-websocket .data-grid .data { 279 background-image: none; 280} 281 282.resource-websocket td { 283 padding-top: 3px; 284 padding-bottom: 3px; 285 border-top: 1px solid rgb(240, 240, 240); 286} 287 288.resource-websocket .data-column div { 289 overflow: hidden; 290 text-overflow: ellipsis; 291 white-space: nowrap; 292} 293 294.resource-websocket-row-outcoming { 295 background-color: rgb(226, 247, 218); 296} 297 298.resource-websocket-row-outcoming:not(.selected) td { 299 border-left-color: rgb(177, 209, 165); 300} 301 302.resource-websocket-row-outcoming:not(.selected) td, .resource-websocket-row-outcoming:not(.selected) + tr td { 303 border-top-color: rgb(199, 236, 185); 304} 305 306.resource-websocket-row-opcode { 307 background-color: rgb(255, 255, 232); 308 color: rgb(170, 111, 71); 309} 310 311.resource-websocket-row-opcode td { 312 border-color: rgb(211, 187, 171); 313} 314 315.resource-websocket-row-opcode td, .resource-websocket-row-opcode + tr td { 316 border-top-color: rgb(248, 240, 210); 317} 318 319.resource-websocket-row-error { 320 background-color: rgb(255, 237, 237); 321 color: rgb(182, 0, 0); 322} 323 324.panel.network .split-view { 325 flex: auto; 326 position: relative; 327} 328 329.network-filters-header { 330 flex: 0 0 23px; 331} 332