MD Settings: make custom UIs look "actionable"

chrome/browser/resources/settings/languages_page/languages_page.js

Index: chrome/browser/resources/settings/languages_page/languages_page.js
diff --git a/chrome/browser/resources/settings/languages_page/languages_page.js b/chrome/browser/resources/settings/languages_page/languages_page.js
index 47a531f1e75208afc901294e12fc8d92561ccbfb..606ba89f53e86fff1f5f5d604a11b15945fca943 100644
--- a/chrome/browser/resources/settings/languages_page/languages_page.js
+++ b/chrome/browser/resources/settings/languages_page/languages_page.js
@@ -228,15 +228,24 @@ Polymer({
    * selected on Chrome OS and Windows.
    * @param {string} languageCode The language code identifying a language.
    * @param {string} prospectiveUILanguage The prospective UI language.
+   * @param {boolean} supportsUI Whether Chrome's UI can be shown in this
+   *     language.
    * @return {string} The class name for the language item.
    * @private
    */
-  getLanguageItemClass_: function(languageCode, prospectiveUILanguage) {
-    if ((cr.isChromeOS || cr.isWindows) &&
-        this.isProspectiveUILanguage_(languageCode, prospectiveUILanguage)) {
-      return 'selected';
+  getLanguageItemClass_: function(languageCode, prospectiveUILanguage,

[dpapad, 2016/06/23 23:44:22]

Nit (optional): You could split this method in two separate methods,

getClassA: function(/* params needed to determine classA existence*/) {...}
getClassB: function(/* params needed to determine classB existence*/) {...}

Then in HTML (I think the following would work).
class="[[getClassA()]] [[getClassB()]]"

This avoids the need to call join(), as well it makes it more explicit which CSS
classes depend on which Polymer property.

[Dan Beam, 2016/06/23 23:48:25]

eh, it's a little bit better but i don't know of a time were only some of the
dependencies are ready (they're pretty much atomic, AFAIK).  and if they aren't
set at the same time, there might be flicker as the class name changes a couple
times.

+      supportsUI) {
+    var classes = [];
+
+    if (cr.isChromeOS || cr.isWindows) {
+      if (supportsUI)
+        classes.push('list-button');  // Makes the item look "actionable".
+
+      if (this.isProspectiveUILanguage_(languageCode, prospectiveUILanguage))
+        classes.push('selected');
     }
-    return '';
+
+    return classes.join(' ');
   },
 
   /**