Show message nicely when the user tries to remove tha last language or input method in DOMUI.

BUG=chromium-os:5546, chromium-os:5547
TEST=manual

Review URL: http://codereview.chromium.org/3143013

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

4 files changed, 120 insertions, 8 deletions

diff --git a/chrome/browser/chromeos/dom_ui/language_options_handler.cc b/chrome/browser/chromeos/dom_ui/language_options_handler.cc
index 7037cea..c97e436 100644
--- a/chrome/browser/chromeos/dom_ui/language_options_handler.cc
+++ b/chrome/browser/chromeos/dom_ui/language_options_handler.cc
@@ -51,6 +51,7 @@ void LanguageOptionsHandler::GetLocalizedValues(
   localized_strings->SetString("please_add_another_language",
       l10n_util::GetStringUTF16(
           IDS_OPTIONS_SETTINGS_LANGUAGES_PLEASE_ADD_ANOTHER_LANGUAGE));
+  localized_strings->SetString(L"ok_button", l10n_util::GetStringUTF16(IDS_OK));
   localized_strings->SetString("remove_button",
       l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_LANGUAGES_REMOVE_BUTTON));
   localized_strings->SetString("restart_button",
diff --git a/chrome/browser/resources/options/chromeos_language_options.css b/chrome/browser/resources/options/chromeos_language_options.css
index c833bc0..72b8effc 100644
--- a/chrome/browser/resources/options/chromeos_language_options.css
+++ b/chrome/browser/resources/options/chromeos_language_options.css
@@ -112,3 +112,52 @@
   padding: 0;
   margin: 0;
 }
+/* TODO(kochi): This is temporary copy from new_new_tab.css */
+/* Notification */
+
+#notification {
+  position: relative;
+  background-color: hsl(52, 100%, 80%);
+  border: 1px solid rgb(211, 211, 211);
+  border-radius: 6px;
+  padding: 7px 15px;
+  white-space: nowrap;
+  display: table;
+  /* Set the height and margin so that the element does not use any vertical
+    space */
+  height: 16px;
+  margin: -44px auto 12px auto;
+  font-weight: bold;
+  opacity: 0;
+  pointer-events: none;
+  -webkit-transition: opacity .15s;
+  z-index: 1;
+  color: black;
+}
+
+#notification > * {
+  display: table-cell;
+  max-width: 500px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#notification.show {
+  opacity: 1;
+  pointer-events: all;
+  -webkit-transition: opacity 1s;
+}
+
+#notification .link {
+  cursor: pointer;
+  text-decoration: underline;
+  -webkit-appearance: none;
+  border: 0;
+  background: none;
+  color: rgba(0, 102, 204, 0.3);
+  -webkit-padding-start: 20px;
+}
+
+#notification .link-color {
+  color: rgb(0, 102, 204);
+}
diff --git a/chrome/browser/resources/options/chromeos_language_options.html b/chrome/browser/resources/options/chromeos_language_options.html
index 8de190d..844b05d 100644
--- a/chrome/browser/resources/options/chromeos_language_options.html
+++ b/chrome/browser/resources/options/chromeos_language_options.html
@@ -2,6 +2,10 @@
 
 <div class="page hidden" id="languagePage">
   <h1 i18n-content="languagePage"></h1>
+  <div id="notification">
+    <span>&nbsp;</span>
+    <span class="link"><span class="link-color"></span></span>
+  </div>
   <div class="language-options-header">
     <div i18n-content="add_language_instructions"></div>
     <div i18n-content="input_method_instructions"></div>
