Make the width of overlay pages flexible.

Make the width of overlay pages flexible.

Before the change, overlays take up the whole width
of the page except padding, thus overlays are very wide.

With this change, overlays only take up the width that is
necessary to show the contents inside.

The individual overlays can control the width using CSS
as needed. If you want the original behavior (taking up
the whole width), you could add "-webkit-box-flex: 1" to
the overlay's CSS. If you want to set a fixed width, you
could add something like "width: 600px" in the overlay's
CSS.

Note that the ability to set the fixed with is necessary to
follow a suggestion from Cole regarding the size of the
overlay for adding languages. See before.png and after.png in
crosbug.com/4573 for details.

TEST=manually
BUG=chromium-os:4573

[arv (Not doing code reviews), 2010-08-03 17:02:08]

I don't think we need to do it this way.

We can use flex boxes to get centering without having to define the width in JS
nor CSS. (The individual pages can still control the width using CSS.)

Take a look at the following snippet:

http://plexode.com/eval3/#ht=%3Cstyle%3E%0A%0A%23container%20%7B%0A%20%20posi...

[satorux1, 2010-08-04 00:09:49]

On 2010/08/03 17:02:08, arv wrote:
> I don't think we need to do it this way.
> 
> We can use flex boxes to get centering without having to define the width in
JS
> nor CSS. (The individual pages can still control the width using CSS.)
> 
> Take a look at the following snippet:
> 
>
http://plexode.com/eval3/#ht=%253Cstyle%253E%250A%250A%2523container%2520%257...

Thanks. Let me give it a try. I'll get back to you.

[satorux1, 2010-08-04 00:37:51]

Uploaded the new change. Now the change is very simple.

I'm updating the description...

On 2010/08/04 00:09:49, satorux1 wrote:
> On 2010/08/03 17:02:08, arv wrote:
> > I don't think we need to do it this way.
> > 
> > We can use flex boxes to get centering without having to define the width in
> JS
> > nor CSS. (The individual pages can still control the width using CSS.)
> > 
> > Take a look at the following snippet:
> > 
> >
>
http://plexode.com/eval3/#ht=%25253Cstyle%25253E%25250A%25250A%252523containe...
> 
> Thanks. Let me give it a try. I'll get back to you.

[arv (Not doing code reviews), 2010-08-04 00:48:10]

LGTM

[satorux1, 2010-08-04 00:56:43]

Updated the description.

The patch changes the existing behavior (overlays are very wide -> overlays are
horizontally compact), so I'm a bit worried. If some overlays need to keep the
existing behavior, how can we do it?

On 2010/08/04 00:48:10, arv wrote:
> LGTM

[satorux1, 2010-08-04 01:20:50]

The problem is that we have three levels of divs:

<div id=overlay>            <- display: -webkit-box;
  <div id=overlayview>
    <div id=fooOverlay>
    <div id=barOverlay>
    ...


If we don't have "overlayview", it's easy to take up the whole width by
"-webkit-box-flex: 1" but since the individual overlays are inside overlayview,
adding -webkit-box-flex does not take effect.

On 2010/08/04 00:56:43, satorux1 wrote:
> Updated the description.
> 
> The patch changes the existing behavior (overlays are very wide -> overlays
are
> horizontally compact), so I'm a bit worried. If some overlays need to keep the
> existing behavior, how can we do it?
> 
> On 2010/08/04 00:48:10, arv wrote:
> > LGTM

[satorux1, 2010-08-04 01:43:33]

On 2010/08/04 01:20:50, satorux1 wrote:
> The problem is that we have three levels of divs:
> 
> <div id=overlay>            <- display: -webkit-box;
>   <div id=overlayview>
>     <div id=fooOverlay>
>     <div id=barOverlay>
>     ...
> 
> 
> If we don't have "overlayview", it's easy to take up the whole width by
> "-webkit-box-flex: 1" but since the individual overlays are inside
overlayview,
> adding -webkit-box-flex does not take effect.

I came up with an obvious idea: get rid of the "overlayview" div. Looking at the
code it looks safe to get rid of it. Will get back to you...




> 
> On 2010/08/04 00:56:43, satorux1 wrote:
> > Updated the description.
> > 
> > The patch changes the existing behavior (overlays are very wide -> overlays
> are
> > horizontally compact), so I'm a bit worried. If some overlays need to keep
the
> > existing behavior, how can we do it?
> > 
> > On 2010/08/04 00:48:10, arv wrote:
> > > LGTM

[satorux1, 2010-08-04 01:59:52]

On 2010/08/04 01:43:33, satorux1 wrote:
> On 2010/08/04 01:20:50, satorux1 wrote:
> > The problem is that we have three levels of divs:
> > 
> > <div id=overlay>            <- display: -webkit-box;
> >   <div id=overlayview>
> >     <div id=fooOverlay>
> >     <div id=barOverlay>
> >     ...
> > 
> > 
> > If we don't have "overlayview", it's easy to take up the whole width by
> > "-webkit-box-flex: 1" but since the individual overlays are inside
> overlayview,
> > adding -webkit-box-flex does not take effect.
> 
> I came up with an obvious idea: get rid of the "overlayview" div. Looking at
the
> code it looks safe to get rid of it. Will get back to you...

Done. It works nicely. Updated the description as well.
Please take another look.

> 
> 
> 
> 
> > 
> > On 2010/08/04 00:56:43, satorux1 wrote:
> > > Updated the description.
> > > 
> > > The patch changes the existing behavior (overlays are very wide ->
overlays
> > are
> > > horizontally compact), so I'm a bit worried. If some overlays need to keep
> the
> > > existing behavior, how can we do it?
> > > 
> > > On 2010/08/04 00:48:10, arv wrote:
> > > > LGTM

[arv (Not doing code reviews), 2010-08-04 17:18:03]

LGTM

nice