some edits to panels
This commit is contained in:
Kendall Werts
parent
0371b26fb9
commit
7117166566
8 changed files with 111 additions and 154 deletions
|
|
@ -110,6 +110,7 @@ table {
|
|||
mask-image: linear-gradient(to left, transparent, black 1em);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Color and icon helpers */
|
||||
|
|
@ -273,6 +274,7 @@ table {
|
|||
|
||||
.panel-content {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* Column panels for edit screens */
|
||||
|
|
@ -443,6 +445,7 @@ manage things like container crud */
|
|||
block-size: 48px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.panel-header .usercontext-icon {
|
||||
|
|
@ -744,17 +747,6 @@ span ~ .panel-header-text {
|
|||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
.container-info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-block-start: 4px;
|
||||
padding-block-start: 4px;
|
||||
}
|
||||
|
||||
.container-info-list tbody {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -835,14 +827,6 @@ span ~ .panel-header-text {
|
|||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.assigned-sites-list > div > .delete-assignment {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.assigned-sites-list > div:hover > .delete-assignment {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.assigned-sites-list > div > .hostname {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -1003,7 +987,6 @@ body {
|
|||
font-size: 13px;
|
||||
letter-spacing: -0.1px;
|
||||
width: 320px;
|
||||
/* remove in prodcution*/
|
||||
}
|
||||
|
||||
h3.title {
|
||||
|
|
@ -1047,10 +1030,10 @@ h3.title {
|
|||
.menu-icon {
|
||||
float: left;
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
width: 16px;
|
||||
display: block;
|
||||
height: 24px;
|
||||
padding: 0 8px 0 16px;
|
||||
height: 16px;
|
||||
margin: 4px 8px 4px 16px;
|
||||
}
|
||||
|
||||
.menu-right-float {
|
||||
|
|
@ -1204,3 +1187,24 @@ input {
|
|||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.delete-warning {
|
||||
padding: 8px 0 8px 0;
|
||||
}
|
||||
|
||||
.trash-button {
|
||||
float: right;
|
||||
text-align: center;
|
||||
width: 16px;
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
margin: 4px 10px 4px 0;
|
||||
}
|
||||
|
||||
tr > td > .trash-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tr:hover > td > .trash-button {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7">
|
||||
<polygon fill="#4c4c4c" points="5.8,0 3.5,2.4 1.2,0 0,1.2 2.4,3.5 0.1,5.8 1.2,7 3.5,4.7 5.8,7 7,5.8 4.7,3.5 7,1.2"/>
|
||||
<polygon fill="#000000" points="5.8,0 3.5,2.4 1.2,0 0,1.2 2.4,3.5 0.1,5.8 1.2,7 3.5,4.7 5.8,7 7,5.8 4.7,3.5 7,1.2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 183 B After Width: | Height: | Size: 183 B |
|
|
@ -3,7 +3,7 @@
|
|||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#858585;}
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M4.6,0.3h2.7c0.1,0,0.2,0.1,0.2,0.2v1H4.4v-1C4.4,0.4,4.5,0.3,4.6,0.3z M1.7,1.5h8.6c0.1,0,0.2,0.1,0.2,0.2
|
||||
l0.2,1.4H1.3l0.2-1.4C1.5,1.6,1.6,1.5,1.7,1.5z M6,11.7H3.2L2.1,3.9H6h3.9l-1.1,7.8H6L6,11.7z"/>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 626 B After Width: | Height: | Size: 626 B |
|
|
@ -9,7 +9,7 @@ async function init() {
|
|||
const td = document.createElement("td");
|
||||
|
||||
td.innerHTML = Utils.escaped`
|
||||
<div class="menu-icon">
|
||||
<div class="menu-icon hover-highlight">
|
||||
<div class="usercontext-icon"
|
||||
data-identity-icon="${identity.icon}"
|
||||
data-identity-color="${identity.color}">
|
||||
|
|
|
|||
131
src/js/popup.js
131
src/js/popup.js
|
|
@ -44,7 +44,7 @@ const Logic = {
|
|||
_identities: [],
|
||||
_currentIdentity: null,
|
||||
_currentPanel: null,
|
||||
_previousPanel: null,
|
||||
_previousPanelPath: [],
|
||||
_panels: {},
|
||||
_onboardingVariation: null,
|
||||
|
||||
|
|
@ -216,13 +216,16 @@ const Logic = {
|
|||
}
|
||||
},
|
||||
|
||||
async showPanel(panel, currentIdentity = null, pickerType = null) {
|
||||
async showPanel(panel, currentIdentity = null, pickerType = null, backwards = false) {
|
||||
// Invalid panel... ?!?
|
||||
if (!(panel in this._panels)) {
|
||||
throw new Error("Something really bad happened. Unknown panel: " + panel);
|
||||
}
|
||||
if (!backwards || !this._currentPanel) {
|
||||
this._previousPanelPath.push(this._currentPanel);
|
||||
console.log(this._previousPanelPath);
|
||||
}
|
||||
|
||||
this._previousPanel = this._currentPanel;
|
||||
this._currentPanel = panel;
|
||||
this.pickerType = pickerType;
|
||||
|
||||
|
|
@ -250,11 +253,10 @@ const Logic = {
|
|||
},
|
||||
|
||||
showPreviousPanel() {
|
||||
if (!this._previousPanel) {
|
||||
if (!this._previousPanelPath) {
|
||||
throw new Error("Current panel not set!");
|
||||
}
|
||||
|
||||
this.showPanel(this._previousPanel, this._currentIdentity);
|
||||
this.showPanel(this._previousPanelPath.pop(), this._currentIdentity, null, true);
|
||||
},
|
||||
|
||||
registerPanel(panelName, panelObject) {
|
||||
|
|
@ -619,7 +621,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
|
|||
|
||||
Logic.identities().forEach(identity => {
|
||||
const tr = document.createElement("tr");
|
||||
tr.classList.add("menu-item");
|
||||
tr.classList.add("menu-item", "hover-highlight");
|
||||
tr.setAttribute("tabindex", "0");
|
||||
const td = document.createElement("td");
|
||||
const openTabs = identity.numberOfOpenTabs || "" ;
|
||||
|
|
@ -746,19 +748,13 @@ Logic.registerPanel(P_CONTAINER_INFO, {
|
|||
|
||||
this.intializeShowHide(identity);
|
||||
|
||||
// Let's remove all the previous tabs.
|
||||
const table = document.getElementById("container-info-table");
|
||||
while (table.firstChild) {
|
||||
table.firstChild.remove();
|
||||
}
|
||||
|
||||
// Let's retrieve the list of tabs.
|
||||
const tabs = await browser.runtime.sendMessage({
|
||||
method: "getTabs",
|
||||
windowId: browser.windows.WINDOW_ID_CURRENT,
|
||||
cookieStoreId: Logic.currentIdentity().cookieStoreId
|
||||
});
|
||||
return this.buildInfoTable(tabs);
|
||||
return this.buildOpenTabTable(tabs);
|
||||
},
|
||||
|
||||
intializeShowHide(identity) {
|
||||
|
|
@ -790,46 +786,38 @@ Logic.registerPanel(P_CONTAINER_INFO, {
|
|||
return;
|
||||
},
|
||||
|
||||
buildInfoTable(tabs) {
|
||||
buildOpenTabTable(tabs) {
|
||||
// Let's remove all the previous tabs.
|
||||
const table = document.getElementById("container-info-table");
|
||||
while (table.firstChild) {
|
||||
table.firstChild.remove();
|
||||
}
|
||||
|
||||
// For each one, let's create a new line.
|
||||
const fragment = document.createDocumentFragment();
|
||||
for (let tab of tabs) { // eslint-disable-line prefer-const
|
||||
const tr = document.createElement("tr");
|
||||
fragment.appendChild(tr);
|
||||
tr.classList.add("container-info-tab-row");
|
||||
tr.innerHTML = Utils.escaped`
|
||||
<td></td>
|
||||
<td class="container-info-tab-title truncate-text" title="${tab.url}" ><div class="container-tab-title">${tab.title}</div></td>`;
|
||||
tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl));
|
||||
tr.classList.add("menu-item", "hover-highlight");
|
||||
tr.setAttribute("tabindex", "0");
|
||||
document.getElementById("container-info-table").appendChild(fragment);
|
||||
tr.innerHTML = Utils.escaped`
|
||||
<td>
|
||||
<div class="favicon"></div>
|
||||
<span title="${tab.url}" class="menu-text truncate-text">${tab.title}</span>
|
||||
<img id="${tab.id}" class="trash-button" src="/img/container-close-tab.svg" />
|
||||
</td>`;
|
||||
tr.querySelector(".favicon").appendChild(Utils.createFavIconElement(tab.favIconUrl));
|
||||
tr.setAttribute("tabindex", "0");
|
||||
table.appendChild(fragment);
|
||||
|
||||
// On click, we activate this tab. But only if this tab is active.
|
||||
if (!tab.hiddenState) {
|
||||
const closeImage = document.createElement("img");
|
||||
closeImage.src = "/img/container-close-tab.svg";
|
||||
closeImage.className = "container-close-tab";
|
||||
closeImage.title = "Close tab";
|
||||
closeImage.id = tab.id;
|
||||
const tabTitle = tr.querySelector(".container-info-tab-title");
|
||||
tabTitle.appendChild(closeImage);
|
||||
|
||||
// On hover, we add truncate-text class to add close-tab-image after tab title truncates
|
||||
const tabTitleHoverEvent = () => {
|
||||
tabTitle.classList.toggle("truncate-text");
|
||||
tr.querySelector(".container-tab-title").classList.toggle("truncate-text");
|
||||
};
|
||||
|
||||
tr.addEventListener("mouseover", tabTitleHoverEvent);
|
||||
tr.addEventListener("mouseout", tabTitleHoverEvent);
|
||||
|
||||
tr.classList.add("clickable");
|
||||
Utils.addEnterHandler(tr, async () => {
|
||||
await browser.tabs.update(tab.id, { active: true });
|
||||
window.close();
|
||||
});
|
||||
|
||||
const closeTab = document.getElementById(tab.id);
|
||||
const closeTab = document.querySelector(".trash-button");
|
||||
if (closeTab) {
|
||||
Utils.addEnterHandler(closeTab, async (e) => {
|
||||
await browser.tabs.remove(Number(e.target.id));
|
||||
|
|
@ -910,7 +898,7 @@ Logic.registerPanel(P_CONTAINER_PICKER, {
|
|||
const td = document.createElement("td");
|
||||
|
||||
td.innerHTML = Utils.escaped`
|
||||
<div class="menu-icon">
|
||||
<div class="menu-icon hover-highlight">
|
||||
<div class="usercontext-icon"
|
||||
data-identity-icon="${identity.icon}"
|
||||
data-identity-color="${identity.color}">
|
||||
|
|
@ -936,6 +924,9 @@ Logic.registerPanel(P_CONTAINER_PICKER, {
|
|||
}
|
||||
});
|
||||
|
||||
// P_CONTAINER_ASSIGNMENTS: Shows Site Assignments and allows editing.
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
|
||||
panelSelector: "#edit-container-assignments",
|
||||
|
||||
|
|
@ -954,26 +945,12 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
|
|||
const identity = Logic.currentIdentity();
|
||||
|
||||
// Populating the panel: name and icon
|
||||
document.getElementById("container-assignments-title").textContent = identity.name;
|
||||
document.getElementById("edit-assignments-title").textContent = identity.name;
|
||||
|
||||
const userContextId = Logic.currentUserContextId();
|
||||
const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
|
||||
this.showAssignedContainers(assignments);
|
||||
|
||||
document.querySelector("#edit-container-panel-name-input").value = identity.name || "";
|
||||
document.querySelector("#edit-container-panel-usercontext-input").value = userContextId || NEW_CONTAINER_ID;
|
||||
const containerName = document.querySelector("#edit-container-panel-name-input");
|
||||
window.requestAnimationFrame(() => {
|
||||
containerName.select();
|
||||
containerName.focus();
|
||||
});
|
||||
[...document.querySelectorAll("[name='container-color']")].forEach(colorInput => {
|
||||
colorInput.checked = colorInput.value === identity.color;
|
||||
});
|
||||
[...document.querySelectorAll("[name='container-icon']")].forEach(iconInput => {
|
||||
iconInput.checked = iconInput.value === identity.icon;
|
||||
});
|
||||
|
||||
return Promise.resolve(null);
|
||||
},
|
||||
|
||||
|
|
@ -982,41 +959,35 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
|
|||
const assignmentKeys = Object.keys(assignments);
|
||||
assignmentPanel.hidden = !(assignmentKeys.length > 0);
|
||||
if (assignments) {
|
||||
const tableElement = assignmentPanel.querySelector(".assigned-sites-list");
|
||||
const tableElement = document.querySelector("#edit-sites-assigned");
|
||||
/* 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("div");
|
||||
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}/favicon.ico`;
|
||||
trElement.innerHTML = Utils.escaped`
|
||||
<div class="favicon"></div>
|
||||
<div title="${site.hostname}" class="truncate-text hostname">
|
||||
${site.hostname}
|
||||
</div>
|
||||
<img
|
||||
class="pop-button-image delete-assignment"
|
||||
src="/img/container-delete.svg"
|
||||
/>`;
|
||||
<td>
|
||||
<div class="favicon"></div>
|
||||
<span title="${site.hostname}" class="menu-text">${site.hostname}</span>
|
||||
<img class="trash-button delete-assignment" src="/img/container-delete.svg" />
|
||||
</td>`;
|
||||
trElement.getElementsByClassName("favicon")[0].appendChild(Utils.createFavIconElement(assumedUrl));
|
||||
const deleteButton = trElement.querySelector(".delete-assignment");
|
||||
const that = this;
|
||||
const deleteButton = trElement.querySelector(".trash-button");
|
||||
Utils.addEnterHandler(deleteButton, async () => {
|
||||
const userContextId = Logic.currentUserContextId();
|
||||
// Lets show the message to the current tab
|
||||
// TODO remove then when firefox supports arrow fn async
|
||||
const currentTab = await Utils.currentTab();
|
||||
Utils.setOrRemoveAssignment(currentTab.id, assumedUrl, userContextId, true);
|
||||
delete assignments[siteKey];
|
||||
that.showAssignedContainers(assignments);
|
||||
this.showAssignedContainers(assignments);
|
||||
});
|
||||
trElement.classList.add("container-info-tab-row", "clickable");
|
||||
trElement.classList.add("menu-item", "hover-highlight");
|
||||
tableElement.appendChild(trElement);
|
||||
});
|
||||
}
|
||||
|
|
@ -1126,6 +1097,10 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
|
|||
iconInput.checked = iconInput.value === identity.icon;
|
||||
});
|
||||
|
||||
const deleteButton = document.getElementById("delete-container-button");
|
||||
Utils.addEnterHandler(deleteButton, () => {
|
||||
Logic.showPanel(P_CONTAINER_DELETE, identity);
|
||||
});
|
||||
return Promise.resolve(null);
|
||||
},
|
||||
|
||||
|
|
@ -1142,7 +1117,9 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
|
|||
Utils.addEnterHandler(document.querySelector("#delete-container-cancel-link"), () => {
|
||||
Logic.showPreviousPanel();
|
||||
});
|
||||
|
||||
Utils.addEnterHandler(document.querySelector("#close-container-delete-panel"), () => {
|
||||
Logic.showPreviousPanel();
|
||||
});
|
||||
Utils.addEnterHandler(document.querySelector("#delete-container-ok-link"), async () => {
|
||||
/* This promise wont resolve if the last tab was removed from the window.
|
||||
as the message async callback stops listening, this isn't an issue for us however it might be in future
|
||||
|
|
@ -1152,7 +1129,7 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
|
|||
try {
|
||||
await Logic.removeIdentity(Utils.userContextId(Logic.currentIdentity().cookieStoreId));
|
||||
await Logic.refreshIdentities();
|
||||
Logic.showPreviousPanel();
|
||||
Logic.showPanel(P_CONTAINERS_LIST);
|
||||
} catch (e) {
|
||||
Logic.showPanel(P_CONTAINERS_LIST);
|
||||
}
|
||||
|
|
@ -1164,7 +1141,7 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
|
|||
const identity = Logic.currentIdentity();
|
||||
|
||||
// Populating the panel: name, icon, and warning message
|
||||
document.getElementById("delete-container-name").textContent = identity.name;
|
||||
document.getElementById("container-delete-title").textContent = identity.name;
|
||||
|
||||
const totalNumberOfTabs = identity.numberOfHiddenTabs + identity.numberOfOpenTabs;
|
||||
let warningMessage = "";
|
||||
|
|
@ -1174,10 +1151,6 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
|
|||
}
|
||||
document.getElementById("delete-container-tab-warning").textContent = warningMessage;
|
||||
|
||||
const icon = document.getElementById("delete-container-icon");
|
||||
icon.setAttribute("data-identity-icon", identity.icon);
|
||||
icon.setAttribute("data-identity-color", identity.color);
|
||||
|
||||
return Promise.resolve(null);
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const Utils = {
|
|||
|
||||
createFavIconElement(url) {
|
||||
const imageElement = document.createElement("img");
|
||||
imageElement.classList.add("icon", "offpage");
|
||||
imageElement.classList.add("icon", "offpage", "menu-icon");
|
||||
imageElement.src = url;
|
||||
const loadListener = (e) => {
|
||||
e.target.classList.remove("offpage");
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<hr>
|
||||
<div class="scrollable identities-list">
|
||||
<table class="menu" id="picker-identities-list">
|
||||
<tr class="menu-item">
|
||||
<tr class="menu-item hover-highlight">
|
||||
<td>
|
||||
<div class="menu-icon">
|
||||
<div class="usercontext-icon"
|
||||
|
|
|
|||
|
|
@ -229,7 +229,14 @@
|
|||
Open Tabs
|
||||
</div>
|
||||
<div class="scrollable">
|
||||
<table id="container-info-table" class="container-info-list">
|
||||
<table class="menu" id="container-info-table">
|
||||
<tr class="menu-item hover-highlight" tabindex="0">
|
||||
<td>
|
||||
<div class="favicon"><img class="menu-icon" src="https://www.mozilla.org/favicon.ico" /></div>
|
||||
<span class="menu-text truncate-text">www.mozillllllllllllllllllllllllllllllllllllla.org</span>
|
||||
<img class="trash-button" src="/img/container-close-tab.svg" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="bottom-btn" id="manage-container-link">
|
||||
|
|
@ -261,38 +268,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="panel menu-panel edit-container-panel hide" id="edit-container-panel">
|
||||
<h3 class="title" id="container-edit-titl">
|
||||
Default
|
||||
</h3>
|
||||
<button class="btn-return arrow-left" id="close-container-edit-panel"></button>
|
||||
<hr>
|
||||
<div class="scrollable edit-form">
|
||||
<form id="edit-container-panel-form">
|
||||
<input type="hidden" name="container-id" id="edit-container-panel-usercontext-input" />
|
||||
<fieldset>
|
||||
<legend>Name</legend>
|
||||
<input type="text" name="container-name" id="edit-container-panel-name-input" maxlength="25"/>
|
||||
</fieldset>
|
||||
<fieldset id="edit-container-panel-choose-color" class="radio-choice">
|
||||
<legend>Color</legend>
|
||||
</fieldset>
|
||||
<fieldset id="edit-container-panel-choose-icon" class="radio-choice">
|
||||
<legend>Icon</legend>
|
||||
</fieldset>
|
||||
</form>
|
||||
<div id="edit-sites-assigned" class="scrollable" hidden>
|
||||
<div class="assigned-sites">Sites assigned to this container</div>
|
||||
<div class="assigned-sites-list">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="delete-container">
|
||||
<button class="delete-btn">Delete This Container</button>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="panel menu-panel edit-container-panel hide" id="edit-container-panel">
|
||||
<h3 class="title" id="container-edit-title">
|
||||
Default
|
||||
|
|
@ -313,7 +288,6 @@
|
|||
<legend class="form-header">Icon</legend>
|
||||
</fieldset>
|
||||
</form>
|
||||
<div id="edit-sites-assigned" class="scrollable">
|
||||
<div class="options-header">Options</div>
|
||||
<div class="container-options">
|
||||
<input type="checkbox" id="site-isolation" name="site-isolation">
|
||||
|
|
@ -321,10 +295,9 @@
|
|||
</div>
|
||||
<div class="container-options options-label" id="manage-assigned-sites-list">Manage Site List...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="delete-container">
|
||||
<button class="delete-btn">Delete This Container</button>
|
||||
<button class="delete-btn" id="delete-container-button">Delete This Container</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -334,23 +307,30 @@
|
|||
</h3>
|
||||
<button class="btn-return arrow-left" id="close-container-assignment-panel"></button>
|
||||
<hr>
|
||||
<div class="scrollable edit-form">
|
||||
<div id="edit-sites-assigned" class="scrollable" hidden>
|
||||
<div class="assigned-sites">Sites assigned to this container</div>
|
||||
<div class="assigned-sites-list">
|
||||
</div>
|
||||
</div>
|
||||
<div class="scrollable edit-sites-assigned">
|
||||
<div class="sub-header">Sites assigned to this container</div>
|
||||
<table class="menu scrollable" id="edit-sites-assigned">
|
||||
<tr class="menu-item hover-highlight" tabindex="0">
|
||||
<td>
|
||||
<div class="favicon"><img class="menu-icon" src="https://www.mozilla.org/favicon.ico" /></div>
|
||||
<span class="menu-text truncate-text">www.mozillllllllllllllllllllllllllllla.org</span>
|
||||
<img class="trash-button" src="/img/container-delete.svg" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hide panel delete-container-panel" id="delete-container-panel">
|
||||
<div class="panel-header">
|
||||
<span class="usercontext-icon" id="delete-container-icon"></span>
|
||||
<h3 id="delete-container-name" class="panel-header-text container-name"></h3>
|
||||
</div>
|
||||
<h3 class="title" id="container-delete-title">
|
||||
Default
|
||||
</h3>
|
||||
<button class="btn-return arrow-left" id="close-container-delete-panel"></button>
|
||||
<hr>
|
||||
<div class="panel-content delete-container-confirm">
|
||||
<h4 class="delete-container-confirm-title">Remove This Container</h4>
|
||||
<p><span id="delete-container-tab-warning"></span> Are you sure you want to remove this Container?</p>
|
||||
<p class="delete-warning" id="delete-container-tab-warning"></p>
|
||||
<p class="delete-warning">Are you sure you want to remove this Container?</p>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<a href="#" class="button expanded secondary footer-button cancel-button" id="delete-container-cancel-link">Cancel</a>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue