* Added resource type filters (Closes #1)

mfoulks3200 · Oct 2, 2022 · 3227508 · ImJohnMDaniel · Oct 3, 2022 · mfoulks3200
1 parent 744c792
commit 3227508
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 node_modules
 .vscode-test/
 *.vsix
-localTest.har
+localTest.har
+package-lock.json
diff --git a/media/analyzer.html b/media/analyzer.html
@@ -7,6 +7,19 @@
         <div class="method-filter put">PUT</div>
         <div class="method-filter delete">DELETE</div>
         <div class="method-filter patch">PATCH</div>
+        <div class="expand-filters">▼</div>
+    </div>
+    <div class="req-type-filters">
+        <div class="req-type-filter doc">DOC</div>
+        <div class="req-type-filter xhr">XHR</div>
+        <div class="req-type-filter ping">PING</div>
+        <div class="req-type-filter font">FONT</div>
+        <div class="req-type-filter img">IMG</div>
+        <div class="req-type-filter script">SCRIPT</div>
+        <div class="req-type-filter style">STYLE</div>
+        <!-- <div class="req-type-filter man">MAN</div>
+        <div class="req-type-filter other">OTHER</div>
+        <div class="req-type-filter pre">PRE</div> -->
     </div>
 </div>
 
@@ -32,6 +45,7 @@
             <div class="data-row" data="fullURL" keyName="Request URL">https://example.com/example/endpoint</div>
             <div class="data-row" data="referer" keyName="Referrer">https://google.com</div>
             <div class="data-row" data="obj.serverIPAddress" keyName="Remote Address">127.0.0.1</div>
+            <div class="data-row" data="obj._resourceType" keyName="Resource Type">document</div>
             <br />
             <div class="data-row" data="obj.startedDateTime" keyName="Timestamp">May 25th 2022, 23:34:14.312 GMT-4</div>
             <div class="data-row" data="obj.time" keyName="Duration">2m 34s 103ms</div>
@@ -71,8 +85,12 @@
             <div class="data-row" keyName="Mime Type" data="mimeType"></div>
             <div class="data-row" style="padding-bottom:10px;" keyName="Content Size"
                 require-data="obj.response.content.size" data="obj.response.content.size"></div>
+<<<<<<< HEAD
             <div class="code-block shorten" require-value="mimeType=text/*|application/(?!json)"></div>
             <div class="json-block tree" require-value="mimeType=application/json"></div>
+=======
+            <div class="code-block shorten" require-value="mimeType=text/*|application/*"></div>
+>>>>>>> 5bbfd43 (* Added resource type filters (Closes #1))
             <div class="subscript open-new-tab" require-value="mimeType=text/*|application/*">(double click to open in a
                 new tab)</div>
             <img class="img-preview" data-to="src=content" require-value="mimeType=image/*" />

diff --git a/media/script.js b/media/script.js
@@ -7,13 +7,25 @@ var handledKeystroke = false;
 var keystrokeTimeout = true;
 const vscode = acquireVsCodeApi();
 
+<<<<<<< HEAD
+=======
+function runSearchCriteria(reqItem, selectorType, selector, attrName, attrVal) {
+    if ($(reqItem).attr(attrName) == attrVal && (!$(selectorType + selector).hasClass("selected") && ($(selectorType).hasClass("selected")))) {
+        $(reqItem).hide();
+        return true;
+    }
+    return false;
+}
+
+>>>>>>> 5bbfd43 (* Added resource type filters (Closes #1))
 function runSearch() {
     while (visibleIndicies.length > 0) {
         visibleIndicies.pop();
     }
     var i = -1;
     $(".request-item").each(function () {
         i++;
+<<<<<<< HEAD
         if ($(this).attr("type") == "GET" && (!$(".method-filter.get").hasClass("selected") && $(".method-filter").hasClass("selected"))) {
             $(this).hide();
             return;
@@ -34,6 +46,25 @@ function runSearch() {
             $(this).hide();
             return;
         }
+=======
+        if (runSearchCriteria(this, ".method-filter", ".get", "type", "GET")) { return; }
+        if (runSearchCriteria(this, ".method-filter", ".post", "type", "POST")) { return; }
+        if (runSearchCriteria(this, ".method-filter", ".put", "type", "PUT")) { return; }
+        if (runSearchCriteria(this, ".method-filter", ".delete", "type", "DELETE")) { return; }
+        if (runSearchCriteria(this, ".method-filter", ".patch", "type", "PATCH")) { return; }
+
+        if (runSearchCriteria(this, ".req-type-filter", ".doc", "reqtype", "document")) { return; }
+        if (runSearchCriteria(this, ".req-type-filter", ".xhr", "reqtype", "xhr")) { return; }
+        if (runSearchCriteria(this, ".req-type-filter", ".ping", "reqtype", "ping")) { return; }
+        if (runSearchCriteria(this, ".req-type-filter", ".img", "reqtype", "image")) { return; }
+        if (runSearchCriteria(this, ".req-type-filter", ".font", "reqtype", "font")) { return; }
+        if (runSearchCriteria(this, ".req-type-filter", ".script", "reqtype", "script")) { return; }
+        if (runSearchCriteria(this, ".req-type-filter", ".stylesheet", "reqtype", "stylesheet")) { return; }
+        if (runSearchCriteria(this, ".req-type-filter", ".man", "reqtype", "manifest")) { return; }
+        if (runSearchCriteria(this, ".req-type-filter", ".pre", "reqtype", "preflight")) { return; }
+        if (runSearchCriteria(this, ".req-type-filter", ".other", "reqtype", "other")) { return; }
+
+>>>>>>> 5bbfd43 (* Added resource type filters (Closes #1))
         if ($(".search").val().length > 0 && !$(this).attr("endpoint").includes($(".search").val())) {
             $(this).hide();
             return;
@@ -77,7 +108,18 @@ function setupGUI() {
         $(".page[name='" + $(this).attr("name") + "']").addClass("show");
     });
 
+<<<<<<< HEAD
     $(".method-filter").off().on("click", function () {
+=======
+    $(".expand-filters").off().on("click", function () {
+        $(this).toggleClass("expanded");
+        $(".req-type-filters").toggleClass("expanded");
+        $(".container.request-items").toggleClass("expanded");
+        runSearch();
+    });
+
+    $(".method-filter,.req-type-filter").off().on("click", function () {
+>>>>>>> 5bbfd43 (* Added resource type filters (Closes #1))
         $(this).toggleClass("selected");
         runSearch();
     });
@@ -195,9 +237,13 @@ function selectReq(index) {
     $(".inspector-title").attr("time", selectedReq.time);
     $(".inspector-title").attr("status", selectedReq.status);
     $("*[data]:not([round])").each(function () {
+<<<<<<< HEAD
         if ($(this).attr("data") != null) {
             $(this).html(getNested($(this).attr("data")).toString().toHtmlEntities());
         }
+=======
+        $(this).html(getNested($(this).attr("data")).toString().toHtmlEntities());
+>>>>>>> 5bbfd43 (* Added resource type filters (Closes #1))
     });
     $("*[data][round]").each(function () {
         $(this).html(round(getNested($(this).attr("data")), $(this).attr("round")));
@@ -280,6 +326,7 @@ function selectReq(index) {
         $(this).html(selectedReq.contentShort.toString().toHtmlEntities());
     });
 
+<<<<<<< HEAD
 
 
     $(".json-block.tree").each(function () {
@@ -302,6 +349,8 @@ function selectReq(index) {
         }
     });
 
+=======
+>>>>>>> 5bbfd43 (* Added resource type filters (Closes #1))
     $(".open-new-tab").off().on("dblclick", function () {
         vscode.postMessage({
             action: "openNewTab",
@@ -310,6 +359,7 @@ function selectReq(index) {
         });
     });
 
+<<<<<<< HEAD
     try {
         $(".stack").html("");
         if (selectedReq.obj._initiator.type == "script") {
@@ -319,6 +369,16 @@ function selectReq(index) {
                 var URLMatch = re.exec(frame.url);
                 var file = URLMatch == null ? "" : URLMatch[1];
                 $(".stack").append(`<tr>
+=======
+    $(".stack").html("");
+    if (selectedReq.obj._initiator.type == "script") {
+        for (var i = 0; i < selectedReq.obj._initiator.stack.callFrames.length; i++) {
+            var frame = selectedReq.obj._initiator.stack.callFrames[i];
+            const re = new RegExp('(?:.+\/)([^\/?]+)', 'gm');
+            var URLMatch = re.exec(frame.url);
+            var file = URLMatch == null ? "" : URLMatch[1];
+            $(".stack").append(`<tr>
+>>>>>>> 5bbfd43 (* Added resource type filters (Closes #1))
                 <td class="stack-frame-function">`+ (frame.functionName.length == 0 ? "(anonymous)" : frame.functionName) + `</td>
                 <td class="stack-frame-sID">`+ frame.scriptId + `</td>
                 <td class="stack-frame-location">(`+ frame.lineNumber + ":" + frame.columnNumber + `)</td>
@@ -331,6 +391,7 @@ function selectReq(index) {
     $(".request-inspector").addClass("ready");
 }
 
+<<<<<<< HEAD
 document.addEventListener("click", function (e) {
     if (e.target.classList.contains("tree-label")) {
         e.target.parentElement.classList.toggle("expanded")
@@ -356,6 +417,8 @@ function generateJSONTree(element, object, previousPath) {
     });
 }
 
+=======
+>>>>>>> 5bbfd43 (* Added resource type filters (Closes #1))
 function toggleBlockCollapse(block) {
     if (block.hasClass("collapsed")) {
         block.removeClass("collapsed");
@@ -503,6 +566,7 @@ function addRequestItem(reqItem) {
 function addRequestGUIItem(entity) {
     var newItem = $(".templates .request-item").first().clone();
     newItem.attr("type", entity.obj.request.method);
+    newItem.attr("reqType", entity.obj._resourceType);
     newItem.attr("time", entity.obj.time);
     newItem.attr("endpoint", entity.endpoint);
     newItem.attr("status", entity.obj.response.status);

diff --git a/media/style.css b/media/style.css
@@ -12,15 +12,17 @@ body {
 
 .container.request-items {
     position: fixed;
-    top: 73px;
+    top: 71px;
     left: 0;
     bottom: 0;
     width: 50%;
     padding: 0;
     border-right: 1px solid var(--vscode-editorGroup-border);
     overflow-y: auto;
+    transition: top 0.25s ease;
 }
 
+<<<<<<< HEAD
 .container.request-inspector {
     position: fixed;
     top: 0;
@@ -29,6 +31,20 @@ body {
     width: 50%;
 }
 
+=======
+.container.request-items.expanded {
+    top: 98px;
+}
+
+.container.request-inspector {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 50%;
+}
+
+>>>>>>> 5bbfd43 (* Added resource type filters (Closes #1))
 .request-item {
     width: 100%;
     padding: 10px;
@@ -264,7 +280,12 @@ table.stack {
     transition: opacity ease 0.2s, transform ease 0.2s;
 }
 
+<<<<<<< HEAD
 .json-block.tree {
+=======
+.code-block {
+    font-family: monospace;
+>>>>>>> 5bbfd43 (* Added resource type filters (Closes #1))
     padding: 10px;
     border-radius: 5px;
     word-break: break-all;
@@ -273,6 +294,7 @@ table.stack {
     border: 1px solid var(--vscode-editorGroup-border);
 }
 
+<<<<<<< HEAD
 .code-block {
     font-family: monospace;
     padding: 10px;
@@ -283,6 +305,8 @@ table.stack {
     border: 1px solid var(--vscode-editorGroup-border);
 }
 
+=======
+>>>>>>> 5bbfd43 (* Added resource type filters (Closes #1))
 .code-block.formatted {
     white-space: pre;
 }
@@ -521,13 +545,27 @@ table.stack {
     outline: none ! important;
 }
 
+.expand-filters {
+    margin-left: auto;
+    margin-right: 10px;
+    opacity: 0.5;
+    transform: rotate(90deg);
+    transition: transform 0.25s ease;
+    user-select: none;
+    cursor: pointer;
+}
+
+.expand-filters.expanded {
+    transform: rotate(0deg);
+}
+
 .method-filters {
     display: flex;
     column-gap: 10px;
     padding-left: 14px;
     padding-top: 10px;
     padding-bottom: 10px;
-    border-bottom: 1px solid var(--vscode-editorGroup-border);
+    /*border-bottom: 1px solid var(--vscode-editorGroup-border);*/
     border-right: 1px solid var(--vscode-editorGroup-border);
     position: fixed;
     top: 35px;
@@ -599,6 +637,44 @@ table.stack {
     color: var(--vscode-editor-background);
 }
 
+.req-type-filters {
+    display: flex;
+    column-gap: 10px;
+    padding-left: 14px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--vscode-editorGroup-border);
+    border-right: 1px solid var(--vscode-editorGroup-border);
+    position: fixed;
+    top: 35px;
+    width: 50%;
+    box-sizing: border-box;
+    background: var(--vscode-editor-background);
+    transition: top 0.25s ease;
+}
+
+.req-type-filters.expanded {
+    top: 62px;
+}
+
+.req-type-filter {
+    border: 1px solid var(--vscode-editor-foreground);
+    color: var(--vscode-editor-foreground);
+    font-size: 11px;
+    font-weight: 600;
+    padding-left: 8px;
+    padding-right: 8px;
+    border-radius: 40px;
+    user-select: none;
+    cursor: pointer;
+}
+
+.req-type-filter.selected {
+    border: 1px solid var(--vscode-charts-foreground);
+    background: var(--vscode-charts-foreground);
+    color: var(--vscode-editor-background);
+}
+
 .request-items .codicon-search {
     position: fixed;
     top: 14px;

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "har-analyzer",
   "displayName": "HAR Analyzer",
   "description": "Open and analyze HAR files natively",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "publisher": "MattFoulks",
   "homepage": "https://github.com/mfoulks3200/har-analyzer",
   "license": "GPL-3",
@@ -50,4 +50,4 @@
   "dependencies": {
     "@vscode/codicons": "^0.0.32"
   }
-}
+}