networkPanel.css 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  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. .network-larger-resources-status-bar-item .glyph {
  30. -webkit-mask-position: -224px 0;
  31. }
  32. #network-views {
  33. background: rgb(203, 203, 203);
  34. }
  35. #network-close-button {
  36. position: absolute;
  37. top: 8px;
  38. left: 5px;
  39. z-index: 10;
  40. display: none;
  41. }
  42. #network-views.small #network-close-button {
  43. top: 4px;
  44. }
  45. .network.panel.viewing-resource #network-close-button {
  46. display: block;
  47. }
  48. .network.panel .sidebar {
  49. position: absolute;
  50. top: 0;
  51. bottom: 0;
  52. left: 0;
  53. right: 0;
  54. width: auto;
  55. border: none;
  56. background: inherit;
  57. }
  58. .network.panel:not(.viewing-resource) .sidebar-resizer-vertical {
  59. display: none;
  60. }
  61. .network.panel .scope-bar {
  62. height: 23px;
  63. padding-top: 5px;
  64. }
  65. .network.panel .data-grid th.sort-descending,
  66. .network.panel .data-grid th.sort-ascending {
  67. background: -webkit-gradient(linear, left top, left bottom, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
  68. }
  69. #network-views .network-item-view .tabbed-pane-header {
  70. height: 31px;
  71. padding-top: 8px;
  72. padding-left: 13px;
  73. white-space: nowrap;
  74. }
  75. #network-views.small .network-item-view .tabbed-pane-header {
  76. height: 23px;
  77. padding-top: 0;
  78. }
  79. .network-item-view {
  80. display: none;
  81. position: absolute;
  82. background: white;
  83. top: 0;
  84. left: 0;
  85. right: 0;
  86. bottom: 0;
  87. }
  88. .network-item-view.visible {
  89. display: -webkit-flex;
  90. }
  91. .network-item-view .tabbed-pane-header {
  92. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
  93. border-bottom: 1px solid rgb(163, 163, 163);
  94. }
  95. .network-item-view .scope-bar li {
  96. border-bottom-left-radius: 0;
  97. border-bottom-right-radius: 0;
  98. }
  99. .resource-headers-view {
  100. display: none;
  101. margin: 6px;
  102. -webkit-user-select: text;
  103. position: absolute;
  104. top: 0;
  105. left: 0;
  106. right: 0;
  107. bottom: 0;
  108. overflow: auto;
  109. }
  110. .resource-headers-view.visible {
  111. display: block;
  112. }
  113. .resource-headers-view .outline-disclosure .parent {
  114. -webkit-user-select: none;
  115. font-weight: bold;
  116. }
  117. .resource-headers-view .outline-disclosure .parent .section * {
  118. font-weight: normal;
  119. }
  120. .resource-headers-view .outline-disclosure .children li {
  121. white-space: nowrap;
  122. }
  123. .resource-headers-view .outline-disclosure li.expanded .header-count {
  124. display: none;
  125. }
  126. .resource-headers-view .outline-disclosure li .header-toggle {
  127. display: none;
  128. }
  129. .resource-headers-view .outline-disclosure li .status-from-cache {
  130. color: gray;
  131. }
  132. .resource-headers-view .outline-disclosure li.expanded .header-toggle {
  133. display: inline;
  134. margin-left: 30px;
  135. font-weight: normal;
  136. color: rgb(45%, 45%, 45%);
  137. }
  138. .resource-headers-view .outline-disclosure li .header-toggle:hover {
  139. color: rgb(20%, 20%, 45%);
  140. cursor: pointer;
  141. }
  142. .resource-headers-view .outline-disclosure .header-name {
  143. color: rgb(33%, 33%, 33%);
  144. display: inline-block;
  145. margin-right: 0.5em;
  146. font-weight: bold;
  147. vertical-align: top;
  148. white-space: pre-wrap;
  149. }
  150. .resource-headers-view .outline-disclosure .header-value {
  151. display: inline;
  152. margin-right: 100px;
  153. white-space: pre-wrap;
  154. word-break: break-all;
  155. margin-top: 1px;
  156. }
  157. .resource-cookies-view {
  158. display: none;
  159. position: absolute;
  160. top: 0;
  161. right: 0;
  162. left: 0;
  163. bottom: 0;
  164. overflow: auto;
  165. margin: 12px;
  166. height: 100%;
  167. }
  168. .resource-cookies-view.visible {
  169. display: block;
  170. }
  171. .resource-cookies-view .data-grid {
  172. height: 100%;
  173. }
  174. .resource-cookies-view .data-grid .row-group {
  175. font-weight: bold;
  176. font-size: 11px;
  177. }
  178. .resource-timing-view {
  179. display: none;
  180. position: absolute;
  181. top: 0;
  182. right: 0;
  183. left: 0;
  184. bottom: 0;
  185. margin: 6px;
  186. font-weight: bold;
  187. font-size: 11px;
  188. color: rgb(30%, 30%, 30%);
  189. }
  190. .resource-timing-view table {
  191. border-spacing: 21px 0;
  192. }
  193. .resource-timing-view .network-timing-bar {
  194. opacity: 1;
  195. }
  196. .resource-timing-view .network-timing-bar.proxy {
  197. background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(239, 228, 176)), to(rgb(139, 128, 76)));
  198. border-left: 1px solid rgb(139, 128, 76);
  199. }
  200. .resource-timing-view .network-timing-bar.dns {
  201. background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(153, 208, 216)), to(rgb(81, 174, 189)));
  202. border-left: 1px solid rgb(81, 174, 189);
  203. }
  204. .resource-timing-view .network-timing-bar.connecting {
  205. background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(203, 232, 145)), to(rgb(160, 214, 56)));
  206. border-left: 1px solid rgb(160, 214, 56);
  207. }
  208. .resource-timing-view .network-timing-bar.ssl {
  209. background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(21, 232, 145)), to(rgb(216, 149, 132)));
  210. border-left: 1px solid rgb(216, 149, 132);
  211. }
  212. .resource-timing-view .network-timing-bar.sending {
  213. background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(232, 192, 182)), to(rgb(216, 147, 130)));
  214. border-left: 1px solid rgb(216, 147, 130);
  215. }
  216. .resource-timing-view .network-timing-bar.waiting {
  217. background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(188, 179, 208)), to(rgb(141, 125, 175)));
  218. border-left: 1px solid rgb(141, 125, 175);
  219. }
  220. .resource-timing-view .network-timing-bar.receiving {
  221. background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(214, 214, 214)), to(rgb(182, 182, 182)));
  222. border-left: 1px solid rgb(182, 182, 182);
  223. }
  224. .resource-timing-view.visible {
  225. display: block;
  226. }
  227. .resource-websocket {
  228. -webkit-user-select: text;
  229. }
  230. .resource-websocket,
  231. .resource-websocket .data-grid {
  232. position: absolute;
  233. top: 0;
  234. left: 0;
  235. right: 0;
  236. bottom: 0;
  237. border: none;
  238. }
  239. .resource-websocket .data-grid .data {
  240. background-image: none;
  241. }
  242. .resource-websocket td {
  243. padding-top: 3px;
  244. padding-bottom: 3px;
  245. border-top: 1px solid rgb(240, 240, 240);
  246. }
  247. .resource-websocket .data-column div {
  248. overflow: hidden;
  249. text-overflow: ellipsis;
  250. white-space: nowrap;
  251. }
  252. .resource-websocket-row-outcoming {
  253. background-color: rgb(226, 247, 218);
  254. }
  255. .resource-websocket-row-outcoming:not(.selected) td {
  256. border-left-color: rgb(177, 209, 165);
  257. }
  258. .resource-websocket-row-outcoming:not(.selected) td, .resource-websocket-row-outcoming:not(.selected) + tr td {
  259. border-top-color: rgb(199, 236, 185);
  260. }
  261. .resource-websocket-row-opcode {
  262. background-color: rgb(255, 255, 232);
  263. color: rgb(170, 111, 71);
  264. }
  265. .resource-websocket-row-opcode td {
  266. border-color: rgb(211, 187, 171);
  267. }
  268. .resource-websocket-row-opcode td, .resource-websocket-row-opcode + tr td {
  269. border-top-color: rgb(248, 240, 210);
  270. }
  271. .resource-websocket-row-error {
  272. background-color: rgb(255, 237, 237);
  273. color: rgb(182, 0, 0);
  274. }