Chrome extension: Add options page

mozilla · Jan 6, 2015 · 79d9e87 · 79d9e87
1 parent e93cf5c
commit 79d9e87
Show file tree

Hide file tree

Showing 5 changed files with 266 additions and 1 deletion.
diff --git a/extensions/chromium/manifest.json b/extensions/chromium/manifest.json
@@ -43,6 +43,11 @@
   "storage": {
     "managed_schema": "preferences_schema.json"
   },
+  "options_ui": {
+    "page": "options/options.html",
+    "chrome_style": true
+  },
+  "options_page": "options/options.html",
   "background": {
     "page": "pdfHandler.html"
   },

diff --git a/extensions/chromium/options/options.html b/extensions/chromium/options/options.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<!--
+Copyright 2015 Mozilla Foundation
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<html>
+<head>
+<meta charset="utf-8">
+<title>PDF.js viewer options</title>
+<style>
+/* TODO: Remove as much custom CSS as possible - crbug.com/446511 */
+body {
+  min-width: 400px; /* a page at the settings page is at least 400px wide */
+  margin: 14px 17px; /* already added by default in Chrome 40.0.2212.0 */
+}
+.settings-row {
+  margin: 0.65em 0;
+}
+</style>
+</head>
+<body>
+<div id="settings-boxes"></div>
+<button id="reset-button">Restore default settings</button>
+
+<template id="checkbox-template">
+<!-- Chromium's style: //src/extensions/renderer/resources/extension.css -->
+<div class="checkbox">
+  <label>
+    <input type="checkbox">
+    <span></span>
+  </label>
+</div>
+</template>
+
+<template id="defaultZoomValue-template">
+<div class="settings-row">
+  <label>
+    <span></span>
+    <select>
+      <option value="auto" selected="selected">Automatic Zoom</option>
+      <option value="page-actual">Actual Size</option>
+      <option value="page-fit">Fit Page</option>
+      <option value="page-width">Full Width</option>
+      <option value="custom" class="custom-zoom" hidden></option>
+      <option value="0.5">50%</option>
+      <option value="0.75">75%</option>
+      <option value="1">100%</option>
+      <option value="1.25">125%</option>
+      <option value="1.5">150%</option>
+      <option value="2">200%</option>
+      <option value="3">300%</option>
+      <option value="4">400%</option>
+    </select>
+  </label>
+</div>
+</template>
+
+<template id="sidebarViewOnLoad-template">
+<div class="settings-row">
+  <label>
+    <span></span>
+    <select>
+      <option value="0">Do not show sidebar</option>
+      <option value="1">Show thumbnails in sidebar</option>
+      <option value="2">Show document outline in sidebar</option>
+      <option value="3">Show attachments in sidebar</option>
+    </select>
+  </label>
+</div>
+</template>
+
+<script src="options.js"></script>
+</body>
+</html>
diff --git a/extensions/chromium/options/options.js b/extensions/chromium/options/options.js
@@ -0,0 +1,174 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+/*
+Copyright 2015 Mozilla Foundation
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+/* globals chrome, Promise */
+
+'use strict';
+
+Promise.all([
+  new Promise(function getManagedPrefs(resolve) {
+    // Get preferences as set by the system administrator.
+    chrome.storage.managed.get(null, function(prefs) {
+      // Managed storage may be disabled, e.g. in Opera.
+      resolve(prefs || {});
+    });
+  }),
+  new Promise(function getUserPrefs(resolve) {
+    chrome.storage.local.get(null, function(prefs) {
+      resolve(prefs || {});
+    });
+  }),
+  new Promise(function getStorageSchema(resolve) {
+    // Get the storage schema - a dictionary of preferences.
+    var x = new XMLHttpRequest();
+    var schema_location = chrome.runtime.getManifest().storage.managed_schema;
+    x.open('get', chrome.runtime.getURL(schema_location));
+    x.onload = function() {
+      resolve(x.response.properties);
+    };
+    x.responseType = 'json';
+    x.send();
+  })
+]).then(function(values) {
+  var managedPrefs = values[0];
+  var userPrefs = values[1];
+  var schema = values[2];
+  function getPrefValue(prefName) {
+    if (prefName in userPrefs) {
+      return userPrefs[prefName];
+    } else if (prefName in managedPrefs) {
+      return managedPrefs[prefName];
+    }
+    return schema[prefName].default;
+  }
+  var prefNames = Object.keys(schema);
+  var renderPreferenceFunctions = {};
+  // Render options
+  prefNames.forEach(function(prefName) {
+    var prefSchema = schema[prefName];
+    if (!prefSchema.title) {
+      // Don't show preferences if the title is missing.
+      return;
+    }
+
+    // A DOM element with a method renderPreference.
+    var renderPreference;
+    if (prefSchema.type === 'boolean') {
+      // Most prefs are booleans, render them in a generic way.
+      renderPreference = renderBooleanPref(prefSchema.title,
+                                           prefSchema.description,
+                                           prefName);
+    } else if (prefName === 'defaultZoomValue') {
+      renderPreference = renderDefaultZoomValue(prefSchema.title);
+    } else if (prefName === 'sidebarViewOnLoad') {
+      renderPreference = renderSidebarViewOnLoad(prefSchema.title);
+    } else {
+      // Should NEVER be reached. Only happens if a new type of preference is
+      // added to the storage manifest.
+      console.error('Don\'t know how to handle ' + prefName + '!');
+      return;
+    }
+
+    renderPreference(getPrefValue(prefName));
+    renderPreferenceFunctions[prefName] = renderPreference;
+  });
+
+  // Reset button to restore default settings.
+  document.getElementById('reset-button').onclick = function() {
+    userPrefs = {};
+    chrome.storage.local.remove(prefNames, function() {
+      prefNames.forEach(function(prefName) {
+        var renderPreference = renderPreferenceFunctions[prefName];
+        if (renderPreference) {
+          renderPreference(getPrefValue(prefName));
+        }
+      });
+    });
+  };
+  // Render preference UI
+}).then(null, console.error.bind(console));
+
+function importTemplate(id) {
+  return document.importNode(document.getElementById(id).content, true);
+}
+
+// Helpers to create UI elements that display the preference, and return a
+// function which updates the UI with the preference.
+
+function renderBooleanPref(shortDescription, description, prefName) {
+  var wrapper = importTemplate('checkbox-template');
+  wrapper.title = description;
+
+  var checkbox = wrapper.querySelector('input[type="checkbox"]');
+  checkbox.onchange = function() {
+    var pref = {};
+    pref[prefName] = this.checked;
+    chrome.storage.local.set(pref);
+  };
+  wrapper.querySelector('span').textContent = shortDescription;
+  document.getElementById('settings-boxes').appendChild(wrapper);
+
+  function renderPreference(value) {
+    checkbox.checked = value;
+  }
+  return renderPreference;
+}
+
+function renderDefaultZoomValue(shortDescription) {
+  var wrapper = importTemplate('defaultZoomValue-template');
+  var select = wrapper.querySelector('select');
+  select.onchange = function() {
+    chrome.storage.local.set({
+      defaultZoomValue: this.value
+    });
+  };
+  wrapper.querySelector('span').textContent = shortDescription;
+  document.getElementById('settings-boxes').appendChild(wrapper);
+
+  function renderPreference(value) {
+    value = value || 'auto';
+    select.value = value;
+    var customOption = select.querySelector('option.custom-zoom');
+    if (select.selectedIndex === -1 && !isNaN(value)) {
+      // Custom zoom percentage, e.g. set via managed preferences.
+      customOption.text = (value * 100) + '%';
+      customOption.value = value;
+      customOption.hidden = false;
+      customOption.selected = true;
+    } else {
+      customOption.hidden = true;
+    }
+  }
+  return renderPreference;
+}
+
+function renderSidebarViewOnLoad(shortDescription) {
+  var wrapper = importTemplate('sidebarViewOnLoad-template');
+  var select = wrapper.querySelector('select');
+  select.onchange = function() {
+    chrome.storage.local.set({
+      sidebarViewOnLoad: this.value
+    });
+  };
+  wrapper.querySelector('span').textContent = shortDescription;
+  document.getElementById('settings-boxes').appendChild(wrapper);
+
+  function renderPreference(value) {
+    select.value = value;
+  }
+  return renderPreference;
+}
diff --git a/extensions/chromium/preferences_schema.json b/extensions/chromium/preferences_schema.json
@@ -2,7 +2,7 @@
   "type": "object",
   "properties": {
     "showPreviousViewOnLoad": {
-      "title": "Resume view on load",
+      "title": "Show previous position of PDF upon load",
       "description": "Whether to view PDF documents in the last page and position upon opening the viewer.",
       "type": "boolean",
       "default": true

diff --git a/make.js b/make.js
@@ -1042,6 +1042,7 @@ target.chromium = function() {
         'extensions/chromium/icon*.png',],
        CHROME_BUILD_DIR],
       ['extensions/chromium/pageAction/*.*', CHROME_BUILD_DIR + '/pageAction'],
+      ['extensions/chromium/options/*.*', CHROME_BUILD_DIR + '/options'],
       ['external/webL10n/l10n.js', CHROME_BUILD_CONTENT_DIR + '/web'],
       ['external/bcmaps/*', CHROME_BUILD_CONTENT_DIR + '/web/cmaps'],
       ['web/locale', CHROME_BUILD_CONTENT_DIR + '/web']