Skip to content

Commit

Permalink
Adding manage assignment from edit container panel. Fixes #501
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonathanKingston
jonathanKingston committed Jun 6, 2017
1 parent 094a0e2 commit 8503e9c
Show file tree
Hide file tree
Showing 4 changed files with 147 additions and 41 deletions.
46 changes: 26 additions & 20 deletions webextension/background.js
View file
Expand Up @@ -56,19 +56,25 @@ const assignManager = {
return this.area.remove([siteStoreKey]);
},

deleteContainer(userContextId) {
const removeKeys = [];
this.area.get().then((siteConfigs) => {
Object.keys(siteConfigs).forEach((key) => {
// For some reason this is stored as string... lets check them both as that
if (String(siteConfigs[key].userContextId) === String(userContextId)) {
removeKeys.push(key);
}
});
this.area.remove(removeKeys);
}).catch((e) => {
throw e;
async deleteContainer(userContextId) {
const sitesByContainer = await this.getByContainer(userContextId);
this.area.remove(Object.keys(sitesByContainer));
},

async getByContainer(userContextId) {
const sites = {};
const siteConfigs = await this.area.get();
Object.keys(siteConfigs).forEach((key) => {
// For some reason this is stored as string... lets check them both as that
if (String(siteConfigs[key].userContextId) === String(userContextId)) {
const site = siteConfigs[key];
// In hindsight we should have stored this
// TODO file a follow up to clean the storage onLoad
site.hostname = key.replace(/^siteContainerMap@@_/, "");
sites[key] = site;
}
});
return sites;
}
},

Expand Down Expand Up @@ -151,12 +157,8 @@ const assignManager = {
// let actionName;
let remove;
if (info.menuItemId === this.MENU_ASSIGN_ID) {
//actionName = "added";
// storageAction = this._setAssignment(info.pageUrl, userContextId, setOrRemove);
remove = false;
} else {
// actionName = "removed";
//storageAction = this.storageArea.remove(info.pageUrl);
remove = true;
}
await this._setOrRemoveAssignment(info.pageUrl, userContextId, remove);
Expand Down Expand Up @@ -227,6 +229,10 @@ const assignManager = {
return false;
},

_getByContainer(userContextId) {
return this.storageArea.getByContainer(userContextId);
},

async calculateContextMenu(tab) {
// There is a focus issue in this menu where if you change window with a context menu click
// you get the wrong menu display because of async
Expand Down Expand Up @@ -429,11 +435,11 @@ const messageHandler = {
return assignManager._getAssignment(tab);
});
break;
case "getAssignmentObjectByContainer":
response = assignManager._getByContainer(m.message.userContextId);
break;
case "setOrRemoveAssignment":
response = browser.tabs.get(m.tabId).then((tab) => {
const userContextId = assignManager.getUserContextIdFromCookieStore(tab);
return assignManager._setOrRemoveAssignment(tab.url, userContextId, m.value);
});
response = assignManager._setOrRemoveAssignment(m.url, m.userContextId, m.value);
break;
case "exemptContainerAssignment":
response = assignManager._exemptTab(m);
Expand Down
41 changes: 41 additions & 0 deletions webextension/css/popup.css
View file
Expand Up @@ -19,6 +19,13 @@ html {
box-sizing: inherit;
}

form {
margin-block-end: 0;
margin-block-start: 0;
margin-inline-end: 0;
margin-inline-start: 0;
}

table {
border: 0;
border-spacing: 0;
Expand Down Expand Up @@ -581,6 +588,10 @@ span ~ .panel-header-text {
padding-block-start: 4px;
}

.container-info-list tbody {
display: contents;
}

.clickable {
cursor: pointer;
}
Expand Down Expand Up @@ -631,6 +642,32 @@ span ~ .panel-header-text {
padding-inline-start: 16px;
}

#edit-sites-assigned {
flex: 1;
}

#edit-sites-assigned h3 {
font-size: 14px;
font-weight: normal;
padding-block-end: 5px;
padding-inline-end: 16px;
padding-inline-start: 16px;
}

#edit-sites-assigned table td {
display: flex;
padding-inline-end: 16px;
padding-inline-start: 16px;
}

#edit-sites-assigned .delete-assignment {
display: none;
}

