Keyboard Navigation

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

@@ -20,6 +20,7 @@
 import com.google.appinventor.client.editor.EditorManager;
 import com.google.appinventor.client.editor.FileEditor;
 import com.google.appinventor.client.editor.ProjectEditor;
+import com.google.appinventor.client.editor.simple.components.MockComponent;
 import com.google.appinventor.client.editor.simple.palette.DropTargetProvider;
 import com.google.appinventor.client.editor.youngandroid.BlocklyPanel;
 import com.google.appinventor.client.editor.youngandroid.DesignToolbar;
@@ -82,7 +83,11 @@
 import com.google.gwt.core.client.EntryPoint;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.core.client.RunAsyncCallback;
+import com.google.gwt.dom.client.NativeEvent;
+import com.google.gwt.event.dom.client.BlurHandler;
 import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.event.dom.client.KeyCodes;
+import com.google.gwt.event.dom.client.KeyDownEvent;
 import com.google.gwt.event.dom.client.MouseWheelEvent;
 import com.google.gwt.event.dom.client.MouseWheelHandler;
 import com.google.gwt.event.logical.shared.ValueChangeEvent;
@@ -94,6 +99,7 @@
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.user.client.Command;
 import com.google.gwt.user.client.Event;
+import com.google.gwt.user.client.Event.NativePreviewEvent;
 import com.google.gwt.user.client.History;
 import com.google.gwt.user.client.Timer;
 import com.google.gwt.user.client.Window;
@@ -117,6 +123,8 @@
 import com.google.gwt.user.client.ui.RootPanel;
 import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.Widget;
+import com.google.gwt.widgetideas.client.event.KeyDownHandler;
+
 import java.util.Random;
 import java.util.logging.Level;
 import java.util.logging.Logger;
@@ -1609,6 +1617,15 @@ public DialogBox createEmptyTrashDialog(boolean showDialog) {
       dialogBox.show();
     }
 
+    Event.addNativePreviewHandler(new Event.NativePreviewHandler() {
+      @Override
+      public void onPreviewNativeEvent(Event.NativePreviewEvent event) {
+        if (event.getTypeInt() == Event.ONKEYDOWN && dialogBox.isShowing()) {
+          dialogBox.hide();
+        }
+      }
+    });
+
     return dialogBox;
   }
 

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();
 
