Extends the Chrome Developer Tools, adding a new Network Panel in the Developer Tools window with better searching and response previews. https://leviolson.com/posts/chrome-ext-better-network-panel
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

426 lines
6.8 KiB

4 years ago
  1. * {
  2. -webkit-box-sizing: border-box;
  3. -moz-box-sizing: border-box;
  4. box-sizing: border-box;
  5. }
  6. body {
  7. background: #fff;
  8. }
  9. th, td {
  10. text-align: left;
  11. }
  12. .toolbar {
  13. padding: 2px 4px;
  14. text-align: right;
  15. }
  16. .toolbar a {
  17. color: rgb(105, 105, 105);
  18. cursor: default;
  19. font-size: 15px;
  20. padding: 0 5px;
  21. text-decoration: none;
  22. }
  23. .toolbar a:hover {
  24. color: rgb(59, 59, 59);
  25. text-decoration: none;
  26. }
  27. .toolbar a.selected {
  28. color: rgb(62, 130, 240);
  29. text-decoration: none;
  30. }
  31. .toolbar a.selected:hover {
  32. color: rgb(25, 108, 251);
  33. text-decoration: none;
  34. }
  35. .split-view {
  36. bottom: 0;
  37. left: 0;
  38. overflow: hidden;
  39. position: absolute;
  40. right: 0;
  41. top: 0;
  42. }
  43. .split-view-contents {
  44. bottom: 0;
  45. cursor: default;
  46. overflow: auto;
  47. position: absolute;
  48. top: 0;
  49. }
  50. @media screen and (max-width: 900px) {
  51. .split-view-contents-requests {
  52. bottom: 50%;
  53. width: 100%;
  54. }
  55. .split-view-contents-details {
  56. top: 50%;
  57. width: 100%;
  58. }
  59. }
  60. @media screen and (min-width: 900px) {
  61. .split-view-contents-requests {
  62. width: 50%;
  63. }
  64. .split-view-contents-details {
  65. left: 50%;
  66. right: 0;
  67. }
  68. }
  69. .data-grid {
  70. border: none;
  71. bottom: 0;
  72. left: 0;
  73. position: absolute;
  74. right: 0;
  75. top: 0;
  76. }
  77. .data-grid table {
  78. border-collapse: collapse;
  79. border-spacing: 0;
  80. font-size: 11px;
  81. table-layout: fixed;
  82. width: 100%;
  83. }
  84. .data-grid th {
  85. border-bottom: 1px solid rgb(205, 205, 205);
  86. border-right: 1px solid rgb(205, 205, 205);
  87. height: 25px;
  88. padding: 0 4px;
  89. white-space: nowrap;
  90. }
  91. .data-grid td {
  92. border-right: 1px solid rgb(205, 205, 205);
  93. overflow: hidden;
  94. padding: 0px 5px;
  95. vertical-align: middle;
  96. white-space: nowrap;
  97. }
  98. .data-grid tr:first-child td {
  99. border-top: 1px solid rgb(205, 205, 205);
  100. }
  101. /* requests list */
  102. .data-container {
  103. bottom: 0;
  104. left: 0;
  105. overflow-x: hidden;
  106. overflow-y: overlay;
  107. position: absolute;
  108. right: 0;
  109. top: 25px;
  110. }
  111. .data-container table {
  112. height: 100%;
  113. }
  114. .data-container tr {
  115. height: 20px;
  116. }
  117. .data-container tr.sizing {
  118. height: 0;
  119. }
  120. .data-container tr.sizing td {
  121. padding: 0;
  122. }
  123. .data-container tr.filler {
  124. display: table-row !important;
  125. height: auto !important;
  126. }
  127. .data-container tr.filler td {
  128. padding: 0;
  129. }
  130. .data-grid-requests {
  131. cursor: unset;
  132. }
  133. .clickable {
  134. cursor: pointer;
  135. }
  136. .data-grid-requests table {
  137. line-height: 1.4;
  138. }
  139. .data-grid-requests th {
  140. font-weight: normal;
  141. overflow: hidden;
  142. }
  143. .data-grid-requests small {
  144. color: rgb(128, 128, 128);
  145. font-size: 100%;
  146. }
  147. .data-grid-requests .selected td {
  148. background: #3879D9 !important;
  149. color: white;
  150. }
  151. .data-grid-requests .selected td small {
  152. color: white;
  153. }
  154. .data-grid-requests .apextype {
  155. width: 170px;
  156. }
  157. .data-grid-requests .apexmethod {
  158. width: 130px;
  159. }
  160. .data-grid-requests .method,
  161. .data-grid-requests .time,
  162. .data-grid-requests .format,
  163. .data-grid-requests .status {
  164. text-align: center;
  165. width: 50px;
  166. }
  167. .data-grid-requests .duration {
  168. width: 80px;
  169. }
  170. .data-grid-requests td.duration {
  171. text-align: right;
  172. }
  173. .data-grid-requests td.method,
  174. .data-grid-requests td.time,
  175. .data-grid-requests td.format,
  176. .data-grid-requests td.status,
  177. .data-grid-requests td.duration {
  178. background: rgb(237, 237, 237);
  179. }
  180. .data-grid-requests tr:nth-child(even):not(.filler) {
  181. background: rgb(243, 243, 243);
  182. }
  183. .data-grid-requests tr:nth-child(even) td.method,
  184. .data-grid-requests tr:nth-child(even) td.time,
  185. .data-grid-requests tr:nth-child(even) td.format,
  186. .data-grid-requests tr:nth-child(even) td.status,
  187. .data-grid-requests tr:nth-child(even) td.duration {
  188. background: rgb(225, 225, 225);
  189. }
  190. .data-grid-requests .notificationsCount {
  191. background: rgba(255, 255, 255, 0.8);
  192. float: right;
  193. height: 100%;
  194. letter-spacing: -0.5px;
  195. line-height: 29px;
  196. padding-left: 4px;
  197. padding-right: 4px;
  198. position: relative;
  199. right: -4px;
  200. }
  201. .data-grid-requests .selected .notificationsCount {
  202. background: inherit;
  203. }
  204. .data-grid-requests .notificationsCount .errorsCount i {
  205. color: rgb(205, 73, 46);
  206. margin-left: 2px;
  207. }
  208. .data-grid-requests .selected .notificationsCount .errorsCount i {
  209. color: #fff;
  210. }
  211. .data-grid-requests .notificationsCount .warningsCount i {
  212. color: rgb(244, 189, 0);
  213. margin-left: 2px;
  214. }
  215. .data-grid-requests .selected .notificationsCount .warningsCount i {
  216. color: #fff;
  217. }
  218. .data-grid-requests .data-container .data .saml {
  219. font-weight: bold;
  220. }
  221. /* request details */
  222. .tabbed-pane {
  223. -webkit-box-orient: vertical;
  224. -moz-box-orient: vertical;
  225. -ms-box-orient: vertical;
  226. box-orient: vertical;
  227. display: -webkit-box;
  228. display: -moz-box;
  229. display: -ms-box;
  230. display: box;
  231. height: 100%;
  232. width: 100%;
  233. }
  234. .tabbed-pane-header {
  235. border-bottom: 1px solid rgb(205, 205, 205);
  236. padding-left: 0;
  237. padding-top: 1px;
  238. white-space: nowrap;
  239. }
  240. .tabbed-pane-header-contents {
  241. margin: 0 10px;
  242. }
  243. .tabbed-pane-header-tabs {
  244. margin: 0;
  245. min-width: 300px;
  246. padding: 0;
  247. position: relative;
  248. top: 1px;
  249. }
  250. .tabbed-pane-header-tab {
  251. border: 1px solid transparent;
  252. border-bottom: none;
  253. float: left;
  254. font-size: 11px;
  255. height: 21px;
  256. margin-top: 2px;
  257. overflow: hidden;
  258. padding: 1px 6px 1px 6px;
  259. text-overflow: ellipsis;
  260. vertical-align: middle;
  261. white-space: nowrap;
  262. }
  263. .tabbed-pane-header-tab-title {
  264. color: #000;
  265. display: block;
  266. font-size: 12px;
  267. min-width: 40px;
  268. text-align: center;
  269. text-decoration: none;
  270. white-space: nowrap;
  271. }
  272. .tabbed-pane-header .ui-tabs-active {
  273. background-color: white;
  274. border: 1px solid rgb(205, 205, 205);
  275. border-bottom: none;
  276. }
  277. .tabbed-pane-header-tab, .tabbed-pane-header-tab a, .tabbed-pane-header-tab a:active {
  278. outline: none;
  279. }
  280. .tabbed-pane-content {
  281. -webkit-box-flex: 1;
  282. -moz-box-flex: 1;
  283. -ms-box-flex: 1;
  284. box-flex: 1;
  285. overflow: auto;
  286. padding: 0px;
  287. position: relative;
  288. }
  289. #tab-request,
  290. #tab-response {
  291. padding: 10px;
  292. }
  293. .data-grid-details table {
  294. /*font-size: 12px;*/
  295. margin-bottom: 6px;
  296. table-layout: fixed;
  297. border: 1px solid rgb(205, 205, 205);
  298. }
  299. .data-grid-details table tr:nth-child(even) {
  300. background: rgb(234, 243, 255);
  301. }
  302. .data-grid-details th {
  303. border-bottom: none;
  304. border-right: none;
  305. font-size: 12px;
  306. font-weight: bold;
  307. height: 18px;
  308. padding: 0 4px;
  309. white-space: nowrap;
  310. }
  311. .data-grid-details td {
  312. border-right: 1px solid #e5e5e5;
  313. border-top: 1px solid #e5e5e5;
  314. height: auto;
  315. line-height: 16px;
  316. vertical-align: top;
  317. white-space: normal;
  318. word-wrap: break-word;
  319. }
  320. .data-grid-details th:last-child,
  321. .data-grid-details td:last-child {
  322. border-right: none;
  323. }
  324. .data-grid-details .key {
  325. /*font-size: 12px;*/
  326. font-weight: bold;
  327. white-space: nowrap;
  328. }
  329. /* request details - request */
  330. th.request {
  331. position:relative;
  332. }
  333. #tab-request table {
  334. margin-bottom: 20px;
  335. }
  336. #tab-response table {
  337. margin-bottom: 20px;
  338. }
  339. #tab-saml {
  340. bottom: 0px;
  341. left: 0px;
  342. overflow-x: hidden;
  343. overflow-y: overlay;
  344. position: absolute;
  345. right: 0px;
  346. top: 0px;
  347. padding: 1px;
  348. font-size: 12px;
  349. }
  350. #tab-saml-codemirror {
  351. height: 100%;
  352. }
  353. input[type="file"] {
  354. display: none;
  355. }
  356. .CodeMirror {
  357. height: calc(100% - 26px) !important;
  358. }