Merge pull request #115 from matatk/options-ui-tweaks

Options and Pop-up UI tweaks

README.md

@@ -179,7 +179,8 @@ Changes
     -   Landmarks are now updated when pages change dynamically (not just when the whole page is loaded). This should make the extension much more useful when working with web-apps and pages with pop-ups and slide-out menus, for example. [[#111]](https://github.com/matatk/landmarks/pull/111)
     -   Add a keyboard shortcut to skip to the main landmark.  [[also #111]](https://github.com/matatk/landmarks/pull/111)
     -   Fix a bug whereby sibling landmarks may not be identified as such. [[#112]](https://github.com/matatk/landmarks/pull/112)
-    -   Use Mozilla's 'addons-linter'
+    -   Adopt more browser-like UI on Firefox (pop-up and options) and Opera (options). [[#115]](https://github.com/matatk/landmarks/pull/115)
+    -   Use Mozilla's 'addons-linter' to check the built extension. [[err, also #111]](https://github.com/matatk/landmarks/pull/111)
 - 2.0.8 - 18th of September 2017
     -   Landmarks now ignores hidden regions. [[#85]](https://github.com/matatk/landmarks/pull/85)
     -   Fix a bug that caused the pop-up to incorrectly report nesting that changes by more than one level between landmarks. [[#102]](https://github.com/matatk/landmarks/pull/102)

package.json

@@ -31,6 +31,7 @@
     "is-mergeable-object": "~1.1",
     "jsdom": "~11.3",
     "one-svg-to-many-sized-pngs": "github:matatk/one-svg-to-many-sized-pngs",
+    "replace-in-file": "~3.0",
     "rimraf": "~2.6",
     "test": "~0.6"
   }

scripts/build.js

@@ -6,6 +6,7 @@ const merge = require('deepmerge')
 const archiver = require('archiver')
 const oneSvgToManySizedPngs = require('one-svg-to-many-sized-pngs')
 const packageJson = require(path.join('..', 'package.json'))
+const replace = require('replace-in-file')
 // For restoring pre-2.0.0 deepmerge behaviour...
 const isMergeableObject = require('is-mergeable-object')
 const emptyTarget = value => Array.isArray(value) ? [] : {}
@@ -111,6 +112,20 @@ function pathToBuild(browser) {
 function copyStaticFiles(browser) {
 	logStep('Copying static files...')
 	fse.copySync(srcStaticDir, pathToBuild(browser))
+
+	if (browser === 'firefox') {
+		try {
+			const changes = replace.sync({
+				files: pathToBuild('firefox') + '/*.html',
+				from: '<script src="compatibility.js"></script>',
+				to: ''
+			})
+			console.log('Removed inclusion of compatibility.js from:',
+				changes.join(', '))
+		} catch (error) {
+			console.error('Error occurred:', error)
+		}
+	}
 }
 
 

src/assemble/manifest.firefox.json

@@ -13,6 +13,10 @@
     }
   },
 
+  "options_ui": {
+    "browser_style": true
+  },
+
   "applications": {
     "gecko": {
       "id": "ariaLandmarkNav@ibm.com",

src/assemble/manifest.opera.json

@@ -11,6 +11,10 @@
     }
   },
 
+  "options_ui": {
+    "chrome_style": true
+  },
+
   "minimum_opera_version": "44",
 
   "background": {

src/static/options.html

@@ -8,15 +8,15 @@
 		<div>
 			<label for="border-type" data-message="prefsBorderType"></label>
 
-			<select id="border-type">
+			<select id="border-type" class="browser-style">
 				<option value="momentary" data-message="prefsMomentary"></option>
 				<option value="persistent" data-message="prefsPersistent"></option>
 				<option value="none" data-message="prefsNone"></option>
 			</select>
 		</div>
 
 		<div>
-			<button id="save" data-message="prefsSaveButton"></button>
+			<button id="save" data-message="prefsSaveButton" class="browser-style"></button>
 			<span role="alert" id="status"></span>
 		</div>
 

src/static/popup.js

@@ -55,6 +55,7 @@ function addText(element, message) {
 // (Needs to be done this way to avoid CSP violation)
 function addReloadButton(element) {
 	const button = document.createElement('button')
+	button.className = 'browser-style'
 	button.appendChild(document.createTextNode(
 		browser.i18n.getMessage('tryReloading')))
 	button.addEventListener('click', reloadActivePage)
@@ -111,6 +112,7 @@ function makeLandmarksTree(landmarks, container) {
 		// Create the <li> for this landmark
 		const item = document.createElement('li')
 		const button = document.createElement('button')
+		button.className = 'browser-style'
 		button.appendChild(document.createTextNode(landmarkName(landmark)))
 		button.addEventListener('click', function() {
 			focusLandmark(index)