feat(toggle): Show all landmarks UI (#246)

Add a UI toggle to allow the user to show all landmarks that way too, and to reflect whether they are currently all being shown. Closes #120.
matatk · Jan 14, 2019 · 0803ed7 · 0803ed7
1 parent 10691ee
commit 0803ed7
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 14 deletions.
diff --git a/src/assemble/gui.html b/src/assemble/gui.html
@@ -8,6 +8,9 @@
 	<body>
 		<h1 id="heading"></h1>
 		<div id="landmarks"></div>
+		<label id="show-all-label">
+			<input type="checkbox" id="show-all">
+		</label>
 
 		<script src="GUIJS"></script>
 	</body>

diff --git a/src/assemble/messages.common.json b/src/assemble/messages.common.json
@@ -41,6 +41,10 @@
     "message": "Landmarks on page"
   },
 
+  "popupShowAllLandmarks": {
+    "message": "Show all landmarks"
+  },
+
   "errorNoConnection": {
     "message": "Landmarks is not allowed to run on this page."
   },

diff --git a/src/code/_background.js b/src/code/_background.js
@@ -18,7 +18,7 @@ let activeTabId = null
 // Message routing
 //
 
-function sendLandmarksToActiveTabGUIs(fromTabId, message) {
+function sendToActiveTabGUIs(fromTabId, message) {
 	if (fromTabId !== activeTabId || activeTabId === null) return
 
 	if (popupConnection) {
@@ -39,7 +39,7 @@ function sendLandmarksToActiveTabGUIs(fromTabId, message) {
 }
 
 function sendNullLandmarksToActiveTabGUIs() {
-	sendLandmarksToActiveTabGUIs(activeTabId, { name: 'landmarks', data: null })
+	sendToActiveTabGUIs(activeTabId, { name: 'landmarks', data: null })
 }
 
 function getLandmarksForActiveTab() {
@@ -89,28 +89,34 @@ function contentListener(message, sendingPort) {
 
 	switch (message.name) {
 		case 'landmarks':
-			sendLandmarksToActiveTabGUIs(tabId, message)
 			updateBrowserActionBadge(tabId, message.data.length)
+			// eslint-disable-next-line no-fallthrough
+		case 'toggle-state':
+			sendToActiveTabGUIs(tabId, message)
 			break
 		default:
 			throw Error(`Unknown message ${JSON.stringify(message)} from content script in ${sendingPort.sender.tab.id}`)
 	}
 }
 
+// TODO DRY with devToolsListener
 function popupAndSidebarListener(message) {  // also gets: sendingPort
 	switch (message.name) {
 		case 'get-landmarks':
 			logger.log('Popup or sidebar requested landmarks')
 			getLandmarksForActiveTab()
 			break
 		case 'focus-landmark':
+		case 'get-toggle-state':
+		case 'toggle-all-landmarks':
 			sendToActiveContentScriptIfExists(message)
 			break
 		default:
 			throw Error(`Unknown message ${JSON.stringify(message)} from popup or sidebar`)
 	}
 }
 
+// TODO DRY with popupAndSideBarListener
 function devtoolsListenerMaker(connectingPort) {
 	// DevTools connections come from the DevTools panel, but the panel is
 	// inspecting a particular web page, which has a different tab ID.
@@ -129,6 +135,8 @@ function devtoolsListenerMaker(connectingPort) {
 				getLandmarksForActiveTab()
 				break
 			case 'focus-landmark':
+			case 'get-toggle-state':
+			case 'toggle-all-landmarks':
 				sendToActiveContentScriptIfExists(message)
 				break
 			default:

diff --git a/src/code/_content.js b/src/code/_content.js
@@ -64,14 +64,22 @@ function messageHandler(message, sendingPort) {
 		case 'toggle-all-landmarks':
 			// Triggered by keyboard shortcut
 			handleOutdatedResults()
-			if (elementFocuser.isManagingBorders()) {
-				elementFocuser.manageBorders(false)
-				borderDrawer.addBorderToElements(
-					landmarksFinder.allElementsRolesLabels())
-			} else {
-				borderDrawer.removeAllBorders()
-				elementFocuser.manageBorders(true)
+			if (thereMustBeLandmarks()) {
+				if (elementFocuser.isManagingBorders()) {
+					elementFocuser.manageBorders(false)
+					borderDrawer.addBorderToElements(
+						landmarksFinder.allElementsRolesLabels())
+				} else {
+					borderDrawer.removeAllBorders()
+					elementFocuser.manageBorders(true)
+				}
 			}
+			// eslint-disable-next-line no-fallthrough
+		case 'get-toggle-state':
+			sendingPort.postMessage({
+				name: 'toggle-state',
+				data: elementFocuser.isManagingBorders() ? 'selected' : 'all'
+			})
 			break
 		case 'trigger-refresh':
 			// On sites that use single-page style techniques to transition
@@ -97,13 +105,18 @@ function handleOutdatedResults() {
 	}
 }
 
-function checkFocusElement(callbackReturningElementInfo) {
+function thereMustBeLandmarks() {
 	if (landmarksFinder.getNumberOfLandmarks() === 0) {
 		alert(browser.i18n.getMessage('noLandmarksFound') + '.')
-		return
+		return false
 	}
+	return true
+}
 
-	elementFocuser.focusElement(callbackReturningElementInfo())
+function checkFocusElement(callbackReturningElementInfo) {
+	if(thereMustBeLandmarks()) {
+		elementFocuser.focusElement(callbackReturningElementInfo())
+	}
 }
 
 
@@ -193,6 +206,7 @@ function setUpMutationObserver() {
 
 function bootstrap() {
 	logger.log(`Bootstrapping Landmarks content script in ${window.location}`)
+
 	port = browser.runtime.connect({ name: 'content' })
 	port.onDisconnect.addListener(function() {
 		// If the port disconnected normally, then on Chrome-like browsers this
@@ -218,7 +232,10 @@ function bootstrap() {
 		}
 	})
 	port.onMessage.addListener(messageHandler)
-	findLandmarksAndUpdateBackgroundScript()  // FIXME try removing
+
+	// At the start, the ElementFocuser is always managing borders
+	port.postMessage({ name: 'toggle-state', data: 'selected' })
+	findLandmarksAndUpdateBackgroundScript()  // TODO try removing
 	setUpMutationObserver()
 }
 

diff --git a/src/code/_gui.js b/src/code/_gui.js
@@ -26,11 +26,14 @@ function handleLandmarksMessage(data) {
 	if (Array.isArray(data)) {
 		if (data.length === 0) {
 			addText(display, browser.i18n.getMessage('noLandmarksFound'))
+			document.getElementById('show-all-label').setAttribute('hidden', '')
 		} else {
 			makeLandmarksTree(data, display)
+			document.getElementById('show-all-label').removeAttribute('hidden')
 		}
 	} else {
 		addText(display, browser.i18n.getMessage('errorNoConnection'))
+		document.getElementById('show-all-label').setAttribute('hidden', '')
 	}
 }
 
@@ -167,6 +170,29 @@ function focusLandmark(index) {
 }
 
 
+//
+// Toggling all landmarks
+//
+
+function handleToggleStateMessage(state) {
+	const box = document.getElementById('show-all')
+	switch(state) {
+		case 'selected':
+			box.checked = false
+			break
+		case 'all':
+			box.checked = true
+			break
+		default:
+			throw Error(`Unknown state ${state} given.`)
+	}
+}
+
+function flipToggle() {
+	port.postMessage({ name: 'toggle-all-landmarks' })
+}
+
+
 if (INTERFACE === 'sidebar') {
 	//
 	// Sidebar - Live updates and Preferences note
@@ -265,6 +291,9 @@ function main() {
 	document.getElementById('heading').innerText =
 		browser.i18n.getMessage('popupHeading')
 
+	document.getElementById('show-all-label').appendChild(document
+		.createTextNode(browser.i18n.getMessage('popupShowAllLandmarks')))
+
 	if (INTERFACE === 'devtools') {
 		port = browser.runtime.connect({ name: INTERFACE })
 		port.postMessage({
@@ -301,12 +330,18 @@ function main() {
 			case 'landmarks':
 				handleLandmarksMessage(message.data)
 				break
+			case 'toggle-state':
+				handleToggleStateMessage(message.data)
+				break
 			default:
 				throw Error(`Unkown message ${JSON.stringify(message)}`)
 		}
 	})
 
 	port.postMessage({ name: 'get-landmarks' })
+	port.postMessage({ name: 'get-toggle-state' })
+
+	document.getElementById('show-all').addEventListener('change', flipToggle)
 }
 
 main()
diff --git a/src/static/gui.css b/src/static/gui.css
@@ -32,6 +32,10 @@ h1 {
 	margin: 0;
 }
 
+label {
+	margin-top: 0.5em;
+}
+
 /* ui */
 :root {
 	--light: #e4fbf0;