Separate browser preferences from add-on settings

chrome/settings.html

@@ -27,7 +27,7 @@
 
             <div class="settings-item slider">
 
-                <input class="slider-input" type="range" max="2" value="0" id="slider-input" onchange="changed()">
+                <input class="slider-input" type="range" max="2" value="0" id="slider-input">
 
                 <div class="slider-legend">
                     <div class="slider-legend-item text-left" data-l10n-id="standard_label"></div>

data/content-scripts/settings.js

@@ -2,6 +2,8 @@
  * Application settings content script.
  *
  * @module content-scripts/settings
+ * @listens worker:initialized
+ * @listens setting:fetched
  */
 
 'use strict';
@@ -10,21 +12,21 @@
  * Fires once the content script worker is initialized.
  *
  * @param {Object} initialState The initial state of the settings module.
- * @listens main/worker:initialized
  */
 self.port.once('worker:initialized', function (initialState) {
 
     applyL10n(initialState.l10n);
+    applySettings(initialState.settings);
 });
 
 /**
- * Fires once a preference has been fetched.
+ * Fires once a setting has been fetched.
  *
- * @param {Object} preference The externally fetched preference.
- * @listens main/preference:fetched
+ * @param {Object} setting The fetched application setting.
  */
-self.port.on('preference:fetched', function () {
-    // TODO Re-render the user interface.
+self.port.on('setting:fetched', function (setting) {
+
+    applySetting(setting);
 });
 
 /**
@@ -36,11 +38,11 @@ self.port.on('preference:fetched', function () {
  */
 function applyL10n (l10n) {
 
-    var l10nKeys = Object.keys(l10n);
+    let l10nKeys = Object.keys(l10n);
 
     l10nKeys.forEach(function (l10nKey) {
 
-        var elements = document.querySelectorAll('[data-l10n-id="' + l10nKey + '"]');
+        let elements = document.querySelectorAll('[data-l10n-id="' + l10nKey + '"]');
 
         for (let element of elements) {
             element.textContent = l10n[l10nKey];
@@ -49,21 +51,58 @@ function applyL10n (l10n) {
 }
 
 /**
- * Fetch preference event emitter.
+ * Applies a collection of settings to the user interface.
+ *
+ * @param {Object} settings A collection of application setting objects.
+ * @private
+ */
+function applySettings (settings) {
+
+    let settingKeys = Object.keys(settings);
+
+    settingKeys.forEach(function (settingKey) {
+
+        applySetting({
+            key: settingKey,
+            value: settings[settingKey]
+        });
+    });
+}
+
+/**
+ * Applies a given setting to the user interface.
+ *
+ * @param {Object} setting An application setting object.
+ * @private
+ */
+function applySetting (setting) {
+
+    let elements = document.querySelectorAll('[data-setting-id="' + setting.key + '"]');
+
+    for (let element of elements) {
+
+        element.setAttribute('readonly', 'readonly');
+        element.value = setting.value;
+        element.removeAttribute('readonly');
+    }
+}
+
+/**
+ * Fetch setting event emitter.
  *
- * @event preference:fetch
- * @property {String} preferenceKey The key of the requested preference.
+ * @event setting:fetch
+ * @property {String} settingKey The key of the requested setting.
  */
-function fetchPreference (preferenceKey) {
-    self.port.emit('preference:fetch', preferenceKey);
+function fetchSetting (settingKey) {
+    self.port.emit('setting:fetch', settingKey);
 }
 
 /**
- * Preference changed event emitter.
+ * Setting changed event emitter.
  *
- * @event preference:changed
- * @property {Object} preference The updated preference.
+ * @event setting:changed
+ * @property {Object} setting The updated setting.
  */
-function preferenceChanged (preference) {
-    self.port.emit('preference:changed', preference);
+function settingChanged (setting) {
+    self.port.emit('setting:changed', setting);
 }

src/main.js

@@ -7,32 +7,33 @@
 'use strict';
 
 /**
- * Simplifies the process of obtaining browser service references.
+ * The name of the target browser.
  *
- * @var {Object} Services
+ * @constant BROWSER_NAME
+ * @type {String}
  */
-var { Services } = require('resource://gre/modules/Services.jsm');
+const BROWSER_NAME = 'Orfox';
 
 /**
- * Can be used to get localization entries by key name.
+ * Application settings module.
  *
- * @var {function} _
+ * @var {Object} settings
  */
-var _ = require('sdk/l10n').get;
+var settings = require('./settings');
 
 /**
- * Facilitates running scripts in the context of web pages.
+ * Can be used to get localization entries by key name.
  *
- * @var {Object} pageMod
+ * @var {function} _
  */
-var pageMod = require('sdk/page-mod');
+var _ = require('sdk/l10n').get;
 
 /**
- * Provides access to extension metadata.
+ * Simplifies the process of obtaining browser service references.
  *
- * @var {Object} self
+ * @var {Object} Services
  */
-var self = require("sdk/self");
+var { Services } = require('resource://gre/modules/Services.jsm');
 
 /**
  * The browser's chrome window object.
@@ -48,39 +49,24 @@ var chromeWindow = Services.wm.getMostRecentWindow('navigator:browser');
  */
 var chromeMenuItemIdentifier = null;
 
-/**
- * The name of the target browser.
- *
- * @constant BROWSER_NAME
- * @type {String}
- * @default
- */
-const BROWSER_NAME = 'Orfox';
-
 /**
  * Executed as soon as the add-on is loaded.
  */
 exports.main = function () {
 
-    pageMod.PageMod({
-        include: 'chrome://tor-browser-settings/content/settings.html',
-        contentScriptFile: self.data.url('content-scripts/settings.js'),
-        contentScriptWhen: 'ready',
-        onAttach: startListening
-    });
+    settings.initialize();
 
     // Add the extension's chrome menu item to the main browser menu.
     chromeMenuItemIdentifier = chromeWindow.NativeWindow.menu.add({
         name: _('settings_label', BROWSER_NAME),
         callback: function () {
 
-            var tabBrowser = chromeWindow.BrowserApp;
+            let tabBrowser = chromeWindow.BrowserApp;
 
             tabBrowser.addTab('chrome://tor-browser-settings/content/settings.html', {
                 selected: true,
                 parentId: tabBrowser.selectedTab.id
             });
-
         }
     });
 };
@@ -93,38 +79,3 @@ exports.onUnload = function () {
     // Clean up add-on state.
     chromeWindow.NativeWindow.menu.remove(chromeMenuItemIdentifier);
 };
-
-/**
- * Executed as soon as a content script has been attached to a page.
- *
- * @param {Object} worker Allows for direct communication with content scripts.
- */
-function startListening (worker) {
-
-    worker.port.emit('worker:initialized', {
-
-        l10n: {
-            settings_label: _('settings_label', BROWSER_NAME),
-            security_label: _('security_label'),
-            standard_label: _('standard_label'),
-            standard_description: _('standard_description', BROWSER_NAME),
-            safer_label: _('safer_label'),
-            safer_description: _('safer_description'),
-            safer_list_label: _('safer_list_label'),
-            safest_label: _('safest_label'),
-            safest_description: _('safest_description'),
-            safest_list_label: _('safest_list_label'),
-            learn_more_label: _('learn_more_label')
-        }
-    });
-
-    worker.port.on('preference:fetch', function (details) {
-
-        // TODO Get the preference value using the Add-on SDK.
-    });
-
-    worker.port.on('preference:save', function (details) {
-
-        // TODO Persist the preference using the Add-on SDK.
-    });
-}

src/preferences.js

+/**
+ * Browser preferences module.
+ *
+ * @module preferences
+ */
+
+'use strict';
+
+// TODO

src/settings.js

+/**
+ * Application settings module.
+ *
+ * @module settings
+ * @listens setting:fetch
+ * @listens setting:changed
+ */
+
+'use strict';
+
+/**
+ * The name of the target browser.
+ *
+ * @constant BROWSER_NAME
+ * @type {String}
+ */
+const BROWSER_NAME = 'Orfox';
+
+/**
+ * Can be used to get localization entries by key name.
+ *
+ * @var {function} _
+ */
+var _ = require('sdk/l10n').get;
+
+/**
+ * Facilitates running scripts in the context of web pages.
+ *
+ * @var {Object} pageMod
+ */
+var pageMod = require('sdk/page-mod');
+
+/**
+ * Provides access to extension metadata.
+ *
+ * @var {Object} self
+ */
+var self = require('sdk/self');
+
+/**
+ * Can be used to persist settings across browser restarts.
+ *
+ * @var {Object} settings
+ */
+var settings = require('sdk/simple-prefs').prefs;
+
+/**
+ * Initializes the settings system.
+ */
+exports.initialize = function () {
+
+    pageMod.PageMod({
+        include: 'chrome://tor-browser-settings/content/settings.html',
+        contentScriptFile: self.data.url('content-scripts/settings.js'),
+        contentScriptWhen: 'ready',
+        onAttach: startListening
+    });
+};
+
+/**
+ * Executed as soon as the content script has been attached to a page.
+ *
+ * @param {Object} worker Allows for direct communication with the content script.
+ * @fires worker:initialized
+ * @private
+ */
+function startListening (worker) {
+
+    worker.port.emit('worker:initialized', {
+
+        l10n: {
+            settings_label: _('settings_label', BROWSER_NAME),
+            security_label: _('security_label'),
+            standard_label: _('standard_label'),
+            standard_description: _('standard_description', BROWSER_NAME),
+            safer_label: _('safer_label'),
+            safer_description: _('safer_description'),
+            safer_list_label: _('safer_list_label'),
+            safest_label: _('safest_label'),
+            safest_description: _('safest_description'),
+            safest_list_label: _('safest_list_label'),
+            learn_more_label: _('learn_more_label')
+        },
+        settings: {
+            security_level: 1
+        }
+    });
+
+    worker.port.on('setting:fetch', function (settingKey) {
+
+        let fetchedSetting = {
+            key: settingKey,
+            value: settings[settingKey]
+        };
+
+        worker.port.emit('setting:fetched', fetchedSetting);
+    });
+
+    worker.port.on('setting:changed', function (details) {
+
+        settings[details.key] = details.value;
+        worker.port.emit('setting:persisted', details);
+    });
+}