1 /* 2 Copyright (c) 2011 The Chromium Authors. All rights reserved. 3 Use of this source code is governed by a BSD-style license that can be 4 found in the LICENSE file. 5 */ 6 7 * { 8 box-sizing: border-box; 9 -moz-box-sizing: border-box; 10 } 11 body { 12 font-family: sans-serif; 13 } 14 15 #filterBox { 16 background: #efefef; 17 padding: 5px; 18 border-bottom: 1px solid gray; 19 overflow: hidden; 20 } 21 22 #filterBox * { 23 white-space: nowrap; 24 font-family: sans-serif; 25 font-size: 12px; 26 } 27 28 #filterBox input { 29 width: 100%; 30 } 31 32 #actionBox { 33 background: #efefef; 34 white-space: nowrap; 35 border-top: 1px solid gray; 36 overflow: hidden; 37 } 38 39 #eventsBox { 40 overflow-x: hidden; 41 overflow-y: auto 42 } 43 44 #detailsBox { 45 overflow: auto; 46 } 47 48 #splitterBox { 49 background: #bfbfbf; 50 border-left: 1px inset black; 51 border-right: 1px solid black; 52 position:absolute; 53 width: 8px; 54 cursor: col-resize; 55 user-select: none; 56 } 57 58 #eventsListTable { 59 cursor: pointer; 60 } 61 62 #eventsListTable thead td { 63 text-align: left; 64 font-weight: bold; 65 background: rgb(229, 236, 249); 66 } 67 68 #eventsListTable td { 69 padding: 3px; 70 border-left: 1px solid #afafaf; 71 border-bottom: 1px solid #afafaf; 72 text-overflow: ellipsis; 73 font-size: 12px; 74 white-space: nowrap; 75 } 76 77 #eventsListTableBody .mouseover { 78 background: rgb(244,244,255); 79 } 80 81 #eventsListTableBody .selected, 82 #eventsListTableBody .mouseover .selected { 83 background: #C3D9FF; 84 } 85 86 #eventsListTableBody .source_CONNECT_JOB { 87 color: blue; 88 } 89 90 #eventsListTableBody .source_HOST_RESOLVER_IMPL_JOB, 91 #eventsListTableBody .source_HOST_RESOLVER_IMPL_REQUEST { 92 color: #308080; 93 } 94 95 #eventsListTableBody .source_DISK_CACHE_ENTRY, 96 #eventsListTableBody .source_MEMORY_CACHE_ENTRY { 97 color: gray; 98 } 99 100 #eventsListTableBody .source_SOCKET { 101 color: purple; 102 } 103 104 #eventsListTableBody .source_INIT_PROXY_RESOLVER { 105 color: green; 106 } 107 108 #eventsListTableBody .source_NONE { 109 color: red; 110 } 111 112 .tabSwitcher { 113 margin-top: 10px; 114 margin-left: 10px; 115 } 116 117 .tabSwitcher th { 118 background: rgb(229,236,249); 119 cursor: pointer; 120 background-clip: border-box; 121 border-top-left-radius: 5px 5px; 122 border-top-right-radius: 5px 5px; 123 padding-left: 4px; 124 padding-top: 4px; 125 padding-right: 4px; 126 font-size: 12px; 127 margin-left: 30px; 128 } 129 130 .tabSwitcher th.selected, .tabSwitcherLine { 131 background: rgb(195,217,255); 132 } 133 134 .tabSwitcherLine { 135 height: 10px; 136 } 137 138 #detailsTabHandles { 139 border: 1px solid white; 140 } 141 142 .logSourceEntry { 143 margin: 5px; 144 } 145 146 .logSourceEntry * p { 147 font-weight: bold; 148 font-size: 12px; 149 } 150 151 .logSourceEntry * td { 152 font-size: 10px; 153 } 154 155 #detailsLogBox, 156 #detailsTimelineBox, 157 #httpCacheTabContent, 158 #proxyTabContent, 159 #dataTabContent, 160 #dnsTabContent, 161 #socketsTabContent, 162 #spdyTabContent, 163 #serviceProvidersTabContent, 164 #testTabContent, 165 #hstsTabContent, 166 #httpThrottlingTabContent { 167 overflow: auto; 168 padding: 10px; 169 } 170 171 #proxyTabContent td, 172 #proxyTabContent th { 173 font-size: 12px; 174 } 175 176 /* 177 * Styles for TABLE that uses a thin collapsed border. 178 */ 179 table.styledTable { 180 border-collapse:collapse; 181 } 182 183 table.styledTable, 184 .styledTable th, 185 .styledTable td { 186 border: 1px solid #777; 187 padding-right: 4px; 188 padding-left: 4px; 189 } 190 191 .styledTable th { 192 background: rgb(224,236,255); 193 } 194 195 .styledTable th.title { 196 background: rgb(255,217,217); 197 } 198 199 /* 200 * This is the box in the top right of the Data tab which shows how many 201 * events have been captured so far. 202 */ 203 .capturingBox { 204 border: 1px dashed black; 205 display: inline-block; 206 text-align: left; 207 padding: 5px; 208 } 209 210 /** 211 * Styling for an emphasized button. 212 */ 213 .bigButton { 214 font-size: 100%; 215 font-weight: bold; 216 } 217 218 /** 219 * Styling for text indicating a potential problem or error state. 220 */ 221 .warningText { 222 color: red; 223 } 224