diff --git a/extension.js b/extension.js index 8972d22..a5c246a 100644 --- a/extension.js +++ b/extension.js @@ -61,6 +61,8 @@ function getWebviewContent(panel, context) { const cssPath = vscode.Uri.joinPath(context.extensionUri, '/media/style.css'); const cssURI = panel.webview.asWebviewUri(cssPath); + const codiconsUri = panel.webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri, 'node_modules', '@vscode/codicons', 'dist', 'codicon.css')); + const jqPath = vscode.Uri.joinPath(context.extensionUri, '/media/jquery.min.js'); const jqUri = panel.webview.asWebviewUri(jqPath); @@ -86,6 +88,7 @@ function getWebviewContent(panel, context) { + diff --git a/media/analyzer.html b/media/analyzer.html index a80d2a2..4efbfc9 100644 --- a/media/analyzer.html +++ b/media/analyzer.html @@ -1,5 +1,13 @@
- +
+ +
+
GET
+
POST
+
PUT
+
DELETE
+
PATCH
+
diff --git a/media/script.js b/media/script.js index c9352b4..78d5f11 100644 --- a/media/script.js +++ b/media/script.js @@ -1,12 +1,67 @@ var har; var reqs = []; -var selectedIndex = -1; var selectedReq; +var visibleIndicies = []; var handledKeystroke = false; var keystrokeTimeout = true; const vscode = acquireVsCodeApi(); +function runSearch(){ + while(visibleIndicies.length > 0) { + visibleIndicies.pop(); + } + var i = -1; + $(".request-item").each(function(){ + i++; + if($(this).attr("type") == "GET" && (!$(".method-filter.get").hasClass("selected") && $(".method-filter").hasClass("selected"))){ + $(this).hide(); + return; + } + if($(this).attr("type") == "POST" && (!$(".method-filter.post").hasClass("selected") && $(".method-filter").hasClass("selected"))){ + $(this).hide(); + return; + } + if($(this).attr("type") == "PUT" && (!$(".method-filter.put").hasClass("selected") && $(".method-filter").hasClass("selected"))){ + $(this).hide(); + return; + } + if($(this).attr("type") == "DELETE" && (!$(".method-filter.delete").hasClass("selected") && $(".method-filter").hasClass("selected"))){ + $(this).hide(); + return; + } + if($(this).attr("type") == "PATCH" && (!$(".method-filter.patch").hasClass("selected") && $(".method-filter").hasClass("selected"))){ + $(this).hide(); + return; + } + if($(".search").val().length > 0 && !$(this).attr("endpoint").includes($(".search").val())){ + $(this).hide(); + return; + } + $(this).show(); + visibleIndicies.push(i); + }); +} + +function getNextValue(thisIndex, higher){ + if(higher){ + for (i=0; i < visibleIndicies.length; i++){ + if (visibleIndicies[i]>thisIndex){ + return visibleIndicies[i]; + } + } + }else{ + for (i=visibleIndicies.length-1; i >= 0; i--){ + if (visibleIndicies[i] { - e.preventDefault(); + if($(e.target).hasClass("search")){ + runSearch(); + } if (e.code === "ArrowUp" && !handledKeystroke){ + e.preventDefault(); if(selectedIndex == -1){ selectedIndex = reqs.length - 1; selectReq(reqs.length-1); @@ -50,22 +119,44 @@ function setupGUI(){ }else{ if(selectedIndex != 0){ selectedIndex--; - selectReq(selectedIndex); - handledKeystroke = true; + if(visibleIndicies.includes(selectedIndex)){ + selectReq(selectedIndex); + handledKeystroke = true; + }else{ + var temp = getNextValue(selectedIndex, false); + if(temp != -1){ + selectedIndex = temp; + selectReq(selectedIndex); + }else{ + selectedIndex++; + } + handledKeystroke = true; + } } } } if (e.code === "ArrowDown" && !handledKeystroke){ + e.preventDefault(); if(selectedIndex == -1){ selectedIndex = 0; selectReq(0); handledKeystroke = true; }else{ if(selectedIndex < reqs.length-1){ - selectedIndex++; - selectReq(selectedIndex); - handledKeystroke = true; + if(visibleIndicies.includes(selectedIndex)){ + selectReq(selectedIndex); + handledKeystroke = true; + }else{ + var temp = getNextValue(selectedIndex, true); + if(temp != -1){ + selectedIndex = temp; + selectReq(selectedIndex); + }else{ + selectedIndex--; + } + handledKeystroke = true; + } } } } @@ -103,8 +194,6 @@ function selectReq(index){ $(".inspector-title").attr("time", selectedReq.time); $(".inspector-title").attr("status", selectedReq.status); $("*[data]:not([round])").each(function(){ - console.log("replace "+$(this).attr("data")) - console.log(getNested($(this).attr("data")).toString().toHtmlEntities()) $(this).html(getNested($(this).attr("data")).toString().toHtmlEntities()); }); $("*[data][round]").each(function(){ @@ -159,6 +248,13 @@ function selectReq(index){ }); $("*[data-to]").each(function(){ + if(typeof $(this).attr("require-value") !== 'undefined' && $(this).attr("require-value") !== false){ + var components = $(this).attr("require-value").split("="); + var value = getNested(components[0]); + if(!new RegExp(components[1]).test(value)){ + return; + } + } var components = $(this).attr("data-to").split("="); var value = getNested(components[1]); $(this).attr(components[0], value); diff --git a/media/style.css b/media/style.css index 6520bec..578a672 100644 --- a/media/style.css +++ b/media/style.css @@ -10,14 +10,14 @@ body{ box-sizing: border-box; } -.container.request-items{ - position:fixed; - top:0; - left:0; - bottom:0; - width:50%; - padding:0; - border-right:1px solid var(--vscode-editorGroup-border); +.container.request-items { + position: fixed; + top: 73px; + left: 0; + bottom: 0; + width: 50%; + padding: 0; + border-right: 1px solid var(--vscode-editorGroup-border); overflow-y: auto; } @@ -72,13 +72,14 @@ body{ width:calc( 100% - 85px ); } -.method{ +.method { font-weight: bold; - font-size:var(--vscode-editor-font-size); - width:70px; - text-align: center; - margin-top:0px; + font-size: var(--vscode-editor-font-size); + width: 70px; + margin-top: 0px; border-radius: 5px; + text-align: left; + padding-left: 7px; } *[type="POST"] .method{ @@ -488,6 +489,113 @@ table.stack{ width:10%; } +.search { + width: 50%; + padding: 10px; + box-sizing: border-box; + border: 0; + height: 35px; + background: var(--vscode-editor-background); + color: var(--vscode-editor-foreground); + font-family: var(--vscode-font-family); + font-size: var(--vscode-editor-font-size); + border-right: 1px solid var(--vscode-editorGroup-border); + padding-left: 39px; + padding-top: 20px; + position: fixed; + top: 0; + z-index: 9999; +} + +.search:focus { + outline: none ! important; +} + +.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-right: 1px solid var(--vscode-editorGroup-border); + position: fixed; + top: 35px; + width: 50%; + box-sizing: border-box; + background: var(--vscode-editor-background); + z-index: 9999; +} + +.method-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; +} + +.method-filter.selected{ + border: 1px solid var(--vscode-charts-foreground); + background: var(--vscode-charts-foreground); + color: var(--vscode-editor-background); +} + +.method-filter.get{ + border: 1px solid var(--vscode-charts-green); + color: var(--vscode-charts-green); +} + +.method-filter.get.selected{ + border: 1px solid var(--vscode-charts-green); + background: var(--vscode-charts-green); + color: var(--vscode-editor-background); +} + +.method-filter.post{ + border: 1px solid var(--vscode-charts-blue); + color: var(--vscode-charts-blue); +} + +.method-filter.post.selected{ + border: 1px solid var(--vscode-charts-blue); + background: var(--vscode-charts-blue); + color: var(--vscode-editor-background); +} + +.method-filter.put{ + border: 1px solid var(--vscode-charts-yellow); + color: var(--vscode-charts-yellow); +} + +.method-filter.put.selected{ + border: 1px solid var(--vscode-charts-yellow); + background: var(--vscode-charts-yellow); + color: var(--vscode-editor-background); +} + +.method-filter.delete{ + border: 1px solid var(--vscode-charts-red); + color: var(--vscode-charts-red); +} + +.method-filter.delete.selected{ + border: 1px solid var(--vscode-charts-red); + background: var(--vscode-charts-red); + color: var(--vscode-editor-background); +} + +.request-items .codicon-search { + position: fixed; + top: 14px; + left: 14px; + z-index: 99999; +} + @keyframes load { from { left:calc( 0% - 40px ); diff --git a/package-lock.json b/package-lock.json index febbe47..55df8ba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,16 @@ { "name": "har-analyzer", - "version": "0.0.1", + "version": "0.0.4", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "har-analyzer", - "version": "0.0.1", + "version": "0.0.4", + "license": "GPL-3", + "dependencies": { + "@vscode/codicons": "^0.0.32" + }, "devDependencies": { "@types/glob": "^7.2.0", "@types/mocha": "^9.1.1", @@ -111,6 +115,11 @@ "integrity": "sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==", "dev": true }, + "node_modules/@vscode/codicons": { + "version": "0.0.32", + "resolved": "https://registry.npmjs.org/@vscode/codicons/-/codicons-0.0.32.tgz", + "integrity": "sha512-3lgSTWhAzzWN/EPURoY4ZDBEA80OPmnaknNujA3qnI4Iu7AONWd9xF3iE4L+4prIe8E3TUnLQ4pxoaFTEEZNwg==" + }, "node_modules/@vscode/test-electron": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/@vscode/test-electron/-/test-electron-2.1.3.tgz", @@ -2071,6 +2080,11 @@ "integrity": "sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==", "dev": true }, + "@vscode/codicons": { + "version": "0.0.32", + "resolved": "https://registry.npmjs.org/@vscode/codicons/-/codicons-0.0.32.tgz", + "integrity": "sha512-3lgSTWhAzzWN/EPURoY4ZDBEA80OPmnaknNujA3qnI4Iu7AONWd9xF3iE4L+4prIe8E3TUnLQ4pxoaFTEEZNwg==" + }, "@vscode/test-electron": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/@vscode/test-electron/-/test-electron-2.1.3.tgz", diff --git a/package.json b/package.json index a192d4d..2d7617f 100644 --- a/package.json +++ b/package.json @@ -1,47 +1,53 @@ { "name": "har-analyzer", - "displayName": "HAR Analyzer", - "description": "Open and analyze HAR files natively", - "version": "0.0.4", - "publisher": "MattFoulks", - "homepage": "https://github.com/mfoulks3200/har-analyzer", - "license": "GPL-3", - "repository": { - "type": "git", - "url": "https://github.com/mfoulks3200/har-analyzer" - }, - "icon":"Icon.png", - "engines": { - "vscode": "^1.67.0" - }, - "categories": [ - "Other", - "Visualization" - ], - "activationEvents": [ - "onCommand:har-analyzer.analyze" - ], - "main": "./extension.js", - "contributes": { - "commands": [ - {"title": "Analyze", "command": "har-analyzer.analyze", "category": "Har Analyzer"} - ] - }, - "scripts": { - "lint": "eslint .", - "pretest": "npm run lint", - "test": "node ./test/runTest.js" - }, - "devDependencies": { - "@types/vscode": "^1.67.0", - "@types/glob": "^7.2.0", - "@types/mocha": "^9.1.1", - "@types/node": "14.x", - "eslint": "^8.14.0", - "glob": "^8.0.1", - "mocha": "^9.2.2", - "typescript": "^4.6.4", - "@vscode/test-electron": "^2.1.3" - } - + "displayName": "HAR Analyzer", + "description": "Open and analyze HAR files natively", + "version": "0.0.5", + "publisher": "MattFoulks", + "homepage": "https://github.com/mfoulks3200/har-analyzer", + "license": "GPL-3", + "repository": { + "type": "git", + "url": "https://github.com/mfoulks3200/har-analyzer" + }, + "icon": "Icon.png", + "engines": { + "vscode": "^1.67.0" + }, + "categories": [ + "Other", + "Visualization" + ], + "activationEvents": [ + "onCommand:har-analyzer.analyze" + ], + "main": "./extension.js", + "contributes": { + "commands": [ + { + "title": "Analyze", + "command": "har-analyzer.analyze", + "category": "Har Analyzer" + } + ] + }, + "scripts": { + "lint": "eslint .", + "pretest": "npm run lint", + "test": "node ./test/runTest.js" + }, + "devDependencies": { + "@types/glob": "^7.2.0", + "@types/mocha": "^9.1.1", + "@types/node": "14.x", + "@types/vscode": "^1.67.0", + "@vscode/test-electron": "^2.1.3", + "eslint": "^8.14.0", + "glob": "^8.0.1", + "mocha": "^9.2.2", + "typescript": "^4.6.4" + }, + "dependencies": { + "@vscode/codicons": "^0.0.32" + } }