btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

⚡ Improving Lighthouse score

Browse Source
This commit is contained in:
Liyas Thomas
2019-09-16 18:27:07 +05:30
parent 95eb7b86c9
commit 945da8bf92
5 changed files with 43 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/styles.scss
View File

@@ -440,7 +440,7 @@ fieldset#history {
}
}
#action {
#send {
#hidden-message {
display: none;
}

1
components/history.vue
View File

@@ -2,6 +2,7 @@
<pw-section class="gray" label="History">
<ul>
<li id="filter-history">
<label for="filter-history-input">Search</label>
<input id="filter-history-input" type="text" placeholder="search history" :readonly="history.length === 0 || isClearingHistory" v-model="filterText">
</li>
</ul>

2
layouts/default.vue
View File

@@ -12,7 +12,7 @@
<nav>
<nuxt-link to="/">HTTP</nuxt-link>
<nuxt-link to="/websocket">WebSocket</nuxt-link>
<nuxt-link to="/settings">
<nuxt-link to="/settings" aria-label="Settings">
<!-- Settings cog -->
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M24 14.187v-4.374c-2.148-.766-2.726-.802-3.027-1.529-.303-.729.083-1.169 1.059-3.223l-3.093-3.093c-2.026.963-2.488 1.364-3.224 1.059-.727-.302-.768-.889-1.527-3.027h-4.375c-.764 2.144-.8 2.725-1.529 3.027-.752.313-1.203-.1-3.223-1.059l-3.093 3.093c.977 2.055 1.362 2.493 1.059 3.224-.302.727-.881.764-3.027 1.528v4.375c2.139.76 2.725.8 3.027 1.528.304.734-.081 1.167-1.059 3.223l3.093 3.093c1.999-.95 2.47-1.373 3.223-1.059.728.302.764.88 1.529 3.027h4.374c.758-2.131.799-2.723 1.537-3.031.745-.308 1.186.099 3.215 1.062l3.093-3.093c-.975-2.05-1.362-2.492-1.059-3.223.3-.726.88-.763 3.027-1.528zm-4.875.764c-.577 1.394-.068 2.458.488 3.578l-1.084 1.084c-1.093-.543-2.161-1.076-3.573-.49-1.396.581-1.79 1.693-2.188 2.877h-1.534c-.398-1.185-.791-2.297-2.183-2.875-1.419-.588-2.507-.045-3.579.488l-1.083-1.084c.557-1.118 1.066-2.18.487-3.58-.579-1.391-1.691-1.784-2.876-2.182v-1.533c1.185-.398 2.297-.791 2.875-2.184.578-1.394.068-2.459-.488-3.579l1.084-1.084c1.082.538 2.162 1.077 3.58.488 1.392-.577 1.785-1.69 2.183-2.875h1.534c.398 1.185.792 2.297 2.184 2.875 1.419.588 2.506.045 3.579-.488l1.084 1.084c-.556 1.121-1.065 2.187-.488 3.58.577 1.391 1.689 1.784 2.875 2.183v1.534c-1.188.398-2.302.791-2.877 2.183zm-7.125-5.951c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5z" />

74
pages/index.vue
View File

