1.0.1 update

unpacked/jsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es6"
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}

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",

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();
 

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();
                 }

unpacked/panel/panel.html

@@ -21,7 +21,7 @@
     <script src="vendor/assets/javascripts/FileSaver.min.js"></script>
 </head>
 
-<body ng-controller='PanelController' ng-init="init('chrome-extension')" ng-cloak>
+<body ng-controller='PanelController' ng-init="init()" ng-cloak>
 
     <section class="wrapper">
         <section class="request">
@@ -269,21 +269,21 @@
                         <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">
+                            <input type="checkbox" name="scroll-to-new" id="scroll-to-new" ng-model="scrollToNew">
                         </div>
-                        <h3>Coming Soon</h3>
-                        <div class="form-group" title="Not implemented yet">
+                        <div class="form-group">
                             <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">
+                            <input type="checkbox" name="clear-on-refresh" id="clear-on-refresh" ng-model="clearOnRefresh">
                         </div>
-                        <div class="form-group" title="Not implemented yet">
+                        <div class="form-group">
                             <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">
+                            <input 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">
+                            <input type="number" name="auto-json-parse-depth-request" id="auto-json-parse-depth-request" ng-model="autoJSONParseDepthReq">
                         </div>
+                        <h3>More Coming Soon...</h3>
                     </div>