leviolson
/
better-network-chrome-panel
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

Panel Settings & SCSS Refactor

main
Levi Olson 3 years ago
parent
7420d75137
commit
b184a78150
6 changed files with 591 additions and 644 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      unpacked/manifest.json
  2. +24
    -9
      unpacked/panel/assets/javascripts/panel.js
  3. +185
    -230
      unpacked/panel/assets/stylesheets/panel.css
  4. +1
    -1
      unpacked/panel/assets/stylesheets/panel.css.map
  5. +334
    -370
      unpacked/panel/assets/stylesheets/panel.scss
  6. +46
    -33
      unpacked/panel/panel.html

+ 1
- 1
unpacked/manifest.json View File

@ -1,6 +1,6 @@
{
"name": "Better Network Panel",
"version": "1.0.0",
"version": "1.0.1",
"minimum_chrome_version": "44.0",
"description": "Extends the Developer Tools, adding a new Network Panel in the Developer Tools window with better searching and response previews.",
"devtools_page": "devtools.html",

+ 24
- 9
unpacked/panel/assets/javascripts/panel.js View File

@ -35,6 +35,10 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar
const HOST = "https://leviolson.com" // "http://localhost:3000"
const CHANGELOG = {
"What's New": {
"v1.0.1:": {
"Panel Settings": HOST + "/posts/bnp-changelog#panel-settings",
"Bugs": "squashed"
},
"v1.0.0:": {
"Improved Search": HOST + "/posts/bnp-changelog#improved-search",
"JSON Editor BUILT IN": HOST + "/posts/bnp-changelog#json-editor-built-in",
@ -58,7 +62,8 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar
$scope.showOriginal = false;
$scope.currentDetailTab = "tab-response";
$scope.showIncomingRequests = true;
$scope.myResponseCodeMirror = null;
$scope.autoJSONParseDepthRes = 3;
$scope.autoJSONParseDepthReq = 6;
$scope.filter = "";
$scope.editor = null;
@ -122,8 +127,15 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar
} catch (e) {
$scope.andFilter = false;
}
try {
let scrollToNew = JSON.parse(LOCALSTORAGE.getItem('bnp-scrollToNew'));
$scope.showIncomingRequests = !!scrollToNew;
} catch (e) {
$scope.showIncomingRequests = true;
}
console.debug('Retrieving', $scope.andFilter, $scope.searchTerms, $scope.oldSearchTerms);
console.debug('Retrieving Settings from Local Storage');
chrome.devtools.network.onRequestFinished.addListener(function (request) {
// do not show requests to chrome extension resources
@ -134,7 +146,7 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar
});
chrome.devtools.network.onNavigated.addListener(function (event) {
console.log("Event", event);
// display a line break in the network logs to show page reloaded
$scope.masterRequests.push({
id: $scope.uniqueId,
separator: true,
@ -207,10 +219,11 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar
_setLocalStorage = function() {
// do some sort of comparison to searchTerms and oldSearchTerms to make sure there is only one.
// although, now that I think about it... this comparison shouldn't be necessary... /shrug
LOCALSTORAGE.setItem('bnp-scrollToNew', JSON.stringify($scope.showIncomingRequests));
LOCALSTORAGE.setItem('bnp-andfilter', JSON.stringify($scope.andFilter));
LOCALSTORAGE.setItem('bnp-searchterms', JSON.stringify($scope.searchTerms));
LOCALSTORAGE.setItem('bnp-oldsearchterms', JSON.stringify($scope.oldSearchTerms));
console.debug('Saving', $scope.andFilter, $scope.searchTerms, $scope.oldSearchTerms);
console.debug('Saving', $scope.showIncomingRequests, $scope.andFilter, $scope.searchTerms, $scope.oldSearchTerms);
}
$scope.addSearchTerm = function(index) {
@ -237,7 +250,7 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar
$scope.createToolbar = function () {
toolbar.createToggleButton(
"embed",
"JSON Parsing",
"Toggle JSON Parsing (See Panel Settings)",
false,
function () {
// ga('send', 'event', 'button', 'click', 'Toggle JSON Parsing');
@ -361,8 +374,6 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar
$scope.activeResponseCookies = [];
$scope.activeResponseHeaders = [];
$scope.activeCode = null;
$scope.showIncomingRequests = true;
};
$scope.setActive = function (requestId) {
@ -436,10 +447,14 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar
$scope.responseJsonEditor.set(null)
$scope.requestJsonEditor.set(null)
}
$scope.displayCode("responseJsonEditor", $scope.activeCode, 3);
$scope.displayCode("requestJsonEditor", $scope.activePostData, 6);
$scope.displayCode("responseJsonEditor", $scope.activeCode, $scope.autoJSONParseDepthRes);
$scope.displayCode("requestJsonEditor", $scope.activePostData, $scope.autoJSONParseDepthReq);
});
$scope.$watch('showIncomingRequests', function(newVal, oldVal) {
_setLocalStorage();
})
$scope.selectDetailTab = function (tabId, external) {
$scope.currentDetailTab = tabId;
if (external) {

+ 185
- 230
unpacked/panel/assets/stylesheets/panel.css View File

@ -1,4 +1,9 @@
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
@ -11,280 +16,225 @@
body {
background: #fff;
margin: 0;
position: relative;
height: 100%;
}
div.wrap {
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;
background-color: #efefef;
display: flex;
flex-flow: row;
flex-wrap: wrap;
}
div.wrap input {
section.wrapper section.request .search input {
border: 1px solid darkgray;
width: 260px;
min-width: 260px;
border-radius: 0px;
margin: 0;
padding: 2px 8px;
flex: 1;
}
div.wrap span.label {
margin: 0 10px;
section.wrapper section.request .search .filtering {
margin-right: 30px;
}
div.wrap span.searchterm {
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;
}
div.wrap span.searchterm.neg {
section.wrapper section.request .search span.searchterm.neg {
background-color: #ec7b79;
}
div.wrap span.operator {
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;
}
div.wrap span.recent {
padding-left: 75px;
}
div.wrap div#recent-searches {
display: inline;
section.wrapper section.request .search span.label {
padding-left: 5px;
width: 100px;
display: inline-block;
}
div.wrap span.recents {
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;
}
div.wrap span.recents.neg {
section.wrapper section.request .search span.recents.neg {
background-color: #ffbdbd;
}
table.styled th,
table.styled td {
text-align: left;
}
.toolbar {
padding: 2px 4px;
text-align: right;
}
.toolbar a {
color: dimgray;
cursor: default;
font-size: 15px;
padding: 0 5px;
text-decoration: none;
}
.toolbar a:hover {
color: #3b3b3b;
text-decoration: none;
}
.toolbar a.selected {
color: #3e82f0;
text-decoration: none;
}
.toolbar a.selected:hover {
color: #196cfb;
text-decoration: none;
}
.top-border {
border-top: 1px solid #ddd;
}
.split-view {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.split-view-contents {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.split-view-contents-details {
top: 34%;
}
@media screen and (max-width: 1200px) {
div.wrap span.recent {
display: inline-block;
padding: 0px 10px 0 273px;
margin: 8px 0 0 0;
}
.split-view-contents-requests {
bottom: 66%;
}
section.wrapper section.request .requests {
flex: 1;
display: flex;
flex-flow: column;
overflow-x: hidden;
overflow-y: hidden;
border-top: 1px solid #3883FA;
}
@media screen and (min-width: 1200px) {
.split-view-contents {
width: 50%;
}
.split-view-contents-requests {
right: unset;
}
.split-view-contents-details {
top: 0;
left: unset;
border-left: 1px solid #555;
}
br.mobile {
display: none;
}
section.wrapper section.request .requests .data-container {
flex: 1;
overflow-y: overlay;
overflow-x: hidden;
}
.data-grid {
border: none;
height: 100%;
section.wrapper section.request .requests .data-container table.styled {
height: auto;
}
.data-grid table.styled {
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;
}
.data-grid table.styled th {
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;
}
.data-grid table.styled td {
section.wrapper section.request .requests table.styled td {
border-right: 1px solid #cdcdcd;
overflow: hidden;
padding: 0px 5px;
vertical-align: middle;
white-space: nowrap;
}
.data-grid table.styled tr:first-child td {
section.wrapper section.request .requests table.styled tr:first-child td {
border-top: 1px solid #cdcdcd;
}
.data-grid-requests {
cursor: unset;
}
.data-grid-requests table.styled {
line-height: 1.4;
}
.data-grid-requests table.styled th {
font-weight: normal;
overflow: hidden;
}
.data-grid-requests table.styled td.duration {
text-align: right;
}
.data-grid-requests table.styled td.method,
.data-grid-requests table.styled td.time,
.data-grid-requests table.styled td.datetime,
.data-grid-requests table.styled td.format,
.data-grid-requests table.styled td.status,
.data-grid-requests table.styled td.duration {
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;
}
.data-grid-requests table.styled tr:nth-child(even):not(.filler) {
section.wrapper section.request .requests table.styled tr:nth-child(even):not(.filler) {
background: #f3f3f3;
}
.data-grid-requests table.styled tr:nth-child(even) td.method,
.data-grid-requests table.styled tr:nth-child(even) td.time,
.data-grid-requests table.styled tr:nth-child(even) td.datetime,
.data-grid-requests table.styled tr:nth-child(even) td.format,
.data-grid-requests table.styled tr:nth-child(even) td.status,
.data-grid-requests table.styled tr:nth-child(even) td.duration {
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;
}
.data-grid-requests table.styled tr.selected td {
section.wrapper section.request .requests table.styled tr.selected td {
background: #3883fa !important;
color: white;
}
.data-grid-requests table.styled tr.selected td small {
section.wrapper section.request .requests table.styled tr.selected td small {
color: white;
}
.data-grid-requests table.styled tr.separator {
section.wrapper section.request .requests table.styled tr.separator {
cursor: pointer;
max-height: 6px;
height: 6px;
line-height: 6px;
}
.data-grid-requests table.styled tr.separator td {
section.wrapper section.request .requests table.styled tr.separator td {
background-color: #d6e6ff !important;
color: #d6e6ff !important;
border-right: 1px solid #d6e6ff !important;
}
.data-grid-requests small {
color: gray;
font-size: 100%;
}
.data-grid-requests .apextype {
section.wrapper section.request .requests table.styled .apextype {
width: 15%;
}
.data-grid-requests .apexmethod {
section.wrapper section.request .requests table.styled .apexmethod {
width: 12%;
}
.data-grid-requests .method,
.data-grid-requests .time,
.data-grid-requests .format,
.data-grid-requests .status {
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%;
}
.data-grid-requests .datetime {
section.wrapper section.request .requests table.styled .datetime {
text-align: center;
width: 9%;
}
.data-grid-requests .duration {
section.wrapper section.request .requests table.styled .duration {
width: 80px;
}
.data-grid-requests .notificationsCount {
background: rgba(255, 255, 255, 0.8);
float: right;
height: 100%;
letter-spacing: -0.5px;
line-height: 29px;
padding-left: 4px;
padding-right: 4px;
position: relative;
right: -4px;
}
.data-grid-requests .notificationsCount .errorsCount i {
color: #cd492e;
margin-left: 2px;
section.wrapper section.response {
flex: 1;
overflow: auto;
border: 0;
border-top: 1px solid #3883FA;
}
.data-grid-requests .notificationsCount .warningsCount i {
color: #f4bd00;
margin-left: 2px;
section.wrapper section.response .toolbar {
padding: 2px 4px;
text-align: right;
}
.data-grid-requests .selected .notificationsCount {
background: inherit;
section.wrapper section.response .toolbar a {
color: dimgray;
cursor: default;
font-size: 15px;
padding: 0 5px;
text-decoration: none;
}
.data-grid-requests .selected .notificationsCount .errorsCount i {
color: #fff;
section.wrapper section.response .toolbar a:hover {
color: #3b3b3b;
text-decoration: none;
}
.data-grid-requests .selected .notificationsCount .warningsCount i {
color: #fff;
section.wrapper section.response .toolbar a.selected {
color: #3e82f0;
text-decoration: none;
}
.data-grid-requests .data .saml {
font-weight: bold;
section.wrapper section.response .toolbar a.selected:hover {
color: #196cfb;
text-decoration: none;
}
.data-grid-details table.styled {
section.wrapper section.response table.styled {
font-size: 12px;
margin-bottom: 6px;
table-layout: fixed;
table-layout: auto;
width: 100%;
border: 1px solid #cdcdcd;
}
.data-grid-details table.styled tr:nth-child(even) {
background: #eaf3ff;
section.wrapper section.response table.styled tr:nth-child(even) {
background: #D6E6FF77;
}
.data-grid-details table.styled th {
section.wrapper section.response table.styled th {
border-bottom: none;
border-right: none;
font-size: 12px;
@ -293,7 +243,7 @@ table.styled td {
padding: 0 4px;
white-space: nowrap;
}
.data-grid-details table.styled td {
section.wrapper section.response table.styled td {
border-right: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
height: auto;
@ -302,49 +252,20 @@ table.styled td {
white-space: normal;
word-wrap: break-word;
}
.data-grid-details table.styled th:last-child,
.data-grid-details table.styled td:last-child {
border-right: none;
section.wrapper section.response table.styled td.key {
width: 30%;
}
.data-grid-details .key {
font-size: 12px;
font-weight: bold;
white-space: nowrap;
section.wrapper section.response table.styled td.value {
width: 70%;
}
.data-container {
overflow-x: hidden;
overflow-y: overlay;
height: calc(100% - 25px);
}
.data-container table.styled {
height: 100%;
}
.data-container table.styled tr {
height: 20px;
}
.data-container table.styled tr.sizing {
height: 0;
section.wrapper section.response table.styled td div {
word-break: break-all;
}
.data-container table.styled tr.sizing td {
padding: 0;
}
.data-container table.styled tr.filler {
display: table-row;
height: auto;
}
.data-container table.styled tr.filler td {
padding: 0;
}
.data-container .data .saml {
font-weight: bold;
}
.clickable {
cursor: pointer;
section.wrapper section.response table.styled th:last-child,
section.wrapper section.response table.styled td:last-child {
border-right: none;
}
.tabbed-pane {
section.wrapper section.response .tabbed-pane {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
@ -356,7 +277,7 @@ table.styled td {
height: 100%;
width: 100%;
}
.tabbed-pane-header {
section.wrapper section.response .tabbed-pane-header {
border-bottom: 1px solid #cdcdcd;
padding-left: 0;
padding-top: 1px;
@ -364,30 +285,34 @@ table.styled td {
height: 26px;
background: #efefef;
}
.tabbed-pane-header-contents {
section.wrapper section.response .tabbed-pane-header-contents {
margin: 0 10px;
}
.tabbed-pane-header-tabs {
section.wrapper section.response .tabbed-pane-header-tabs {
margin: 0;
min-width: 300px;
padding: 0;
position: relative;
top: 1px;
}
.tabbed-pane-header-tab {
border: 1px solid transparent;
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;
margin-top: 2px;
overflow: hidden;
padding: 1px 6px 1px 6px;
padding: 1px 10px;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
margin: 2px 0px;
}
.tabbed-pane-header-tab-title {
section.wrapper section.response .tabbed-pane-header-tab-title {
color: #000;
display: block;
font-size: 12px;
@ -396,15 +321,15 @@ table.styled td {
text-decoration: none;
white-space: nowrap;
}
.tabbed-pane-header .ui-tabs-active {
section.wrapper section.response .tabbed-pane-header .ui-tabs-active {
background-color: white;
border: 1px solid #cdcdcd;
border-bottom: none;
}
.tabbed-pane-header-tab, .tabbed-pane-header-tab a, .tabbed-pane-header-tab a:active {
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;
}
.tabbed-pane-content {
section.wrapper section.response .tabbed-pane-content {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
@ -414,6 +339,40 @@ table.styled td {
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 {
@ -432,8 +391,4 @@ input[type=file] {
display: none;
}
.CodeMirror {
height: calc(100% - 26px);
}
/*# sourceMappingURL=panel.css.map */

+ 1
- 1
unpacked/panel/assets/stylesheets/panel.css.map View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["panel.scss"],"names":[],"mappings":"AAAA;EACI;;;AAGJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;;AACA;EACF;EACA;EACA;EACA;EACA;;AAED;EACC;;AAEE;EACI;EACA;EACA;EACA;EACN;;AACA;EACC;;AAGF;EACC;EACA;EACA;EACA;EACA;;AAEE;EACF;;AAEE;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACN;;AACA;EACC;;;AAIH;AAAA;EAEI;;;AAEJ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AACA;EACI;EACA;;;AAKhB;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;;AAIZ;EAEQ;IACI;IACA;IACA;;;EAGR;IACI;;;AAGR;EACI;IACI;;EACA;IACI;;EAEJ;IACI;IACA;IACA;;;EAGR;IACI;;;AAGR;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAGR;EACI;;AACA;EACI;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEJ;EACI;;AAEJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEb;EACC;EACA;;AACA;EACC;;AAGO;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAIZ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;AAAA;AAAA;AAAA;EAII;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAGR;EACI;;AACA;EACI;;AAEJ;EACI;;AAGR;EACI;;AAGR;EACI;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;AAAA;EAEI;;AAGR;EACI;EACA;EACA;;;AAGR;EACI;EACA;EACA;;AACA;EACI;;AACA;EACI;;AACA;EACI;;AACA;EACI;;AAGR;EACI;EACA;;AACA;EACI;;AAKhB;EACI;;;AAGR;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA;;AAEJ;EAGI;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGR;AAAA;EAEI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI","file":"panel.css"}
{"version":3,"sourceRoot":"","sources":["panel.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;;AAGJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;;AACA;EACI;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEJ;EACI;;AAEJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEJ;EACI;EACA;;AACA;EACI;;AAGR;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;;AAEJ;EACI;;AAEJ;AAAA;AAAA;AAAA;EAII;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAKhB;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AACA;EACI;EACA;;AAKhB;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGR;AAAA;EAEI;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA;;AAEJ;EAGI;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;;AACA;EACI;EACA;;;AAQ5B;EACI;IACI;;EACA;IACI;IACA;IACA;IACA;;EAEJ;IACI;IACA;IACA;;;EAGR;IACI;;;AAGR;EACI;;;AAGJ;AAAA;EAEI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI","file":"panel.css"}

+ 334
- 370
unpacked/panel/assets/stylesheets/panel.scss View File

@ -1,4 +1,9 @@
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
@ -10,402 +15,364 @@
body {
background: #fff;
margin: 0;
position: relative;
}
div.wrap {
margin: 0px;
background-color: #EFEFEF;
input {
border: 1px solid darkgray;
width: 260px;
border-radius: 0px;
margin: 0;
padding: 2px 8px;
}
span.label {
margin: 0 10px;
}
span.searchterm {
background-color: hsl(111, 100%, 73%); // #bfb;
border-radius: 3px;
padding: 3px 6px;
margin: 1px 0;
display: inline-block;
&.neg {
background-color: hsl(1, 75%, 70%);
}
}
span.operator {
font: normal normal bold 11px/25px sans-serif;
cursor: pointer;
display: inline-block;
width: 25px;
text-align: center;
}
span.recent {
padding-left: 75px;
}
div#recent-searches {
display: inline;
}
span.recents {
background-color: hsl(111, 100%, 80%); // #efe;
border-radius: 3px;
padding: 3px 6px;
margin: 1px 10px 2px 0px;
display: inline-block;
color: hsl(1, 0%, 50%);
&.neg {
background-color: hsl(0, 100%, 87%);
}
}
}
table.styled th,
table.styled td {
text-align: left;
}
.toolbar {
padding: 2px 4px;
text-align: right;
a {
color: rgb(105, 105, 105);
cursor: default;
font-size: 15px;
padding: 0 5px;
text-decoration: none;
&:hover {
color: rgb(59, 59, 59);
text-decoration: none;
}
&.selected {
color: rgb(62, 130, 240);
text-decoration: none;
&:hover {
color: rgb(25, 108, 251);
text-decoration: none;
}
}
}
}
.top-border {
border-top: 1px solid #ddd;
}
.split-view {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
&-contents {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
&-details {
top: 34%;
}
}
}
@media screen and (max-width: 1200px) {
div.wrap {
span.recent {
display: inline-block;
padding: 0px 10px 0 273px;
margin: 8px 0 0 0;
}
}
.split-view-contents-requests {
bottom: 66%;
}
}
@media screen and (min-width: 1200px) {
.split-view-contents {
width: 50%;
&-requests {
right: unset;
}
&-details {
top: 0;
left: unset;
border-left: 1px solid #555;
}
}
br.mobile {
display: none;
}
height: 100%;
}
.data-grid {
border: none;
section.wrapper {
display: flex;
flex-flow: column;
flex-wrap: wrap;
height: 100%;
table.styled {
border-collapse: collapse;
border-spacing: 0;
font-size: 11px;
table-layout: fixed;
width: 100%;
th {
border-bottom: 1px solid rgb(205, 205, 205);
border-right: 1px solid rgb(205, 205, 205);
height: 25px;
padding: 0 4px;
white-space: nowrap;
}
td {
border-right: 1px solid rgb(205, 205, 205);
overflow: hidden;
padding: 0px 5px;
vertical-align: middle;
white-space: nowrap;
}
tr:first-child td {
border-top: 1px solid rgb(205, 205, 205);
}
}
&-requests {
cursor: unset;
table.styled {
line-height: 1.4;
th {
font-weight: normal;
overflow: hidden;
max-height: 100%;
section.request {
display: flex;
flex-flow: column;
height: 30%;
max-width: 100%;
overflow: hidden;
.search {
margin: 0px;
background-color: #efefef;
display: flex;
flex-flow: row;
flex-wrap: wrap;
input {
border: 1px solid darkgray;
min-width: 260px;
border-radius: 0px;
margin: 0;
padding: 2px 8px;
flex: 1;
}
td.duration {
text-align: right;
.filtering {
margin-right: 30px;
}
td.method,
td.time,
td.datetime,
td.format,
td.status,
td.duration {
background: rgb(241, 241, 241);
}
tr:nth-child(even):not(.filler) {
background: rgb(243, 243, 243);
}
tr:nth-child(even) td.method,
tr:nth-child(even) td.time,
tr:nth-child(even) td.datetime,
tr:nth-child(even) td.format,
tr:nth-child(even) td.status,
tr:nth-child(even) td.duration {
background: rgb(241, 241, 241);
span.searchterm {
background-color: hsl(111, 100%, 73%); // #bfb;
border-radius: 3px;
padding: 3px 6px;
margin: 1px 0;
display: inline-block;
cursor: no-drop;
&.neg {
background-color: hsl(1, 75%, 70%);
}
}
tr.selected td {
background: #3883fa !important;
color: white;
small {
color: white;
}
}
tr.separator {
span.operator {
font: normal normal bold 11px/25px sans-serif;
cursor: pointer;
max-height: 6px;
height: 6px;
line-height: 6px;
td {
background-color: hsl(217, 100%, 92%) !important;
color: hsl(217, 100%, 92%) !important;
border-right: 1px solid hsl(217, 100%, 92%) !important;
}
display: inline-block;
width: 25px;
text-align: center;
}
}
small {
color: rgb(128, 128, 128);
font-size: 100%;
}
.apextype {
width: 15%;
}
.apexmethod {
width: 12%;
}
.method,
.time,
.format,
.status {
text-align: center;
width: 6%;
}
.datetime {
text-align: center;
width: 9%;
}
.duration {
width: 80px;
}
.notificationsCount {
background: rgba(255, 255, 255, 0.8);
float: right;
height: 100%;
letter-spacing: -0.5px;
line-height: 29px;
padding-left: 4px;
padding-right: 4px;
position: relative;
right: -4px;
.errorsCount i {
color: rgb(205, 73, 46);
margin-left: 2px;
span.label {
padding-left: 5px;
width: 100px;
display: inline-block;
}
.warningsCount i {
color: rgb(244, 189, 0);
margin-left: 2px;
span.recents {
background-color: hsl(111, 100%, 80%); // #efe;
border-radius: 3px;
padding: 3px 6px;
margin: 1px 10px 2px 0px;
display: inline-block;
color: hsl(1, 0%, 50%);
cursor: copy;
&.neg {
background-color: hsl(0, 100%, 87%);
}
}
}
.selected .notificationsCount {
background: inherit;
.errorsCount i {
color: #fff;
.requests {
flex: 1;
display: flex;
flex-flow: column;
overflow-x: hidden;
overflow-y: hidden;
border-top: 1px solid #3883FA;
.data-container {
flex: 1;
overflow-y: overlay;
overflow-x: hidden;
table.styled {
height: auto;
}
}
.warningsCount i {
color: #fff;
table.styled {
border-collapse: collapse;
border-spacing: 0;
font-size: 11px;
table-layout: fixed;
width: 100%;
line-height: 1.4;
tr {
height: 20px;
&.sizing {
height: 0;
td {
padding: 0;
}
}
}
th {
border-bottom: 1px solid rgb(205, 205, 205);
border-right: 1px solid rgb(205, 205, 205);
height: 25px;
padding: 0 4px;
white-space: nowrap;
font-weight: normal;
overflow: hidden;
}
td {
border-right: 1px solid rgb(205, 205, 205);
overflow: hidden;
padding: 0px 5px;
vertical-align: middle;
white-space: nowrap;
}
tr:first-child td {
border-top: 1px solid rgb(205, 205, 205);
}
td.method,
td.time,
td.datetime,
td.format,
td.status,
td.duration {
background: rgb(241, 241, 241);
}
tr:nth-child(even):not(.filler) {
background: rgb(243, 243, 243);
}
tr:nth-child(even) td.method,
tr:nth-child(even) td.time,
tr:nth-child(even) td.datetime,
tr:nth-child(even) td.format,
tr:nth-child(even) td.status,
tr:nth-child(even) td.duration {
background: rgb(241, 241, 241);
}
tr.selected td {
background: #3883fa !important;
color: white;
small {
color: white;
}
}
tr.separator {
cursor: pointer;
max-height: 6px;
height: 6px;
line-height: 6px;
td {
background-color: hsl(217, 100%, 92%) !important;
color: hsl(217, 100%, 92%) !important;
border-right: 1px solid hsl(217, 100%, 92%) !important;
}
}
.apextype {
width: 15%;
}
.apexmethod {
width: 12%;
}
.method,
.time,
.format,
.status {
text-align: center;
width: 6%;
}
.datetime {
text-align: center;
width: 9%;
}
.duration {
width: 80px;
}
}
}
.data .saml {
font-weight: bold;
}
}
&-details table.styled {
font-size: 12px;
margin-bottom: 6px;
table-layout: fixed;
border: 1px solid rgb(205, 205, 205);
tr:nth-child(even) {
background: rgb(234, 243, 255);
section.response {
flex: 1;
overflow: auto;
border: 0;
border-top: 1px solid #3883FA;
.toolbar {
padding: 2px 4px;
text-align: right;
a {
color: rgb(105, 105, 105);
cursor: default;
font-size: 15px;
padding: 0 5px;
text-decoration: none;
&:hover {
color: rgb(59, 59, 59);
text-decoration: none;
}
&.selected {
color: rgb(62, 130, 240);
text-decoration: none;
&:hover {
color: rgb(25, 108, 251);
text-decoration: none;
}
}
}
}
th {
border-bottom: none;
border-right: none;
table.styled {
font-size: 12px;
font-weight: bold;
height: 18px;
padding: 0 4px;
white-space: nowrap;
}
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;
}
th:last-child,
td:last-child {
border-right: none;
margin-bottom: 6px;
table-layout: auto;
width: 100%;
border: 1px solid rgb(205, 205, 205);
tr:nth-child(even) {
background: #D6E6FF77;
}
th {
border-bottom: none;
border-right: none;
font-size: 12px;
font-weight: bold;
height: 18px;
padding: 0 4px;
white-space: nowrap;
}
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;
&.key {
width: 30%;
}
&.value {
width: 70%;
}
div {
word-break: break-all;
}
}
th:last-child,
td:last-child {
border-right: none;
}
}
}
&-details .key {
font-size: 12px;
font-weight: bold;
white-space: nowrap;
}
}
.data-container {
overflow-x: hidden;
overflow-y: overlay;
height: calc(100% - 25px);
table.styled {
height: 100%;
tr {
height: 20px;
&.sizing {
height: 0;
td {
.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%;
&-header {
border-bottom: 1px solid rgb(205, 205, 205);
padding-left: 0;
padding-top: 1px;
white-space: nowrap;
height: 26px;
background: #efefef;
&-contents {
margin: 0 10px;
}
&-tabs {
margin: 0;
min-width: 300px;
padding: 0;
position: relative;
top: 1px;
li:last-child {
right: 85px;
position: absolute;
}
}
&-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;
&-title {
color: #000;
display: block;
font-size: 12px;
min-width: 40px;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
}
.ui-tabs-active {
background-color: white;
border: 1px solid rgb(205, 205, 205);
border-bottom: none;
}
&-tab,
&-tab a,
&-tab a:active {
outline: none;
}
}
&.filler {
display: table-row;
height: auto;
td {
padding: 0;
&-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);
#tab-settings {
padding: 20px;
.form-group {
padding: 4px 0px;
label {
width: 200px;
display: inline-block;
}
}
}
}
}
}
.data .saml {
font-weight: bold;
}
}
.clickable {
cursor: pointer;
}
.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%;
&-header {
border-bottom: 1px solid rgb(205, 205, 205);
padding-left: 0;
padding-top: 1px;
white-space: nowrap;
height: 26px;
background: #efefef;
&-contents {
margin: 0 10px;
}
&-tabs {
margin: 0;
min-width: 300px;
padding: 0;
position: relative;
top: 1px;
}
&-tab {
border: 1px solid transparent;
border-bottom: none;
float: left;
font-size: 11px;
height: 21px;
margin-top: 2px;
overflow: hidden;
padding: 1px 6px 1px 6px;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
&-title {
color: #000;
display: block;
font-size: 12px;
min-width: 40px;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
}
.ui-tabs-active {
background-color: white;
border: 1px solid rgb(205, 205, 205);
border-bottom: none;
@media (min-width: 1200px) {
section.wrapper {
flex-flow: row;
section.request {
width: 50%;
height: 100%;
flex: 1;
max-height: 100%;
}
&-tab,
&-tab a,
&-tab a:active {
outline: none;
section.response {
width: 50%;
border-left: 1px solid #3883fa;
border-top: 0;
}
}
&-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);
br.mobile {
display: none;
}
}
.clickable {
cursor: pointer;
}
#tab-request-stats,
#tab-response-stats {
padding: 10px;
@ -419,6 +386,3 @@ th.request {
input[type="file"] {
display: none;
}
.CodeMirror {
height: calc(100% - 26px);
}

+ 46
- 33
unpacked/panel/panel.html View File

@ -23,22 +23,22 @@
<body ng-controller='PanelController' ng-init="init('chrome-extension')" ng-cloak>
<div class="split-view">
<div class="split-view-contents split-view-contents-requests top-border">
<div class="wrap">
<section class="wrapper">
<section class="request">
<div class="search">
<input ng-model="search" type="text" placeholder='Add search term then ENTER' title='prefix with "-" to remove from search results' on-search="customSearch()" />
<span class="label">Filtering for:</span>
<span ng-repeat="term in searchTerms">
<span title="Click to remove"
class="searchterm"
ng-class="{ neg: term[0] == '-'}"
ng-click="removeSearchTerm($index)">{{term}}</span>
<span class="operator" ng-hide="$last" ng-click="toggleSearchType()">{{ andFilter && 'and' || 'or' }}</span>
</span>
<br class="mobile" />
<div id="recent-searches">
<span class="recent">Recent searches:</span>
<div class="filtering">
<span class="label">Filtering for:</span>
<span ng-repeat="term in searchTerms">
<span title="Click to remove"
class="searchterm"
ng-class="{ neg: term[0] == '-'}"
ng-click="removeSearchTerm($index)">{{term}}</span>
<span class="operator" ng-hide="$last" ng-click="toggleSearchType()">{{ andFilter && 'and' || 'or' }}</span>
</span>
</div>
<div class="recent-searches">
<span class="label">Recent searches:</span>
<span ng-repeat="term in oldSearchTerms"
title="Click to Search, right click to permanently remove from history"
class="recents"
@ -47,7 +47,7 @@
ng-right-click="deleteSearchTerm($index)">{{term}}</span>
</div>
</div>
<div class="data-grid data-grid-requests">
<div class="requests">
<table class="header styled" id="requests-header" resizable-columns data-resizable-columns-sync="#requests">
<thead>
<tr>
@ -86,7 +86,7 @@
<td class='time'></td>
<td class='datetime'></td>
</tr>
<tr class="data clickable" ng-repeat="request in filteredRequests | orderBy:'id'"
<tr class="data clickable" ng-repeat="request in filteredRequests | orderBy:'id'" scroll-to-new
ng-click="!request.separator && setActive(request.id)" ng-class="getClass(request.id, request.separator)">
<!-- scroll-to-new -->
<td class='request' title="{{request.request_url || titleIfSeparator(request.separator) }}">{{request.request_url}}</td>
@ -97,21 +97,12 @@
<td class='time' title="{{request.time || titleIfSeparator(request.separator) }}">{{ request.time / 1000 | number : 2 }} s</td>
<td class='datetime' title="{{request.startedDateTime || titleIfSeparator(request.separator) }}">{{ request.startedDateTime | date: "mediumTime" }}</td>
</tr>
<tr class="filler">
<td class='request'></td>
<td class='apextype'></td>
<td class='apexmethod'></td>
<td class='method'></td>
<td class='status'></td>
<td class='time'></td>
<td class='datetime'></td>
</tr>
</table>
</div>
</div>
</div>
</section>
<div class="split-view-contents split-view-contents-details top-border">
<section class="response">
<div id="tabs" class="tabbed-pane">
<div class="tabbed-pane-header">
<div class="tabbed-pane-header-contents">
@ -138,6 +129,10 @@
<a href="#tab-response-stats" class="tabbed-pane-header-tab-title"
ng-click="selectDetailTab('tab-response-stats')">Response</a>
</li>
<li class="tabbed-pane-header-tab">
<a href="#tab-settings" class="tabbed-pane-header-tab-title"
ng-click="selectDetailTab('tab-settings')">Panel Settings</a>
</li>
</ul>
</div>
@ -262,15 +257,33 @@
</table>
</div>
<div id="tab-response">
<div id="response-jsoneditor"></div>
<!-- <div id="tab-response-codemirror"></div> -->
</div>
<div id="tab-request">
<div id="request-jsoneditor"></div>
<!-- <div id="tab-request-codemirror"></div> -->
</div>
<div id="tab-settings">
<h3>Settings</h3>
<div class="form-group">
<label for="scroll-to-new">Auto Scroll Network Log</label>
<input type="checkbox" name="scroll-to-new" id="scroll-to-new" ng-model="showIncomingRequests">
</div>
<h3>Coming Soon</h3>
<div class="form-group" title="Not implemented yet">
<label for="clear-on-refresh">Clear Network Log on Page Refresh</label>
<input disabled="disabled" type="checkbox" name="clear-on-refresh" id="clear-on-refresh" ng-model="clearOnRefresh">
</div>
<div class="form-group" title="Not implemented yet">
<label for="auto-json-parse-depth-response">Auto JSON Parse Depth (Response)</label>
<input disabled="disabled" type="number" name="auto-json-parse-depth-response" id="auto-json-parse-depth-response" ng-model="autoJSONParseDepthRes">
</div>
<div class="form-group" title="Not implemented yet">
<label for="auto-json-parse-depth-request">Auto JSON Parse Depth (Request)</label>
<input disabled="disabled" type="number" name="auto-json-parse-depth-request" id="auto-json-parse-depth-request" ng-model="autoJSONParseDepthReq">
</div>
</div>
@ -280,8 +293,8 @@
</div>
</div>
</div>
</div>
</section>
</section>
</body>
</html>

Write Preview
Loading…
Cancel
Save