MD Settings: make custom UIs look "actionable"

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

 // Copyright 2015 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.
 
 /**
  * @fileoverview 'settings-languages-page' is the settings page
  * for language and input method settings.
  */
 (function() {
 'use strict';
@@ skipping 210 matching lines @@
     return this.languageHelper_.getLanguage(
         this.languageHelper_.getProspectiveUILanguage()).displayName;
   },
 
   /**
    * Returns either the "selected" class, if the language matches the
    * prospective UI language, or an empty string. Languages can only be
    * 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(' ');
   },
 
   /**
    * @param {string} id The input method ID.
    * @param {string} currentId The ID of the currently enabled input method.
    * @return {boolean} True if the IDs match.
    * @private
    */
   isCurrentInputMethod_: function(id, currentId) {
     assert(cr.isChromeOS);
@@ skipping 24 matching lines @@
    * HACK(michaelpg): This is necessary to show the list when navigating to
    * the sub-page. Remove this function when PolymerElements/neon-animation#60
    * is fixed.
    * @param {string} tagName Name of the element containing the <iron-list>.
    */
   forceRenderList_: function(tagName) {
     this.$$(tagName).$$('iron-list').fire('iron-resize');
   },
 });
 })();