fix(UI): Make pop-up/sidebar links into buttons that open new tabs (#263

)

* Switch to buttons from links for "Help" and "Preferences" in the
pop-up and sidebar (given that the fetching of the info cannot occur
within the pop-up or sidebar itself, and that it will appear in a new
tab, this seems more appropriate on reflection).
* Make "Help" (like "Preferences") open in a new tab (with opener ID
set, so the correct tab is re-visited when the help/preferences pages
are closed).
* Remove redundant styles.
* Remove redundant message-handling from DevTools (the buttons are
removed on load there).

Fixes #262

src/assemble/gui.html

@@ -16,9 +16,9 @@ <h1 data-message="popupHeading"></h1>
 				<input type="checkbox" id="show-all">
 			</label>
 		</div>
-		<div id="links">
-			<a tabindex="0" id="help" data-message="popupHelpButton"></a>
-			<a tabindex="0" id="settings" data-message="popupPreferencesButton"></a>
+		<div id="links"> <!-- removed in DevTools panel -->
+			<button id="help" data-message="popupHelpButton" class="browser-style"></button>
+			<button id="settings" data-message="popupPreferencesButton" class="browser-style"></button>
 		</div>
 		<script src="GUIJS"></script>
 	</body>

src/code/_background.js

@@ -113,8 +113,9 @@ function popupAndSidebarListener(message) {  // also gets: sendingPort
 			sendToActiveContentScriptIfExists(message)
 			break
 		case 'open-help':
-			browser.tabs.update({
-				url: browser.runtime.getURL('help.html')
+			browser.tabs.create({  // Note: not the same as splash behaviour
+				url: browser.runtime.getURL('help.html'),
+				openerTabId: activeTabId
 			})
 			break
 		case 'open-settings':
@@ -149,14 +150,6 @@ function devtoolsListenerMaker(connectingPort) {
 			case 'toggle-all-landmarks':
 				sendToActiveContentScriptIfExists(message)
 				break
-			case 'open-help':
-				browser.tabs.update({
-					url: browser.runtime.getURL('help.html')
-				})
-				break
-			case 'open-settings':
-				browser.runtime.openOptionsPage()
-				break
 			default:
 				throw Error(`Unknown message from DevTools: ${JSON.stringify(message)}`)
 		}

src/static/gui.css

@@ -53,30 +53,16 @@ button {
 }
 
 #links {
-	border-top: 1px solid gray;
 	display: flex;
+	margin-left: var(--spacing);
+	margin-right: 0;
 }
 
-#links a {
+#links button {
 	box-sizing: border-box;
 	display: block;
-	height: calc(10 * var(--spacing));
-	line-height: calc((10 * var(--spacing)) + var(--spacing));
-	overflow: hidden;
-	padding: 0;
-	margin: 0;
 	flex-grow: 1;
 	text-align: center;
-}
-
-#links a:first-child { border-color: #155799; }
-#links a:first-child:focus, #links a:first-child:hover { color: #155799; }
-
-#links a:last-child { border-color: #159957; }
-#links a:last-child:focus, #links a:last-child:hover { color: #159957; }
-
-#links a:focus, #links a:hover {
-	cursor: pointer;
-	border-bottom-style: solid;
-	border-bottom-width: var(--spacing);
+	margin-left: 0;
+	margin-right: var(--spacing);
 }