Keyboard Navigation

appinventor/appengine/src/com/google/appinventor/client/OdeMessages.java

@@ -655,15 +655,15 @@ public interface OdeMessages extends Messages, AutogeneratedOdeMessages {
   @Description("Message providing details about starting a USB connection.")
   String usbMenuItem();
 
-  @DefaultMessage("Reset Connection")
+  @DefaultMessage("Reset Connection (Alt + Shift + R)")
   @Description("Reset all connections.")
   String resetConnectionsMenuItem();
 
   @DefaultMessage("Hard Reset")
   @Description("Hard Reset the Emulator.")
   String hardResetConnectionsMenuItem();
 
-  @DefaultMessage("Refresh Companion Screen")
+  @DefaultMessage("Refresh Companion Screen (Alt + R)")
   @Description("Refresh the companion screen.")
   String refreshCompanionMenuItem();
 
@@ -1254,7 +1254,7 @@ public interface OdeMessages extends Messages, AutogeneratedOdeMessages {
   String blocksLoadFailure(String formName);
 
   // Used in editor/youngandroid/palette/YoungAndroidPalettePanel.java
-  @DefaultMessage("Search Components...")
+  @DefaultMessage("Type / to search components")
   @Description("Text shown in the component palette search box")
   String searchComponents();
 

appinventor/appengine/src/com/google/appinventor/client/editor/youngandroid/DesignToolbar.java

@@ -11,6 +11,8 @@
 import com.google.appinventor.client.editor.FileEditor;
 import com.google.appinventor.client.editor.ProjectEditor;
 import com.google.appinventor.client.editor.youngandroid.actions.SwitchScreenAction;
+import com.google.appinventor.client.editor.youngandroid.actions.SwitchToBlocksEditorAction;
+import com.google.appinventor.client.editor.youngandroid.actions.SwitchToFormEditorAction;
 import com.google.appinventor.client.widgets.DropDownButton;
 import com.google.appinventor.client.widgets.DropDownItem;
 import com.google.appinventor.client.widgets.Toolbar;
@@ -21,9 +23,12 @@
 import com.google.common.collect.Maps;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.core.client.Scheduler;
+import com.google.gwt.event.dom.client.KeyDownEvent;
+import com.google.gwt.event.dom.client.KeyDownHandler;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.user.client.ui.Label;
+import com.google.gwt.user.client.ui.RootPanel;
 
 import java.util.LinkedList;
 import java.util.Map;
@@ -160,6 +165,7 @@ public DesignToolbar() {
     // Gray out the Designer button and enable the blocks button
     toggleEditor(false);
     Ode.getInstance().getTopToolbar().updateFileMenuButtons(0);
+    toggleView();
   }
 
   public void bindUI() {
@@ -369,6 +375,22 @@ public void toggleEditor(boolean blocks) {
     setButtonEnabled(WIDGET_NAME_REMOVEFORM, notOnScreen1);
   }
 
+  public void toggleView() {
+    SwitchToBlocksEditorAction blockView = new SwitchToBlocksEditorAction();
+    SwitchToFormEditorAction designView = new SwitchToFormEditorAction();
+    RootPanel.get().addDomHandler(new KeyDownHandler() {
+      public void onKeyDown(KeyDownEvent event) {
+        if (event.isControlKeyDown() && event.isAltKeyDown()) {
+          if (currentView == DesignToolbar.View.FORM) {
+            blockView.execute();
+          } else if (currentView == DesignToolbar.View.BLOCKS) {
+            designView.execute();
+          }
+        }
+      }
+    }, KeyDownEvent.getType());
+  }
+
   public DesignProject getCurrentProject() {
     return currentProject;
   }

appinventor/appengine/src/com/google/appinventor/client/editor/youngandroid/actions/RefreshCompanionAction.java

@@ -6,13 +6,35 @@
 package com.google.appinventor.client.editor.youngandroid.actions;
 
 import com.google.appinventor.client.Ode;
+import com.google.gwt.dom.client.NativeEvent;
+import com.google.gwt.event.dom.client.KeyCodes;
 import com.google.gwt.user.client.Command;
+import com.google.gwt.user.client.Event;
 
 public class RefreshCompanionAction implements Command {
+
+  private RefreshCompanionAction() {
+    shortcutKeyHandler();
+  }
+
   @Override
   public void execute() {
     if (Ode.getInstance().okToConnect()) {
       Ode.getInstance().getTopToolbar().replUpdate();
     }
   }
+
+  private void shortcutKeyHandler() {
+    Event.addNativePreviewHandler(new Event.NativePreviewHandler() {
+      @Override
+      public void onPreviewNativeEvent(Event.NativePreviewEvent event) {
+        NativeEvent nativeEvent = event.getNativeEvent();
+        if (event.getTypeInt() == Event.ONKEYDOWN && nativeEvent.getKeyCode() == KeyCodes.KEY_R
+            && nativeEvent.getAltKey()) {
+          nativeEvent.preventDefault();
+          execute();
+        }
+      }
+    });
+  }
 }

appinventor/appengine/src/com/google/appinventor/client/editor/youngandroid/actions/ResetAction.java

@@ -7,13 +7,35 @@
 package com.google.appinventor.client.editor.youngandroid.actions;
 
 import com.google.appinventor.client.Ode;
+import com.google.gwt.dom.client.NativeEvent;
+import com.google.gwt.event.dom.client.KeyCodes;
 import com.google.gwt.user.client.Command;
+import com.google.gwt.user.client.Event;
 
 public class ResetAction implements Command {
+
+  private ResetAction() {
+    shortcutKeyHandler();
+  }
+
   @Override
   public void execute() {
     if (Ode.getInstance().okToConnect()) {
       Ode.getInstance().getTopToolbar().startRepl(false, false, false, false); // We are really stopping the repl here
     }
   }
+
+  private void shortcutKeyHandler() {
+    Event.addNativePreviewHandler(new Event.NativePreviewHandler() {
+      @Override
+      public void onPreviewNativeEvent(Event.NativePreviewEvent event) {
+        NativeEvent nativeEvent = event.getNativeEvent();
+        if (event.getTypeInt() == Event.ONKEYDOWN && nativeEvent.getKeyCode() == KeyCodes.KEY_R
+            && nativeEvent.getAltKey() && nativeEvent.getShiftKey()) {
+          execute();
+          nativeEvent.preventDefault();
+        }
+      }
+    });
+  }
 }

appinventor/appengine/src/com/google/appinventor/client/editor/youngandroid/palette/YoungAndroidPalettePanel.java

@@ -7,6 +7,7 @@
 package com.google.appinventor.client.editor.youngandroid.palette;
 
 import com.google.appinventor.client.ComponentsTranslation;
+import com.google.appinventor.client.Ode;
 import com.google.appinventor.client.editor.simple.SimpleComponentDatabase;
 import com.google.appinventor.client.editor.simple.components.MockComponent;
 import com.google.appinventor.client.editor.simple.components.utils.PropertiesUtil;
@@ -15,6 +16,7 @@
 import com.google.appinventor.client.editor.simple.palette.SimpleComponentDescriptor;
 import com.google.appinventor.client.editor.simple.palette.SimplePaletteItem;
 import com.google.appinventor.client.editor.simple.palette.SimplePalettePanel;
+import com.google.appinventor.client.editor.youngandroid.DesignToolbar;
 import com.google.appinventor.client.editor.youngandroid.YaFormEditor;
 import com.google.appinventor.client.explorer.project.ComponentDatabaseChangeListener;
 import com.google.appinventor.client.wizards.ComponentImportWizard;
@@ -28,9 +30,12 @@
 import com.google.gwt.event.dom.client.ChangeHandler;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.event.dom.client.FocusEvent;
+import com.google.gwt.event.dom.client.FocusHandler;
 import com.google.gwt.user.client.ui.Anchor;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.HasHorizontalAlignment;
+import com.google.gwt.user.client.ui.RootPanel;
 import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.TextBox;
 import com.google.gwt.event.dom.client.KeyPressEvent;
@@ -44,11 +49,6 @@
 import jsinterop.annotations.JsOverlay;
 import jsinterop.annotations.JsType;
 
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
 import java.util.*;
 
 import static com.google.appinventor.client.Ode.MESSAGES;
@@ -82,6 +82,7 @@ public class YoungAndroidPalettePanel extends Composite implements SimplePalette
   private final Map<String, String> translationMap;
 
   private final TextBox searchText; 
+  private boolean isSearchTextFocused = false;
   private final VerticalPanel searchResults;
   private JsArrayString arrayString = (JsArrayString) JsArrayString.createArray();
   private String lastSearch = "";
@@ -183,6 +184,13 @@ public YoungAndroidPalettePanel(YaFormEditor editor) {
       @Override
       public void onBlur(BlurEvent event) {
         doSearch();
+        isSearchTextFocused = false;
+      }
+    });
+    searchText.addFocusHandler(new FocusHandler() {
+      @Override
+      public void onFocus(FocusEvent event) {
+        isSearchTextFocused = true;
       }
     });
     searchText.addChangeHandler(new ChangeHandler() {
@@ -192,6 +200,25 @@ public void onChange(ChangeEvent event) {
       }
     });
 
+    /* User presses the slash key, the search text box is focused */
+    RootPanel.get().addDomHandler(new KeyDownHandler() {
+      @Override
+      public void onKeyDown(KeyDownEvent event) {
+        DesignToolbar designToolbar = Ode.getInstance().getDesignToolbar();
+        if (designToolbar.currentView == DesignToolbar.View.FORM) {
+          if (event.getNativeKeyCode() == 191 && !isSearchTextFocused) {
+            {
+              event.preventDefault();
+              searchText.setFocus(true);
+              isSearchTextFocused = true;
+            }
+          }
+        } else {
+          isSearchTextFocused = false;
+        }
+      }
+    }, KeyDownEvent.getType());
+
     panel.setSpacing(3);
     panel.add(searchText);
     panel.setWidth("100%");

appinventor/appengine/src/com/google/appinventor/client/explorer/SourceStructureExplorer.java

@@ -130,6 +130,9 @@ public void onKeyDown(KeyDownEvent event) {
         if (keyCode == KeyCodes.KEY_DELETE || keyCode == KeyCodes.KEY_BACKSPACE) {
           event.preventDefault();
           deleteItemFromTree();
+        } else if (event.isAltKeyDown() && keyCode == KeyCodes.KEY_N) {
+          event.preventDefault();
+          renameItem();
         }
       }
     });
@@ -148,14 +151,7 @@ public void onKeyDown(KeyDownEvent event) {
     renameButton.addClickHandler(new ClickHandler() {
       @Override
       public void onClick(ClickEvent event) {
-        TreeItem treeItem = tree.getSelectedItem();
-        if (treeItem != null) {
-          Object userObject = treeItem.getUserObject();
-          if (userObject instanceof SourceStructureExplorerItem) {
-            SourceStructureExplorerItem item = (SourceStructureExplorerItem) userObject;
-            item.rename();
-          }
-        }
+        renameItem();
       }
     });
     buttonPanel.add(renameButton);
@@ -195,6 +191,17 @@ private void deleteItemFromTree() {
     }
   }
 
+  private void renameItem() {
+    TreeItem treeItem = tree.getSelectedItem();
+    if (treeItem != null) {
+      Object userObject = treeItem.getUserObject();
+      if (userObject instanceof SourceStructureExplorerItem) {
+        SourceStructureExplorerItem item = (SourceStructureExplorerItem) userObject;
+        item.rename();
+      }
+    }
+  }
+
   private void enableButtons(SourceStructureExplorerItem item) {
     renameButton.setEnabled(item.canRename());
     deleteButton.setEnabled(item.canDelete());

appinventor/appengine/src/com/google/appinventor/client/explorer/folder/ProjectFolder.java

@@ -16,6 +16,8 @@
 import com.google.appinventor.client.explorer.youngandroid.ProjectListItem;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.KeyCodes;
+import com.google.gwt.event.dom.client.KeyDownEvent;
 import com.google.gwt.i18n.client.DateTimeFormat;
 import com.google.gwt.json.client.JSONArray;
 import com.google.gwt.json.client.JSONObject;
@@ -27,6 +29,7 @@
 import com.google.gwt.user.client.ui.CheckBox;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.FlowPanel;
+import com.google.gwt.user.client.ui.FocusPanel;
 import com.google.gwt.user.client.ui.Label;
 
 import java.util.ArrayList;
@@ -64,6 +67,7 @@ interface ProjectFolderUiBinder extends UiBinder<FlowPanel, ProjectFolder> { }
   @UiField protected Label dateCreatedLabel;
   @UiField protected CheckBox checkBox;
   @UiField protected Icon expandButton;
+  @UiField protected FocusPanel expandbuttonFocusPanel;
 
   public ProjectFolder(String name, long dateCreated, long dateModified, ProjectFolder parent) {
     bindUI();
@@ -132,9 +136,19 @@ protected void toggleFolderSelection(ClickEvent e) {
     fireSelectionChangeEvent();
   }
 
-  @SuppressWarnings("unused")
-  @UiHandler("expandButton")
+  @UiHandler("expandbuttonFocusPanel")
   protected void toggleExpandedState(ClickEvent e) {
+    toggleState();
+  }
+
+  @UiHandler("expandbuttonFocusPanel")
+  protected void toggleExpandedState(KeyDownEvent e) {
+    if (e.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
+      toggleState();
+    }
+  }
+
+  private void toggleState() {
     setSelected(false);
     isExpanded = !isExpanded;
     if (isExpanded) {
@@ -153,9 +167,9 @@ protected void toggleExpandedState(ClickEvent e) {
   public void setSelected(boolean selected) {
     checkBox.setValue(selected);
     if (selected) {
-      container.addStyleName("ode-ProjectRowHighlighted");
+      container.addStyleName("ode-ProjectRow-Highlighted");
     } else {
-      container.removeStyleName("ode-ProjectRowHighlighted");
+      container.removeStyleName("ode-ProjectRow-Highlighted");
     }
   }
 

appinventor/appengine/src/com/google/appinventor/client/explorer/folder/ProjectFolder.ui.xml

@@ -12,11 +12,13 @@
   <g:FlowPanel styleName="ode-ProjectRowList">
     <g:FlowPanel ui:field="container" styleName="ode-ProjectRow">
       <g:CheckBox ui:field='checkBox' styleName='gwt-CheckBox'/>
-      <g:FlowPanel addStyleNames="ode-ProjectFieldSpan ode-ProjectNameLabel">
-        <ai:Icon icon='folder'/>
-        <ai:Icon ui:field='expandButton' icon='chevron_right'/>
-        <g:Label ui:field='nameLabel' styleName='gwt-Label ode-ProjectNameLabel'/>
-      </g:FlowPanel>
+      <g:FocusPanel ui:field='expandbuttonFocusPanel' styleName='ode-ExpandButtonFocusPanel'>
+        <g:FlowPanel addStyleNames="ode-ProjectFieldSpan ode-ProjectNameLabel">
+          <ai:Icon icon='folder'/>
+          <ai:Icon ui:field='expandButton' icon='chevron_right'/>
+          <g:Label ui:field='nameLabel' styleName='gwt-Label ode-ProjectNameLabel'/>
+        </g:FlowPanel>
+      </g:FocusPanel>
       <g:Label ui:field='dateModifiedLabel' styleName='gwt-Label ode-ProjectFieldLabel ode-ProjectListDate'/>
       <g:Label ui:field='dateCreatedLabel' styleName='gwt-Label  ode-ProjectFieldLabel ode-ProjectListDate'/>
     </g:FlowPanel>