diff --git a/chrome/browser/resources/options/chromeos_language_options.js b/chrome/browser/resources/options/chromeos_language_options.js
index bb65881..838615f 100644
--- a/chrome/browser/resources/options/chromeos_language_options.js
+++ b/chrome/browser/resources/options/chromeos_language_options.js
@@ -2,6 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// TODO(kochi): Generalize the notification as a component and put it
+// in js/cr/ui/notification.js .
+
 cr.define('options', function() {
 
   const OptionsPage = options.OptionsPage;
@@ -298,8 +301,6 @@ cr.define('options', function() {
         uiLanguageButton.className = 'text-button';
         uiLanguageButton.onclick = undefined;
       }
-      // TODO(kochi): Generalize this notification as a component and put it
-      // in js/cr/ui/notification.js .
       uiLanguageButton.style.display = 'block';
       $('language-options-ui-notification-bar').style.display = 'none';
     },
@@ -371,9 +372,9 @@ cr.define('options', function() {
       var checkbox = e.target;
       if (this.preloadEngines_.length == 1 && !checkbox.checked) {
         // Don't allow disabling the last input method.
-        // TODO(satorux): Show the message in a nicer way once we get a mock
-        // from UX. crosbug.com/5547.
-        alert(localStrings.getString('please_add_another_input_method'));
+        this.showNotification_(
+            localStrings.getString('please_add_another_input_method'),
+            localStrings.getString('ok_button'));
         checkbox.checked = true;
       }
       this.updatePreloadEnginesFromCheckboxes_();
@@ -419,9 +420,9 @@ cr.define('options', function() {
       // Don't allow removing the language if cerntain conditions are met.
       // See removePreloadEnginesByLanguageCode_() for details.
       if (!this.removePreloadEnginesByLanguageCode_(languageCode)) {
-        // TODO(satorux): Show the message in a nicer way once we get a mock
-        // from UX. crosbug.com/5546.
-        alert(localStrings.getString('please_add_another_language'));
+        this.showNotification_(
+            localStrings.getString('please_add_another_language'),
+            localStrings.getString('ok_button'));
         return;
       }
       languageOptionsList.removeSelectedLanguage();
@@ -554,6 +555,63 @@ cr.define('options', function() {
         }
       }
       return filteredPreloadEngines;
+    },
+
+    // TODO(kochi): This is an adapted copy from new_new_tab.js.
+    // If this will go as final UI, refactor this to share the component with
+    // new new tab page.
+    /**
+     * Shows notification
+     * @private
+     */
+    notificationTimeout_: null,
+    showNotification_ : function(text, actionText, opt_delay) {
+      var notificationElement = $('notification');
+      var actionLink = notificationElement.querySelector('.link-color');
+      var delay = opt_delay || 10000;
+
+      function show() {
+        window.clearTimeout(this.notificationTimeout_);
+        notificationElement.classList.add('show');
+        document.body.classList.add('notification-shown');
+      }
+
+      function hide() {
+        window.clearTimeout(this.notificationTimeout_);
+        notificationElement.classList.remove('show');
+        document.body.classList.remove('notification-shown');
+        // Prevent tabbing to the hidden link.
+        actionLink.tabIndex = -1;
+        // Setting tabIndex to -1 only prevents future tabbing to it. If,
+        // however, the user switches window or a tab and then moves back to
+        // this tab the element may gain focus. We therefore make sure that we
+        // blur the element so that the element focus is not restored when
+        // coming back to this window.
+        actionLink.blur();
+      }
+
+      function delayedHide() {
+        this.notificationTimeout_ = window.setTimeout(hide, delay);
+      }
+
+      notificationElement.firstElementChild.textContent = text;
+      actionLink.textContent = actionText;
+
+      actionLink.onclick = hide;
+      actionLink.onkeydown = function(e) {
+        if (e.keyIdentifier == 'Enter') {
+          hide();
+        }
+      };
+      notificationElement.onmouseover = show;
+      notificationElement.onmouseout = delayedHide;
+      actionLink.onfocus = show;
+      actionLink.onblur = delayedHide;
+      // Enable tabbing to the link now that it is shown.
+      actionLink.tabIndex = 0;
+
+      show();
+      delayedHide();
     }
   };