Merge pull request #602 from jonathanKingston/edit-restyle

Edit restyle

webextension/background.js

@@ -339,7 +339,7 @@ const backgroundLogic = {
 
   createOrUpdateContainer(options) {
     let donePromise;
-    if (options.userContextId) {
+    if (options.userContextId !== "new") {
       donePromise = browser.contextualIdentities.update(
         this.cookieStoreId(options.userContextId),
         options.params

webextension/css/popup.css

@@ -91,6 +91,10 @@ table {
   opacity: 0;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 /* Effect borrowed from tabs in Firefox, ensure that the element flexes to the full width */
 .truncate-text {
   mask-image: linear-gradient(to left, transparent, black 1em);
@@ -114,6 +118,11 @@ table {
   --identity-icon-color: #51cd00;
 }
 
+[data-identity-color="grey"] {
+  /* Only used for the edit panel */
+  --identity-icon-color: #616161;
+}
+
 [data-identity-color="yellow"] {
   --identity-tab-color: #ffcb00;
   --identity-icon-color: #ffcb00;
@@ -757,55 +766,88 @@ span ~ .panel-header-text {
 #edit-sites-assigned h3 {
   font-size: 14px;
   font-weight: normal;
-  padding-block-end: 5px;
+  padding-block-end: 6px;
+  padding-block-start: 6px;
   padding-inline-end: 16px;
   padding-inline-start: 16px;
 }
 
-#edit-sites-assigned table td {
+.assigned-sites-list > div {
   display: flex;
-  padding-inline-end: 16px;
+  padding-block-end: 6px;
-  padding-inline-start: 16px;
+  padding-block-start: 6px;
 }
 
-#edit-sites-assigned .delete-assignment {
+.assigned-sites-list > div > .icon {
+  margin-inline-end: 10px;
+}
+
+.assigned-sites-list > div > .delete-assignment {
   display: none;
 }
 
-#edit-sites-assigned tr:hover > td > .delete-assignment {
+.assigned-sites-list > div:hover > .delete-assignment {
   display: block;
 }
 
-.column-panel-content form span {
+.assigned-sites-list > div > .hostname {
-  align-items: center;
+  flex: 1;
-  block-size: 44px;
-  display: flex;
-  flex: 0 0 25%;
-  justify-content: center;
 }
 
-.edit-container-panel label {
+.radio-choice > .radio-container {
+  align-items: center;
+  block-size: 29px;
+  display: flex;
+  flex: 0 0 calc(100% / 8);
+}
+
+.radio-choice > .radio-container > label {
+  background: none;
+  block-size: 23px;
+  border: 0;
+  filter: none;
+  inline-size: 23px;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+}
+
+.radio-choice > .radio-container > label::before {
+  background-color: unset;
   background-image: var(--identity-icon);
-  background-size: 26px 26px;
+  background-position: center;
-  block-size: 34px;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  block-size: 23px;
+  border: none;
+  content: "";
+  display: block;
   fill: var(--identity-icon-color);
   filter: url('/img/filters.svg#fill');
-  flex: 0 0 34px;
+  inline-size: 23px;
   position: relative;
 }
 
-.edit-container-panel label::before {
+.radio-choice > .radio-container > [type="radio"] {
-  opacity: 0 !important;
+  -moz-appearance: none;
-}
-
-.edit-container-panel [type="radio"] {
   display: inline;
   opacity: 0;
 }
 
-.edit-container-panel [type="radio"]:checked + label {
+.radio-choice > .radio-container > [type="radio"]:checked + label {
-  outline: 2px solid grey;
+  background: #d3d3d3;
-  -moz-outline-radius: 50px;
+  border-radius: 100%;
+}
+
+/* When focusing the element add a thin blue highlight to match input fields. This gives a distinction to other selected radio items */
+.radio-choice > .radio-container > [type="radio"]:focus + label {
+  outline: 1px solid #1f9ffc;
+  -moz-outline-radius: 100%;
 }
 
 .edit-container-panel fieldset {
@@ -842,5 +884,5 @@ span ~ .panel-header-text {
 .edit-container-panel legend {
   flex: 1 0;
   font-size: 14px !important;
-  padding-block-end: 5px;
+  padding-block-end: 6px;
 }

webextension/js/popup.js

@@ -7,6 +7,7 @@ const CONTAINER_UNHIDE_SRC = "/img/container-unhide.svg";
 
 const DEFAULT_COLOR = "blue";
 const DEFAULT_ICON = "circle";
+const NEW_CONTAINER_ID = "new";
 
 // List of panels
 const P_ONBOARDING_1     = "onboarding1";
@@ -750,10 +751,30 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     this.initializeRadioButtons();
 
     Logic.addEnterHandler(document.querySelector("#edit-container-panel-back-arrow"), () => {
+      const formValues = new FormData(this._editForm);
+      if (formValues.get("container-id") !== NEW_CONTAINER_ID) {
+        this._submitForm();
+      } else {
+        Logic.showPreviousPanel();
+      }
+    });
+
+    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();
     });
-    this._editForm = document.getElementById("edit-container-panel-form");
+    editLink.addEventListener("submit", () => {
-    this._editForm.addEventListener("submit", this._submitForm.bind(this));
+      this._submitForm();
+    });
+    this._editForm.addEventListener("submit", () => {
+      this._submitForm();
+    });
+
 
   },
 
@@ -762,7 +783,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     return browser.runtime.sendMessage({
       method: "createOrUpdateContainer",
       message: {
-        userContextId: Logic.currentUserContextId() || false,
+        userContextId: formValues.get("container-id") || NEW_CONTAINER_ID,
         params: {
           name: document.getElementById("edit-container-panel-name-input").value || Logic.generateIdentityName(),
           icon: formValues.get("container-icon") || DEFAULT_ICON,
@@ -783,7 +804,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     const assignmentKeys = Object.keys(assignments);
     assignmentPanel.hidden = !(assignmentKeys.length > 0);
     if (assignments) {
-      const tableElement = assignmentPanel.querySelector("table > tbody");
+      const tableElement = assignmentPanel.querySelector(".assigned-sites-list");
       /* Remove previous assignment list,
          after removing one we rerender the list */
       while (tableElement.firstChild) {
@@ -791,18 +812,19 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
       }
       assignmentKeys.forEach((siteKey) => {
         const site = assignments[siteKey];
-        const trElement = document.createElement("tr");
+        const trElement = document.createElement("div");
         /* 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>
+        <img class="icon" src="${assumedUrl}/favicon.ico">
-        <td title="${site.hostname}" class="truncate-text">${site.hostname}
+        <div title="${site.hostname}" class="truncate-text hostname">
-          <img
+          ${site.hostname}
-            class="pop-button-image delete-assignment"
+        </div>
-            src="/img/container-delete.svg"
+        <img
-          />
+          class="pop-button-image delete-assignment"
-        </td>`;
+          src="/img/container-delete.svg"
+        />`;
         const deleteButton = trElement.querySelector(".delete-assignment");
         Logic.addEnterHandler(deleteButton, () => {
           const userContextId = Logic.currentUserContextId();
@@ -830,7 +852,8 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     const colors = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple" ];
     const colorRadioFieldset = document.getElementById("edit-container-panel-choose-color");
     colors.forEach((containerColor) => {
-      const templateInstance = document.createElement("span");
+      const templateInstance = document.createElement("div");
+      templateInstance.classList.add("radio-container");
       // eslint-disable-next-line no-unsanitized/property
       templateInstance.innerHTML = colorRadioTemplate(containerColor);
       colorRadioFieldset.appendChild(templateInstance);
@@ -843,7 +866,8 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     const icons = ["fingerprint", "briefcase", "dollar", "cart", "vacation", "gift", "food", "fruit", "pet", "tree", "chill", "circle"];
     const iconRadioFieldset = document.getElementById("edit-container-panel-choose-icon");
     icons.forEach((containerIcon) => {
-      const templateInstance = document.createElement("span");
+      const templateInstance = document.createElement("div");
+      templateInstance.classList.add("radio-container");
       // eslint-disable-next-line no-unsanitized/property
       templateInstance.innerHTML = iconRadioTemplate(containerIcon);
       iconRadioFieldset.appendChild(templateInstance);
@@ -857,8 +881,10 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     const userContextId = Logic.currentUserContextId();
     const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
     this.showAssignedContainers(assignments);
+    document.querySelector("#edit-container-panel .panel-footer").hidden = !!userContextId;
 
     document.querySelector("#edit-container-panel-name-input").value = identity.name || "";
+    document.querySelector("#edit-container-panel-usercontext-input").value = userContextId || NEW_CONTAINER_ID;
     [...document.querySelectorAll("[name='container-color']")].forEach(colorInput => {
       colorInput.checked = colorInput.value === identity.color;
     });

webextension/popup.html

@@ -115,27 +115,26 @@
       </div>
       <div class="column-panel-content">
         <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">
+          <fieldset id="edit-container-panel-choose-color" class="radio-choice">
             <legend>Choose a color</legend>
           </fieldset>
-          <fieldset id="edit-container-panel-choose-icon">
+          <fieldset id="edit-container-panel-choose-icon" class="radio-choice">
             <legend>Choose an icon</legend>
           </fieldset>
         </form>
         <div id="edit-sites-assigned" class="scrollable" hidden>
-          <table id="container-assignement-table" class="container-info-list">
+          <h3>Sites assigned to this container</h3>
-            <thead>
+          <div class="assigned-sites-list">
-              <th colspan="3">
+          </div>
-                <h3>Sites assigned to this container</h3>
+        </div>
-              </th>
+        <div class="panel-footer">
-            </thead>
+          <a href="#" class="button secondary expanded footer-button cancel-button" id="edit-container-cancel-link">Cancel</a>
-            <tbody>
+          <a class="button primary expanded footer-button" id="edit-container-ok-link">OK</a>
-            </tbody>
-          </table>
         </div>
       </div>
     </div>