for #94, for #95: more ui updates

webextension/css/popup.css

@@ -27,6 +27,10 @@ table {
   text-align: center;
 }
 
+.back-arrow-img {
+  transform: scaleX(-1);
+}
+
 .onboarding {
   align-items: center;
   display: flex;
@@ -262,6 +266,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;
@@ -295,6 +304,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;
 }
@@ -312,6 +335,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

@@ -209,7 +209,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")) {
@@ -226,7 +226,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);
         }
       });
@@ -298,7 +298,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();
     }
 
@@ -315,10 +315,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

@@ -53,7 +53,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 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>
@@ -87,7 +89,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">
@@ -100,8 +102,8 @@
 
   <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">
+      <div class="small-2 columns panel-back-arrow clickable" id="edit-container-panel-back-arrow">
-        &laquo;
+        <img src="/img/container-arrow.svg" class="back-arrow-img" />
       </div>
       <div class="small-10 columns">
         <form id="edit-container-panel-form">
@@ -140,7 +142,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">