ChromeVox: Miscellaneous panel improvements.

This change makes several panel improvements including:

1. Improving the contrast ratio of the iSearch placeholder text.
2. Keeping the menus open if a menu is clicked. Previously, clicking
on a menu would exit the ChromeVox menus entirely.
3. Toggles the triangle icon next to the ChromeVox menus button to
communicate what will happen upon the next press (will the menus
open or will they close).

Bug: 793337
Change-Id: I0a6d785b6a3750d0c25d7b9bb8dbc359ee9bbc37
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1947812
Commit-Queue: Akihiro Ota <akihiroota@chromium.org>
Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#721321}

chrome/browser/resources/chromeos/accessibility/chromevox/background/panel/panel.css

@@ -161,6 +161,11 @@ button {
   width: 100%;
 }
 
+#search::placeholder {
+  /* Hint text should match the color of the ChromeVox focus ring. */
+  color: rgb(247, 152, 58);
+}
+
 #menus_background {
   background-color: #eee;
   bottom: 0;

chrome/browser/resources/chromeos/accessibility/chromevox/background/panel/panel.js

@@ -267,6 +267,14 @@ Panel.setMode = function(mode) {
   $('tutorial').hidden = (Panel.mode_ != Panel.Mode.FULLSCREEN_TUTORIAL);
 
   Panel.updateFromPrefs();
+
+  // Change the orientation of the triangle next to the menus button to indicate
+  // whether the menu is open or closed.
+  if (mode == Panel.Mode.FULLSCREEN_MENUS) {
+    $('triangle').style.transform = 'rotate(180deg)';
+  } else if (mode == Panel.Mode.COLLAPSED) {
+    $('triangle').style.transform = '';
+  }
 };
 
 /**
@@ -524,7 +532,8 @@ Panel.addMenu = function(menuMsg) {
   menu.menuBarItemElement.addEventListener('mouseover', function() {
     Panel.activateMenu(menu);
   }, false);
-
+  menu.menuBarItemElement.addEventListener(
+      'mouseup', Panel.onMouseUpOnMenuTitle_.bind(this, menu), false);
   $('menus_background').appendChild(menu.menuContainerElement);
   Panel.menus_.push(menu);
   return menu;
@@ -673,7 +682,8 @@ Panel.addNodeMenu = function(menuMsg, node, pred, defer) {
   menu.menuBarItemElement.addEventListener('mouseover', function() {
     Panel.activateMenu(menu);
   }, false);
-
+  menu.menuBarItemElement.addEventListener(
+      'mouseup', Panel.onMouseUpOnMenuTitle_.bind(this, menu), false);
   $('menus_background').appendChild(menu.menuContainerElement);
   Panel.menus_.push(menu);
   return menu;
@@ -780,6 +790,19 @@ Panel.onMouseUp = function(event) {
   Panel.closeMenusAndRestoreFocus();
 };
 
+/**
+ * Activate a menu whose title has been clicked. Stop event propagation at this
+ * point so we don't close the ChromeVox menus and restore focus.
+ * @param {PanelMenu} menu The menu we would like to activate.
+ * @parm {Event} mouseUpEvent The mouseup event.
+ * @private
+ */
+Panel.onMouseUpOnMenuTitle_ = function(menu, mouseUpEvent) {
+  Panel.activateMenu(menu);
+  mouseUpEvent.preventDefault();
+  mouseUpEvent.stopPropagation();
+};
+
 /**
  * Called when a key is pressed. Handle arrow keys to navigate the menus,
  * Esc to close, and Enter/Space to activate an item.