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.

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