DOMUI Prefs: Bring Basics closer to current mocks

Moves the homepage field to the same line as the option.
Adds a favicon to the homepage field.
Removes color from the default browser string, and puts it below the button
Fixes enabled state of the default browser button when the default browser can't be set.

BUG=63818,63822
TEST=DOMUI prefs homepage and default browser sections should look more like mocks.

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

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

3 files changed, 40 insertions, 27 deletions

diff --git a/chrome/browser/resources/options/browser_options.html b/chrome/browser/resources/options/browser_options.html
index c4764f0..143f2e1 100644
--- a/chrome/browser/resources/options/browser_options.html
+++ b/chrome/browser/resources/options/browser_options.html
@@ -40,13 +40,15 @@
             value="true" metric="Options_Homepage_IsNewTabPage">
         <span i18n-content="homepageUseNewTab"></span>
       </label>
-      <label class="radio">
-        <input type="radio" name="homepage" id="homepageUseURLButton"
-            value="false" metric="Options_Homepage_IsNewTabPage">
-        <span i18n-content="homepageUseURL"></span>
-      </label>
-      <div class="suboption">
-        <input id="homepageURL" type="url">
+      <div id="customHomePageGroup">
+        <label class="radio">
+          <input type="radio" name="homepage" id="homepageUseURLButton"
+              value="false" metric="Options_Homepage_IsNewTabPage">
+          <span i18n-content="homepageUseURL"></span>
+        </label>
+        <div>
+          <input id="homepageURL" class="favicon-cell" type="url">
+        </div>
       </div>
     </div>
   </section>
@@ -93,10 +95,10 @@
   <section>
     <h3 i18n-content="defaultBrowserGroupName"></h3>
     <div>
-      <div id="defaultBrowserState"
-          i18n-content="defaultBrowserUnknown"></div>
       <button id="defaultBrowserUseAsDefaultButton"
           i18n-content="defaultBrowserUseAsDefault"></button>
+      <div id="defaultBrowserState"
+          i18n-content="defaultBrowserUnknown"></div>
     </div>
   </section>
 </if>
diff --git a/chrome/browser/resources/options/browser_options.js b/chrome/browser/resources/options/browser_options.js
index 993f760..e6ec689 100644
--- a/chrome/browser/resources/options/browser_options.js
+++ b/chrome/browser/resources/options/browser_options.js
@@ -130,17 +130,15 @@ cr.define('options', function() {
      * @param {string} statusString Description of the current default state.
      * @param {boolean} isDefault Whether or not the browser is currently
      *     default.
+     * @param {boolean} canBeDefault Whether or not the browser can be default.
      */
-    updateDefaultBrowserState_: function(statusString, isDefault) {
+    updateDefaultBrowserState_: function(statusString, isDefault,
+                                         canBeDefault) {
       var label = $('defaultBrowserState');
       label.textContent = statusString;
-      if (isDefault) {
-        label.classList.add('current');
-      } else {
-        label.classList.remove('current');
-      }
 
-      $('defaultBrowserUseAsDefaultButton').disabled = isDefault;
+      $('defaultBrowserUseAsDefaultButton').disabled = !canBeDefault ||
+                                                       isDefault;
     },
 
     /**
@@ -286,8 +284,11 @@ cr.define('options', function() {
      * @private
      */
     updateHomepageControlStates_: function() {
-      $('homepageURL').disabled = !this.isHomepageURLFieldEnabled_();
-      $('homepageURL').value = this.homepage_pref_.value;
+      var homepageField = $('homepageURL');
+      homepageField.disabled = !this.isHomepageURLFieldEnabled_();
+      homepageField.value = this.homepage_pref_.value;
+      homepageField.style.backgroundImage = url('chrome://favicon/' +
+                                                this.homepage_pref_.value);
       var disableChoice = !this.isHomepageChoiceEnabled_();
       $('homepageUseURLButton').disabled = disableChoice;
       $('homepageUseNTPButton').disabled = disableChoice;
@@ -397,10 +398,12 @@ cr.define('options', function() {
     },
   };
 
-  BrowserOptions.updateDefaultBrowserState = function(statusString, isDefault) {
+  BrowserOptions.updateDefaultBrowserState = function(statusString, isDefault,
+                                                      canBeDefault) {
     if (!cr.isChromeOS) {
       BrowserOptions.getInstance().updateDefaultBrowserState_(statusString,
-                                                              isDefault);
+                                                              isDefault,
+                                                              canBeDefault);
     }
   };
 
diff --git a/chrome/browser/resources/options/browser_options_page.css b/chrome/browser/resources/options/browser_options_page.css
index 640554f..34864ca 100644
--- a/chrome/browser/resources/options/browser_options_page.css
+++ b/chrome/browser/resources/options/browser_options_page.css
@@ -3,7 +3,19 @@
   height: 100px;
 }
 
+#customHomePageGroup {
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+}
+
+#customHomePageGroup > div {
+  -webkit-padding-start: 1ex;
+  -webkit-box-flex: 1;
+}
+
 #homepageURL {
+  box-sizing: border-box;
+  padding-top: 3px;
   width: 100%;
 }
 
@@ -27,16 +39,12 @@
   -webkit-margin-start: 10px;
 }
 
-#instantOption {
-  margin-bottom: 0px;
-}
-
 #defaultBrowserState {
-  color: #880000;
+  margin-top: 6px;
 }
 
-#defaultBrowserState.current {
-  color: #008800;
+#instantOption {
+  margin-bottom: 0px;
 }
 
 #instantConfirmText {