[AboutPage] Use dom-if for release notes instead of hidden

Changes the release notes online and offline elements to render with a
dom-if instead of with hidden. This makes it easier to deep link to
either of the elements.

Bug: 1084154
Change-Id: I1e062524cfbfb616e960141e404230fb3d85a2e9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2402131
Commit-Queue: Daniel Classon <dclasson@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805816}

chrome/browser/resources/settings/chromeos/os_about_page/os_about_page.html

@@ -154,13 +154,15 @@
               </a>
             </div>
           </cr-link-row>
-          <template is="dom-if" if="[[hasReleaseNotes_]]">
+          <template is="dom-if" if="[[showReleaseNotesOnline_(hasReleaseNotes_,
+              hasInternetConnection_)]]">
             <cr-link-row class="hr" id="releaseNotesOnline"
-                hidden="[[!hasInternetConnection_]]"
                 on-click="onReleaseNotesTap_"
                 label="$i18n{aboutShowReleaseNotes}" external></cr-link-row>
+          </template>
+          <template is="dom-if" if="[[showReleaseNotesOffline_(hasReleaseNotes_,
+              hasInternetConnection_)]]">
             <cr-link-row class="hr" id="releaseNotesOffline"
-                hidden="[[hasInternetConnection_]]"
                 on-click="onReleaseNotesTap_"
                 label="$i18n{aboutShowReleaseNotes}"
                 title="$i18n{aboutReleaseNotesOffline}" external></cr-link-row>

chrome/browser/resources/settings/chromeos/os_about_page/os_about_page.js

@@ -316,6 +316,23 @@ Polymer({
     return this.currentUpdateStatusEvent_.status == UpdateStatus.FAILED;
   },
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  showReleaseNotesOnline_() {
+    return this.hasReleaseNotes_ && this.hasInternetConnection_;
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  showReleaseNotesOffline_() {
+    return this.hasReleaseNotes_ && !this.hasInternetConnection_;
+  },
+
+
   /**
    * @return {string}
    * @private

chrome/test/data/webui/settings/chromeos/os_about_page_tests.js

@@ -300,8 +300,7 @@ cr.define('settings_about_page', function() {
       async function checkReleaseNotesOnline(isShowing) {
         await aboutBrowserProxy.whenCalled('getEnabledReleaseNotes');
         const releaseNotesOnlineEl = page.$$('#releaseNotesOnline');
-        assertTrue(!!releaseNotesOnlineEl);
-        assertEquals(isShowing, !releaseNotesOnlineEl.hidden);
+        assertEquals(isShowing, !!releaseNotesOnlineEl);
       }
 
       /**
@@ -313,8 +312,7 @@ cr.define('settings_about_page', function() {
       async function checkReleaseNotesOffline(isShowing) {
         await aboutBrowserProxy.whenCalled('getEnabledReleaseNotes');
         const releaseNotesOfflineEl = page.$$('#releaseNotesOffline');
-        assertTrue(!!releaseNotesOfflineEl);
-        assertEquals(isShowing, !releaseNotesOfflineEl.hidden);
+        assertEquals(isShowing, !!releaseNotesOfflineEl);
       }
 
       /**
@@ -324,9 +322,9 @@ cr.define('settings_about_page', function() {
       async function checkReleaseNotesDisabled() {
         await aboutBrowserProxy.whenCalled('getEnabledReleaseNotes');
         const releaseNotesOnlineEl = page.$$('#releaseNotesOnline');
-        assertTrue(!releaseNotesOnlineEl);
+        assertFalse(!!releaseNotesOnlineEl);
         const releaseNotesOfflineEl = page.$$('#releaseNotesOffline');
-        assertTrue(!releaseNotesOfflineEl);
+        assertFalse(!!releaseNotesOfflineEl);
       }
 
       aboutBrowserProxy.setReleaseNotes(false);