Skip to content

Commit

Permalink
Update devtools panel with improved UI (#2408)
Browse files Browse the repository at this point in the history 
* Update devtools-panel.html to use consistent styles

* Update panel.js to add page reloads

Clicking the protections buttons will also reload the target web page, saving time.
  • Loading branch information
@tagawa
tagawa committed Jan 9, 2024
1 parent fa8ad58 commit 8ec0f10
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 96 deletions.
225 changes: 133 additions & 92 deletions shared/html/devtools-panel.html
View file
@@ -1,65 +1,97 @@
<!--
Copyright (C) 2021 DuckDuckGo, Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>DuckDuckGo Privacy Essentials Debugger</title>

<link rel="stylesheet" href="../public/css/base.css">

<style type="text/css">
@font-face {
font-family: 'DDG_ProximaNova';
src: url('../public/font/ProximaNova-Reg-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
h1 {
font-size: 2em;
}

@font-face {
font-family: 'DDG_ProximaNova';
src: url('../public/font/ProximaNova-Sbold-webfont.woff') format('woff');
font-weight: 600;
font-style: bold;
.page-container {
margin: 1em;
}

body {
font-family: 'DDG_ProximaNova';
color: #000
.frm__input {
line-height: inherit;
width: auto;
}


#table-filter > label [type="checkbox"] {
margin: 0 4px;
}

#table-filter {
line-height: 2;
}

details > summary {
display: inline list-item !important;
}

.header {
padding: 10px;
margin-top: 16px;
}

#settings-panel {
position: sticky;
top: 0;
background-color: aliceblue;
background-color: white;
}

#protections {
padding-top: 0px;
}

#protections > button {
#protections > button, #table-filter > label {
border-radius: 4px;
padding: 2px 4px;
margin: 2px;
}

.protection-button-on {
background-color: #A0F2A8;
color: #333;
}

.protection-button-on:hover {
background-color: #ADFFAD
background-color: #ADFFAD;
color: #333;
}

.protection-button-off {
background-color: #FBBEBF;
color: #333;
}

.protection-button-off:hover {
background-color: #FFCBCC;
color: #333;
}

.block {
background-color: #FBBEBF;
display: revert; /* To avoid clashing with .block in base.css */
}

.redirect {
Expand Down Expand Up @@ -87,7 +119,6 @@

thead {
position: sticky;
background-color: antiquewhite;
}

thead th:nth-child(1) {
Expand Down Expand Up @@ -138,11 +169,6 @@
#tab-picker {
width: 300px;
}

#table-filter > label {
margin-left: 5px;
padding: 1px;
}
</style>
</head>

Expand All @@ -167,73 +193,88 @@
</tr>
</template>

<div id="settings-panel">
<div class="header">
<a href="./list-editor.html" target="_blank">🗒</a>
<select id="tab-picker">
<option value="">--Select Tab--</option>
</select>
<button id="clear">Clear</button>
<button id="refresh">Reload page</button>
<span>|</span>
<button id="protection">Protection: ??</button>
<label for="tds">Blocklist: </label>
<select name="tds" id="tds">
<option value="live">Live</option>
<option value="next">Next</option>
<option value="beta">Beta</option>
</select>
</div>
<div class="header" id="protections">
</div>
<div id="table-filter">
Display options:
<label class="block">
<input data-filter-toggle="blocked" type="checkbox" checked><span>Blocked</span>
</label>
<label class="ignore">
<input data-filter-toggle="ignored" type="checkbox" checked><span>Ignored</span>
</label>
<label class="ignore">
<input data-filter-toggle="ignoredFirstParty" type="checkbox" checked><span>Ignored (1P)</span>
</label>
<label class="redirect">
<input data-filter-toggle="redirected" type="checkbox" checked><span>Redirected</span>
</label>
<label class="cookie-tracker">
<input data-filter-toggle="cookieHTTP" type="checkbox" checked><span>HTTP Cookies</span>
</label>
<label class="jsException">
<input data-filter-toggle="jsException" type="checkbox" checked><span>JS Exceptions</span>
<label class="jscookie">
<input data-filter-toggle="cookieJS" type="checkbox" checked><span>JS Cookies</span>
</label>
<label class="runtimeChecks">
<input data-filter-toggle="runtimeChecks" type="checkbox" checked><span>Runtime Checks</span>
<label class="proxyCalls">
<input data-filter-toggle="proxyCalls" type="checkbox"><span>Proxy calls</span>
<label class="none">
<input data-filter-toggle="noneRequest" type="checkbox" checked><span>none</span>
</label>
<label class="ignore-user">
<input data-filter-toggle="ignoreUser" type="checkbox" checked><span>ignore-user</span>
</label>
<label for="search-box">Filter: </label>
<input type="text" name="search-box" id="search-box" />
</div>
<div class="page-container">

