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
394 lines
9.7 KiB
[ng\:cloak],
|
|
[ng-cloak],
|
|
[data-ng-cloak],
|
|
[x-ng-cloak],
|
|
.ng-cloak,
|
|
.x-ng-cloak {
|
|
display: none !important;
|
|
}
|
|
|
|
* {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background: #fff;
|
|
margin: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
section.wrapper {
|
|
display: flex;
|
|
flex-flow: column;
|
|
flex-wrap: wrap;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
}
|
|
section.wrapper section.request {
|
|
display: flex;
|
|
flex-flow: column;
|
|
height: 30%;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
section.wrapper section.request .search {
|
|
margin: 0px;
|
|
background-color: #efefef;
|
|
display: flex;
|
|
flex-flow: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
section.wrapper section.request .search input {
|
|
border: 1px solid darkgray;
|
|
min-width: 260px;
|
|
border-radius: 0px;
|
|
margin: 0;
|
|
padding: 2px 8px;
|
|
flex: 1;
|
|
}
|
|
section.wrapper section.request .search .filtering {
|
|
margin-right: 30px;
|
|
}
|
|
section.wrapper section.request .search span.searchterm {
|
|
background-color: #8aff75;
|
|
border-radius: 3px;
|
|
padding: 3px 6px;
|
|
margin: 1px 0;
|
|
display: inline-block;
|
|
cursor: no-drop;
|
|
}
|
|
section.wrapper section.request .search span.searchterm.neg {
|
|
background-color: #ec7b79;
|
|
}
|
|
section.wrapper section.request .search span.operator {
|
|
font: normal normal bold 11px/25px sans-serif;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
width: 25px;
|
|
text-align: center;
|
|
}
|
|
section.wrapper section.request .search span.label {
|
|
padding-left: 5px;
|
|
width: 100px;
|
|
display: inline-block;
|
|
}
|
|
section.wrapper section.request .search span.recents {
|
|
background-color: #a8ff99;
|
|
border-radius: 3px;
|
|
padding: 3px 6px;
|
|
margin: 1px 10px 2px 0px;
|
|
display: inline-block;
|
|
color: gray;
|
|
cursor: copy;
|
|
}
|
|
section.wrapper section.request .search span.recents.neg {
|
|
background-color: #ffbdbd;
|
|
}
|
|
section.wrapper section.request .requests {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-flow: column;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
border-top: 1px solid #3883FA;
|
|
}
|
|
section.wrapper section.request .requests .data-container {
|
|
flex: 1;
|
|
overflow-y: overlay;
|
|
overflow-x: hidden;
|
|
}
|
|
section.wrapper section.request .requests .data-container table.styled {
|
|
height: auto;
|
|
}
|
|
section.wrapper section.request .requests table.styled {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
font-size: 11px;
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
line-height: 1.4;
|
|
}
|
|
section.wrapper section.request .requests table.styled tr {
|
|
height: 20px;
|
|
}
|
|
section.wrapper section.request .requests table.styled tr.sizing {
|
|
height: 0;
|
|
}
|
|
section.wrapper section.request .requests table.styled tr.sizing td {
|
|
padding: 0;
|
|
}
|
|
section.wrapper section.request .requests table.styled th {
|
|
border-bottom: 1px solid #cdcdcd;
|
|
border-right: 1px solid #cdcdcd;
|
|
height: 25px;
|
|
padding: 0 4px;
|
|
white-space: nowrap;
|
|
font-weight: normal;
|
|
overflow: hidden;
|
|
}
|
|
section.wrapper section.request .requests table.styled td {
|
|
border-right: 1px solid #cdcdcd;
|
|
overflow: hidden;
|
|
padding: 0px 5px;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
}
|
|
section.wrapper section.request .requests table.styled tr:first-child td {
|
|
border-top: 1px solid #cdcdcd;
|
|
}
|
|
section.wrapper section.request .requests table.styled td.method,
|
|
section.wrapper section.request .requests table.styled td.time,
|
|
section.wrapper section.request .requests table.styled td.datetime,
|
|
section.wrapper section.request .requests table.styled td.format,
|
|
section.wrapper section.request .requests table.styled td.status,
|
|
section.wrapper section.request .requests table.styled td.duration {
|
|
background: #f1f1f1;
|
|
}
|
|
section.wrapper section.request .requests table.styled tr:nth-child(even):not(.filler) {
|
|
background: #f3f3f3;
|
|
}
|
|
section.wrapper section.request .requests table.styled tr:nth-child(even) td.method,
|
|
section.wrapper section.request .requests table.styled tr:nth-child(even) td.time,
|
|
section.wrapper section.request .requests table.styled tr:nth-child(even) td.datetime,
|
|
section.wrapper section.request .requests table.styled tr:nth-child(even) td.format,
|
|
section.wrapper section.request .requests table.styled tr:nth-child(even) td.status,
|
|
section.wrapper section.request .requests table.styled tr:nth-child(even) td.duration {
|
|
background: #f1f1f1;
|
|
}
|
|
section.wrapper section.request .requests table.styled tr.selected td {
|
|
background: #3883fa !important;
|
|
color: white;
|
|
}
|
|
section.wrapper section.request .requests table.styled tr.selected td small {
|
|
color: white;
|
|
}
|
|
section.wrapper section.request .requests table.styled tr.separator {
|
|
cursor: pointer;
|
|
max-height: 6px;
|
|
height: 6px;
|
|
line-height: 6px;
|
|
}
|
|
section.wrapper section.request .requests table.styled tr.separator td {
|
|
background-color: #d6e6ff !important;
|
|
color: #d6e6ff !important;
|
|
border-right: 1px solid #d6e6ff !important;
|
|
}
|
|
section.wrapper section.request .requests table.styled .apextype {
|
|
width: 15%;
|
|
}
|
|
section.wrapper section.request .requests table.styled .apexmethod {
|
|
width: 12%;
|
|
}
|
|
section.wrapper section.request .requests table.styled .method,
|
|
section.wrapper section.request .requests table.styled .time,
|
|
section.wrapper section.request .requests table.styled .format,
|
|
section.wrapper section.request .requests table.styled .status {
|
|
text-align: center;
|
|
width: 6%;
|
|
}
|
|
section.wrapper section.request .requests table.styled .datetime {
|
|
text-align: center;
|
|
width: 9%;
|
|
}
|
|
section.wrapper section.request .requests table.styled .duration {
|
|
width: 80px;
|
|
}
|
|
section.wrapper section.response {
|
|
flex: 1;
|
|
overflow: auto;
|
|
border: 0;
|
|
border-top: 1px solid #3883FA;
|
|
}
|
|
section.wrapper section.response .toolbar {
|
|
padding: 2px 4px;
|
|
text-align: right;
|
|
}
|
|
section.wrapper section.response .toolbar a {
|
|
color: dimgray;
|
|
cursor: default;
|
|
font-size: 15px;
|
|
padding: 0 5px;
|
|
text-decoration: none;
|
|
}
|
|
section.wrapper section.response .toolbar a:hover {
|
|
color: #3b3b3b;
|
|
text-decoration: none;
|
|
}
|
|
section.wrapper section.response .toolbar a.selected {
|
|
color: #3e82f0;
|
|
text-decoration: none;
|
|
}
|
|
section.wrapper section.response .toolbar a.selected:hover {
|
|
color: #196cfb;
|
|
text-decoration: none;
|
|
}
|
|
section.wrapper section.response table.styled {
|
|
font-size: 12px;
|
|
margin-bottom: 6px;
|
|
table-layout: auto;
|
|
width: 100%;
|
|
border: 1px solid #cdcdcd;
|
|
}
|
|
section.wrapper section.response table.styled tr:nth-child(even) {
|
|
background: #D6E6FF77;
|
|
}
|
|
section.wrapper section.response table.styled th {
|
|
border-bottom: none;
|
|
border-right: none;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
height: 18px;
|
|
padding: 0 4px;
|
|
white-space: nowrap;
|
|
}
|
|
section.wrapper section.response table.styled td {
|
|
border-right: 1px solid #e5e5e5;
|
|
border-top: 1px solid #e5e5e5;
|
|
height: auto;
|
|
line-height: 16px;
|
|
vertical-align: top;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
}
|
|
section.wrapper section.response table.styled td.key {
|
|
width: 30%;
|
|
}
|
|
section.wrapper section.response table.styled td.value {
|
|
width: 70%;
|
|
}
|
|
section.wrapper section.response table.styled td div {
|
|
word-break: break-all;
|
|
}
|
|
section.wrapper section.response table.styled th:last-child,
|
|
section.wrapper section.response table.styled td:last-child {
|
|
border-right: none;
|
|
}
|
|
section.wrapper section.response .tabbed-pane {
|
|
-webkit-box-orient: vertical;
|
|
-moz-box-orient: vertical;
|
|
-ms-box-orient: vertical;
|
|
box-orient: vertical;
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -ms-box;
|
|
display: box;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
section.wrapper section.response .tabbed-pane-header {
|
|
border-bottom: 1px solid #cdcdcd;
|
|
padding-left: 0;
|
|
padding-top: 1px;
|
|
white-space: nowrap;
|
|
height: 26px;
|
|
background: #efefef;
|
|
}
|
|
section.wrapper section.response .tabbed-pane-header-contents {
|
|
margin: 0 10px;
|
|
}
|
|
section.wrapper section.response .tabbed-pane-header-tabs {
|
|
margin: 0;
|
|
min-width: 300px;
|
|
padding: 0;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
section.wrapper section.response .tabbed-pane-header-tabs li:last-child {
|
|
right: 85px;
|
|
position: absolute;
|
|
}
|
|
section.wrapper section.response .tabbed-pane-header-tab {
|
|
border: 1px solid #cdcdcd;
|
|
border-bottom: none;
|
|
float: left;
|
|
font-size: 11px;
|
|
height: 21px;
|
|
overflow: hidden;
|
|
padding: 1px 10px;
|
|
text-overflow: ellipsis;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
margin: 2px 0px;
|
|
}
|
|
section.wrapper section.response .tabbed-pane-header-tab-title {
|
|
color: #000;
|
|
display: block;
|
|
font-size: 12px;
|
|
min-width: 40px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
section.wrapper section.response .tabbed-pane-header .ui-tabs-active {
|
|
background-color: white;
|
|
border: 1px solid #cdcdcd;
|
|
border-bottom: none;
|
|
}
|
|
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 {
|
|
outline: none;
|
|
}
|
|
section.wrapper section.response .tabbed-pane-content {
|
|
-webkit-box-flex: 1;
|
|
-moz-box-flex: 1;
|
|
-ms-box-flex: 1;
|
|
box-flex: 1;
|
|
overflow: auto;
|
|
padding: 0px;
|
|
position: relative;
|
|
height: calc(100% - 24px);
|
|
}
|
|
section.wrapper section.response .tabbed-pane-content #tab-settings {
|
|
padding: 20px;
|
|
}
|
|
section.wrapper section.response .tabbed-pane-content #tab-settings .form-group {
|
|
padding: 4px 0px;
|
|
}
|
|
section.wrapper section.response .tabbed-pane-content #tab-settings .form-group label {
|
|
width: 200px;
|
|
display: inline-block;
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
section.wrapper {
|
|
flex-flow: row;
|
|
}
|
|
section.wrapper section.request {
|
|
width: 50%;
|
|
height: 100%;
|
|
flex: 1;
|
|
max-height: 100%;
|
|
}
|
|
section.wrapper section.response {
|
|
width: 50%;
|
|
border-left: 1px solid #3883fa;
|
|
border-top: 0;
|
|
}
|
|
|
|
br.mobile {
|
|
display: none;
|
|
}
|
|
}
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#tab-request-stats,
|
|
#tab-response-stats {
|
|
padding: 10px;
|
|
}
|
|
|
|
th.request {
|
|
position: relative;
|
|
}
|
|
|
|
#tab-response table.styled {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
input[type=file] {
|
|
display: none;
|
|
}
|
|
|
|
/*# sourceMappingURL=panel.css.map */
|