diff --git a/unpacked/manifest.json b/unpacked/manifest.json index b518560..30062a9 100644 --- a/unpacked/manifest.json +++ b/unpacked/manifest.json @@ -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", diff --git a/unpacked/panel/assets/javascripts/panel.js b/unpacked/panel/assets/javascripts/panel.js index 4b373dd..8174df7 100755 --- a/unpacked/panel/assets/javascripts/panel.js +++ b/unpacked/panel/assets/javascripts/panel.js @@ -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) { diff --git a/unpacked/panel/assets/stylesheets/panel.css b/unpacked/panel/assets/stylesheets/panel.css index 0ea3d84..a350b3e 100755 --- a/unpacked/panel/assets/stylesheets/panel.css +++ b/unpacked/panel/assets/stylesheets/panel.css @@ -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 */ diff --git a/unpacked/panel/assets/stylesheets/panel.css.map b/unpacked/panel/assets/stylesheets/panel.css.map index 8bdc331..c1f60be 100644 --- a/unpacked/panel/assets/stylesheets/panel.css.map +++ b/unpacked/panel/assets/stylesheets/panel.css.map @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/unpacked/panel/assets/stylesheets/panel.scss b/unpacked/panel/assets/stylesheets/panel.scss index b5de1ba..f15ab75 100755 --- a/unpacked/panel/assets/stylesheets/panel.scss +++ b/unpacked/panel/assets/stylesheets/panel.scss @@ -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); -} diff --git a/unpacked/panel/panel.html b/unpacked/panel/panel.html index 2b021e3..3597ecc 100644 --- a/unpacked/panel/panel.html +++ b/unpacked/panel/panel.html @@ -23,22 +23,22 @@ -
-
-
+
+
+
- - Filtering for: - - {{term}} - {{ andFilter && 'and' || 'or' }} - -
-
- Recent searches: +
+ Filtering for: + + {{term}} + {{ andFilter && 'and' || 'or' }} + +
+
+ Recent searches: {{term}}
-
+
@@ -86,7 +86,7 @@ - @@ -97,21 +97,12 @@ - - - - - - - - -
{{request.request_url}}{{ request.time / 1000 | number : 2 }} s {{ request.startedDateTime | date: "mediumTime" }}
-
+
-
+
@@ -138,6 +129,10 @@ Response +
  • + Panel Settings +
    • @@ -262,15 +257,33 @@
    -
    -
    - +
    + +
    +

    Settings

    +
    + + +
    +

    Coming Soon

    +
    + + +
    +
    + + +
    +
    + + +
    @@ -280,8 +293,8 @@
    -
    -
    + + \ No newline at end of file