Keyboard hold shift

apps/keyboard/js/keyboard/active_targets_manager.js

@@ -33,6 +33,7 @@ ActiveTargetsManager.prototype.ontargetmovedin = null;
 ActiveTargetsManager.prototype.ontargetcommitted = null;
 ActiveTargetsManager.prototype.ontargetcancelled = null;
 ActiveTargetsManager.prototype.ontargetdoubletapped = null;
+ActiveTargetsManager.prototype.onnewtargetwillactivate = null;
 
 // Show accent char menu (if there is one) or do other stuff
 // after LONG_PRESS_TIMEOUT
@@ -99,10 +100,11 @@ ActiveTargetsManager.prototype._handlePressStart = function(press, id) {
     return;
   }
 
-  // All targets before the new touch need to be committed,
-  // according to UX requirement.
+  // Notify current targets about the new touch.
   this.activeTargets.forEach(function(target, id) {
-    this._handlePressEnd(press, id);
+    if (typeof this.onnewtargetwillactivate === 'function') {
+      this.onnewtargetwillactivate(target);
+    }
   }, this);
 
   var target = press.target;

apps/keyboard/js/keyboard/target_handlers.js

@@ -79,6 +79,13 @@ DefaultTargetHandler.prototype.doubleTap = function() {
   this.app.console.log('DefaultTargetHandler.doubleTap()');
   this.commit();
 };
