Virtual Keyboard Shift Highlight fixed.

BUG=261415

Review URL: https://chromiumcodereview.appspot.com/23332022

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@220089 0039d316-1c4b-4281-b951-d872f2087c98

5 files changed, 26 insertions, 28 deletions

diff --git a/ui/keyboard/resources/elements/kb-keyboard.html b/ui/keyboard/resources/elements/kb-keyboard.html
index 623a847..58bc2af 100644
--- a/ui/keyboard/resources/elements/kb-keyboard.html
+++ b/ui/keyboard/resources/elements/kb-keyboard.html
@@ -183,17 +183,13 @@
       * Handles the state of the shift key.
       */
       keysetChanged: function() {
-        // TODO (rsadam): Generalize to avoid the need to hardcode upper. Add
-        // state attribute to shift key.
-        if (this.keyset == 'upper') {
-          // Deals with the edge case where caps was triggered by a long press.
-          // Do not want to highlight the shift key in this case.
-          if (!this.classList.contains('caps'))
-            this.classList.add('highlight');
-        } else {
-          this.classList.remove('highlight');
-          this.classList.remove('caps');
-        }
+        var keysetId = '#' + this.layout + '-' + this.keyset;
+        var keyset = this.querySelector(keysetId);
+
+        // Unlocks the keyboard if the current keyset is not lockable.
+        if (!keyset.getAttribute('lockable'))
+          this.classList.remove('locked');
+        
       },
 
       ready: function() {
@@ -347,15 +343,14 @@
           this.dblDetail_.clickCount++;
           if (this.dblDetail_.clickCount == 2) {
             this.keyset = this.dblDetail_.toKeyset;
-            var keysetId = '#' + this.layout + '-' + this.keyset
-            this.querySelector(keysetId).nextKeyset = this.dblTimer_.nextKeyset;
+            var keysetId = '#' + this.layout + '-' + this.keyset;
+            var keyset = this.querySelector(keysetId);
+            keyset.nextKeyset = this.dblTimer_.nextKeyset;
             clearTimeout(this.dblTimer_);
             
             // Checks if shift is capitalized.
-            if (this.keyset == 'upper') {
-              this.classList.remove('highlight');
-              this.classList.add('caps');
-            }
+            if (keyset.getAttribute('lockable'))
+              this.classList.add('locked');
 
             this.dblDetail_ = null;
           }
@@ -442,8 +437,8 @@
           this.querySelector('#' + this.layout + '-' + this.keyset).nextKeyset =
               detail.nextKeyset;
 
-          // Sets the caps class before removing active to prevent flicker.
-          this.classList.add('caps');
+          // Locks the keyset before removing active to prevent flicker.
+          this.classList.add('locked');
           // Makes last pressed key inactive if transit to a new keyset on long
           // press.
           this.lastPressedKey.classList.remove('active');
diff --git a/ui/keyboard/resources/layouts/dvorak.html b/ui/keyboard/resources/layouts/dvorak.html
index 2f90470..3c41ba3 100644
--- a/ui/keyboard/resources/layouts/dvorak.html
+++ b/ui/keyboard/resources/layouts/dvorak.html
@@ -9,7 +9,7 @@
 <link id="spacebar-row" rel="import" href="spacebar-row.html">
 
 <template>
-  <kb-keyset id="dvorak-upper">
+  <kb-keyset id="dvorak-upper" lockable="true">
     <kb-row>
       <kb-key class="tab dark" char="&#x0009;" align="left">tab</kb-key>
       <kb-key-sequence keys="&quot;,.PYFGCRL" superscripts="1234567890"></kb-key-sequence>
diff --git a/ui/keyboard/resources/layouts/qwerty.html b/ui/keyboard/resources/layouts/qwerty.html
index 0f19ebf..0ead791 100644
--- a/ui/keyboard/resources/layouts/qwerty.html
+++ b/ui/keyboard/resources/layouts/qwerty.html
@@ -9,7 +9,7 @@
 <link id="spacebar-row" rel="import" href="spacebar-row.html">
 
 <template>
-  <kb-keyset id="qwerty-upper">
+  <kb-keyset id="qwerty-upper" lockable="true">
     <kb-row>
       <kb-key class="tab dark" char="&#x0009;" align="left">tab</kb-key>
       <kb-key-sequence keys="QWERTYUIOP" superscripts="1234567890"></kb-key-sequence>
diff --git a/ui/keyboard/resources/layouts/webui_qwerty.html b/ui/keyboard/resources/layouts/webui_qwerty.html
index 9abd2e6..160c6f5 100644
--- a/ui/keyboard/resources/layouts/webui_qwerty.html
+++ b/ui/keyboard/resources/layouts/webui_qwerty.html
@@ -5,7 +5,7 @@
   -->
 
 <template>
-  <kb-keyset id="qwerty-upper">
+  <kb-keyset id="qwerty-upper" lockable="true">
     <kb-row class="top">
       <kb-key>Q</kb-key><kb-key>W</kb-key><kb-key>E</kb-key><kb-key>R</kb-key>
       <kb-key>T</kb-key><kb-key>Y</kb-key><kb-key>U</kb-key>
diff --git a/ui/keyboard/resources/main.css b/ui/keyboard/resources/main.css
index 0799ea4..afebccc 100644
--- a/ui/keyboard/resources/main.css
+++ b/ui/keyboard/resources/main.css
@@ -68,6 +68,14 @@ kb-key::x-superscript[inverted] {
   color: #ffffff;
 }
 
+/**
+* Controls whether the shift key should be highlighted or not.
+* Only highlights if we are in a lockable keyboard which is not locked.
+*/
+kb-keyboard:not(.locked) kb-keyset[lockable] kb-shift-key {
+  color: lightblue;
+}
+
 kb-shift-key.dark,
 kb-layout-selector.dark,
 kb-key.dark {
@@ -87,7 +95,7 @@ kb-altkey::x-key {
   text-align: center;
 }
 
-.caps kb-shift-key,
+.locked kb-shift-key,
 .active {
   background-color: #848490 !important;
   border-top: 2px solid #A9A9AF !important;
@@ -157,11 +165,6 @@ kb-altkey::x-key {
   background-image: url('images/microphone-green.svg');
 }
 
-/* Highlight for shift key when pressed. */
-.highlight kb-shift-key {
-  color: lightblue;
-}
-
 .layout-selector {
   background-image: url('images/keyboard.svg');
 }
\ No newline at end of file