<h1>DuckDuckGo Privacy Essentials Debugger</h1>

<div id="settings-panel">
<div class="header">
<a href="./list-editor.html" target="_blank">🗒</a>
<select id="tab-picker">
<option value="">--Select Tab--</option>
</select>
<button id="clear" class="btn">Clear</button>
<button id="refresh" class="btn">Reload page</button>
<span>|</span>
<button id="protection" class="btn">Protection: ??</button>
<label for="tds">Blocklist: </label>
<select name="tds" id="tds">
<option value="live">Live</option>
<option value="next">Next</option>
<option value="beta">Beta</option>
</select>
</div>

<div class="header" id="protections">
</div>

<details class="header">
<summary class="btn">Display/hide options</summary>
<div id="table-filter" class="header">
<label class="block">
<input data-filter-toggle="blocked" type="checkbox" checked><span>Blocked</span>
</label>
<label class="ignore">
<input data-filter-toggle="ignored" type="checkbox" checked><span>Ignored</span>
</label>
<label class="ignore">
<input data-filter-toggle="ignoredFirstParty" type="checkbox" checked><span>Ignored (1P)</span>
</label>
<label class="redirect">
<input data-filter-toggle="redirected" type="checkbox" checked><span>Redirected</span>
</label>
<label class="cookie-tracker">
<input data-filter-toggle="cookieHTTP" type="checkbox" checked><span>HTTP Cookies</span>
</label>
<label class="jsException">
<input data-filter-toggle="jsException" type="checkbox" checked><span>JS Exceptions</span>
</label>
<label class="jscookie">
<input data-filter-toggle="cookieJS" type="checkbox" checked><span>JS Cookies</span>
</label>
<label class="runtimeChecks">
<input data-filter-toggle="runtimeChecks" type="checkbox" checked><span>Runtime Checks</span>
</label>
<label class="proxyCalls">
<input data-filter-toggle="proxyCalls" type="checkbox"><span>Proxy calls</span>
</label>
<label class="none">
<input data-filter-toggle="noneRequest" type="checkbox" checked><span>none</span>
</label>
<label class="ignore-user">
<input data-filter-toggle="ignoreUser" type="checkbox" checked><span>ignore-user</span>
</label>
<div>
<label for="search-box">Filter: </label>
<input type="text" name="search-box" id="search-box" class="frm__input">
</div>
</div>
</details>
</div>

<table class="header">
<thead class="silver-bg">
<tr>
<th></th>
<th>URL</th>
<th>Action</th>
<th>Domain</th>
<th>Type</th>
</tr>
</thead>
<tbody id="request-table"></tbody>
</table>
</div>
<table>
<thead>
<tr>
<th></th>
<th>URL</th>
<th>Action</th>
<th>Domain</th>
<th>Type</th>
</tr>
</thead>
<tbody id="request-table"></tbody>
</table>

<script src="/public/js/devtools-panel.js"></script>
</body>
Expand Down
12 changes: 8 additions & 4 deletions shared/js/devtools/panel.js
View file
Expand Up @@ -76,6 +76,7 @@ const loadConfigurableFeatures = new Promise((resolve) => {
action: `toggle${feature}`,
tabId
})
reloadPage()
})
})
resolve(features)
Expand Down Expand Up @@ -377,21 +378,24 @@ function clear () {
panelConfig.currentCounter = undefined
}

// listeners for buttons and toggles
clearButton.addEventListener('click', clear)
refreshButton.addEventListener('click', () => {
function reloadPage () {
clear()
if (chrome.devtools) {
chrome.devtools.inspectedWindow.eval('window.location.reload();')
} else {
chrome.tabs.reload(tabId)
}
})
}

// listeners for buttons and toggles
clearButton.addEventListener('click', clear)
refreshButton.addEventListener('click', reloadPage)
protectionButton.addEventListener('click', () => {
port.postMessage({
action: 'toggleProtection',
tabId
})
reloadPage()
})

sendMessage('getSetting', { name: 'tds-channel' }, (result) => {
Expand Down

0 comments on commit 8ec0f10

Please sign in to comment.