Implemented new channel switcher UI.

chrome/browser/resources/help/channel_change_page.html

Index: chrome/browser/resources/help/channel_change_page.html
diff --git a/chrome/browser/resources/help/channel_change_page.html b/chrome/browser/resources/help/channel_change_page.html
new file mode 100644
index 0000000000000000000000000000000000000000..be8597903477eb2fce2b8647fd7a6566cabdbf22
--- /dev/null
+++ b/chrome/browser/resources/help/channel_change_page.html
@@ -0,0 +1,47 @@
+<div id="channel-change-page" class="page">
+  <div class="close-button"></div>
+  <h1 i18n-content="channelChangePageTitle"></h1>
+  <div class="content-area">
+    <div class="channel-change-page-channel">
+      <input id="stable" type="radio" name="channel" value="stable-channel">

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

"stable" as an ID is kinda dangerous (it may conflict w/ IDs from other
components).  I suggest making it more unique and specific to this component
(same for similarly-named IDs here).

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

Done.

+      <label for="stable" i18n-content="stable"></label>
+    </div>
+    <div class="channel-change-page-channel">
+      <input id="beta" type="radio" name="channel" value="beta-channel">
+      <label for="beta" i18n-content="beta"></label>
+    </div>
+    <div class="channel-change-page-channel">
+      <input id="dev" type="radio" name="channel" value="dev-channel">
+      <label for="dev" i18n-content="dev"></label>
+    </div>
+  </div>
+  <div class="content-area">
+    <div class="show-when-selected-channel-requires-powerwash">

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

Why is this a class instead of an ID?  It appears to only be used once.

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

channel-change-page-powerwash-button also is visible iff
selected-channel-requires-powerwash class is set.
Also for uniform and simple UI transformations.

On 2013/06/24 18:13:12, James Hawkins wrote:

+      <h2 i18n-content="channelChangePagePowerwashTitle"></h2>
+      <div i18n-content="channelChangePagePowerwashMessage"></div>
+    </div>
+    <div class="show-when-selected-channel-requires-delayed-update">
+      <h2 i18n-content="channelChangePageDelayedChangeTitle"></h2>
+      <div i18n-content="channelChangePageDelayedChangeMessage"></div>
+    </div>
+    <div class="show-when-selected-channel-unstable">
+      <h2 i18n-content="channelChangePageUnstableTitle"></h2>
+      <div i18n-content="channelChangePageUnstableMessage"></div>
+    </div>
+  </div>
+  <div class="action-area">
+    <div class="button-strip">
+      <button id="channel-change-page-powerwash-button"
+          class="show-when-selected-channel-requires-powerwash"
+          i18n-content="channelChangePagePowerwashButton"></button>

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

nit: Closing tag of wrapped element must be on a new line.  Same for other
cases.

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

Done.

+      <button id="channel-change-page-change-button"
+          class="show-when-selected-channel-requires-delayed-update
+                 show-when-selected-channel-good
+                 show-when-selected-channel-unstable"
+          i18n-content="channelChangePageChangeButton"></button>
+      <button id="channel-change-page-cancel-button"
+          class="default-button"
+          i18n-content="channelChangePageCancelButton"></button>
+    </div>
+  </div>
+</div>