Bug 1008709 - Build a preference screen for WebIDE. r=bgrins
authorPaul Rouget <paul@mozilla.com>
Tue, 15 Jul 2014 21:03:24 +0200
changeset 216230 76df92e390b52c996d4aa98d743109e6ca2ccf19
parent 216229 99cf135109ba0ed776c4fee58cb3996ff653bced
child 216231 4b108e20d5d0b6b69806014f37fe282f8c67958a
push id515
push userraliiev@mozilla.com
push dateMon, 06 Oct 2014 12:51:51 +0000
treeherdermozilla-release@267c7a481bef [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1008709
milestone33.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1008709 - Build a preference screen for WebIDE. r=bgrins
browser/devtools/webide/content/jar.mn
browser/devtools/webide/content/prefs.js
browser/devtools/webide/content/prefs.xhtml
browser/devtools/webide/content/webide.js
browser/devtools/webide/content/webide.xul
browser/devtools/webide/locales/en-US/webide.dtd
browser/devtools/webide/themes/addons.css
browser/devtools/webide/themes/jar.mn
browser/devtools/webide/themes/prefs.css
browser/devtools/webide/webide-prefs.js
--- a/browser/devtools/webide/content/jar.mn
+++ b/browser/devtools/webide/content/jar.mn
@@ -12,14 +12,16 @@ webide.jar:
     content/details.js                (details.js)
     content/cli.js                    (cli.js)
     content/addons.js                 (addons.js)
     content/addons.xhtml              (addons.xhtml)
     content/permissionstable.js       (permissionstable.js)
     content/permissionstable.xhtml    (permissionstable.xhtml)
     content/runtimedetails.js         (runtimedetails.js)
     content/runtimedetails.xhtml      (runtimedetails.xhtml)
+    content/prefs.js                  (prefs.js)
+    content/prefs.xhtml               (prefs.xhtml)
 
 # Temporarily include locales in content, until we're ready
 # to localize webide
 
     content/webide.dtd                (../locales/en-US/webide.dtd)
     content/webide.properties         (../locales/en-US/webide.properties)
new file mode 100644
--- /dev/null
+++ b/browser/devtools/webide/content/prefs.js
@@ -0,0 +1,106 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const Cu = Components.utils;
+const {Services} = Cu.import("resource://gre/modules/Services.jsm");
+
+window.addEventListener("load", function onLoad() {
+  window.removeEventListener("load", onLoad);
+
+  // Listen to preference changes
+  let inputs = document.querySelectorAll("[data-pref]");
+  for (let i of inputs) {
+    let pref = i.dataset.pref;
+    Services.prefs.addObserver(pref, FillForm, false);
+    i.addEventListener("change", SaveForm, false);
+  }
+
+  // Buttons
+  document.querySelector("#close").onclick = CloseUI;
+  document.querySelector("#restoreButton").onclick = RestoreDefaults;
+  document.querySelector("#manageSimulators").onclick = ShowAddons;
+
+  // Initialize the controls
+  FillForm();
+
+}, true);
+
+window.addEventListener("unload", function onUnload() {
+  window.removeEventListener("unload", onUnload);
+  let inputs = document.querySelectorAll("[data-pref]");
+  for (let i of inputs) {
+    let pref = i.dataset.pref;
+    i.removeEventListener("change", SaveForm, false);
+    Services.prefs.removeObserver(pref, FillForm, false);
+  }
+}, true);
+
+function CloseUI() {
+  window.parent.UI.openProject();
+}
+
+function ShowAddons() {
+  window.parent.Cmds.showAddons();
+}
+
+function FillForm() {
+  let inputs = document.querySelectorAll("[data-pref]");
+  for (let i of inputs) {
+    let pref = i.dataset.pref;
+    let val = GetPref(pref);
+    if (i.type == "checkbox") {
+      i.checked = val;
+    } else {
+      i.value = val;
+    }
+  }
+}
+
+function SaveForm(e) {
+  let inputs = document.querySelectorAll("[data-pref]");
+  for (let i of inputs) {
+    let pref = i.dataset.pref;
+    if (i.type == "checkbox") {
+      SetPref(pref, i.checked);
+    } else {
+      SetPref(pref, i.value);
+    }
+  }
+}
+
+function GetPref(name) {
+  let type = Services.prefs.getPrefType(name);
+  switch (type) {
+    case Services.prefs.PREF_STRING:
+      return Services.prefs.getCharPref(name);
+    case Services.prefs.PREF_INT:
+      return Services.prefs.getIntPref(name);
+    case Services.prefs.PREF_BOOL:
+      return Services.prefs.getBoolPref(name);
+    default:
+      throw new Error("Unknown type");
+  }
+}
+
+function SetPref(name, value) {
+  let type = Services.prefs.getPrefType(name);
+  switch (type) {
+    case Services.prefs.PREF_STRING:
+      return Services.prefs.setCharPref(name, value);
+    case Services.prefs.PREF_INT:
+      return Services.prefs.setIntPref(name, value);
+    case Services.prefs.PREF_BOOL:
+      return Services.prefs.setBoolPref(name, value);
+    default:
+      throw new Error("Unknown type");
+  }
+}
+
+function RestoreDefaults() {
+  let inputs = document.querySelectorAll("[data-pref]");
+  for (let i of inputs) {
+    let pref = i.dataset.pref;
+    Services.prefs.clearUserPref(pref);
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/devtools/webide/content/prefs.xhtml
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<!DOCTYPE html [
+  <!ENTITY % webideDTD SYSTEM "chrome://webide/content/webide.dtd" >
+  %webideDTD;
+]>
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta charset="utf8"/>
+    <link rel="stylesheet" href="chrome://webide/skin/prefs.css" type="text/css"/>
+    <script type="application/javascript;version=1.8" src="chrome://webide/content/prefs.js"></script>
+  </head>
+  <body>
+
+    <div id="controls">
+      <a id="close">&deck_close;</a>
+    </div>
+
+    <h1>&prefs_title;</h1>
+
+    <h2>&prefs_general_title;</h2>
+
+    <ul>
+      <li>
+        <label title="&prefs_options_enablelocalruntime_tooltip;">
+          <input type="checkbox" data-pref="devtools.webide.enableLocalRuntime"/>
+          <span>&prefs_options_enablelocalruntime;</span>
+        </label>
+      </li>
+      <li>
+        <label title="&prefs_options_rememberlastproject_tooltip;">
+          <input type="checkbox" data-pref="devtools.webide.restoreLastProject"/>
+          <span>&prefs_options_rememberlastproject;</span>
+        </label>
+      </li>
+      <li>
+        <label title="&prefs_options_templatesurl_tooltip;">
+          <span>&prefs_options_templatesurl;</span>
+          <input data-pref="devtools.webide.templatesURL"/>
+        </label>
+      </li>
+    </ul>
+
+    <h2>&prefs_editor_title;</h2>
+
+    <ul>
+      <li>
+        <label title="&prefs_options_showeditor_tooltip;">
+          <input type="checkbox" data-pref="devtools.webide.showProjectEditor"/>
+          <span>&prefs_options_showeditor;</span>
+        </label>
+      </li>
+      <li>
+        <label title="&prefs_options_autoclosebrackets_tooltip;">
+          <input type="checkbox" data-pref="devtools.editor.autoclosebrackets"/>
+          <span>&prefs_options_autoclosebrackets;</span>
+        </label>
+      </li>
+      <li>
+        <label title="&prefs_options_autocomplete_tooltip;">
+          <input type="checkbox" data-pref="devtools.editor.autocomplete"/>
+          <span>&prefs_options_autocomplete;</span>
+        </label>
+      </li>
+      <li>
+        <label title="&prefs_options_detectindentation_tooltip;">
+          <input type="checkbox" data-pref="devtools.editor.detectindentation"/>
+          <span>&prefs_options_detectindentation;</span>
+        </label>
+      </li>
+      <li>
+        <label title="&prefs_options_expandtab_tooltip;">
+          <input type="checkbox" data-pref="devtools.editor.expandtab"/>
+          <span>&prefs_options_expandtab;</span>
+        </label>
+      </li>
+      <li>
+        <label><span>&prefs_options_tabsize;</span>
+          <select data-pref="devtools.editor.tabsize">
+            <option value="2">2</option>
+            <option value="4">4</option>
+            <option value="8">8</option>
+          </select>
+        </label>
+      </li>
+    </ul>
+
+    <button id="manageSimulators">&prefs_simulators;</button>
+    <button id="restoreButton">&prefs_restore;</button>
+
+  </body>
+</html>
--- a/browser/devtools/webide/content/webide.js
+++ b/browser/devtools/webide/content/webide.js
@@ -69,21 +69,24 @@ let UI = {
     // If the user decides to uninstall the addon, we won't install it again.
     let autoInstallADBHelper = Services.prefs.getBoolPref("devtools.webide.autoinstallADBHelper");
     if (autoInstallADBHelper && !Devices.helperAddonInstalled) {
       GetAvailableAddons().then(addons => {
         addons.adb.install();
       }, console.error);
     }
     Services.prefs.setBoolPref("devtools.webide.autoinstallADBHelper", false);
+
+    this.setupDeck();
   },
 
   openLastProject: function() {
     let lastProjectLocation = Services.prefs.getCharPref("devtools.webide.lastprojectlocation");
-    if (lastProjectLocation) {
+    let shouldRestore = Services.prefs.getBoolPref("devtools.webide.restoreLastProject");
+    if (lastProjectLocation && shouldRestore) {
       let lastProject = AppProjects.get(lastProjectLocation);
       if (lastProject) {
         AppManager.selectedProject = lastProject;
       } else {
         AppManager.selectedProject = null;
       }
     } else {
       AppManager.selectedProject = null;
@@ -464,16 +467,23 @@ let UI = {
 
     this.getProjectEditor().then(() => {
       this.updateProjectEditorHeader();
     }, console.error);
   },
 
   /********** DECK **********/
 
+  setupDeck: function() {
+    let iframes = document.querySelectorAll("#deck > iframe");
+    for (let iframe of iframes) {
+      iframe.tooltip = "aHTMLTooltip";
+    }
+  },
+
   resetFocus: function() {
     document.commandDispatcher.focusedElement = document.documentElement;
   },
 
   selectDeckPanel: function(id) {
     this.hidePanels();
     this.resetFocus();
     let deck = document.querySelector("#deck");
@@ -903,9 +913,13 @@ let Cmds = {
 
   showTroubleShooting: function() {
     UI.openInBrowser(HELP_URL);
   },
 
   showAddons: function() {
     UI.selectDeckPanel("addons");
   },
+
+  showPrefs: function() {
+    UI.selectDeckPanel("prefs");
+  },
 }
--- a/browser/devtools/webide/content/webide.xul
+++ b/browser/devtools/webide/content/webide.xul
@@ -40,16 +40,17 @@
       <command id="cmd_showProjectPanel" oncommand="Cmds.showProjectPanel()"/>
       <command id="cmd_showRuntimePanel" oncommand="Cmds.showRuntimePanel()"/>
       <command id="cmd_disconnectRuntime" oncommand="Cmds.disconnectRuntime()" label="&runtimeMenu_disconnect_label;"/>
       <command id="cmd_showPermissionsTable" oncommand="Cmds.showPermissionsTable()" label="&runtimeMenu_showPermissionTable_label;"/>
       <command id="cmd_showRuntimeDetails" oncommand="Cmds.showRuntimeDetails()" label="&runtimeMenu_showDetails_label;"/>
       <command id="cmd_takeScreenshot" oncommand="Cmds.takeScreenshot()" label="&runtimeMenu_takeScreenshot_label;"/>
       <command id="cmd_toggleEditor" oncommand="Cmds.toggleEditors()" label="&viewMenu_toggleEditor_label;"/>
       <command id="cmd_showAddons" oncommand="Cmds.showAddons()"/>
+      <command id="cmd_showPrefs" oncommand="Cmds.showPrefs()"/>
       <command id="cmd_showTroubleShooting" oncommand="Cmds.showTroubleShooting()"/>
       <command id="cmd_play" oncommand="Cmds.play()"/>
       <command id="cmd_stop" oncommand="Cmds.stop()" label="&projectMenu_stop_label;"/>
       <command id="cmd_toggleToolbox" oncommand="Cmds.toggleToolbox()"/>
     </commandset>
   </commandset>
 
   <menubar id="main-menubar">
@@ -60,16 +61,18 @@
         <menuitem command="cmd_importHostedApp" accesskey="&projectMenu_importHostedApp_accesskey;"/>
         <menuitem command="cmd_showProjectPanel" key="key_showProjectPanel" label="&projectMenu_selectApp_label;" accesskey="&projectMenu_selectApp_accessley;"/>
         <menuseparator/>
         <menuitem command="cmd_play" key="key_play" label="&projectMenu_play_label;" accesskey="&projectMenu_play_accesskey;"/>
         <menuitem command="cmd_stop" accesskey="&projectMenu_stop_accesskey;"/>
         <menuitem command="cmd_toggleToolbox" key="key_toggleToolbox" label="&projectMenu_debug_label;" accesskey="&projectMenu_debug_accesskey;"/>
         <menuseparator/>
         <menuitem command="cmd_removeProject" accesskey="&projectMenu_remove_accesskey;"/>
+        <menuseparator/>
+        <menuitem command="cmd_showPrefs" label="&projectMenu_showPrefs_label;" accesskey="&projectMenu_showPrefs_accesskey;"/>
       </menupopup>
     </menu>
 
     <menu id="menu-runtime" label="&runtimeMenu_label;" accesskey="&runtimeMenu_accesskey;">
       <menupopup id="menu-runtime-popup">
         <menuitem command="cmd_takeScreenshot" accesskey="&runtimeMenu_takeScreenshot_accesskey;"/>
         <menuitem command="cmd_showPermissionsTable" accesskey="&runtimeMenu_showPermissionTable_accesskey;"/>
         <menuitem command="cmd_showRuntimeDetails" accesskey="&runtimeMenu_showDetails_accesskey;"/>
@@ -90,16 +93,18 @@
   <keyset id="mainKeyset">
     <key key="&key_quit;" id="key_quit" command="cmd_quit" modifiers="accel"/>
     <key key="&key_showProjectPanel;" id="key_showProjectPanel" command="cmd_showProjectPanel" modifiers="accel"/>
     <key key="&key_play;" id="key_play" command="cmd_play" modifiers="accel"/>
     <key key="&key_toggleEditor;" id="key_toggleEditor" command="cmd_toggleEditor" modifiers="accel"/>
     <key keycode="&key_toggleToolbox;" id="key_toggleToolbox" command="cmd_toggleToolbox"/>
   </keyset>
 
+  <tooltip id="aHTMLTooltip" page="true"/>
+
   <toolbar id="main-toolbar">
 
     <vbox flex="1">
       <hbox id="action-buttons-container" class="busy">
         <toolbarbutton id="action-button-play"  class="action-button" command="cmd_play" tooltiptext="&projectMenu_play_label;"/>
         <toolbarbutton id="action-button-stop"  class="action-button" command="cmd_stop" tooltiptext="&projectMenu_stop_label;"/>
         <toolbarbutton id="action-button-debug" class="action-button" command="cmd_toggleToolbox" tooltiptext="&projectMenu_debug_label;"/>
         <hbox id="action-busy" align="center">
@@ -165,16 +170,17 @@
 
   </popupset>
 
   <notificationbox flex="1" id="notificationbox">
     <deck flex="1" id="deck" selectedIndex="-1">
       <iframe id="deck-panel-details" flex="1" src="details.xhtml"/>
       <iframe id="deck-panel-projecteditor" flex="1"/>
       <iframe id="deck-panel-addons" flex="1" src="addons.xhtml"/>
+      <iframe id="deck-panel-prefs" flex="1" src="prefs.xhtml"/>
       <iframe id="deck-panel-permissionstable" flex="1" src="permissionstable.xhtml"/>
       <iframe id="deck-panel-runtimedetails" flex="1" src="runtimedetails.xhtml"/>
     </deck>
   </notificationbox>
 
   <splitter hidden="true" class="devtools-horizontal-splitter" orient="vertical"/>
 
   <!-- toolbox iframe will be inserted here -->
--- a/browser/devtools/webide/locales/en-US/webide.dtd
+++ b/browser/devtools/webide/locales/en-US/webide.dtd
@@ -17,16 +17,18 @@
 <!ENTITY projectMenu_play_label "Install and run">
 <!ENTITY projectMenu_play_accesskey "I">
 <!ENTITY projectMenu_stop_label "Stop App">
 <!ENTITY projectMenu_stop_accesskey "S">
 <!ENTITY projectMenu_debug_label "Debug App">
 <!ENTITY projectMenu_debug_accesskey "D">
 <!ENTITY projectMenu_remove_label "Remove Project">
 <!ENTITY projectMenu_remove_accesskey "R">
+<!ENTITY projectMenu_showPrefs_label "Preferences">
+<!ENTITY projectMenu_showPrefs_accesskey "e">
 
 <!ENTITY runtimeMenu_label "Runtime">
 <!ENTITY runtimeMenu_accesskey "R">
 <!ENTITY runtimeMenu_disconnect_label "Disconnect">
 <!ENTITY runtimeMenu_disconnect_accesskey "D">
 <!ENTITY runtimeMenu_showPermissionTable_label "Permissions Table">
 <!ENTITY runtimeMenu_showPermissionTable_accesskey "P">
 <!ENTITY runtimeMenu_takeScreenshot_label "Screenshot">
@@ -85,14 +87,38 @@
 <!-- Decks -->
 
 <!ENTITY deck_close "close">
 
 <!-- Addons -->
 <!ENTITY addons_title "Extra Components:">
 <!ENTITY addons_aboutaddons "Open Addons Manager">
 
+<!-- Prefs -->
+<!ENTITY prefs_title "Preferences">
+<!ENTITY prefs_editor_title "Editor">
+<!ENTITY prefs_general_title "General">
+<!ENTITY prefs_restore "Restore defaults">
+<!ENTITY prefs_simulators "Manage simulators">
+<!ENTITY prefs_options_enablelocalruntime "Enable local runtime">
+<!ENTITY prefs_options_enablelocalruntime_tooltip "Allow WebIDE to connect to its own runtime (running browser instance)">
+<!ENTITY prefs_options_rememberlastproject "Remember last project">
+<!ENTITY prefs_options_rememberlastproject_tooltip "Restore previous project when WebIDE starts">
+<!ENTITY prefs_options_templatesurl "Templates URL">
+<!ENTITY prefs_options_templatesurl_tooltip "Index of available templates">
+<!ENTITY prefs_options_showeditor "Show editor">
+<!ENTITY prefs_options_showeditor_tooltip "Show internal editor">
+<!ENTITY prefs_options_detectindentation "Detect indentation">
+<!ENTITY prefs_options_detectindentation_tooltip "Guess indentation based on source content">
+<!ENTITY prefs_options_autoclosebrackets "Autoclose brackets">
+<!ENTITY prefs_options_autoclosebrackets_tooltip "Automatically insert closing brackets">
+<!ENTITY prefs_options_expandtab "Indent using spaces">
+<!ENTITY prefs_options_expandtab_tooltip "Use spaces instead of the tab character">
+<!ENTITY prefs_options_autocomplete "Autocompletion">
+<!ENTITY prefs_options_autocomplete_tooltip "Enable code autocompletion">
+<!ENTITY prefs_options_tabsize "Tab size">
+
 <!-- Permissions Table -->
 <!ENTITY permissionstable_title "Permissions Table">
 <!ENTITY permissionstable_name_header "Name">
 
 <!-- Runtime Details -->
 <!ENTITY runtimedetails_title "Runtime Info">
--- a/browser/devtools/webide/themes/addons.css
+++ b/browser/devtools/webide/themes/addons.css
@@ -1,14 +1,12 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-@import url("chrome://browser/skin/in-content/common.css");
-
 html {
   font: message-box;
   font-size: 15px;
   font-weight: normal;
   margin: 0;
   color: #737980;
   background-image: linear-gradient(#fff, #ededed 100px);
   height: 100%;
--- a/browser/devtools/webide/themes/jar.mn
+++ b/browser/devtools/webide/themes/jar.mn
@@ -5,9 +5,10 @@
 webide.jar:
 % skin webide classic/1.0 %skin/
 * skin/webide.css         (webide.css)
   skin/icons.png          (icons.png)
   skin/details.css        (details.css)
   skin/newapp.css         (newapp.css)
   skin/throbber.svg       (throbber.svg)
   skin/addons.css         (addons.css)
+  skin/prefs.css          (prefs.css)
   skin/tabledoc.css       (tabledoc.css)
new file mode 100644
--- /dev/null
+++ b/browser/devtools/webide/themes/prefs.css
@@ -0,0 +1,54 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+html {
+  font: message-box;
+  font-size: 15px;
+  font-weight: normal;
+  margin: 0;
+  color: #737980;
+  background-image: linear-gradient(#fff, #ededed 100px);
+  height: 100%;
+}
+
+body {
+  padding: 20px;
+}
+
+h1 {
+  font-size: 2.5em;
+  font-weight: lighter;
+  line-height: 1.2;
+  margin: 0;
+  margin-bottom: .5em;
+}
+
+#controls {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+#controls > a {
+  color: #4C9ED9;
+  font-size: small;
+  cursor: pointer;
+  border-bottom: 1px dotted;
+}
+
+#close {
+  margin-left: 10px;
+}
+
+li {
+  list-style: none;
+}
+
+li > label:hover {
+  background-color: rgba(0,0,0,0.02);
+}
+
+li > label > span {
+  display: inline-block;
+}
--- a/browser/devtools/webide/webide-prefs.js
+++ b/browser/devtools/webide/webide-prefs.js
@@ -2,14 +2,15 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 pref("devtools.webide.showProjectEditor", true);
 pref("devtools.webide.templatesURL", "http://code.cdn.mozilla.net/templates/list.json");
 pref("devtools.webide.autoinstallADBHelper", true);
 pref("devtools.webide.lastprojectlocation", "");
+pref("devtools.webide.restoreLastProject", true);
 pref("devtools.webide.enableLocalRuntime", false);
 pref("devtools.webide.addonsURL", "https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/index.json");
 pref("devtools.webide.simulatorAddonsURL", "https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/#VERSION#/#OS#/fxos_#SLASHED_VERSION#_simulator-#OS#-latest.xpi");
 pref("devtools.webide.simulatorAddonID", "fxos_#SLASHED_VERSION#_simulator@mozilla.org");
 pref("devtools.webide.adbAddonURL", "https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/adb-helper/#OS#/adbhelper-#OS#-latest.xpi");
 pref("devtools.webide.adbAddonID", "adbhelper@mozilla.org");