add a way to scroll to subsection in preferences panel

package.json

@@ -103,7 +103,7 @@
         "c9.ide.recentfiles": "#7c099abf40",
         "c9.ide.remote": "#301d2ab519",
         "c9.ide.processlist": "#bc11818bb5",
-        "c9.ide.run": "#469ffef3f1",
+        "c9.ide.run": "#567ad01865",
         "c9.ide.run.build": "#ad45874c88",
         "c9.ide.run.debug.xdebug": "#3b1520f83d",
         "c9.ide.save": "#58b8616a88",

plugins/c9.ide.preferences/preferencepanel.js

@@ -217,21 +217,26 @@ define(function(require, module, exports) {
                         .addNavigation(caption, index, heading.navHtml, plugin);
                         
                     subHeadings[caption] = { navHtml: htmlNode, index: index };
+                    htmlNode.$caption = caption;
                     
-                    htmlNode.addEventListener("mousedown", function(){
+                    htmlNode.addEventListener("mousedown", scrollTo.bind(null, caption));
-                        apf.tween.single(container.$int, {
-                            type: "scrollTop",
-                            steps: 10,
-                            anim: apf.tween.easeInOutCubic,
-                            from: container.$int.scrollTop,
-                            to: form.headings[caption].container.$ext.offsetTop
-                        })
-                    });
                 }
                 
                 return subHeadings[caption];
             }
             
+            function scrollTo(caption) {
+                if (!form.headings[caption])
+                    return;
+                apf.tween.single(container.$int, {
+                     type: "scrollTop",
+                    steps: 10,
+                    anim: apf.tween.easeInOutCubic,
+                    from: container.$int.scrollTop,
+                    to: form.headings[caption].container.$ext.offsetTop
+                })
+            }
+            
             /***** LifeCycle *****/
             
             plugin.on("load", function(){
@@ -321,6 +326,10 @@ define(function(require, module, exports) {
              * @param {Boolean}  options.form     Specifies whether to create a form for this panel.
              */
             plugin.freezePublicAPI({
+                /**
+                 * @ignore.
+                 */
+                get section() { return lastA && lastA.$caption; },
                 /**
                  * The APF UI element that is presenting the pane in the UI.
                  * This property is here for internal reasons only. *Do not 
@@ -394,6 +403,10 @@ define(function(require, module, exports) {
                  */
                 show: show,
                 
+                /**
+                 * Scrolls to a subheading.
+                 */
+                scrollTo: scrollTo,
                 /**
                  * Hides the panel.
                  */

plugins/c9.ide.preferences/preferences.js

@@ -64,13 +64,14 @@ define(function(require, exports, module) {
                 bindKey: { mac: "Command-,", win: "Ctrl-," },
                 exec: function (editor, args) {
                     var tab = tabs.focussedTab;
-                    if (tab && tab.editor.type == "preferences" && !args.panel) {
+                    var toggle = args.toggle || args.source == "click";
+                    if (tab && tab.editor.type == "preferences" && toggle) {
                         tab.close();
                         return;
                     }
                     if (focusOpenPrefs()) {
                         if (args.panel)
-                            activate(args.panel);
+                            activate(args.panel, args.section);
                         
                         return;
                     }
@@ -80,7 +81,7 @@ define(function(require, exports, module) {
                         active: true
                     }, function(){
                         if (args.panel)
-                            activate(args.panel);
+                            activate(args.panel, args.section);
                     });
                 }
             }, handle);
@@ -139,7 +140,6 @@ define(function(require, exports, module) {
             // Create UI elements
             parent = e.tab.appendChild(new ui.hsplitbox({
                 "class"      : "bar-preferences",
-                //"skinset"    : "prefs",
                 "anchors"    :  "0 0 0 0",
             }));
             parent.appendChild(navigation);
@@ -181,17 +181,31 @@ define(function(require, exports, module) {
             return htmlNode;
         }
         
-        function activate(panel) {
+        function activate(panel, section) {
             if (!drawn) {
                 if (!activePanel)
                     handle.once("draw", function(){ activate(activePanel); });
                 activePanel = panel;
                 return;
             }
-            
+            if (typeof panel == "string") {
+                var panels = navigation && navigation.$ext && navigation.$ext.children;
+                if (panels) {
+                    for (var i = 0; i < panels.length; i++) {
+                        if (panels[i].name == panel) {
+                            panel = panels[i].hostPlugin;
+                            break;
+                        }
+                    }
+                }
+            }
+            if (!panel || !panel.show)
+                return console.error("Couldn't find preference panel", panel);
             if (activePanel && activePanel != panel)
                 activePanel.hide();
             panel.show(!activePanel);
+            if (section)
+                panel.scrollTo(section);
             activePanel = panel;
         }
         
@@ -322,18 +336,10 @@ define(function(require, exports, module) {
             
             plugin.on("getState", function(e) {
                 e.state.activePanel = activePanel && activePanel.name;
+                e.state.section = activePanel && activePanel.section;
             });
             plugin.on("setState", function(e) {
-                var name = e.state.activePanel;
+                activate(e.state.activePanel, e.state.section);
-                if (activePanel && activePanel.name == name)
-                    return;
-                var panels = navigation && navigation.$ext && navigation.$ext.children;
-                if (panels) {
-                    for (var i = 0; i < panels.length; i++) {
-                        if (panels[i].name == name)
-                            return activate(panels[i].hostPlugin);
-                    }
-                }
             });
             
             /***** Lifecycle *****/