Implemented new channel switcher UI.

chrome/browser/resources/help/help.css

Index: chrome/browser/resources/help/help.css
diff --git a/chrome/browser/resources/help/help.css b/chrome/browser/resources/help/help.css
index dff761215b6e2c8fa19b890685c307ef2a9c01f8..7725f014e3b3a433ed9ab47e2fba12c116d4bd49 100644
--- a/chrome/browser/resources/help/help.css
+++ b/chrome/browser/resources/help/help.css
@@ -7,6 +7,14 @@ body {
   -webkit-user-select: text;
 }
 
+#overlay {
+  z-index: 5;

[James Hawkins, 2013/06/24 18:13:12]

Why is this necessary?

[ygorshenin1, 2013/06/24 18:35:31]

Done.

+}
+
+#overlay .page:not(.showing) {
+  display: none;
+}
+
 #about-container {
   -webkit-box-align: center;
   display: -webkit-box;
@@ -51,15 +59,24 @@ body {
   margin-top: 200px;
 }
 
-#update-status-icon {
+.help-page-icon,
+.help-page-icon-large {
   background-repeat: no-repeat;
   display: inline-block;
-  height: 17px;
   margin-right: 4px;
   vertical-align: top;
+}
+
+.help-page-icon {
+  height: 17px;
   width: 17px;
 }
 
+.help-page-icon-large {
+  height: 22px;
+  width: 22px;
+}
+
 #update-status-icon.up-to-date {
   background-image: url('chrome://theme/IDR_UPDATE_UPTODATE');
   background-size: 17px;
@@ -101,3 +118,33 @@ body {
 #channel-change-confirmation {
   margin-top: 5px;
 }
+
+#change-channel {
+  margin-top: 8px;
+}
+
+#channel-change-disallowed-icon {
+  background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY');
+  background-size: 17px;
+  margin-left: 4px;

[James Hawkins, 2013/06/24 18:13:12]

RTL, i.e., use -webkit-margin-start.

[ygorshenin1, 2013/06/24 18:35:31]

Done.

+  vertical-align: middle;
+}
+
+.channel-change-error-bubble {
+  display: -webkit-box;
+}
+
+.channel-change-error-icon {
+  background-image:
+      url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_LARGE');
+  background-size: 22px;
+  margin-left: 4px;

[James Hawkins, 2013/06/24 18:13:12]

RTL

[ygorshenin1, 2013/06/24 18:35:31]

Done.

+  vertical-align: top;
+}
+
+.channel-change-error-text {
+  display: block;
+  margin-left: 4px;

[James Hawkins, 2013/06/24 18:13:12]

RTL

[ygorshenin1, 2013/06/24 18:35:31]

Done.

+  vertical-align: top;
+  width: 240px;
+}