#edit-sites-assigned tr:hover > td > .delete-assignment {
display: block;
}

.column-panel-content form span {
align-items: center;
block-size: 44px;
Expand Down Expand Up @@ -679,6 +716,10 @@ span ~ .panel-header-text {
padding-inline-start: 0;
}

.edit-container-panel fieldset:last-of-type {
margin-block-end: 0;
}

.edit-container-panel input[type="text"] {
block-size: 36px;
border-radius: 3px;
Expand Down
87 changes: 69 additions & 18 deletions webextension/js/popup.js
View file
Expand Up @@ -119,7 +119,9 @@ const Logic = {
},

addEnterHandler(element, handler) {
element.addEventListener("click", handler);
element.addEventListener("click", (e) => {
handler(e);
});
element.addEventListener("keydown", (e) => {
if (e.keyCode === 13) {
handler(e);
Expand Down Expand Up @@ -208,6 +210,11 @@ const Logic = {
return this._currentIdentity;
},

currentUserContextId() {
const identity = Logic.currentIdentity();
return Logic.userContextId(identity.cookieStoreId);
},

sendTelemetryPayload(message = {}) {
if (!message.event) {
throw new Error("Missing event name for telemetry");
Expand All @@ -234,10 +241,18 @@ const Logic = {
});
},

setOrRemoveAssignment(tab, value) {
getAssignmentObjectByContainer(userContextId) {
return browser.runtime.sendMessage({
method: "getAssignmentObjectByContainer",
message: {userContextId}
});
},

setOrRemoveAssignment(url, userContextId, value) {
return browser.runtime.sendMessage({
method: "setOrRemoveAssignment",
tabId: tab.id,
url,
userContextId,
value
});
},
Expand Down Expand Up @@ -437,7 +452,8 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
const currentTabElement = document.getElementById("current-tab");
const assignmentCheckboxElement = document.getElementById("container-page-assigned");
assignmentCheckboxElement.addEventListener("change", () => {
Logic.setOrRemoveAssignment(currentTab, !assignmentCheckboxElement.checked);
const userContextId = Logic.userContextId(currentTab.cookieStoreId);
Logic.setOrRemoveAssignment(currentTab.url, userContextId, !assignmentCheckboxElement.checked);
});
currentTabElement.hidden = !currentTab;
this.setupAssignmentCheckbox(false);
Expand Down Expand Up @@ -561,7 +577,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
const identity = Logic.currentIdentity();
browser.runtime.sendMessage({
method: identity.hasHiddenTabs ? "showTabs" : "hideTabs",
userContextId: Logic.userContextId(identity.cookieStoreId)
userContextId: Logic.currentUserContextId()
}).then(() => {
window.close();
}).catch(() => {
Expand Down Expand Up @@ -633,7 +649,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
// Let's retrieve the list of tabs.
return browser.runtime.sendMessage({
method: "getTabs",
userContextId: Logic.userContextId(identity.cookieStoreId),
userContextId: Logic.currentUserContextId(),
}).then(this.buildInfoTable);
},

Expand Down Expand Up @@ -743,27 +759,19 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
this.initializeRadioButtons();

Logic.addEnterHandler(document.querySelector("#edit-container-panel-back-arrow"), () => {
Logic.showPreviousPanel();
this._submitForm();
});

Logic.addEnterHandler(document.querySelector("#edit-container-cancel-link"), () => {
Logic.showPreviousPanel();
});

this._editForm = document.getElementById("edit-container-panel-form");
const editLink = document.querySelector("#edit-container-ok-link");
Logic.addEnterHandler(editLink, this._submitForm.bind(this));
editLink.addEventListener("submit", this._submitForm.bind(this));
this._editForm.addEventListener("submit", this._submitForm.bind(this));

},

_submitForm() {
const identity = Logic.currentIdentity();
const formValues = new FormData(this._editForm);
return browser.runtime.sendMessage({
method: "createOrUpdateContainer",
message: {
userContextId: Logic.userContextId(identity.cookieStoreId) || false,
userContextId: Logic.currentUserContextId() || false,
params: {
name: document.getElementById("edit-container-panel-name-input").value || Logic.generateIdentityName(),
icon: formValues.get("container-icon") || DEFAULT_ICON,
Expand All @@ -779,6 +787,44 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
});
},

showAssignedContainers(assignments) {
const assignmentPanel = document.getElementById("edit-sites-assigned");
const assignmentKeys = Object.keys(assignments);
assignmentPanel.hidden = !(assignmentKeys.length > 0);
if (assignments) {
const tableElement = assignmentPanel.querySelector("table > tbody");
/* Remove previous assignment list,
after removing one we rerender the list */
while (tableElement.firstChild) {
tableElement.firstChild.remove();
}
assignmentKeys.forEach((siteKey) => {
const site = assignments[siteKey];
const trElement = document.createElement("tr");
/* As we don't have the full or correct path the best we can assume is the path is HTTPS and then replace with a broken icon later if it doesn't load.
This is pending a better solution for favicons from web extensions */
const assumedUrl = `https://${site.hostname}`;
trElement.innerHTML = escaped`
<td><img class="icon" src="${assumedUrl}/favicon.ico"></td>
<td title="${site.hostname}" class="truncate-text">${site.hostname}
<img
class="pop-button-image delete-assignment"
src="/img/container-delete.svg"
/>
</td>`;
const deleteButton = trElement.querySelector(".delete-assignment");
Logic.addEnterHandler(deleteButton, () => {
const userContextId = Logic.currentUserContextId();
Logic.setOrRemoveAssignment(assumedUrl, userContextId, true);
delete assignments[siteKey];
this.showAssignedContainers(assignments);
});
trElement.classList.add("container-info-tab-row", "clickable");
tableElement.appendChild(trElement);
});
}
},

initializeRadioButtons() {
const colorRadioTemplate = (containerColor) => {
return escaped`<input type="radio" value="${containerColor}" name="container-color" id="edit-container-panel-choose-color-${containerColor}" />
Expand Down Expand Up @@ -808,8 +854,13 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
},

// This method is called when the panel is shown.
prepare() {
async prepare() {
const identity = Logic.currentIdentity();

const userContextId = Logic.currentUserContextId();
const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
this.showAssignedContainers(assignments);

document.querySelector("#edit-container-panel-name-input").value = identity.name || "";
[...document.querySelectorAll("[name='container-color']")].forEach(colorInput => {
colorInput.checked = colorInput.value === identity.color;
Expand Down
14 changes: 11 additions & 3 deletions webextension/popup.html
View file
Expand Up @@ -3,6 +3,7 @@
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Containers browserAction Popup</title>
<link rel="stylesheet" href="/css/popup.css">

</head>
<body>

Expand Down Expand Up @@ -125,9 +126,16 @@ <h3 class="panel-header-text">Edit Containers</h3>
<legend>Choose an icon</legend>
</fieldset>
</form>
<div class="panel-footer">
<a href="#" class="button secondary expanded footer-button cancel-button" id="edit-container-cancel-link">Cancel</a>
<a class="button primary expanded footer-button" id="edit-container-ok-link">OK</a>
<div id="edit-sites-assigned" class="scrollable" hidden>
<table id="container-assignement-table" class="container-info-list">
<thead>
<th colspan="3">
<h3>Sites assigned to this container</h3>
</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
Expand Down

0 comments on commit 8503e9c

Please sign in to comment.