Fix the UK keyboard overlay Enter key shape

chrome/browser/resources/chromeos/keyboard_overlay.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 <include src="keyboard_overlay_data.js">
 
 var BASE_KEYBOARD = {
   top: 0,
   left: 0,
   width: 1237,
@@ skipping 139 matching lines @@
   'f3' : 'keyboardOverlayF3',
   'f4' : 'keyboardOverlayF4',
   'f5' : 'keyboardOverlayF5',
   'f6' : 'keyboardOverlayF6',
   'f7' : 'keyboardOverlayF7',
   'f8' : 'keyboardOverlayF8',
   'f9' : 'keyboardOverlayF9',
   'f10' : 'keyboardOverlayF10',
 };
 
+var COMPOUND_ENTER_KEY_DATA = [815, 107, 60, 120];
+var COMPOUND_ENTER_KEY_CLIP_PATH =
+  'polygon(0% 0%, 100% 0%, 100% 100%, 28% 100%, 28% 47%, 0% 47%)';
+var COMPOUND_ENTER_KEY_OVERLAY_DIV_CLIP_PATH =
+  'polygon(12% 0%, 100% 0%, 100% 97%, 12% 97%)';
+
 var IME_ID_PREFIX = '_comp_ime_';
 var EXTENSION_ID_LEN = 32;
 
 var keyboardOverlayId = 'en_US';
 var identifierMap = {};
 
 /**
  * True after at least one keydown event has been received.
  */
 var gotKeyDown = false;
@@ skipping 369 matching lines @@
     var keyData = keyboardGlyphData.keys[identifier];
     var classes = getKeyClasses(identifier, modifiers, normModifiers);
     var keyLabel = getKeyLabel(keyData, normModifiers);
     var shortcutId = shortcutData[getAction(keyLabel, normModifiers)];
     if (modifiers.length == 0 &&
         (identifier == '2A' || identifier == '36')) {
       // Either the right or left shift keys are used to disable the caps lock
       // if it was enabled. To fix crbug.com/453623.
       shortcutId = 'keyboardOverlayDisableCapsLock';
     }
+
+    classes.push('keyboard-overlay-key-background');
+
     if (shortcutId) {
       classes.push('is-shortcut');
+      classes.push('keyboard-overlay-shortcut-key-background');
     }
 
     var key = $(keyId(identifier, i));
     key.className = classes.join(' ');
 
     if (!keyData) {
       continue;
     }
 
     var keyText = $(keyTextId(identifier, i));
     var keyTextValue = getKeyTextValue(keyData);
     if (keyTextValue) {
        keyText.style.visibility = 'visible';
     } else {
        keyText.style.visibility = 'hidden';
     }
     keyText.textContent = keyTextValue;
 
     var shortcutText = $(shortcutTextId(identifier, i));
     if (shortcutId) {
       shortcutText.style.visibility = 'visible';
       shortcutText.textContent = loadTimeData.getString(shortcutId);
     } else {
       shortcutText.style.visibility = 'hidden';
     }
 
+    if (layout[i][1] == 'COMPOUND_ENTER_KEY') {
+      var overlayDivClasses =
+        getKeyClasses(identifier, modifiers, normModifiers);
+      if (shortcutId)
+        overlayDivClasses.push('is-shortcut');
+      $(keyId(identifier, i) + '-sub').className = overlayDivClasses.join(' ');
+    }
+
     var format = keyboardGlyphData.keys[layout[i][0]].format;
     if (format) {
       if (format == 'left' || format == 'right') {
         shortcutText.style.textAlign = format;
         keyText.style.textAlign = format;
       }
     }
   }
 }
 
