[uber] fix up header

[uber] fix up header

1) always leave some padding on the right of the 'header-extras' item (in the case of settings, search), even when you are horizontally scrolling
2) shrink the header at a more reasonable point when the window is getting smaller (when the edge of the page is within 20px, instead of 155px)
3) put the border above the managed prefs banner
4) make all uber frame .pages have a min width (history and extensions should look better now)
5) for managed extensions, make the trash icon invisible rather than hidden so it reserves space and the [ ] Enable checkbox is flush with that of the other installed extensions

BUG=none
TEST=manual

Committed: https://src.chromium.org/viewvc/chrome?view=rev&revision=125104

[Dan Beam, 2012-03-05 22:56:36]

lgtm

http://codereview.chromium.org/9584038/diff/1/chrome/browser/resources/extens...
File chrome/browser/resources/extensions/extensions.css (right):

http://codereview.chromium.org/9584038/diff/1/chrome/browser/resources/extens...
chrome/browser/resources/extensions/extensions.css:174: visibility: hidden;
this slightly makes me nervous that one can click on the invisible node, but
currently that's not the behavior (http://jsfiddle.net/XABjM/).

http://codereview.chromium.org/9584038/diff/1/chrome/browser/resources/uber/u...
File chrome/browser/resources/uber/uber_shared.css (right):

http://codereview.chromium.org/9584038/diff/1/chrome/browser/resources/uber/u...
chrome/browser/resources/uber/uber_shared.css:73: body.uber-frame header >
h1::after {
didn't know :: meant "pseudo-element", that's cool (just googled if this was the
same as :after)

[commit-bot: I haz the power, 2012-03-05 23:37:45]

CQ is trying da patch. Follow status at
https://chromium-status.appspot.com/cq/estade@chromium.org/9584038/1

[ninfadeiboschi74_hotmail.it, 2012-12-11 15:11:04]

On Saturday, March 3, 2012 3:26:11 AM UTC+1, Evan Stade wrote:
>
> Reviewers: Dan Beam,
>
> Description:
> [uber] fix up header
>
> 1) always leave some padding on the right of the 'header-extras' item (in  
> the
> case of settings, search), even when you are horizontally scrolling
> 2) shrink the header at a more reasonable point when the window is getting
> smaller (when the edge of the page is within 20px, instead of 155px)
> 3) put the border above the managed prefs banner
> 4) make all uber frame .pages have a min width (history and extensions  
> should
> look better now)
> 5) for managed extensions, make the trash icon invisible rather than 
> hidden  
> so
> it reserves space and the [ ] Enable checkbox is flush with that of the  
> other
> installed extensions
>
> BUG=none
> TEST=manual
>
>
> Please review this at http://codereview.chromium.org/9584038/
>
> SVN Base: svn://svn.chromium.org/chrome/trunk/src
>
> Affected files:
>    M chrome/browser/resources/extensions/extension_list.js
>    M chrome/browser/resources/extensions/extensions.css
>    M chrome/browser/resources/options2/options_page.css
>    M chrome/browser/resources/shared/css/chrome_shared2.css
>    M chrome/browser/resources/uber/uber_shared.css
>
>
> Index: chrome/browser/resources/extensions/extension_list.js
> diff --git a/chrome/browser/resources/extensions/extension_list.js  
> b/chrome/browser/resources/extensions/extension_list.js
> index  
>
c4f6dc6b0f03d6f1bce0088e8fae518f6fb5b3ab..629d70e6912ebca642bbd2521cebdff32752cb48