+DefaultTargetHandler.prototype.newTargetActivate = function() {
+  // According to UX requirement, the current target need to be committed when
+  // there is a new press. We will have to commit ourselves here.
+  this.commit();
+  // Ignore addition calls on commit().
+  this.ignoreCommitActions = true;
+};
 
 var NullTargetHandler = function(target, app) {
   DefaultTargetHandler.apply(this, arguments);
@@ -109,6 +116,12 @@ var CandidateSelectionTargetHandler = function(target, app) {
 CandidateSelectionTargetHandler.prototype =
   Object.create(DefaultTargetHandler.prototype);
 CandidateSelectionTargetHandler.prototype.commit = function() {
+  if (this.ignoreCommitActions) {
+    this.app.console.log(
+      'CandidateSelectionTargetHandler.commit()::return early');
+    return;
+  }
+
   this.app.candidatePanelManager.hideFullPanel();
 
   // We use the target's data instead of target.text because the
@@ -174,6 +187,8 @@ BackspaceTargetHandler.prototype.moveIn = function() {
 
 BackspaceTargetHandler.prototype.commit = function() {
   if (this.ignoreCommitActions) {
+    this.app.console.log(
+      'BackspaceTargetHandler.commit()::return early');
     return;
   }
 
@@ -198,6 +213,12 @@ var CompositeTargetHandler = function(target, app) {
 CompositeTargetHandler.prototype =
   Object.create(DefaultTargetHandler.prototype);
 CompositeTargetHandler.prototype.commit = function() {
+  if (this.ignoreCommitActions) {
+    this.app.console.log(
+      'CompositeTargetHandler.commit()::return early');
+    return;
+  }
+
   // Keys with this attribute set send more than a single character
   // Like ".com" or "2nd" or (in Catalan) "l·l".
   var compositeString = this.target.compositeKey;
@@ -215,6 +236,12 @@ var PageSwitchingTargetHandler = function(target, app) {
 PageSwitchingTargetHandler.prototype =
   Object.create(DefaultTargetHandler.prototype);
 PageSwitchingTargetHandler.prototype.commit = function() {
+  if (this.ignoreCommitActions) {
+    this.app.console.log(
+      'PageSwitchingTargetHandler.commit()::return early');
+    return;
+  }
+
   var page = this.target.targetPage;
 
   this.app.setLayoutPage(page);
@@ -229,13 +256,38 @@ PageSwitchingTargetHandler.prototype.commit = function() {
 
 var CapsLockTargetHandler = function(target, app) {
   DefaultTargetHandler.apply(this, arguments);
+
+  this.isPreviouslyUpperCase = undefined;
 };
 CapsLockTargetHandler.prototype = Object.create(DefaultTargetHandler.prototype);
-CapsLockTargetHandler.prototype.commit = function() {
+CapsLockTargetHandler.prototype.isNewTargetActivated = false;
+CapsLockTargetHandler.prototype.activate = function() {
+  this.isPreviouslyUpperCase = this.app.upperCaseStateManager.isUpperCase;
+
+  // Switch to upperCaseLocked state so all combo presses will be upper caps
   this.app.upperCaseStateManager.switchUpperCaseState({
-    isUpperCase: !this.app.upperCaseStateManager.isUpperCase,
-    isUpperCaseLocked: false
+    isUpperCaseLocked: true
   });
+
+  this.app.feedbackManager.triggerFeedback(this.target);
+  this.app.visualHighlightManager.show(this.target);
+};
+CapsLockTargetHandler.prototype.commit = function() {
+  if (this.isNewTargetActivated) {
+    // If the user have ever tap any other keys (i.e. combo keys),
+    // we should go back to lower case regardless.
+    this.app.upperCaseStateManager.switchUpperCaseState({
+      isUpperCase: false,
+      isUpperCaseLocked: false
+    });
+  } else {
+    // Depend on the previous upper case state, single tap should allow user
+    // switch between upper case and lower case.
+    this.app.upperCaseStateManager.switchUpperCaseState({
+      isUpperCase: !this.isPreviouslyUpperCase,
+      isUpperCaseLocked: false
+    });
+  }
   this.app.visualHighlightManager.hide(this.target);
 };
 CapsLockTargetHandler.prototype.doubleTap = function() {
@@ -244,6 +296,9 @@ CapsLockTargetHandler.prototype.doubleTap = function() {
   });
   this.app.visualHighlightManager.hide(this.target);
 };
+CapsLockTargetHandler.prototype.newTargetActivate = function() {
+  this.isNewTargetActivated = true;
+};
 
 var SwitchKeyboardTargetHandler = function(target, app) {
   DefaultTargetHandler.apply(this, arguments);
@@ -273,6 +328,12 @@ var ToggleCandidatePanelTargetHandler = function(target, app) {
 ToggleCandidatePanelTargetHandler.prototype =
   Object.create(DefaultTargetHandler.prototype);
 ToggleCandidatePanelTargetHandler.prototype.commit = function() {
+  if (this.ignoreCommitActions) {
+    this.app.console.log(
+      'ToggleCandidatePanelTargetHandler.commit()::return early');
+    return;
+  }
+
   this.app.candidatePanelManager.toggleFullPanel();
 
   this.app.visualHighlightManager.hide(this.target);
@@ -284,6 +345,12 @@ var DismissSuggestionsTargetHandler = function(target, app) {
 DismissSuggestionsTargetHandler.prototype =
   Object.create(DefaultTargetHandler.prototype);
 DismissSuggestionsTargetHandler.prototype.commit = function() {
+  if (this.ignoreCommitActions) {
+    this.app.console.log(
+      'DismissSuggestionsTargetHandler.commit()::return early');
+    return;
+  }
+
   var engine = this.app.inputMethodManager.currentIMEngine;
   if (typeof engine.dismissSuggestions === 'function') {
     engine.dismissSuggestions();

apps/keyboard/js/keyboard/target_handlers_manager.js

@@ -39,6 +39,8 @@ TargetHandlersManager.prototype.start = function() {
     this._callTargetAction.bind(this, 'cancel', false, true);
   activeTargetsManager.ontargetdoubletapped =
     this._callTargetAction.bind(this, 'doubleTap', false, true);
+  activeTargetsManager.onnewtargetwillactivate =
+    this._callTargetAction.bind(this, 'newTargetActivate', false, false);
   activeTargetsManager.start();
 };
 
@@ -61,12 +63,15 @@ TargetHandlersManager.prototype.stop = function() {
 // "longpress" is noticeably an optional step during the life cycle and does
 // not start or end the handler/active target, so it was not mentioned in the
 // above list.
+// "newTargetActivate" is similar to "longpress",  it is an optional step too,
+// so it was not mentioned in the above list. newTargetActivate is called on
+// the current target(s) when there is a new target is about to be activated.
 //
 // Please note that since we are using target (an abstract key object associated
 // with one DOM element) as the identifier of handlers, we do not assign new
-// handler if there are two touches on the same element. Currently that cannot
-// happen because of what done in bug 985855, however in the future that will
-// change (and these handlers needs to) to adopt bug 985853 (Combo key).
+// handler if there are two touches on the same element. If two touches happens
+// on one (maybe quite big) button, the same method on the same handler will
+// be called again with a console warning.
 TargetHandlersManager.prototype._callTargetAction = function(action,
                                                              setHandler,
                                                              deleteHandler,

apps/keyboard/style/keyboard.css

@@ -253,12 +253,12 @@ button::-moz-focus-inner {
 }
 
 /* Caps lock case */
-.keyboard-key.special-key.kbr-key-hold > .visual-wrapper > .key-element {
+.keyboard-key.special-key.kbr-key-hold:not(.highlighted) > .visual-wrapper > .key-element {
   color: #00caf2;
 }
 
 /* The underline for caps lock */
-.keyboard-key.kbr-key-hold > .visual-wrapper {
+.keyboard-key.kbr-key-hold:not(.highlighted) > .visual-wrapper {
   box-shadow: 0 0.4rem 0 #00caf2;
 }
 
@@ -303,7 +303,7 @@ and displays the list of alternatives. */
   overflow: hidden;
   text-align: left;
   /* Special hack to make the keys in the menu flow upwards. */
-  transform: rotateX(180deg); 
+  transform: rotateX(180deg);
   margin-left: -1.0rem; /* because the last child is wider than others */
 }