for #94, for #95: more ui updates (#129)

* for #94, for #95: more ui updates

* fix #95: fix "name" input; inset the panel shadow

webextension/css/popup.css

@@ -22,11 +22,16 @@ table {
 
 .panel-back-arrow {
   background: #ebebeb;
+  box-shadow: inset -2px 0 2px -2px black;
   display: flex;
   justify-content: center;
   text-align: center;
 }
 
+.back-arrow-img {
+  transform: scaleX(-1);
+}
+
 .onboarding {
   align-items: center;
   display: flex;
@@ -269,6 +274,11 @@ table.unstriped tbody tr {
   --identity-icon: url("/img/usercontext.svg#circle");
 }
 
+.show-tabs-img {
+  block-size: 12px;
+  inline-size: 12px;
+}
+
 .container-info-panel-header {
   align-items: center;
   block-size: 33px;
@@ -302,6 +312,20 @@ table.unstriped tbody tr {
   padding-inline-start: 20px;
 }
 
+.container-info-tab-row {
+  display: block;
+  margin-block-end: 8px;
+}
+
+.container-info-tab-title {
+  font-size: 12px;
+  max-inline-size: 13em;
+  overflow: hidden;
+  padding-inline-start: 7px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .clickable {
   cursor: pointer;
 }
@@ -319,6 +343,32 @@ table.unstriped tbody tr {
   justify-content: center;
 }
 
+.exit-edit-mode-link::before {
+  background: url('/img/container-arrow.svg') no-repeat;
+  block-size: 16px;
+  content: "";
+  display: block;
+  filter: grayscale(100%) brightness(5);
+  float: left;
+  inline-size: 16px;
+  margin-inline-end: 5px;
+  transform: scaleX(-1);
+}
+
+.exit-edit-mode-link {
+  float: left;
+}
+
+.delete-container-confirm {
+  padding-inline-end: 20px;
+  padding-inline-start: 20px;
+}
+
+.delete-container-confirm-title {
+  color: #000;
+  font-size: 16px;
+}
+
 .choose-color-icon {
   padding-inline-end: 7px;
   padding-inline-start: 17px;

webextension/img/container-arrow.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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 6 8" style="enable-background:new 0 0 6 8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#4C4C4C;}
+</style>
+<polygon id="Arrow---Disclosure---Collapsed-Copy" class="st0" points="5.5,4 1.5,7.7 0.5,6.8 3.5,4 0.5,1.2 1.5,0.3 "/>
+</svg>

webextension/js/popup.js

@@ -233,7 +233,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
           </div>
         </td>
         <td class="open-newtab">${identity.name}</td>
-        <td class="info">&gt;</td>`;
+        <td class="show-tabs"><img src="/img/container-arrow.svg" class="show-tabs show-tabs-img" /></td>`;
 
       tr.addEventListener("click", e => {
         if (e.target.matches(".open-newtab")) {
@@ -250,7 +250,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
           }).catch(() => {
             window.close();
           });
-        } else if (e.target.matches(".info")) {
+        } else if (e.target.matches(".show-tabs")) {
           Logic.showPanel(P_CONTAINER_INFO, identity);
         }
       });
@@ -322,7 +322,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
     hideShowLabel.innerText = identity.hasHiddenTabs ? "Show these container tabs" : "Hide these container tabs";
 
     // Let's remove all the previous tabs.
-    for (let trTab of document.getElementsByClassName("container-info-tab")) { // eslint-disable-line prefer-const
+    for (let trTab of document.getElementsByClassName("container-info-tab-row")) { // eslint-disable-line prefer-const
       trTab.remove();
     }
 
@@ -339,10 +339,10 @@ Logic.registerPanel(P_CONTAINER_INFO, {
     for (let tab of tabs) { // eslint-disable-line prefer-const
       const tr = document.createElement("tr");
       fragment.appendChild(tr);
-      tr.classList.add("container-info-tab");
+      tr.classList.add("container-info-tab-row");
       tr.innerHTML = `
         <td><img class="icon" src="${tab.favicon}" /></td>
-        <td>${tab.title}</td>`;
+        <td class="container-info-tab-title">${tab.title}</td>`;
 
       // On click, we activate this tab. But only if this tab is active.
       if (tab.active) {

webextension/popup.html

@@ -62,7 +62,9 @@
 
   <div class="hide panel container-info-panel" id="container-info-panel">
     <div class="row">
-      <div class="small-2 columns panel-back-arrow clickable" id="close-container-info-panel">&laquo;</div>
+      <div class="small-2 columns panel-back-arrow clickable" id="close-container-info-panel">
+        <img alt="Panel Back Arrow" src="/img/container-arrow.svg" class="back-arrow-img" />
+      </div>
       <div class="small-10 columns">
         <div class="row container-info-panel-header">
           <span class="usercontext-icon" id="container-info-icon"></span>
@@ -96,7 +98,7 @@
     </div>
     <div class="row panel-footer edit-containers-panel-footer">
       <div class="small-10 columns edit-containers-exit-text">
-        <a id="exit-edit-mode-link">&lt; Exit Edit Mode</a>
+        <a id="exit-edit-mode-link" class="exit-edit-mode-link">Exit Edit Mode</a>
       </div>
       <div class="small-2 columns add-container">
         <a class="add-container-link" id="edit-containers-add-link">
@@ -109,25 +111,21 @@
 
   <div class="panel edit-container-panel hide" id="edit-container-panel">
     <div class="row">
-      <div class="small-2 columns panel-back-arrow" id="edit-container-panel-back-arrow">
-        &laquo;
+      <div class="small-2 columns panel-back-arrow clickable" id="edit-container-panel-back-arrow">
+        <img alt="Panel Back Arrow" src="/img/container-arrow.svg" class="back-arrow-img" />
       </div>
       <div class="small-10 columns">
         <form id="edit-container-panel-form">
-          <p>
-            <label for="edit-container-panel-name-input">Name</label>
+          <fieldset>
+            <legend>Name</legend>
             <input type="text" name="container-name" id="edit-container-panel-name-input"/>
-          </p>
-          <p>
-            <fieldset id="edit-container-panel-choose-color">
-              <legend>Choose a color</legend>
-            </fieldset>
-          </p>
-          <p>
-            <fieldset id="edit-container-panel-choose-icon">
-              <legend>Choose an icon</legend>
-            </fieldset>
-          </p>
+          </fieldset>
+          <fieldset id="edit-container-panel-choose-color">
+            <legend>Choose a color</legend>
+          </fieldset>
+          <fieldset id="edit-container-panel-choose-icon">
+            <legend>Choose an icon</legend>
+          </fieldset>
         </form>
         <div class="row">
           <div class="small-6 columns footer-columns">
@@ -149,7 +147,7 @@
           <h3 id="delete-container-name" class="panel-header-text"></h3>
         </div>
         <div class="row delete-container-confirm">
-          <h4>Remove This Container</h4>
+          <h4 class="delete-container-confirm-title">Remove This Container</h4>
           <p>If you remove this container now, <span id="delete-container-tab-count"></span> container tabs will be closed. Are you sure you want to remove this Container?</p>
         </div>
         <div class="row">