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.

439 lines
8.5 KiB

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