>  
> 100644
> --- a/chrome/browser/resources/extensions/extension_list.js
> +++ b/chrome/browser/resources/extensions/extension_list.js
> @@ -67,6 +67,9 @@ cr.define('options', function() {
>         if (!extension.enabled)
>           node.classList.add('disabled-extension');
>
> +      if (!extension.mayDisable)
> +        node.classList.add('may-not-disable');
> +
>         var item = node.querySelector('.extension-list-item');
>         item.style.backgroundImage = 'url(' + extension.icon + ')';
>
> @@ -173,16 +176,13 @@ cr.define('options', function() {
>         }
>
>         // 'Remove' button.
> -
> -      if (extension.mayDisable) {
> -        var trashTemplate =  
> $('template-collection').querySelector('.trash');
> -        var trash = trashTemplate.cloneNode(true);
> -        trash.title = templateData.extensionUninstall;
> -        trash.addEventListener('click', function(e) {
> -          chrome.send('extensionSettingsUninstall', [extension.id]);
> -        });
> -        node.querySelector('.enable-controls').appendChild(trash);
> -      }
> +      var trashTemplate = 
> $('template-collection').querySelector('.trash');
> +      var trash = trashTemplate.cloneNode(true);
> +      trash.title = templateData.extensionUninstall;
> +      trash.addEventListener('click', function(e) {
> +        chrome.send('extensionSettingsUninstall', [extension.id]);
> +      });
> +      node.querySelector('.enable-controls').appendChild(trash);
>
>         // Developer mode  
> ////////////////////////////////////////////////////////
>
> Index: chrome/browser/resources/extensions/extensions.css
> diff --git a/chrome/browser/resources/extensions/extensions.css  
> b/chrome/browser/resources/extensions/extensions.css
> index  
>
5ce00808d7c7aeaa33c14cfdc011c05c8969f5ab..7e258f26a01c50ef28c8e90d7029d4f6a057ed59

>  
> 100644
> --- a/chrome/browser/resources/extensions/extensions.css
> +++ b/chrome/browser/resources/extensions/extensions.css
> @@ -169,3 +169,7 @@ html[dir="rtl"] .extension-list-item {
>   .extension-list-item:not(:hover) .trash:not(:focus) {
>     opacity: 0;
>   }
> +
> +.extension-list-item-wrapper.may-not-disable .trash {
> +  visibility: hidden;
> +}
> Index: chrome/browser/resources/options2/options_page.css
> diff --git a/chrome/browser/resources/options2/options_page.css  
> b/chrome/browser/resources/options2/options_page.css
> index  
>
79e0905a47536b91cc63464c3fbcc9a8005f3c4b..7c50dffc7b657fa1ee055bb661e89419f45ff211

>  
> 100644
> --- a/chrome/browser/resources/options2/options_page.css
> +++ b/chrome/browser/resources/options2/options_page.css
> @@ -36,7 +36,6 @@ html.hide-menu #mainview {
>   }
>
>   #page-container {
> -  -webkit-padding-end: 24px;
>     box-sizing: border-box;
>     max-width: 888px;
>     min-width: 600px;
> @@ -178,10 +177,9 @@ html[touch-optimized] body {
>   }
>
>   .main-page-banner .managed-prefs-gradient {
> -  -webkit-margin-end: 100px;
> +  -webkit-margin-end: 20px;
>     -webkit-margin-start: 0;
>     margin-bottom: 9px;
> -  margin-top: 0;
>   }
>
>   .managed-prefs-text {
> @@ -199,7 +197,7 @@ html[touch-optimized] body {
>   }
>
>   #page-container .page.showing-banner {
> -  margin-top: 36px;
> +  margin-top: 45px;
>   }
>
>   .overlay .page h1 {
> Index: chrome/browser/resources/shared/css/chrome_shared2.css
> diff --git a/chrome/browser/resources/shared/css/chrome_shared2.css  
> b/chrome/browser/resources/shared/css/chrome_shared2.css
> index  
>
c3c1921a0eb927efd7c2c77f65046dfb56fd3b73..c414edcbe46c2883272efc5967d8884ee19995d6

>  
> 100644
> --- a/chrome/browser/resources/shared/css/chrome_shared2.css
> +++ b/chrome/browser/resources/shared/css/chrome_shared2.css
> @@ -114,24 +114,6 @@ html[touch-optimized]  
> input[type='search']::-webkit-search-cancel-button {
>     -webkit-transform: scale(1.5);
>   }
>
> -header > .search-field-container,
> -header > button {
> -  position: absolute;
> -  right: 100px;
> -  top: 21px;
> -}
> -
> -html[dir='rtl'] header > .search-field-container,
> -html[dir='rtl'] header > button {
> -  left: 100px;
> -  right: auto;
> -}
> -
> -header input,
> -header button {
> -  margin: 0;
> -}
> -
>   /* Elements that need to be LTR even in an RTL context, but should align
>    * right. (Namely, URLs, search engine names, etc.)
>    */
> Index: chrome/browser/resources/uber/uber_shared.css
> diff --git a/chrome/browser/resources/uber/uber_shared.css  
> b/chrome/browser/resources/uber/uber_shared.css
> index  
>
e25110059c1cd7b0d262282aadf17ee9aa150791..290ff5f102096e88f5475c7e95916a0e6a64b7c6

>  
> 100644
> --- a/chrome/browser/resources/uber/uber_shared.css
> +++ b/chrome/browser/resources/uber/uber_shared.css
> @@ -18,30 +18,68 @@ body.uber-frame #extension-settings.page,
>   body.uber-frame #mainview-content .page,
>   body.uber-frame .subpage-sheet-container .page,
>   body.uber-frame > .page {
> +  -webkit-margin-end: 24px;
> +  min-width: 576px;
>     padding-top: 55px;
>   }
>
>   body.uber-frame header {
>     background: white;
>     left: 155px;
> -  min-width: 700px;
> +  min-width: 600px;
>     /* <section>s in options currently amount to 638px total, broken up 
> into
>      * 600px max-width + 18px -webkit-padding-start + 20px 
> -webkit-margin-end
>      * so we mirror this value here so the headers match width and 
> horizontal
>      * alignment when scrolling sideways. */
>     max-width: 738px;
>     position: fixed;
> -  right: 155px;
> +  right: 0;
>     top: 0;
>     z-index: 2;
>   }
>
> +html[dir='rtl'] body.uber-frame header {
> +  left: 0;
> +  right: 155px;
> +}
> +
> +body.uber-frame header > .search-field-container,
> +body.uber-frame header > .header-extras,
> +body.uber-frame header > button {
> +  position: absolute;
> +  right: 20px;
> +  top: 21px;
> +}
> +
> +body.uber-frame html[dir='rtl'] header > .search-field-container,
> +body.uber-frame html[dir='rtl'] header > .header-extras,
> +body.uber-frame html[dir='rtl'] header > button {
> +  left: 20px;
> +  right: auto;
> +}
> +
> +body.uber-frame header input,
> +body.uber-frame header button {
> +  margin: 0;
> +}
> +
>   body.uber-frame header > h1 {
> -  border-bottom: 1px solid #eee;
>     margin: 0;
>     padding: 21px 0 13px;
>   }
>
> +/* Create a border under the h1 (but before anything that gets appended
> + * to the end of the header, such as the managed prefs banner). */
> +body.uber-frame header > h1::after {
> +  -webkit-margin-end: 20px;
> +  content: ' ';
> +  display: block;
> +  height: 1px;
> +  background-color: #eee;
> +  position: relative;
> +  top: 13px;
> +}
> +
>   body.uber-frame footer {
>     border-top: 1px solid #eee;
>     margin-top: 16px;
>
>
>