From 1818b17165cc9f5b80eb2f48d4629b91d33b20db Mon Sep 17 00:00:00 2001 From: Levi Olson Date: Wed, 22 Feb 2023 13:58:48 -0600 Subject: [PATCH] 1.0.1 update --- unpacked/jsconfig.json | 9 + unpacked/manifest.json | 2 +- unpacked/panel/assets/javascripts/app.js | 2 +- unpacked/panel/assets/javascripts/panel.js | 224 ++++++++++----------- unpacked/panel/panel.html | 16 +- 5 files changed, 122 insertions(+), 131 deletions(-) create mode 100644 unpacked/jsconfig.json diff --git a/unpacked/jsconfig.json b/unpacked/jsconfig.json new file mode 100644 index 0000000..475d30e --- /dev/null +++ b/unpacked/jsconfig.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "module": "commonjs", + "target": "es6" + }, + "exclude": [ + "node_modules" + ] +} diff --git a/unpacked/manifest.json b/unpacked/manifest.json index 30062a9..e936fed 100644 --- a/unpacked/manifest.json +++ b/unpacked/manifest.json @@ -1,6 +1,6 @@ { "name": "Better Network Panel", - "version": "1.0.1", + "version": "1.0.2", "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/app.js b/unpacked/panel/assets/javascripts/app.js index 18b98ac..e7b812e 100755 --- a/unpacked/panel/assets/javascripts/app.js +++ b/unpacked/panel/assets/javascripts/app.js @@ -118,7 +118,7 @@ var BNPChrome = angular }) .directive("scrollToNew", function ($parse) { return function (scope, element, attrs) { - if (scope.showIncomingRequests && scope.$last) { + if (scope.scrollToNew && scope.$last) { const $container = $(element).parents(".data-container").first(); const $parent = $(element).parent(); diff --git a/unpacked/panel/assets/javascripts/panel.js b/unpacked/panel/assets/javascripts/panel.js index 8174df7..69c9ad0 100755 --- a/unpacked/panel/assets/javascripts/panel.js +++ b/unpacked/panel/assets/javascripts/panel.js @@ -1,40 +1,13 @@ -function Console() {} - -Console.Type = { - LOG: "log", - DEBUG: "debug", - INFO: "info", - WARN: "warn", - ERROR: "error", - GROUP: "group", - GROUP_COLLAPSED: "groupCollapsed", - GROUP_END: "groupEnd" -}; - -Console.addMessage = function (type, format, args) { - chrome.runtime.sendMessage({ - command: "sendToConsole", - tabId: chrome.devtools.inspectedWindow.tabId, - args: escape(JSON.stringify(Array.prototype.slice.call(arguments, 0))) - }); -}; - -// Generate Console output methods, i.e. Console.log(), Console.debug() etc. -(function () { - var console_types = Object.getOwnPropertyNames(Console.Type); - for (var type = 0; type < console_types.length; ++type) { - var method_name = Console.Type[console_types[type]]; - Console[method_name] = Console.addMessage.bind(Console, method_name); - } -})(); - BNPChrome.controller("PanelController", function PanelController($scope, toolbar, parse, $timeout) { - const LOCALSTORAGE = window.localStorage; - const MAXBODYSIZE = 20000; - const HOST = "https://leviolson.com" // "http://localhost:3000" + const LOCAL_STORAGE = window.localStorage; + const MAX_BODY_SIZE = 20000; + const HOST = "https://leviolson.com"; // "http://localhost:3000" const CHANGELOG = { "What's New": { + "v1.0.2:": { + "Added Settings": HOST + "/posts/bnp-changelog#added-settings" + }, "v1.0.1:": { "Panel Settings": HOST + "/posts/bnp-changelog#panel-settings", "Bugs": "squashed" @@ -46,12 +19,27 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar "Download JSON": HOST + "/posts/bnp-changelog#download-json" } } - } + }; + const STORAGE_MAP = { + 'autoJSONParseDepthRes': 3, + 'autoJSONParseDepthReq': 6, + 'clearOnRefresh': false, + 'scrollToNew': true, + 'andfilter': false, + 'searchTerms': [], + 'oldSearchTerms': [], + }; + + + $scope.autoJSONParseDepthRes = STORAGE_MAP.autoJSONParseDepthRes; + $scope.autoJSONParseDepthReq = STORAGE_MAP.autoJSONParseDepthReq; + $scope.clearOnRefresh = STORAGE_MAP.clearOnRefresh; + $scope.scrollToNew = STORAGE_MAP.scrollToNew; + $scope.andFilter = STORAGE_MAP.andfilter; + $scope.searchTerms = STORAGE_MAP.searchTerms; + $scope.oldSearchTerms = STORAGE_MAP.oldSearchTerms; $scope.search = ""; - $scope.searchTerms = []; - $scope.oldSearchTerms = []; - $scope.andFilter = true; $scope.uniqueId = 100000; $scope.activeId = null; $scope.requests = {}; @@ -61,9 +49,6 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar $scope.limitNetworkRequests = false; $scope.showOriginal = false; $scope.currentDetailTab = "tab-response"; - $scope.showIncomingRequests = true; - $scope.autoJSONParseDepthRes = 3; - $scope.autoJSONParseDepthReq = 6; $scope.filter = ""; $scope.editor = null; @@ -76,67 +61,64 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar $scope.activeResponseHeaders = []; $scope.activeCode = null; - $scope.init = function (type) { + $scope.init = function () { $("#tabs").tabs(); - $scope.initChrome(); + _initChrome(); - $scope.createToolbar(); + _createToolbar(); const options = { - mode: 'view', - modes: ['code', 'view'], + mode: 'preview', + modes: ['code', 'view', 'preview'], onEditable: function (node) { - if (!node.path) { - // In modes code and text, node is empty: no path, field, or value - // returning false makes the text area read-only - return false; - } - return true + if (!node.path) { + // In modes code and text, node is empty: no path, field, or value + // returning false makes the text area read-only + return false; + } + return true; } - } - const response = document.getElementById('response-jsoneditor') - const request = document.getElementById('request-jsoneditor') - $scope.responseJsonEditor = new JSONEditor(response, options) - $scope.requestJsonEditor = new JSONEditor(request, options) + }; + const response = document.getElementById('response-jsoneditor'); + const request = document.getElementById('request-jsoneditor'); + $scope.responseJsonEditor = new JSONEditor(response, options); + $scope.requestJsonEditor = new JSONEditor(request, options); $timeout(() => { $scope.responseJsonEditor.set(CHANGELOG); $scope.responseJsonEditor.expandAll(); - }) + }); }; - $scope.initChrome = function () { - try { - let oldSearchTerms = JSON.parse(LOCALSTORAGE.getItem('bnp-oldsearchterms')); - $scope.oldSearchTerms = oldSearchTerms || []; - } catch (e) { - $scope.oldSearchTerms = []; - } - - try { - let searchTerms = JSON.parse(LOCALSTORAGE.getItem('bnp-searchterms')); - $scope.searchTerms = searchTerms || []; - } catch (e) { - $scope.searchTerms = []; - } - - try { - let andFilter = JSON.parse(LOCALSTORAGE.getItem('bnp-andfilter')); - $scope.andFilter = andFilter || false; - } catch (e) { - $scope.andFilter = false; - } - - try { - let scrollToNew = JSON.parse(LOCALSTORAGE.getItem('bnp-scrollToNew')); - $scope.showIncomingRequests = !!scrollToNew; - } catch (e) { - $scope.showIncomingRequests = true; + const _initChrome = function () { + for (const property in STORAGE_MAP) { + try { + let item = LOCAL_STORAGE.getItem(`bnp-${property}`); + if (item) { + let retrieved = JSON.parse(item); + switch (typeof STORAGE_MAP[property]) { + case 'boolean': + $scope[property] = retrieved; + break; + default: + $scope[property] = retrieved || STORAGE_MAP[property]; + break; + } + } else { + $scope[property] = STORAGE_MAP[property]; + } + } catch (e) { + $scope[property] = STORAGE_MAP[property]; + } + $scope.$watch(property, function(n, o) { + if (n !== o) { + _setLocalStorage(); + } + }); + console.debug(`Retrieving ${property}`, $scope[property]); } - console.debug('Retrieving Settings from Local Storage'); - chrome.devtools.network.onRequestFinished.addListener(function (request) { // do not show requests to chrome extension resources if (request.request.url.startsWith("chrome-extension://")) { @@ -147,6 +129,10 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar chrome.devtools.network.onNavigated.addListener(function (event) { // display a line break in the network logs to show page reloaded + if ($scope.clearOnRefresh) { + $scope.clear(); + return; + } $scope.masterRequests.push({ id: $scope.uniqueId, separator: true, @@ -157,7 +143,7 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar }); }; - $scope.filterRequests = function () { + const _filterRequests = function () { if (!$scope.searchTerms || $scope.searchTerms.length === 0) { $scope.filteredRequests = $scope.masterRequests; return; @@ -204,7 +190,7 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar $scope.toggleSearchType = function() { $scope.andFilter = !$scope.andFilter; _setLocalStorage(); - $scope.filterRequests(); + _filterRequests(); }; $scope.customSearch = function() { @@ -212,30 +198,29 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar $scope.searchTerms.push($scope.search); $scope.search = ""; _setLocalStorage(); - $scope.filterRequests() + _filterRequests(); } }; - _setLocalStorage = function() { + const _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.showIncomingRequests, $scope.andFilter, $scope.searchTerms, $scope.oldSearchTerms); - } + for (const property in STORAGE_MAP) { + LOCAL_STORAGE.setItem(`bnp-${property}`, JSON.stringify($scope[property])); + console.debug(`Saving ${property}`, $scope[property]); + } + }; $scope.addSearchTerm = function(index) { $scope.searchTerms.push($scope.oldSearchTerms.splice(index, 1)[0]); _setLocalStorage(); - $scope.filterRequests(); + _filterRequests(); }; $scope.removeSearchTerm = function(index) { $scope.oldSearchTerms.push($scope.searchTerms.splice(index, 1)[0]); _setLocalStorage(); - $scope.filterRequests(); + _filterRequests(); }; $scope.deleteSearchTerm = function(index) { @@ -247,7 +232,7 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar $scope.addRequest(har_entry, har_entry.request.method, har_entry.request.url, har_entry.response.status, null); }; - $scope.createToolbar = function () { + const _createToolbar = function () { toolbar.createToggleButton( "embed", "Toggle JSON Parsing (See Panel Settings)", @@ -266,17 +251,18 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar // ga('send', 'event', 'button', 'click', 'Download'); $scope.$apply(function () { const panel = $scope.currentDetailTab; + let blob; if (panel === "tab-response") { - var blob = new Blob([JSON.parse(JSON.stringify($scope.activeCode, null, 4))], { type: "application/json;charset=utf-8" }); + blob = new Blob([JSON.parse(JSON.stringify($scope.activeCode, null, 4))], { type: "application/json;charset=utf-8" }); saveAs(blob, "export_response.json"); } else { try { - var blob = new Blob([JSON.stringify($scope.activePostData)], { type: "application/json;charset=utf-8" }); + blob = new Blob([JSON.stringify($scope.activePostData)], { type: "application/json;charset=utf-8" }); saveAs(blob, "export_request.json"); } catch (e) { - console.log(e) + console.log(e); } - + } }); }); @@ -293,7 +279,7 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar $scope.addRequest = function (data, request_method, request_url, response_status) { $scope.$apply(function () { const requestId = data.id || $scope.uniqueId; - $scope.uniqueId++ + $scope.uniqueId++; if (data.request != null) { data["request_data"] = $scope.createKeypairs(data.request); @@ -331,7 +317,7 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar data.request_url = request_url; data.response_status = response_status; data['id'] = requestId; - let ctObj = data.response_headers.find(x => x.name == "Content-Type") + let ctObj = data.response_headers.find(x => x.name == "Content-Type"); data.content_type = ctObj && ctObj.value || null; $scope.requests[requestId] = data; // master @@ -356,7 +342,7 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar } }); } - $scope.filterRequests(); + _filterRequests(); }; $scope.clear = function () { @@ -394,7 +380,7 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar }; $scope.getClass = function (requestId, separator) { - if (separator) return "separator" + if (separator) return "separator"; if (requestId === $scope.activeId) { return "selected"; } else { @@ -403,8 +389,8 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar }; $scope.titleIfSeparator = function(separator) { if (separator) - return "Page reloaded here" - return "" + return "Page reloaded here"; + return ""; }; $scope.createKeypairs = function (data) { @@ -444,17 +430,13 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar $scope.$watch("activeCode", function (newVal, oldVal) { if (newVal === null) { - $scope.responseJsonEditor.set(null) - $scope.requestJsonEditor.set(null) + $scope.responseJsonEditor.set(null); + $scope.requestJsonEditor.set(null); } $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) { @@ -484,7 +466,7 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar } else { // Something else try { - let json = JSON.parse(input) + let json = JSON.parse(input); $scope[elementId].setMode("view"); $scope[elementId].set(content); } catch (e) { @@ -492,16 +474,16 @@ BNPChrome.controller("PanelController", function PanelController($scope, toolbar $scope[elementId].set(content); } } - + let bodySize; if (elementId === "responseJsonEditor") { - var bodySize = $scope.activeResponseData.find(x => x.name === "bodySize"); - if (bodySize && bodySize.value < MAXBODYSIZE) { // an arbitrary number that I picked so there is HUGE lag + bodySize = $scope.activeResponseData.find(x => x.name === "bodySize"); + if (bodySize && bodySize.value < MAX_BODY_SIZE) { // an arbitrary number that I picked so there is HUGE lag if ($scope[elementId].getMode() === 'tree' || $scope[elementId].getMode() === 'view') $scope[elementId].expandAll(); } } else if (elementId === "requestJsonEditor") { - var bodySize = $scope.activeRequest.find(x => x.name === "bodySize"); - if (bodySize && bodySize.value < MAXBODYSIZE) { + bodySize = $scope.activeRequest.find(x => x.name === "bodySize"); + if (bodySize && bodySize.value < MAX_BODY_SIZE) { if ($scope[elementId].getMode() === 'tree' || $scope[elementId].getMode() === 'view') $scope[elementId].expandAll(); } diff --git a/unpacked/panel/panel.html b/unpacked/panel/panel.html index 3597ecc..56e889a 100644 --- a/unpacked/panel/panel.html +++ b/unpacked/panel/panel.html @@ -21,7 +21,7 @@ - +
@@ -269,21 +269,21 @@

Settings

- +
-

Coming Soon

-
+
- +
-
+
- +
- +
+

More Coming Soon...