Use dom-if for timezone select in Set Time dialog

This avoids creating a bunch of <option> elements if the timezone
select isn't shown.

Follow-up from this review:
https://chromium-review.googlesource.com/c/chromium/src/+/1536544

Bug: 927732
Test: browser_tests
Change-Id: I330256a57ebd0082b7755af1441c89d1cb83623d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1539268Reviewed-by: Michael Giuffrida <michaelpg@chromium.org>
Commit-Queue: James Cook <jamescook@chromium.org>
Cr-Commit-Position: refs/heads/master@{#644803}

chrome/browser/resources/chromeos/md_set_time/set_time.html

@@ -121,19 +121,21 @@
             </div>
           </div>
 
-          <div id="timezone" class="row" hidden$="[[!isTimezoneVisible_]]">
-            <div id="label">$i18n{timezoneLabel}</div>
-            <select id="timezoneSelect"
-                class="md-select"
-                aria-label="$i18n{timezoneLabel}"
-                on-change="onTimezoneChange_">
-              <template is="dom-repeat" items="[[timezoneItems_]]" as="tz">
-                <option value="[[tz.id]]" selected="[[tz.selected]]">
-                  [[tz.name]]
-                </option>
-              </template>
-            </select>
-          </div>
+          <template is="dom-if" if="[[isTimezoneVisible_]]">
+            <div id="timezone" class="row">
+              <div id="label">$i18n{timezoneLabel}</div>
+              <select id="timezoneSelect"
+                  class="md-select"
+                  aria-label="$i18n{timezoneLabel}"
+                  on-change="onTimezoneChange_">
+                <template is="dom-repeat" items="[[timezoneItems_]]" as="tz">
+                  <option value="[[tz.id]]" selected="[[tz.selected]]">
+                    [[tz.name]]
+                  </option>
+                </template>
+              </select>
+            </div>
+          </template>
         </div>
 
         <div slot="button-container">

chrome/browser/resources/chromeos/md_set_time/set_time.js

@@ -86,9 +86,7 @@ Polymer({
 
   properties: {
     /**
-     * Populates the timezone select even if the element is hidden. Browser
-     * tests simulate a logged-in user, and hence don't show the timezone
-     * select, but still need to exercise it.
+     * Items to populate the timezone select.
      * @private
      */
     timezoneItems_: {
@@ -172,8 +170,9 @@ Polymer({
    * @private
    */
   setTimezone_: function(timezoneId) {
-    assert(this.$.timezoneSelect.childElementCount > 0);
-    this.$.timezoneSelect.value = timezoneId;
+    const timezoneSelect = this.$$('#timezoneSelect');
+    assert(timezoneSelect.childElementCount > 0);
+    timezoneSelect.value = timezoneId;
     this.updateTime_();
   },
 

chrome/test/data/webui/md_set_time_browsertest.js

@@ -66,6 +66,17 @@ TEST_F('MdSetTimeBrowserTest', 'All', function() {
       }
     }
 
+    suiteSetup(function() {
+      loadTimeData.overrideValues({
+        currentTimezoneId: 'Westeros/Highgarden',
+        timezoneList: [
+          ['Westeros/Highgarden', '(KNG-2:00) The Reach Time (Highgarden)'],
+          ['Westeros/Winterfell', '(KNG-1:00) The North Time (Winterfell)'],
+          ['Westeros/Sunspear', '(KNG+2:00) Dorne Time (Sunspear)'],
+        ],
+      });
+    });
+
     setup(function() {
       testBrowserProxy = new TestSetTimeBrowserProxy();
       settime.SetTimeBrowserProxyImpl.instance_ = testBrowserProxy;
@@ -120,12 +131,14 @@ TEST_F('MdSetTimeBrowserTest', 'All', function() {
     test('SystemTimezoneChanged', () => {
       const timezoneSelect = setTimeElement.$$('#timezoneSelect');
       assertTrue(!!timezoneSelect);
+      expectEquals('Westeros/Highgarden', timezoneSelect.value);
 
-      cr.webUIListenerCallback('system-timezone-changed', 'America/New_York');
-      expectEquals('America/New_York', timezoneSelect.value);
+      cr.webUIListenerCallback(
+          'system-timezone-changed', 'Westeros/Winterfell');
+      expectEquals('Westeros/Winterfell', timezoneSelect.value);
 
-      cr.webUIListenerCallback('system-timezone-changed', 'Europe/Moscow');
-      expectEquals('Europe/Moscow', timezoneSelect.value);
+      cr.webUIListenerCallback('system-timezone-changed', 'Westeros/Sunspear');
+      expectEquals('Westeros/Sunspear', timezoneSelect.value);
     });
   });