Fix issue #18 by making buttons actually buttons in Spaces and Popup. Handle when the user blurs the space name edit box.

Author: codedread

css/popup.css

@@ -49,6 +49,14 @@ a {
     white-space: nowrap;
     cursor: pointer;
     padding: 0 10px;
+    display: block;
+    width: 100%;
+    text-align: left;
+    background: transparent;
+    border: none;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    font-weight: 200;
 }
 .menuOption .optionText:hover {
     text-decoration: underline;

css/style.css

@@ -195,6 +195,9 @@ a.active {
     display: none;
     padding: 21px 14px;
     font-size: 25px;
+    background: transparent;
+    border: none;
+    color: #000;
 }
 .header .button:hover {
     cursor: pointer;

js/popup.js

@@ -144,18 +144,18 @@ async function renderMainCard() {
     }
 
     document
-        .querySelector('#allSpacesLink .optionText')
+        .getElementById('allSpacesLink')
         .addEventListener('click', () => {
             chrome.runtime.sendMessage({
                 action: 'requestShowSpaces',
             });
             window.close();
         });
     document
-        .querySelector('#switcherLink .optionText')
+        .getElementById('switcherLink')
         .addEventListener('click', () => handlePopupMenuClick('switch'));
     document
-        .querySelector('#moverLink .optionText')
+        .getElementById('moverLink')
         .addEventListener('click', () => handlePopupMenuClick('move'));
 }
 
@@ -194,6 +194,12 @@ async function handleNameSave() {
     const inputEl = document.getElementById('activeSpaceTitle');
     const newName = inputEl.value;
 
+    // If the input is empty and the space was previously unnamed, restore the placeholder.
+    if (newName.trim() === '' && !globalCurrentSpace.name) {
+        inputEl.value = UNSAVED_SESSION;
+        return;
+    }
+
     if (
         newName === UNSAVED_SESSION ||
         newName === globalCurrentSpace.name
@@ -209,19 +215,26 @@ async function handleNameSave() {
     }
 
     if (globalCurrentSpace.sessionId) {
-        chrome.runtime.sendMessage({
+        const updatedSession = await chrome.runtime.sendMessage({
             action: 'updateSessionName',
             deleteOld: true,
             sessionName: newName,
             sessionId: globalCurrentSpace.sessionId,
         });
+        if (updatedSession) {
+            globalCurrentSpace.name = updatedSession.name;
+        }
     } else {
-        chrome.runtime.sendMessage({
+        const newSession = await chrome.runtime.sendMessage({
             action: 'saveNewSession',
             deleteOld: true,
             sessionName: newName,
             windowId: globalCurrentSpace.windowId,
         });
+        if (newSession) {
+            globalCurrentSpace.name = newSession.name;
+            globalCurrentSpace.sessionId = newSession.id;
+        }
     }
 }
 

popup.html

@@ -63,21 +63,21 @@
 	<div id="popupContainer">
 
 		<div class="group optsAll">
-			<div class="menuOption" href="#" id="allSpacesLink">
+			<button class="menuOption" id="allSpacesLink">
 				<i class="fa fa-th-large"></i>
 				<span class="optionText">Manage spaces</span>
 				<span class="hotkey"></span>
-			</div>
-			<div class="menuOption" href="#" id="switcherLink">
+			</button>
+			<button class="menuOption" id="switcherLink">
 				<i class="fa fa-exchange"></i>
 				<span class="optionText">Quick switch spaces</span>
 				<span class="hotkey"></span>
-			</div>
-			<div class="menuOption" href="#" id="moverLink">
+			</button>
+			<button class="menuOption" id="moverLink">
 				<i class="fa fa-arrow-circle-right"></i>
 				<span class="optionText">Move active tab</span>
 				<span class="hotkey"></span>
-			</div>
+			</button>
 		</div>
 	</div>
 </body>

spaces.html

@@ -44,12 +44,12 @@ <h2>Import / Export:</h2>
                     <span id="nameDisplay"></span>
                     <input type="text" placeholder="Name this space" />
                 </form>
-                <span id='actionSwitch' title="Switch to this space" class="button fa fa-arrow-circle-right"></span>
-                <span id='actionOpen' title="Open this space" class="button fa fa-external-link"></span>
+                <button id='actionSwitch' title="Switch to this space" class="button fa fa-arrow-circle-right"></button>
+                <button id='actionOpen' title="Open this space" class="button fa fa-external-link"></button>
                 <div class="buttonNav">
-                    <span id='actionEdit' title="Rename space" class="button fa fa-pencil"></span>
-                    <span id='actionExport' title="Export space" class="button fa fa-download"></span>
-                    <span id='actionDelete' title="Delete space" class="button fa fa-trash"></span>
+                    <button id='actionEdit' title="Rename space" class="button fa fa-pencil"></button>
+                    <button id='actionExport' title="Export space" class="button fa fa-download"></button>
+                    <button id='actionDelete' title="Delete space" class="button fa fa-trash"></button>
                 </div>
             </div>