Fix wrapping window decoration buttons in the Files.app's new UI.

Fix wrapping window decoration buttons in the Files.app's new UI.

Previously, the window decoration buttons (gear, maximize, close) were getting wrapped when the window is small. This patch fixes this issue by making the search box take not more than available space.

TBR=hirono@chromium.org
TEST=Resize the window, click on the search box.
BUG=239415
Committed: https://src.chromium.org/viewvc/chrome?view=rev&revision=199418

[mtomasz, 2013-05-10 03:32:24]

@hirono: PTAL. Thanks!

[hirono, 2013-05-10 04:01:05]

On 2013/05/10 03:32:24, mtomasz wrote:
> @hirono: PTAL. Thanks!

In my environment, the search box and the gear icon are overlapped.

https://docs.google.com/file/d/0B4oFnlAOOE2CalFSbjhBcUpoWUk/edit?usp=sharing

Could you reproduce and fix it?

[mtomasz, 2013-05-10 04:16:36]

On 2013/05/10 04:01:05, hirono wrote:
> On 2013/05/10 03:32:24, mtomasz wrote:
> > @hirono: PTAL. Thanks!
> 
> In my environment, the search box and the gear icon are overlapped.
> 
> https://docs.google.com/file/d/0B4oFnlAOOE2CalFSbjhBcUpoWUk/edit?usp=sharing
> 
> Could you reproduce and fix it?

Yes, I know about it, but what else we can do. I think the easiest way is just
to increase the minimum width of the window by 50 pixels or sth like that. WDYT?

[hirono, 2013-05-10 04:30:14]

On 2013/05/10 04:16:36, mtomasz wrote:
> On 2013/05/10 04:01:05, hirono wrote:
> > On 2013/05/10 03:32:24, mtomasz wrote:
> > > @hirono: PTAL. Thanks!
> > 
> > In my environment, the search box and the gear icon are overlapped.
> > 
> > https://docs.google.com/file/d/0B4oFnlAOOE2CalFSbjhBcUpoWUk/edit?usp=sharing
> > 
> > Could you reproduce and fix it?
> 
> Yes, I know about it, but what else we can do. I think the easiest way is just
> to increase the minimum width of the window by 50 pixels or sth like that.
WDYT?

I think so too.
Current minimum width is too small to contain all the essential elements of
window.

The search box may not be an essential element of window. We can hide the search
box when the window width is small.
After we increased the width, if users complain that the minimum width of window
is too large, we can choice the way.

[mtomasz, 2013-05-10 04:46:03]

On 2013/05/10 04:30:14, hirono wrote:
> On 2013/05/10 04:16:36, mtomasz wrote:
> > On 2013/05/10 04:01:05, hirono wrote:
> > > On 2013/05/10 03:32:24, mtomasz wrote:
> > > > @hirono: PTAL. Thanks!
> > > 
> > > In my environment, the search box and the gear icon are overlapped.
> > > 
> > >
https://docs.google.com/file/d/0B4oFnlAOOE2CalFSbjhBcUpoWUk/edit?usp=sharing
> > > 
> > > Could you reproduce and fix it?
> > 
> > Yes, I know about it, but what else we can do. I think the easiest way is
just
> > to increase the minimum width of the window by 50 pixels or sth like that.
> WDYT?
> 
> I think so too.
> Current minimum width is too small to contain all the essential elements of
> window.
> 
> The search box may not be an essential element of window. We can hide the
search
> box when the window width is small.
> After we increased the width, if users complain that the minimum width of
window
> is too large, we can choice the way.

I've fixed it by hiding if there is less than 100px of space.

[hirono, 2013-05-10 05:02:04]

On 2013/05/10 04:46:03, mtomasz wrote:
> On 2013/05/10 04:30:14, hirono wrote:
> > On 2013/05/10 04:16:36, mtomasz wrote:
> > > On 2013/05/10 04:01:05, hirono wrote:
> > > > On 2013/05/10 03:32:24, mtomasz wrote:
> > > > > @hirono: PTAL. Thanks!
> > > > 
> > > > In my environment, the search box and the gear icon are overlapped.
> > > > 
> > > >
> https://docs.google.com/file/d/0B4oFnlAOOE2CalFSbjhBcUpoWUk/edit?usp=sharing
> > > > 
> > > > Could you reproduce and fix it?
> > > 
> > > Yes, I know about it, but what else we can do. I think the easiest way is
> just
> > > to increase the minimum width of the window by 50 pixels or sth like that.
> > WDYT?
> > 
> > I think so too.
> > Current minimum width is too small to contain all the essential elements of
> > window.
> > 
> > The search box may not be an essential element of window. We can hide the
> search
> > box when the window width is small.
> > After we increased the width, if users complain that the minimum width of
> window
> > is too large, we can choice the way.
> 
> I've fixed it by hiding if there is less than 100px of space.

Cool! I think this is the best.
LGTM

[commit-bot: I haz the power, 2013-05-10 05:03:40]

CQ is trying da patch. Follow status at
https://chromium-status.appspot.com/cq/mtomasz@chromium.org/14865017/6001

[commit-bot: I haz the power, 2013-05-10 05:03:41]