@@ -725,6 +725,10 @@ public interface OdeMessages extends Messages, AutogeneratedOdeMessages {
   @Description("Redisplay the Splash Screen")
   String showSplashMenuItem();
 
+  @DefaultMessage("Show Keyboard Shortcuts (Alt + ?)")
+  @Description("Display the Shortcuts dialog")
+  String showShortcuts();
+
   @DefaultMessage("Library")
   @Description("Name of Library link")
   String libraryMenuItem();
@@ -1254,7 +1258,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();
 
@@ -5119,6 +5123,39 @@ String newerVersionComponentException(String componentType, int srcCompVersion,
   @Description("")
   String MaximumRangeMethods();
 
+  @DefaultMessage(
+    "<table border='1' cellpadding='8' cellspacing='0'>" +
+    "<thead>" +
+    "<tr>" +
+    "<th>Action</th>" +
+    "<th>Key Combination</th>" +
+    "</tr>" +
+    "</thead>" +
+    "<tbody>" +
+    "<tr><td>Focus Component search box</td><td>/</td></tr>" +
+    "<tr><td>Focus Components tree</td><td>T</td></tr>" +
+    "<tr><td>Focus Viewer</td><td>V</td></tr>" +
+    "<tr><td>Focus Properties Panel</td><td>P</td></tr>" +
+    "<tr><td>Switch between Designer and Block editor</td><td>Ctrl + Alt</td></tr>" +
+    "<tr><td>Rename Component</td><td>Alt + N</td></tr>" +
+    "<tr><td>Reset Connection</td><td>Alt + Shift + R</td></tr>" +
+    "<tr><td>Refresh Companion Screen</td><td>Alt + R</td></tr>" +
+    "<tr><td>Open/Close Backpack</td><td>Alt + B</td></tr>" +
+    "<tr><td>Switch between Inline and External Inputs</td><td>Alt + I</td></tr>" +
+    "<tr><td>Add comment to a block</td><td>Alt + K</td></tr>" +
+    "<tr><td>Expand/Collapse block</td><td>Alt + O</td></tr>" +
+    "<tr><td>Navigate up the blocks</td><td>Alt + S</td></tr>" +
+    "<tr><td>Navigate down the blocks</td><td>Alt + W</td></tr>" +
+    "<tr><td>Zoom in</td><td>Alt + +</td></tr>" +
+    "<tr><td>Zoom out</td><td>Alt + -</td></tr>" +
+    "<tr><td>Re-center</td><td>Alt + G</td></tr>" +
+    "<tr><td>Navigate Components</td><td>↑/↓</td></tr>" +
+    "<tr><td>Open this dialog</td><td>Alt + ?</td></tr>" +
+    "</tbody>" +
+    "</table>")
+  @Description("")
+  String KeyBoardShortcuts();
+
   // =========== ListPicker
   @DefaultMessage("ItemTextColor")
   @Description("")

appinventor/appengine/src/com/google/appinventor/client/TopToolbar.ui.xml

@@ -173,6 +173,9 @@
       <ai:DropDownItem name="ShowSplash" caption="{messages.showSplashMenuItem}">
         <actions:ShowSplashAction/>
       </ai:DropDownItem>
+      <ai:DropDownItem name="ShowShortcuts" caption="{messages.showShortcuts}">
+        <actions:ShowShortcutsAction/>
+      </ai:DropDownItem>
     </ai:DropDownButton>
 
     <!-- Admin Menu -->

appinventor/appengine/src/com/google/appinventor/client/actions/ShowShortcutsAction.java

@@ -0,0 +1,60 @@
+// -*- mode: java; c-basic-offset: 2; -*-
+// Copyright 2009-2011 Google, All Rights reserved
+// Copyright 2011-2023 MIT, All rights reserved
+// Released under the Apache License, Version 2.0
+// http://www.apache.org/licenses/LICENSE-2.0
+
+package com.google.appinventor.client.actions;
+
+import static com.google.appinventor.client.Ode.MESSAGES;
+
+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;
+import com.google.gwt.user.client.ui.DialogBox;
+import com.google.gwt.user.client.ui.HTML;
+import com.google.gwt.user.client.ui.VerticalPanel;
+
+public class ShowShortcutsAction implements Command {
+
+    private DialogBox db;
+
+    public ShowShortcutsAction() {
+        db = new DialogBox(true, false);
+        db.setText("Keyboard Shortcuts");
+        db.setStyleName("ode-DialogBox");
+        db.setHeight("200px");
+        db.setWidth("400px");
+        db.setGlassEnabled(true);
+        db.setAnimationEnabled(true);
+
+        shortcutKeyHandler();
+    }
+
+    @Override
+    public void execute() {
+        VerticalPanel DialogBoxContents = new VerticalPanel();
+        HTML message = new HTML(MESSAGES.KeyBoardShortcuts());
+        DialogBoxContents.add(message);
+        db.setWidget(DialogBoxContents);
+        db.center();
+        db.show();
+    }
+
+    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.getAltKey() && nativeEvent.getKeyCode() == 191 && !db.isShowing()) {
+            nativeEvent.preventDefault();
+            execute();
+          } else if (event.getTypeInt() == Event.ONKEYDOWN && db.isShowing()) {
+            nativeEvent.preventDefault();
+            db.hide();
+          }
+        } 
+      });
+    }
+}

appinventor/appengine/src/com/google/appinventor/client/editor/simple/SimpleVisibleComponentsPanel.java

@@ -20,6 +20,7 @@
 
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.user.client.ui.CheckBox;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.Widget;
@@ -42,6 +43,7 @@ interface SimpleVisibleComponentsPanelUiBinder extends UiBinder<VerticalPanel, S
   @UiField(provided = true) protected ListBox listboxPhonePreview; // A ListBox for Holo/Material/iOS preview styles
   private final int[][] drop_lst = { {320, 505}, {480, 675}, {768, 1024} };
   private final String[] drop_lst_phone_preview = { "Android Material", "Android Holo", "iOS" };
+  @UiField protected CheckBox HiddenComponentsCheckbox;
 
   // Corresponding panel for non-visible components (because we allow users to drop
   // non-visible components onto the form, but we show them in the non-visible
