Skip to content
Snippets Groups Projects
Commit c8530756 authored by Anton Bershanskiy's avatar Anton Bershanskiy
Browse files

Three-part popup UI started

parent 981828fa
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 166 additions and 47 deletions
source/common/pages/devtools/devtools.js
+ 1
− 1
View file @ c8530756
......@@ -11,7 +11,7 @@ platform.storage.local.get(["DevTools"], function(result) {
if (draw)
platform.devtools.panels.create("Cookie Saver",
"/img-t/img.png",
"/pages/popup/popup.html",
"/pages/devtools/inspector.html",
function cb(panel) {
panel.onShown.addListener(function(win){ win.focus(); });
});
......
source/common/pages/devtools/inspector.css 0 → 100644
+ 10
− 0
View file @ c8530756
table, th, td {
border-collapse: collapse;
border: 1px solid black;
}
table > tbody > tr > td {
white-space: nowrap;
overflow: hidden; /*/ <- this does seem to be required */
text-overflow: ellipsis;
max-width: 100px;
}
\ No newline at end of file
source/common/pages/devtools/inspector.html 0 → 100644
+ 41
− 0
View file @ c8530756
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<link href="inspector.css" rel="stylesheet"/>
<link href="/includes/table-resize-master/table-resize.css" rel="stylesheet"/>
<script src="/platform.js" defer></script>
<script src="inspector.js" defer></script>
<script src="/cookies.js" defer></script>
<script src="/includes/table-resize-master/table-resize.js" defer></script>
</head>
<body>
<h1>Cookie Saver</h1>
<table id="example">
<tbody>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
</tr>
<tr>
<td>Column 1 Row 1</td>
<td>Column 1 Row 2</td>
<td>Column 1 Row 3</td>
<td></td>
</tr>
<tr>
<td>Column 2 Row 1</td>
<td>Column 2 Row 2</td>
<td></td>
<td>Column 2 Row 3</td>
</tr>
</tbody>
</table>
</body>
</html>
\ No newline at end of file
source/common/pages/devtools/inspector.js 0 → 100644
+ 19
− 0
View file @ c8530756
"use strict";
/*
* For debug purposes only. This displays the "message" within the UI.
*/
function debugMessage(message){
var div = document.createElement("DIV");
div.innerText = message;
document.body.appendChild(div);
}
document.addEventListener('DOMContentLoaded', function() {
platform.cookies.getAll({
domain: ".com"
}, function (cookies) {
document.body.appendChild(createCookieTable (cookies));
});
});
\ No newline at end of file
source/common/pages/popup/popup.css
+ 29
− 9
View file @ c8530756
table, th, td {
border-collapse: collapse;
border: 1px solid black;
}
table > tbody > tr > td {
white-space: nowrap;
overflow: hidden; /*/ <- this does seem to be required */
text-overflow: ellipsis;
max-width: 100px;
body {
height: 600px;
width: 600px;
margin: 0;
padding: 0;
}
#main-menu {
width: 50%;
height: 100%;
float: left;
}
#details {
width: 50%;
float: right;
}
.main-menu-item {
height: 33%;
}
.main-menu-item > h2 {
margin: 0;
padding: 0;
}
.details-item {
display: none;
}
\ No newline at end of file
source/common/pages/popup/popup.html
+ 27
− 29
View file @ c8530756
......@@ -4,38 +4,36 @@
<title></title>
<meta charset="utf-8"/>
<link href="popup.css" rel="stylesheet"/>
<link href="/includes/table-resize-master/table-resize.css" rel="stylesheet"/>
<script src="/platform.js" defer></script>
<script src="popup.js" defer></script>
<script src="/cookies.js" defer></script>
<script src="/includes/table-resize-master/table-resize.js" defer></script>
</head>
<body>
<h1>Cookie Saver</h1>
<table id="example">
<tbody>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
</tr>
<tr>
<td>Column 1 Row 1</td>
<td>Column 1 Row 2</td>
<td>Column 1 Row 3</td>
<td></td>
</tr>
<tr>
<td>Column 2 Row 1</td>
<td>Column 2 Row 2</td>
<td></td>
<td>Column 2 Row 3</td>
</tr>
</tbody>
</table>
<div id="main-menu">
<div id="main-menu-monitoring" class="main-menu-item">
<h2>Monitoring</h2>
</div>
<div id="main-menu-sharing" class="main-menu-item">
<h2>Sharing</h2>
</div>
<div id="main-menu-protection" class="main-menu-item">
<h2>Protection</h2>
</div>
</div>
<div id="details">
<div id="details-default" class="details-item details-item--active">
<h2>You didn't choose anything yet</h2>
</div>
<div id="details-monitoring" class="details-item">
<h2>You chose Monitoring</h2>
</div>
<div id="details-sharing" class="details-item">
<h2>You chose Sharing</h2>
</div>
<div id="details-protection" class="details-item">
<h2>You chose Protection</h2>
</div>
</div>
</body>
</html>
\ No newline at end of file
source/common/pages/popup/popup.js
+ 39
− 8
View file @ c8530756
"use strict";
const mainMenu = document.getElementById("main-menu")
const detailsMonitoring = document.getElementById ("details-monitoring")
const detailsSharing = document.getElementById ("details-sharing")
const detailsProtection = document.getElementById ("details-protection")
/*
* For debug purposes only. This displays the "message" within the UI.
*/
......@@ -9,11 +16,35 @@ function debugMessage(message){
document.body.appendChild(div);
}
document.addEventListener('DOMContentLoaded', function() {
platform.cookies.getAll({
domain: ".com"
}, function (cookies) {
document.body.appendChild(createCookieTable (cookies));
});
});
\ No newline at end of file
debugMessage("hi");
document.addEventListener("DOMContentLoaded", function() {
debugMessage("hi");
mainMenu.addEventListener("click", function(evt) {
var elem = evt.target
while (elem !== undefined && elem !== null){
if (elem.classList !== undefined && elem.classList.contains("main-menu-item")){
// Found the main-menu-item
detailsMonitoring.style.display = "none"
detailsSharing.style.display = "none"
detailsProtection.style.display = "none"
const id = elem.id
switch (id){
case "main-menu-monitoring":
detailsMonitoring.style.display = "block"
break
case "main-menu-sharing":
detailsSharing.style.display = "block"
break
case "main-menu-protection":
detailsProtection.style.display = "block"
break
}
debugMessage("found" + id)
}
elem = elem.parentNode
}
})
})
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment