[Media Router] Animate transition between sink list and filter views.

chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css

Index: chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css
diff --git a/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css b/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css
index 89ba3ab6b72821af2acc8c13ee58293641b8c3ef..a90fc0dd0492ad5c016eee9bf0c2079ac0f94b5f 100644
--- a/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css
+++ b/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css
@@ -24,12 +24,16 @@
   width: 100%;
 }
 
+#content {
+  position: relative;
+}
+
 #device-missing {
   align-items: center;
   background-color: white;
   display: flex;
   justify-content: center;
-  margin: 60px 0;
+  padding: 60px 0;
 }
 
 #device-missing a {
@@ -144,6 +148,20 @@ paper-menu {
   flex-grow: 1;
 }
 
+#search-results-container {
+  bottom: 0;
+  left: 0;
+  overflow-x: hidden;
+  /* overflow-y is set to auto when the results are actually displayed to allow
+   * scrolling. It is set to hidden by default so the scrollbar isn't displayed
+   * while animating.
+   */
+  overflow-y: hidden;
+  position: absolute;
+  right: 0;
+  top: 100%;
+}
+
 #searching-devices-spinner {
   height: 30px;
   width: 30px;
@@ -175,16 +193,18 @@ paper-menu {
   /* TODO(crbug/589697): Handle overflow of very long domain names. */
 }
 
-#sink-list {
-  padding-bottom: 0;
-}
-
 .sink-name {
   min-width: 10%;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+#sink-search {
+  position: absolute;
+  top: 100%;
+  width: 100%;
+}
+
 #sink-search.bottom {
   padding-bottom: 16px;
 }