@@ -218,6 +220,10 @@ public void enablePhonePreviewCheckBox(boolean enable){
     listboxPhonePreview.setEnabled(enable);
   }
 
+  public void focusCheckbox() {
+    HiddenComponentsCheckbox.setFocus(true);
+  }
+
   /**
    * Associates a Simple form component with this panel.
    *

appinventor/appengine/src/com/google/appinventor/client/editor/simple/SimpleVisibleComponentsPanel.ui.xml

@@ -11,7 +11,7 @@
   <ui:with field="messages" type="com.google.appinventor.client.OdeMessages"/>
   <g:VerticalPanel styleName="ode-SimpleFormDesigner">
     <g:VerticalPanel ui:field="phoneScreen" stylePrimaryName="ode-SimpleFormDesigner">
-      <ed:HiddenComponentsCheckbox text="{messages.showHiddenComponentsCheckbox}"/>
+      <ed:HiddenComponentsCheckbox ui:field="HiddenComponentsCheckbox" text="{messages.showHiddenComponentsCheckbox}"/>
       <g:ListBox ui:field="listboxPhoneTablet">
         <g:item value="0">
           <ui:text from="{messages.previewPhoneSize}"/>

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockComponent.java

@@ -39,10 +39,12 @@
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.ClickHandler;
 import com.google.gwt.event.dom.client.DomEvent;
+import com.google.gwt.event.dom.client.FocusEvent;
+import com.google.gwt.event.dom.client.FocusHandler;
 import com.google.gwt.event.dom.client.HasAllTouchHandlers;
 import com.google.gwt.event.dom.client.KeyCodes;
-import com.google.gwt.event.dom.client.KeyUpEvent;
-import com.google.gwt.event.dom.client.KeyUpHandler;
+import com.google.gwt.event.dom.client.KeyDownEvent;
+import com.google.gwt.event.dom.client.KeyDownHandler;
 import com.google.gwt.event.dom.client.TouchCancelHandler;
 import com.google.gwt.event.dom.client.TouchEndHandler;
 import com.google.gwt.event.dom.client.TouchMoveHandler;
@@ -110,22 +112,25 @@ private class RenameDialog extends DialogBox {
     private final LabeledTextBox newNameTextBox;
 
     RenameDialog(String oldName) {
-      super(false, true);
-
+      super(false, false);
+      setGlassEnabled(true);
       setStylePrimaryName("ode-DialogBox");
       setText(MESSAGES.renameTitle());
       VerticalPanel contentPanel = new VerticalPanel();
 
+      Button topInvisible = new Button();
+      contentPanel.add(topInvisible);
+
       LabeledTextBox oldNameTextBox = new LabeledTextBox(MESSAGES.oldNameLabel());
       oldNameTextBox.setText(getName());
       oldNameTextBox.setEnabled(false);
       contentPanel.add(oldNameTextBox);
 
       newNameTextBox = new LabeledTextBox(MESSAGES.newNameLabel());
       newNameTextBox.setText(oldName);
-      newNameTextBox.getTextBox().addKeyUpHandler(new KeyUpHandler() {
+      newNameTextBox.getTextBox().addKeyDownHandler(new KeyDownHandler() {
         @Override
-        public void onKeyUp(KeyUpEvent event) {
+        public void onKeyDown(KeyDownEvent event) {
           int keyCode = event.getNativeKeyCode();
           if (keyCode == KeyCodes.KEY_ENTER) {
             handleOkClick();
@@ -150,9 +155,26 @@ public void onClick(ClickEvent event) {
           handleOkClick();
         }
       });
+
+      Button bottomInvisible = new Button();
+      bottomInvisible.setStyleName("FocusTrap");
+      topInvisible.setStyleName("FocusTrap");
+      topInvisible.addFocusHandler(new FocusHandler() {
+        @Override
+        public void onFocus(FocusEvent event) {
+          okButton.setFocus(true); 
+        }
+      });
+      bottomInvisible.addFocusHandler(new FocusHandler() {
+        public void onFocus(FocusEvent event) {
+          newNameTextBox.setFocus(true); 
+        }
+      });
+
       HorizontalPanel buttonPanel = new HorizontalPanel();
       buttonPanel.add(cancelButton);
       buttonPanel.add(okButton);
+      buttonPanel.add(bottomInvisible);
       buttonPanel.setSize("100%", "24px");
       contentPanel.add(buttonPanel);
       contentPanel.setSize("320px", "100%");

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockVisibleComponent.java

@@ -10,6 +10,7 @@
 
 import com.google.appinventor.client.ComponentsTranslation;
 import com.google.appinventor.client.editor.simple.SimpleEditor;
+import com.google.appinventor.client.editor.simple.SimpleNonVisibleComponentsPanel;
 import com.google.appinventor.client.editor.youngandroid.properties.YoungAndroidLengthPropertyEditor;
 import com.google.appinventor.client.widgets.properties.TextPropertyEditor;
 import com.google.appinventor.components.common.ComponentConstants;
@@ -158,4 +159,9 @@ public void onPropertyChange(String propertyName, String newValue) {
       refreshForm();
     }
   }
-}
+
+  public SimpleNonVisibleComponentsPanel getNonVisibleComponentsPanel() {
+    return editor.getNonVisibleComponentsPanel();
+  }
+
+}

appinventor/appengine/src/com/google/appinventor/client/editor/simple/palette/SimplePaletteItem.java

@@ -6,12 +6,24 @@
 
 package com.google.appinventor.client.editor.simple.palette;
 
+import java.util.List;
+
 import com.google.appinventor.client.ComponentsTranslation;
 import com.google.appinventor.client.editor.simple.components.MockComponent;
 import com.google.appinventor.client.editor.simple.components.MockComponentsUtil;
+import com.google.appinventor.client.editor.simple.components.MockContainer;
+import com.google.appinventor.client.editor.simple.components.MockForm;
+import com.google.appinventor.client.editor.simple.components.MockVisibleComponent;
 import com.google.appinventor.client.widgets.dnd.DragSourcePanel;
 import com.google.appinventor.client.widgets.dnd.DragSourceSupport;
 import com.google.appinventor.client.widgets.dnd.DropTarget;
+import com.google.gwt.event.dom.client.DoubleClickEvent;
+import com.google.gwt.event.dom.client.DoubleClickHandler;
+import com.google.gwt.event.dom.client.FocusEvent;
+import com.google.gwt.event.dom.client.FocusHandler;
+import com.google.gwt.event.dom.client.KeyCodes;
+import com.google.gwt.event.dom.client.KeyDownEvent;
+import com.google.gwt.event.dom.client.KeyDownHandler;
 import com.google.gwt.event.dom.client.MouseDownEvent;
 import com.google.gwt.event.dom.client.MouseDownHandler;
 import com.google.gwt.event.dom.client.TouchStartEvent;
@@ -114,6 +126,40 @@ public void onTouchStart(TouchStartEvent event) {
         select(getWidget());
       }
     });
+    addFocusHandler(new FocusHandler() {
+      @Override
+      public void onFocus(FocusEvent event) {
+          select(getWidget());
+      }
+    });
+    addKeyDownHandler(new KeyDownHandler() {
+      @Override
+      public void onKeyDown (KeyDownEvent event) {
+        if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
+          addComponent();
+        }
+      }
+    });
+    addDoubleClickHandler(new DoubleClickHandler() {
+      public void onDoubleClick (DoubleClickEvent event) {
+        addComponent();
+      }
+    });
+  }
+
+  private void addComponent() {
+    MockComponent component = createMockComponent();
+    MockVisibleComponent mockVisibleComponent = (MockVisibleComponent) dropTargetProvider.getDropTargets()[0];
+    MockForm form = mockVisibleComponent.getForm();
+    MockComponent selectedComponent = form.getLastSelectedComponent();
+    if (selectedComponent instanceof MockContainer && ((MockContainer) selectedComponent).willAcceptComponentType(component.getType()) && component.isVisibleComponent()) {
+      ((MockContainer) selectedComponent).addComponent(component);
+    } else if (form.willAcceptComponentType(component.getType()) && component.isVisibleComponent()) {
+      form.addComponent(component);
+    } else if (form.willAcceptComponentType(component.getType()) && !component.isVisibleComponent()) {
+      form.addComponent(component);
+      form.getNonVisibleComponentsPanel().addComponent(component);
+    }
   }
 
   /**