@@ -26,7 +26,7 @@
<div slot="body">
<ul>
<li>
<textarea id="import-text" autofocus rows="8"></textarea>
<textarea id="import-text" autofocus rows="8" placeholder="Enter cURL"></textarea>
</li>
</ul>
</div>
@@ -55,11 +55,11 @@
</li>
<li>
<label for="url">URL</label>
<input :class="{ error: !isValidURL }" @keyup.enter="isValidURL ? sendRequest() : null" id="url" type="url" v-model="url">
<input :class="{ error: !isValidURL }" @keyup.enter="isValidURL ? sendRequest() : null" id="url" name="url" type="url" v-model="url">
</li>
<li>
<label for="path">Path</label>
<input @keyup.enter="isValidURL ? sendRequest() : null" id="path" v-model="path">
<input @keyup.enter="isValidURL ? sendRequest() : null" id="path" name="path" v-model="path">
</li>
<div class="show-on-small-screen">
<li>
@@ -73,7 +73,7 @@
</li>
<li>
<label class="hide-on-small-screen" for="code">&nbsp;</label>
<button class="icon" id="code" name="code" v-on:click="isHidden = !isHidden" :disabled="!isValidURL">
<button class="icon" id="code" v-on:click="isHidden = !isHidden" :disabled="!isValidURL">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" v-if="isHidden">
<path d="M12.015 7c4.751 0 8.063 3.012 9.504 4.636-1.401 1.837-4.713 5.364-9.504 5.364-4.42 0-7.93-3.536-9.478-5.407 1.493-1.647 4.817-4.593 9.478-4.593zm0-2c-7.569 0-12.015 6.551-12.015 6.551s4.835 7.449 12.015 7.449c7.733 0 11.985-7.449 11.985-7.449s-4.291-6.551-11.985-6.551zm-.015 5c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2zm0-2c-2.209 0-4 1.792-4 4 0 2.209 1.791 4 4 4s4-1.791 4-4c0-2.208-1.791-4-4-4z" />
</svg>
@@ -85,8 +85,8 @@
</li>
</div>
<li>
<label class="hide-on-small-screen" for="action">&nbsp;</label>
<button :disabled="!isValidURL" @click="sendRequest" class="show" id="action" name="action" ref="sendButton">
<label class="hide-on-small-screen" for="send">&nbsp;</label>
<button :disabled="!isValidURL" @click="sendRequest" class="show" id="send" ref="sendButton">
Send <span id="hidden-message">Again</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
@@ -101,7 +101,7 @@
<ul>
<li>
<label for="requestType">Request Type</label>
<select name="requestType" v-model="requestType">
<select id="requestType" v-model="requestType">
<option>JavaScript XHR</option>
<option>Fetch</option>
<option>cURL</option>
@@ -113,7 +113,7 @@
<div class="flex-wrap">
<label for="generatedCode">Generated Code</label>
<div>
<button class="icon" @click="copyRequestCode" name="copyRequestCode" ref="copyRequestCode">
<button class="icon" @click="copyRequestCode" id="copyRequestCode" ref="copyRequestCode">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M22 6v16h-16v-16h16zm2-2h-20v20h20v-20zm-24 17v-21h21v2h-19v19h-2z" />
</svg>
@@ -121,7 +121,7 @@
</button>
</div>
</div>
<textarea ref="generatedCode" name="generatedCode" rows="8" v-model="requestCode"></textarea>
<textarea id="generatedCode" ref="generatedCode" name="generatedCode" rows="8" v-model="requestCode"></textarea>
</li>
</ul>
</pw-section>
@@ -141,16 +141,16 @@
<ul v-for="(param, index) in bodyParams" :key="index">
<li>
<label :for="'bparam'+index">Key {{index + 1}}</label>
<input :name="'bparam'+index" v-model="param.key" @keyup.prevent="setRouteQueryState" autofocus>
<input :id="'bparam'+index" :name="'bparam'+index" v-model="param.key" @keyup.prevent="setRouteQueryState" autofocus>
</li>
<li>
<label :for="'bvalue'+index">Value {{index + 1}}</label>
<input :name="'bvalue'+index" v-model="param.value" @keyup.prevent="setRouteQueryState">
<input :id="'bvalue'+index" :name="'bvalue'+index" v-model="param.value" @keyup.prevent="setRouteQueryState">
</li>
<div>
<li>
<label class="hide-on-small-screen" for="request">&nbsp;</label>
<button class="icon" @click="removeRequestBodyParam(index)" name="request">
<label class="hide-on-small-screen" for="delParam">&nbsp;</label>
<button class="icon" @click="removeRequestBodyParam(index)" id="delParam">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
<path d="M19 24h-14c-1.104 0-2-.896-2-2v-17h-1v-2h6v-1.5c0-.827.673-1.5 1.5-1.5h5c.825 0 1.5.671 1.5 1.5v1.5h6v2h-1v17c0 1.104-.896 2-2 2zm0-19h-14v16.5c0 .276.224.5.5.5h13c.276 0 .5-.224.5-.5v-16.5zm-9 4c0-.552-.448-1-1-1s-1 .448-1 1v9c0 .552.448 1 1 1s1-.448 1-1v-9zm6 0c0-.552-.448-1-1-1s-1 .448-1 1v9c0 .552.448 1 1 1s1-.448 1-1v-9zm-2-7h-4v1h4v-1z" />
</svg>
@@ -165,8 +165,8 @@
</ul>
<ul>
<li>
<label for="request">Parameter List</label>
<textarea name="request" readonly v-textarea-auto-height="rawRequestBody" v-model="rawRequestBody" placeholder="(add at least one parameter)" rows="1"></textarea>
<label for="reqParamList">Parameter List</label>
<textarea id="reqParamList" readonly v-textarea-auto-height="rawRequestBody" v-model="rawRequestBody" placeholder="(add at least one parameter)" rows="1"></textarea>
</li>
</ul>
</div>
@@ -174,7 +174,7 @@
<ul>
<li>
<label for="rawBody">Raw Request Body</label>
<textarea name="rawBody" @keydown="formatRawParams" rows="8" v-model="rawParams" v-textarea-auto-height="rawParams"></textarea>
<textarea id="rawBody" @keydown="formatRawParams" rows="8" v-model="rawParams" v-textarea-auto-height="rawParams"></textarea>
</li>
</ul>
</div>
@@ -183,13 +183,13 @@
<ul>
<li>
<label for="status">status</label>
<input :class="statusCategory ? statusCategory.className : ''" :value="response.status || '(waiting to send request)'" name="status" readonly type="text">
<input :class="statusCategory ? statusCategory.className : ''" :value="response.status || '(waiting to send request)'" ref="status" id="status" name="status" readonly type="text">
</li>
</ul>
<ul v-for="(value, key) in response.headers" :key="key">
<li>
<label for="value">{{key}}</label>
<input :value="value" name="value" readonly>
<input id="value" :value="value" name="value" readonly>
</li>
</ul>
<ul v-if="response.body">
@@ -197,7 +197,7 @@
<div class="flex-wrap">
<label for="body">response</label>
<div>
<button class="icon" @click="copyResponse" name="copyResponse" ref="copyResponse" v-if="response.body">
<button class="icon" @click="copyResponse" ref="copyResponse" v-if="response.body">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M22 6v16h-16v-16h16zm2-2h-20v20h20v-20zm-24 17v-21h21v2h-19v19h-2z" />
</svg>
@@ -206,7 +206,7 @@
</div>
</div>
<div id="response-details-wrapper">
<pre><code ref="responseBody" name="body" rows="16" placeholder="(waiting to send request)">{{response.body}}</code></pre>
<pre><code ref="responseBody" id="body" rows="16" placeholder="(waiting to send request)">{{response.body}}</code></pre>
<iframe :class="{hidden: !previewEnabled}" class="covers-response" ref="previewFrame" src="about:blank"></iframe>
</div>
<div class="align-right" v-if="response.body && responseType === 'text/html'">
@@ -231,7 +231,7 @@
<ul>
<li>
<label for="auth">Authentication Type</label>
<select v-model="auth">
<select id="auth" v-model="auth">
<option>None</option>
<option>Basic</option>
<option>Bearer Token</option>
@@ -241,16 +241,16 @@
<ul v-if="auth === 'Basic'">
<li>
<label for="http_basic_user">User</label>
<input v-model="httpUser">
<input id="http_basic_user" name="http_basic_user" v-model="httpUser">
</li>
<li>
<label for="http_basic_passwd">Password</label>
<input :type="passwordFieldType" v-model="httpPassword">
<input id="http_basic_passwd" name="http_basic_passwd" :type="passwordFieldType" v-model="httpPassword">
</li>
<div>
<li>
<label class="hide-on-small-screen" for="switchVisibility">&nbsp;</label>
<button class="icon" ref="switchVisibility" @click="switchVisibility">
<button class="icon" id="switchVisibility" ref="switchVisibility" @click="switchVisibility">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" v-if="passwordFieldType === 'text'">
<path d="M12.015 7c4.751 0 8.063 3.012 9.504 4.636-1.401 1.837-4.713 5.364-9.504 5.364-4.42 0-7.93-3.536-9.478-5.407 1.493-1.647 4.817-4.593 9.478-4.593zm0-2c-7.569 0-12.015 6.551-12.015 6.551s4.835 7.449 12.015 7.449c7.733 0 11.985-7.449 11.985-7.449s-4.291-6.551-11.985-6.551zm-.015 5c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2zm0-2c-2.209 0-4 1.792-4 4 0 2.209 1.791 4 4 4s4-1.791 4-4c0-2.208-1.791-4-4-4z" />
</svg>
@@ -264,7 +264,7 @@
<ul v-if="auth === 'Bearer Token'">
<li>
<label for="bearer_token">Token</label>
<input v-model="bearerToken">
<input id="bearer_token" name="bearer_token" v-model="bearerToken">
</li>
</ul>
</pw-section>
@@ -276,16 +276,16 @@
<ul v-for="(header, index) in headers" :key="index">
<li>
<label :for="'header'+index">Header {{index + 1}}</label>
<input :name="'header'+index" v-model="header.key" @keyup.prevent="setRouteQueryState" autofocus>
<input :id="'header'+index" :name="'header'+index" v-model="header.key" @keyup.prevent="setRouteQueryState" autofocus>
</li>
<li>
<label :for="'value'+index">Value {{index + 1}}</label>
<input :name="'value'+index" v-model="header.value" @keyup.prevent="setRouteQueryState">
<input :id="'value'+index" :name="'value'+index" v-model="header.value" @keyup.prevent="setRouteQueryState">
</li>
<div>
<li>
<label class="hide-on-small-screen" for="header">&nbsp;</label>
<button class="icon" @click="removeRequestHeader(index)" name="header">
<button class="icon" @click="removeRequestHeader(index)" id="header">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
<path d="M19 24h-14c-1.104 0-2-.896-2-2v-17h-1v-2h6v-1.5c0-.827.673-1.5 1.5-1.5h5c.825 0 1.5.671 1.5 1.5v1.5h6v2h-1v17c0 1.104-.896 2-2 2zm0-19h-14v16.5c0 .276.224.5.5.5h13c.276 0 .5-.224.5-.5v-16.5zm-9 4c0-.552-.448-1-1-1s-1 .448-1 1v9c0 .552.448 1 1 1s1-.448 1-1v-9zm6 0c0-.552-.448-1-1-1s-1 .448-1 1v9c0 .552.448 1 1 1s1-.448 1-1v-9zm-2-7h-4v1h4v-1z" />
</svg>
@@ -295,13 +295,13 @@
</ul>
<ul>
<li>
<button @click="addRequestHeader" name="add">Add New</button>
<button @click="addRequestHeader">Add New</button>
</li>
</ul>
<ul>
<li>
<label for="request">Header List</label>
<textarea name="request" readonly v-textarea-auto-height="headerString" v-model="headerString" placeholder="(add at least one header)" rows="1"></textarea>
<label for="headerList">Header List</label>
<textarea id="headerList" readonly v-textarea-auto-height="headerString" v-model="headerString" placeholder="(add at least one header)" rows="1"></textarea>
</li>
</ul>
</pw-section>
@@ -313,16 +313,16 @@
<ul v-for="(param, index) in params" :key="index">
<li>
<label :for="'param'+index">Parameter {{index + 1}}</label>
<input :name="'param'+index" v-model="param.key" autofocus>
<input :id="'param'+index" :name="'param'+index" v-model="param.key" autofocus>
</li>
<li>
<label :for="'value'+index">Value {{index + 1}}</label>
<input :name="'value'+index" v-model="param.value">
<input :id="'value'+index" :name="'value'+index" v-model="param.value">
</li>
<div>
<li>
<label class="hide-on-small-screen" for="param">&nbsp;</label>
<button class="icon" @click="removeRequestParam(index)" name="param">
<button class="icon" @click="removeRequestParam(index)" id="param">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
<path d="M19 24h-14c-1.104 0-2-.896-2-2v-17h-1v-2h6v-1.5c0-.827.673-1.5 1.5-1.5h5c.825 0 1.5.671 1.5 1.5v1.5h6v2h-1v17c0 1.104-.896 2-2 2zm0-19h-14v16.5c0 .276.224.5.5.5h13c.276 0 .5-.224.5-.5v-16.5zm-9 4c0-.552-.448-1-1-1s-1 .448-1 1v9c0 .552.448 1 1 1s1-.448 1-1v-9zm6 0c0-.552-.448-1-1-1s-1 .448-1 1v9c0 .552.448 1 1 1s1-.448 1-1v-9zm-2-7h-4v1h4v-1z" />
</svg>
@@ -332,13 +332,13 @@
</ul>
<ul>
<li>
<button @click="addRequestParam" name="add">Add New</button>
<button @click="addRequestParam">Add New</button>
</li>
</ul>
<ul>
<li>
<label for="request">Parameter List</label>
<textarea name="request" readonly v-textarea-auto-height="queryString" v-model="queryString" placeholder="(add at least one parameter)" rows="1"></textarea>
<label for="paramList">Parameter List</label>
<textarea id="paramList" readonly v-textarea-auto-height="queryString" v-model="queryString" placeholder="(add at least one parameter)" rows="1"></textarea>
</li>
</ul>
</pw-section>

6
pages/websocket.vue
View File

@@ -7,8 +7,8 @@
<input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="urlValid ? toggleConnection() : null">
</li>
<li>
<label for="action" class="hide-on-small-screen">&nbsp;</label>
<button :disabled="!urlValid" name="action" @click="toggleConnection">
<label for="connect" class="hide-on-small-screen">&nbsp;</label>
<button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
{{ toggleConnectionVerb }}
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" v-if="!connectionState">
@@ -41,7 +41,7 @@
</li>
<li>
<label for="send" class="hide-on-small-screen">&nbsp;</label>
<button name="send" :disabled="!connectionState" @click="sendMessage">
<button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
Send
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">