Make the search box smaller when inactive and grow when focused.

chrome/browser/resources/file_manager/css/file_manager.css

 /* Copyright (c) 2012 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. */
 
 html.col-resize * {
   cursor: col-resize !important;
 }
 
 /* Outer frame of the dialog. */
 body {
@@ skipping 433 matching lines @@
 .dialog-header div[role=button]:hover,
 .dialog-header div[role=button]:active {
   border-color: #ddd;
 }
 
 .dialog-header div[role=button][disabled] {
   background-color: #f1f1f1;
 }
 
 #search-box {
+  -webkit-transition: width 600ms;
   background: -webkit-image-set(
     url('../images/files/ui/icon_search.png') 1x,
     url('../images/files/ui/2x/icon_search.png') 2x);
   background-position: 4px 3.5px;
   background-repeat: no-repeat;
   display: -webkit-box;
   height: 25px;
   margin-right: 10px;
   padding-left: 22px;
+  width: 150px;
+}
+
+#search-box:focus {
+  width: 240px;
 }
 
 #search-box,
 #filename-input-box input {
   border: 1px solid #BBB;
   border-radius: 2px;
 }
 
 button#detail-view {
   background-image: -webkit-image-set(
@@ skipping 928 matching lines @@
   width: 50%;
 }
 
 #list-container .table-header-inner {
   height: 100%;
 }
 
 #list-container .table-header-cell:hover {
   background-color: #f2f2f2;
 }