WebUI NTP: respect user preference to hide shortcuts

When a user chooses to hide shortcuts, the most-visited element should
have zero height and width.

Bug: 1144029
Change-Id: I3cd1b1e02c6d283229ae058e08ca7ca557cbeac2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2508880
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Moe Ahmadi <mahmadi@chromium.org>
Auto-Submit: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#822638}

chrome/browser/resources/new_tab_page/most_visited.html

@@ -191,7 +191,7 @@
     transition-delay: 0s;
   }
 </style>
-<div id="container"
+<div id="container" hidden$="[[!visible_]]"
     style="--column-count: [[columnCount_]]; --row-count: [[rowCount_]];">
   <dom-repeat id="tiles" items="[[tiles_]]" on-dom-change="onTilesRendered_">
     <template>

chrome/test/data/webui/new_tab_page/most_visited_test.js

@@ -268,14 +268,17 @@ suite('NewTabPageMostVisitedTest', () => {
     assertEquals(1, queryTiles().length);
     assertEquals(0, queryAll('.tile[hidden]').length);
     assertTrue(mostVisited.visible_);
+    assertFalse(mostVisited.$.container.hidden);
     await addTiles(1, /* customLinksEnabled */ true, /* visible */ false);
     assertEquals(1, queryTiles().length);
     assertEquals(0, queryAll('.tile[hidden]').length);
     assertFalse(mostVisited.visible_);
+    assertTrue(mostVisited.$.container.hidden);
     await addTiles(1, /* customLinksEnabled */ true, /* visible */ true);
     assertEquals(1, queryTiles().length);
     assertEquals(0, queryAll('.tile[hidden]').length);
     assertTrue(mostVisited.visible_);
+    assertFalse(mostVisited.$.container.hidden);
   });
 
   test('dialog opens when add shortcut clicked', () => {