Skip to content

Commit

Permalink
Added request searching/filtering feature. closes #1
Browse files Browse the repository at this point in the history 
Fixed a bug where the image viewer would remain hidden, but attempt to generate an image from the request body on non-image payloads.
  • Loading branch information
@mfoulks3200
mfoulks3200 committed Aug 31, 2022
1 parent 33e7d5e commit ca3d0dc
Show file tree
Hide file tree
Showing 6 changed files with 304 additions and 69 deletions.
3 changes: 3 additions & 0 deletions extension.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -86,6 +88,7 @@ function getWebviewContent(panel, context) {
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="${cssURI}">
<link href="${codiconsUri}" rel="stylesheet" />
</head>
<body>
<script src="${jqUri}"></script>
Expand Down
10 changes: 9 additions & 1 deletion media/analyzer.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
<div class="request-items container">

<div class='codicon codicon-search'></div>
<input class="search" placeholder="Search endpoints..."/>
<div class="method-filters">
<div class="method-filter get">GET</div>
<div class="method-filter post">POST</div>
<div class="method-filter put">PUT</div>
<div class="method-filter delete">DELETE</div>
<div class="method-filter patch">PATCH</div>
</div>
</div>

<div class="item-loader"></div>
Expand Down
114 changes: 105 additions & 9 deletions media/script.js
View file
Original file line number Diff line number Diff line change
@@ -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]<thisIndex){
return visibleIndicies[i];
}
}
}
return -1;
}

let selectedIndex = -1;

function setupGUI(){
$(".tab-group").html("");
$(".page:not([disabled])").each(function(){
Expand All @@ -21,6 +76,15 @@ function setupGUI(){
$(".page").removeClass("show");
$(".page[name='"+$(this).attr("name")+"']").addClass("show");
});

$(".method-filter").off().on("click", function(){
$(this).toggleClass("selected");
runSearch();
});

$(".search").off().on('input',function(e){
runSearch();
});

$(".section-title").off().on("click", function(){
$(this).parent().toggleClass("hide");
Expand All @@ -40,32 +104,59 @@ function setupGUI(){
}
});

runSearch();

document.addEventListener('keydown', (e) => {
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);
handledKeystroke = true;
}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;
}
}
}
}
Expand Down Expand Up @@ -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(){
Expand Down Expand Up @@ -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);
Expand Down
134 changes: 121 additions & 13 deletions media/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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{
Expand Down Expand Up @@ -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 );
Expand Down
Loading

0 comments on commit ca3d0dc

Please sign in to comment.