Failed to apply patch for
chrome/browser/resources/file_manager/css/file_manager.css:
While running patch -p1 --forward --force --no-backup-if-mismatch;
  patching file chrome/browser/resources/file_manager/css/file_manager.css
  Hunk #2 FAILED at 779.
  Hunk #3 succeeded at 805 (offset 2 lines).
  1 out of 3 hunks FAILED -- saving rejects to file
chrome/browser/resources/file_manager/css/file_manager.css.rej

Patch:       chrome/browser/resources/file_manager/css/file_manager.css
Index: chrome/browser/resources/file_manager/css/file_manager.css
diff --git a/chrome/browser/resources/file_manager/css/file_manager.css
b/chrome/browser/resources/file_manager/css/file_manager.css
index
73c3f3a7a289faf89abee783799e19f358941ae9..6d21072be4d8333e455fe8f71e73be36efc13b17
100644
--- a/chrome/browser/resources/file_manager/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/css/file_manager.css
@@ -533,6 +533,17 @@ body[new-ui] .dialog-header {
   height: 45px;
 }
 
+body[new-ui] .search-box-wrapper {
+  -webkit-box-flex: 1;
+  display: -webkit-box;
+}
+
+body[new-ui] .decoration-buttons-wrapper {
+  -webkit-box-flex: 0;
+  -webkit-box-pack: end;
+  display: -webkit-box;
+}
+
 body[new-ui] .dialog-header #search-box,
 body[new-ui] .dialog-header #autocomplete-list,
 body[new-ui] .dialog-header .buttonbar button {
@@ -768,14 +779,21 @@ body[new-ui] .dialog-header button:not(:hover):not(focus)
{
   width: 150px;
 }
 
+#search-box[hidden] {
+  display: none;  // Required, since overriden by #search-box.
+}
+
 body[new-ui] #search-box {
+  -webkit-transition: max-width 200ms;
   background: -webkit-image-set(
     url('../images/files/ui/new-ui/search_icon_active.png') 1x,
     url('../images/files/ui/new-ui/2x/search_icon_active.png') 2x);
   background-position: center left;
   background-repeat: no-repeat;
   border-color: white;
+  max-width: 150px;
   padding: 0 0 0 30px;
+  width: 100%;
 }
 
 #search-box:hover {
@@ -792,8 +810,9 @@ body[new-ui] #search-box:hover {
 body[new-ui] #search-box:focus {
   border: 1px solid rgb(77, 144, 254);
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
+  max-width: 240px;
   outline: none;
-  width: 240px;
+  width: 100%;
 }
 
 #search-box::-webkit-search-cancel-button {

[commit-bot: I haz the power, 2013-05-10 05:18:50]

CQ is trying da patch. Follow status at
https://chromium-status.appspot.com/cq/mtomasz@chromium.org/14865017/13002

[commit-bot: I haz the power, 2013-05-10 05:27:50]

Retried try job too often on chromium_presubmit for step(s) presubmit
http://build.chromium.org/p/tryserver.chromium/buildstatus?builder=chromium_p...

[commit-bot: I haz the power, 2013-05-10 07:24:15]

CQ is trying da patch. Follow status at
https://chromium-status.appspot.com/cq/mtomasz@chromium.org/14865017/13002

[commit-bot: I haz the power, 2013-05-10 07:33:03]

Retried try job too often on chromium_presubmit for step(s) presubmit
http://build.chromium.org/p/tryserver.chromium/buildstatus?builder=chromium_p...

[mtomasz, 2013-05-10 07:46:33]

Committed patchset #3 manually as r199418 (presubmit successful).

[yoshiki, 2013-05-13 05:37:00]

https://codereview.chromium.org/14865017/diff/13002/chrome/browser/resources/...
File chrome/browser/resources/file_manager/css/file_manager.css (right):

https://codereview.chromium.org/14865017/diff/13002/chrome/browser/resources/...
chrome/browser/resources/file_manager/css/file_manager.css:784: display: none; 
// Required, since overriden by #search-box.
CSS doesn't support //-style comment. Please use /* blah */ style instead.

[mtomasz, 2013-05-13 05:40:03]

On 2013/05/13 05:37:00, yoshiki wrote:
>
https://codereview.chromium.org/14865017/diff/13002/chrome/browser/resources/...
> File chrome/browser/resources/file_manager/css/file_manager.css (right):
> 
>
https://codereview.chromium.org/14865017/diff/13002/chrome/browser/resources/...
> chrome/browser/resources/file_manager/css/file_manager.css:784: display: none;

> // Required, since overriden by #search-box.
> CSS doesn't support //-style comment. Please use /* blah */ style instead.

It's already fixed with another patch on trunk.

[yoshiki, 2013-05-13 05:42:55]

On 2013/05/13 05:40:03, mtomasz wrote:
> On 2013/05/13 05:37:00, yoshiki wrote:
> >
>
https://codereview.chromium.org/14865017/diff/13002/chrome/browser/resources/...
> > File chrome/browser/resources/file_manager/css/file_manager.css (right):
> > 
> >
>
https://codereview.chromium.org/14865017/diff/13002/chrome/browser/resources/...
> > chrome/browser/resources/file_manager/css/file_manager.css:784: display:
none;
> 
> > // Required, since overriden by #search-box.
> > CSS doesn't support //-style comment. Please use /* blah */ style instead.
> 
> It's already fixed with another patch on trunk.

I see. Thanks.