Generalize setting page helpers

chrome/js/settings.js

@@ -6,32 +6,113 @@
 
 'use strict';
 
-var sharedFunctions = {};
+var vent = {};
 
 window.onload = function () {
 
-    let controls = {
-        securityLevel: document.querySelector('[data-setting-id="security_level"]')
-    };
+    let controls = document.querySelectorAll('[data-setting-id]');
 
-    controls.securityLevel.addEventListener('change', function ({ target }) {
+    for (var index = 0, control; control = controls[index]; index++) {
+        control.addEventListener('change', handleSettingChange);
+    }
+};
 
-        let previousValue, currentValue;
+function handleSettingChange ({ target }) {
 
-        previousValue = target.getAttribute('data-previous-value') || null;
-        currentValue = target.value;
+    let settingId, previousValue, currentValue;
 
-        sharedFunctions.applySetting({
-            id: 'security_level',
-            value: currentValue
-        });
+    settingId = target.getAttribute('data-setting-id');
+    previousValue = target.getAttribute('data-previous-value') || null;
+    currentValue = target.value;
 
-        sharedFunctions.settingAltered({
-            settingId: 'security_level',
-            previousValue: previousValue,
-            currentValue: currentValue
-        });
+    applySetting({
+        id: settingId,
+        value: currentValue
+    });
 
-        target.setAttribute('data-previous-value', currentValue);
+    vent.emit('setting:altered', {
+        settingId: settingId,
+        previousValue: previousValue,
+        currentValue: currentValue
     });
+
+    target.setAttribute('data-previous-value', currentValue);
+}
+
+/**
+ * Applies a collection of settings to the user interface.
+ *
+ * @param {Object} settings A collection of application setting objects.
+ */
+function applySettings (settings) {
+
+    let settingIds = Object.keys(settings);
+
+    settingIds.forEach(function (settingId) {
+
+        let setting = settings[settingId];
+        applySetting(setting);
+    });
+}
+
+/**
+ * Applies a given setting to the user interface.
+ *
+ * @param {Object} setting An application setting object.
+ */
+function applySetting (setting) {
+
+    let settingElements, activatableElements, hideableElements;
+
+    settingElements = document.querySelectorAll('[data-setting-id="' + setting.id + '"]');
+    activatableElements = document.querySelectorAll('[data-active-if^=' + setting.id + ']');
+    hideableElements = document.querySelectorAll('[data-visible-if^=' + setting.id + ']');
+
+    for (let element of settingElements) {
+
+        element.setAttribute('readonly', 'readonly');
+        element.value = setting.value;
+        element.removeAttribute('readonly');
+    }
+
+    for (let element of activatableElements) {
+
+        let activationCondition, activityState;
+
+        activationCondition = element.getAttribute('data-active-if');
+        activityState = (activationCondition === (setting.id + ':' + setting.value));
+
+        element.setAttribute('data-active', activityState);
+    }
+
+    for (let element of hideableElements) {
+
+        let visibilityCondition, visibilityState;
+
+        visibilityCondition = element.getAttribute('data-visible-if');
+        visibilityState = (visibilityCondition === (setting.id + ':' + setting.value));
+
+        element.setAttribute('data-hidden', !visibilityState);
+    }
+}
+
+/**
+ * Applies a given localization to marked document elements.
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=787351
+ *
+ * @param {Object} l10n A localization object.
+ * @private
+ */
+function applyL10n (l10n) {
+
+  let l10nKeys = Object.keys(l10n);
+
+  l10nKeys.forEach(function (l10nKey) {
+
+    let elements = document.querySelectorAll('[data-l10n-id="' + l10nKey + '"]');
+
+    for (let element of elements) {
+      element.textContent = l10n[l10nKey];
+    }
+  });
 }

data/content-scripts/settings.js

@@ -15,99 +15,21 @@
  */
 self.port.once('worker:initialized', function (initialState) {
 
-    applyL10n(initialState.l10n);
+    exportFunction(handlePageEvent, vent, {defineAs: 'emit'});
+
     applySettings(initialState.settings);
+    applyL10n(initialState.l10n);
 });
 
 /**
  * Fires once a setting has been fetched.
  *
- * @param {Object} setting The fetched application setting.
+ * @param {Setting} setting The fetched application setting.
  */
 self.port.on('setting:fetched', function (setting) {
     applySetting(setting);
 });
 
-/**
- * Applies a given localization to marked document elements.
- * https://bugzilla.mozilla.org/show_bug.cgi?id=787351
- *
- * @param {Object} l10n A localization object.
- * @private
- */
-function applyL10n (l10n) {
-
-    let l10nKeys = Object.keys(l10n);
-
-    l10nKeys.forEach(function (l10nKey) {
-
-        let elements = document.querySelectorAll('[data-l10n-id="' + l10nKey + '"]');
-
-        for (let element of elements) {
-            element.textContent = l10n[l10nKey];
-        }
-    });
-}
-
-/**
- * Applies a collection of settings to the user interface.
- *
- * @param {Object} settings A collection of application setting objects.
- * @private
- */
-function applySettings (settings) {
-
-    let settingIds = Object.keys(settings);
-
-    settingIds.forEach(function (settingId) {
-
-        let setting = settings[settingId];
-        applySetting(setting);
-    });
-}
-
-/**
- * Applies a given setting to the user interface.
- *
- * @param {Setting} setting An application setting object.
- * @private
- */
-function applySetting (setting) {
-
-    let settingElements, activatableElements, hideableElements;
-
-    settingElements = document.querySelectorAll('[data-setting-id="' + setting.id + '"]');
-    activatableElements = document.querySelectorAll('[data-active-if^=' + setting.id + ']');
-    hideableElements = document.querySelectorAll('[data-visible-if^=' + setting.id + ']');
-
-    for (let element of settingElements) {
-
-        element.setAttribute('readonly', 'readonly');
-        element.value = setting.value;
-        element.removeAttribute('readonly');
-    }
-
-    for (let element of activatableElements) {
-
-        let activationCondition, activityState;
-
-        activationCondition = element.getAttribute('data-active-if');
-        activityState = (activationCondition === (setting.id + ':' + setting.value));
-
-        element.setAttribute('data-active', activityState);
-    }
-
-    for (let element of hideableElements) {
-
-        let visibilityCondition, visibilityState;
-
-        visibilityCondition = element.getAttribute('data-visible-if');
-        visibilityState = (visibilityCondition === (setting.id + ':' + setting.value));
-
-        element.setAttribute('data-hidden', !visibilityState);
-    }
-}
-
 /**
  * Fetch setting event emitter.
  *
@@ -128,5 +50,15 @@ function settingAltered (settingAlteration) {
     self.port.emit('setting:altered', settingAlteration);
 }
 
-exportFunction(applySetting, sharedFunctions, {defineAs: 'applySetting'});
-exportFunction(settingAltered, sharedFunctions, {defineAs: 'settingAltered'});
+/**
+ * Handles events emitted by pages.
+ *
+ * @property {String} eventId The event identifier.
+ * @property {Object} payload The event payload.
+ */
+function handlePageEvent (eventId, payload) {
+
+    switch (eventId) {
+        case 'setting:altered': settingAltered(payload);
+    }
+}

src/settings.js

@@ -67,7 +67,6 @@ exports.initialize = function () {
     pageMod.PageMod({
         include: SETTINGS_URI,
         contentScriptFile: self.data.url('content-scripts/settings.js'),
-        contentScriptWhen: 'ready',
         onAttach: startListening
     });
 };