DOMUI Prefs: Final style changes for M10

This makes the last of the changes from the final M10 UI review:
- Adds some text/box shadowing
- Makes major headings non-selectable
- Tweaks the width of the search engine select
- Changes the background behind overlays
- Changes the way sync errors are styled

BUG=71233
TEST=None

Review URL: http://codereview.chromium.org/6332023

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@73035 0039d316-1c4b-4281-b951-d872f2087c98

6 files changed, 34 insertions, 28 deletions

diff --git a/chrome/browser/dom_ui/options/personal_options_handler.cc b/chrome/browser/dom_ui/options/personal_options_handler.cc
index d8e5067..5c29900 100644
--- a/chrome/browser/dom_ui/options/personal_options_handler.cc
+++ b/chrome/browser/dom_ui/options/personal_options_handler.cc
@@ -255,12 +255,6 @@ void PersonalOptionsHandler::OnStateChanged() {
   visible.reset(Value::CreateBooleanValue(status_has_error));
   dom_ui_->CallJavascriptFunction(
     L"PersonalOptions.setSyncStatusErrorVisible", *visible);
-
-#if defined(OS_CHROMEOS)
-  visible.reset(Value::CreateBooleanValue(false));
-#endif  // defined(OS_CHROMEOS)
-  dom_ui_->CallJavascriptFunction(
-    L"PersonalOptions.setSyncActionLinkErrorVisible", *visible);
 }
 
 void PersonalOptionsHandler::OnLoginSuccess() {
diff --git a/chrome/browser/resources/options/browser_options_page.css b/chrome/browser/resources/options/browser_options_page.css
index e7938205..703ec64 100644
--- a/chrome/browser/resources/options/browser_options_page.css
+++ b/chrome/browser/resources/options/browser_options_page.css
@@ -51,7 +51,7 @@
 #defaultSearchEngine {
   display: block;
   -webkit-box-flex: 1;
-  max-width: 300px;
+  max-width: 200px;
 }
 
 #defaultSearchManageEnginesButton {
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index c54fbba..7e25b87 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -13,6 +13,7 @@ a:active {
 
 #settings-title {
   -webkit-padding-end: 24px;
+  -webkit-user-select: none;
   color: #53637d;
   cursor: pointer;
   font-size: 200%;
@@ -21,6 +22,7 @@ a:active {
   padding-bottom: 14px;
   padding-top: 13px;
   text-align: end;
+  text-shadow: white 0 1px 2px;
 }
 
 #main-content {
@@ -39,11 +41,14 @@ a:active {
 .overlay {
   -webkit-box-align: center;
   -webkit-box-pack: center;
-  background: rgba(233, 238, 242, .5);
+  background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5),
+                                      rgba(127, 127, 127, 0.5) 35%,
+                                      rgba(0, 0, 0, 0.7));
   bottom: 0;
   display: -webkit-box;
   left: 0;
   padding: 20px;
+  padding-bottom: 130px;
   position: fixed;
   right: 0;
   top: 0;
@@ -128,7 +133,7 @@ html[toolkit=views] .button-strip {
 }
 
 .overlay .page {
-  -webkit-box-shadow: 0px 0px 40px -5px #888;
+  -webkit-box-shadow: 0px 5px 80px #505050;
   background: white;
   border: 1px solid rgb(188, 193, 208);
   border-radius: 2px;
@@ -143,7 +148,7 @@ html[toolkit=views] .button-strip {
 
 #navbar-container {
   -webkit-border-end: 1px solid #c6c9ce;
-  background: -webkit-linear-gradient(rgba(234, 238, 243, 0), #eaeef3),
+  background: -webkit-linear-gradient(rgba(234, 238, 243, 0.2), #eaeef3),
               -webkit-linear-gradient(left, #eaeef3, #eaeef3 97%, #d3d7db);
   bottom: 0;
   display: none;
@@ -166,12 +171,13 @@ html[hide-menu=false] #navbar-container {
 }
 
 #navbar-container > ul {
+  -webkit-user-select: none;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-.navbar-item, .navbar-item2 {
+.navbar-item {
   border-bottom: 1px solid transparent;
   border-top: 1px solid transparent;
   color: #426dc9;
@@ -181,14 +187,17 @@ html[hide-menu=false] #navbar-container {
   outline: none;
   padding: 7px 0;
   text-align: end;
+  text-shadow: white 0 1px 1px;
   -webkit-padding-end: 24px;
 }
 
 .navbar-item-selected {
-  background: -webkit-linear-gradient(left, #bbcee9, #bbcee9 97%, #96b1cd);
+  -webkit-box-shadow: 0px 1px 0px #f7f7f7;
+  background: -webkit-linear-gradient(left, #bbcee9, #bbcee9 97%, #aabedc);
   border-bottom: 1px solid #8faad9;
   border-top: 1px solid #8faad9;
   color: black;
+  text-shadow: #bbcee9 0 1px 1px;
 }
 
 #mainview {
@@ -292,6 +301,7 @@ html[hide-menu=true] #mainview {
 
 .page h1 {
   -webkit-padding-end: 24px;
+  -webkit-user-select: none;
   border-bottom: 1px solid #eeeeee;
   color: #53637d;
   font-size: 200%;
@@ -299,6 +309,7 @@ html[hide-menu=true] #mainview {
   margin: 0;
   padding-bottom: 4px;
   padding-top: 13px;
+  text-shadow: white 0 1px 2px;
 }
 
 .subpage-sheet .page h1 {
diff --git a/chrome/browser/resources/options/personal_options.css b/chrome/browser/resources/options/personal_options.css
index 74b65f2..5ea1835 100644
--- a/chrome/browser/resources/options/personal_options.css
+++ b/chrome/browser/resources/options/personal_options.css
@@ -19,5 +19,13 @@
 }
 
 .sync-error {
-  background-color: #FF9A9A;
+  background: #FFDBDB;
+  border: 1px solid #ce4c4c;
+  border-radius: 2px;
+  padding: 10px;
+}
+
+.sync-error .link-button {
+  margin: 0 1ex;
+  padding: 0;
 }
diff --git a/chrome/browser/resources/options/personal_options.html b/chrome/browser/resources/options/personal_options.html
index 7e3a55e..54fd689 100644
--- a/chrome/browser/resources/options/personal_options.html
+++ b/chrome/browser/resources/options/personal_options.html
@@ -26,8 +26,10 @@
   <section id="sync-section">
     <h3 i18n-content="syncSection"></h3>
     <div>
-      <div id="sync-status" class="section-text"></div>
-      <button id="sync-action-link" class="link-button"></button>
+      <div id="sync-status">
+        <span id="sync-status-text"></span>
+        <button id="sync-action-link" class="link-button"></button>
+      </div>
       <div id="sync-buttons">
         <button id="start-stop-sync"></button>
         <button id="customize-sync" i18n-content="customizeSync"></button>
diff --git a/chrome/browser/resources/options/personal_options.js b/chrome/browser/resources/options/personal_options.js
index 91a7484..72dcb48 100644
--- a/chrome/browser/resources/options/personal_options.js
+++ b/chrome/browser/resources/options/personal_options.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Copyright (c) 2011 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.
 
@@ -96,11 +96,6 @@ cr.define('options', function() {
         element.classList.add('hidden');
     },
 
-    setElementClassSyncError_: function(element, visible) {
-      visible ? element.classList.add('sync-error') :
-                element.classList.remove('sync-error');
-    },
-
     setSyncEnabled_: function(enabled) {
       this.syncEnabled = enabled;
     },
@@ -115,15 +110,12 @@ cr.define('options', function() {
     },
 
     setSyncStatus_: function(status) {
-      $('sync-status').textContent = status;
+      $('sync-status-text').textContent = status;
     },
 
     setSyncStatusErrorVisible_: function(visible) {
-      this.setElementClassSyncError_($('sync-status'), visible);
-    },
-
-    setSyncActionLinkErrorVisible_: function(visible) {
-      this.setElementClassSyncError_($('sync-action-link'), visible);
+      visible ? $('sync-status').classList.add('sync-error') :
+                $('sync-status').classList.remove('sync-error');
     },
 
     setSyncActionLinkEnabled_: function(enabled) {
@@ -190,7 +182,6 @@ cr.define('options', function() {
     'setAccountPicture',
     'setSyncStatus',
     'setSyncStatusErrorVisible',
-    'setSyncActionLinkErrorVisible',
     'setSyncActionLinkEnabled',
     'setSyncActionLinkLabel',
     'setStartStopButtonVisible',