@@ skipping 84 matching lines @@
       loadTimeData.getString('keyboardOverlayLearnMoreURL');
   learnMoreLinkAnchor.textContent =
       loadTimeData.getString('keyboardOverlayLearnMore');
   learnMoreLinkText.appendChild(learnMoreLinkAnchor);
   instructions.appendChild(learnMoreLinkText);
   keyboard.appendChild(instructions);
 
   for (var i = 0; i < layout.length; i++) {
     var array = layout[i];
     var identifier = remapIdentifier(array[0]);
-    var x = Math.round((array[1] + offsetX) * multiplier);
-    var y = Math.round((array[2] + offsetY) * multiplier);
-    var w = Math.round((array[3] - keyMargin) * multiplier);
-    var h = Math.round((array[4] - keyMargin) * multiplier);
+
+    var keyDataX = 0;
+    var keyDataY = 0;
+    var keyDataW = 0;
+    var keyDataH = 0;
+    var isCompoundEnterKey = false;
+    if (array[1] == 'COMPOUND_ENTER_KEY') {
+      keyDataX = COMPOUND_ENTER_KEY_DATA[0];
+      keyDataY = COMPOUND_ENTER_KEY_DATA[1];
+      keyDataW = COMPOUND_ENTER_KEY_DATA[2];
+      keyDataH = COMPOUND_ENTER_KEY_DATA[3];
+      isCompoundEnterKey = true;
+    } else {
+      keyDataX = array[1];
+      keyDataY = array[2];
+      keyDataW = array[3];
+      keyDataH = array[4];
+    }
+
+    var x = Math.round((keyDataX + offsetX) * multiplier);
+    var y = Math.round((keyDataY + offsetY) * multiplier);
+    var w = Math.round((keyDataW - keyMargin) * multiplier);
+    var h = Math.round((keyDataH - keyMargin) * multiplier);
 
     var key = document.createElement('div');
     key.id = keyId(identifier, i);
     key.className = 'keyboard-overlay-key';
     key.style.left = x + 'px';
     key.style.top = y + 'px';
     key.style.width = w + 'px';
     key.style.height = h + 'px';
 
     var keyText = document.createElement('div');
     keyText.id = keyTextId(identifier, i);
     keyText.className = 'keyboard-overlay-key-text';
     keyText.style.visibility = 'hidden';
     key.appendChild(keyText);
 
     var shortcutText = document.createElement('div');
     shortcutText.id = shortcutTextId(identifier, i);
     shortcutText.className = 'keyboard-overlay-shortcut-text';
     shortcutText.style.visilibity = 'hidden';
     key.appendChild(shortcutText);
+
+    if (isCompoundEnterKey) {
+      key.style.webkitClipPath = COMPOUND_ENTER_KEY_CLIP_PATH;
+      keyText.style.webkitClipPath = COMPOUND_ENTER_KEY_CLIP_PATH;
+      shortcutText.style.webkitClipPath = COMPOUND_ENTER_KEY_CLIP_PATH;
+
+      // Add an overlay div to account for clipping and show the borders.
+      var overlayDiv = document.createElement('div');
+      overlayDiv.id = keyId(identifier, i) + '-sub';
+      overlayDiv.className = 'keyboard-overlay-key';
+      var overlayDivX = x - 3;
+      var overlayDivY = y + Math.round(h * 0.47) + 2;
+      var overlayDivW = Math.round(w * 0.28);
+      var overlayDivH = Math.round(h * (1 - 0.47)) + 1;
+
+      overlayDiv.style.left = overlayDivX + 'px';
+      overlayDiv.style.top = overlayDivY + 'px';
+      overlayDiv.style.width = overlayDivW + 'px';
+      overlayDiv.style.height = overlayDivH + 'px';
+      overlayDiv.style.webkitClipPath =
+        COMPOUND_ENTER_KEY_OVERLAY_DIV_CLIP_PATH;
+      keyboard.appendChild(overlayDiv);
+    }
+
     keyboard.appendChild(key);
 
     minX = Math.min(minX, x);
     maxX = Math.max(maxX, x + w);
     minY = Math.min(minY, y);
     maxY = Math.max(maxY, y + h);
   }
 
   var width = maxX - minX + 1;
   var height = maxY - minY + 1;
@@ skipping 153 matching lines @@
 function onWidgetShown() {
   setTimeout(function() {
     // Show and focus the instructions div after a delay so that chrome vox
     // speaks it correctly.
     $('instructions').style.visibility = 'visible';
     $('instructions').focus();
   }, 500);
 }
 
 document.addEventListener('DOMContentLoaded', init);