1 files changed, 137 insertions, 74 deletions
diff --git a/browser/components/translations/content/selectTranslationsPanel.inc.xhtml b/browser/components/translations/content/selectTranslationsPanel.inc.xhtml
index 8c643ea3f6..287bd65679 100644
--- a/browser/components/translations/content/selectTranslationsPanel.inc.xhtml
+++ b/browser/components/translations/content/selectTranslationsPanel.inc.xhtml
@@ -8,95 +8,158 @@
          type="arrow"
          role="alertdialog"
          noautofocus="true"
+         tabspecific="true"
+         locationspecific="true"
          aria-labelledby="translations-panel-header"
-         orient="vertical"
-         onpopupshown="SelectTranslationsPanel.handlePanelPopupShownEvent(event)"
-         onpopuphidden="SelectTranslationsPanel.handlePanelPopupHiddenEvent(event)">
+         orient="vertical">
     <hbox class="panel-header select-translations-panel-header">
       <html:h1 class="translations-panel-header-wrapper">
         <html:span id="select-translations-panel-header" data-l10n-id="select-translations-panel-header">
         </html:span>
       </html:h1>
-      <hbox class="translations-panel-beta">
+      <hbox class="translations-panel-beta" role="image" aria-label="Beta">
         <image id="select-translations-panel-beta-icon"
                class="translations-panel-beta-icon">
         </image>
       </hbox>
-      <toolbarbutton id="select-translations-panel-settings"
+      <toolbarbutton id="select-translations-panel-settings-button"
                      class="panel-info-button translations-panel-settings-gear-icon"
                      data-l10n-id="translations-panel-settings-button"
-                     closemenu="none" />
+                     tabindex="0"
+                     closemenu="none"/>
     </hbox>
-    <vbox class="select-translations-panel-content">
-      <hbox id="select-translations-panel-lang-selection">
-        <vbox flex="1">
-          <label id="select-translations-panel-from-label"
-                 class="select-translations-panel-label"
-                 data-l10n-id="select-translations-panel-from-label">
-          </label>
-          <menulist id="select-translations-panel-from"
-                    flex="1"
-                    value=""
-                    size="large"
-                    data-l10n-id="translations-panel-choose-language"
-                    aria-labelledby="select-translations-panel-from-label"
-                    noinitialselection="true"
-                    oncommand="SelectTranslationsPanel.onChangeFromLanguage(event)">
-            <menupopup id="select-translations-panel-from-menupopup"
-                       onpopupshown="SelectTranslationsPanel.handlePanelPopupShownEvent(event)"
-                       class="translations-panel-language-menupopup-from">
-              <!-- The list of <menuitem> will be dynamically inserted. -->
-            </menupopup>
-          </menulist>
-        </vbox>
-        <vbox flex="1">
-          <label id="select-translations-panel-to-label"
-                 class="select-translations-panel-label"
-                 data-l10n-id="select-translations-panel-to-label">
-          </label>
-          <menulist id="select-translations-panel-to"
-                    flex="1"
-                    value=""
-                    size="large"
-                    data-l10n-id="translations-panel-choose-language"
-                    aria-labelledby="select-translations-panel-to-label"
-                    noinitialselection="true"
-                    oncommand="SelectTranslationsPanel.onChangeToLanguage(event)">
-            <menupopup id="select-translations-panel-to-menupopup"
-                       onpopupshown="SelectTranslationsPanel.handlePanelPopupShownEvent(event)"
-                       class="translations-panel-language-menupopup-to">
-              <!-- The list of <menuitem> will be dynamically inserted. -->
-            </menupopup>
-          </menulist>
-        </vbox>
-      </hbox>
-    </vbox>
-    <vbox class="select-translations-panel-content">
-      <html:textarea id="select-translations-panel-text-area"
-                     class="select-translations-panel-text-area"
-                     readonly="true"
-                     tabindex="0">
-      </html:textarea>
-    </vbox>
-
-    <hbox class="select-translations-panel-content">
+    <html:div id="select-translations-panel-init-failure-content"
+              class="translations-panel-content"
+              hidden="true">
+      <html:moz-message-bar id="select-translations-panel-init-failure-message-bar"
+                            type="error"
+                            class="select-translations-panel-message-bar"
+                            data-l10n-id="select-translations-panel-init-failure-message"
+                            data-l10n-attrs="message">
+      </html:moz-message-bar>
+    </html:div>
+    <html:div id="select-translations-panel-unsupported-language-content" hidden="true">
+      <vbox flex="1" class="select-translations-panel-content">
+        <html:moz-message-bar id="select-translations-panel-unsupported-language-message-bar"
+                              type="info"
+                              class="select-translations-panel-message-bar"
+                              data-l10n-id="select-translations-panel-unsupported-language-message-unknown"
+                              data-l10n-attrs="message">
+        </html:moz-message-bar>
+        <label id="select-translations-panel-try-another-language-label"
+               class="select-translations-panel-label"
+               data-l10n-id="select-translations-panel-try-another-language-label">
+        </label>
+        <menulist id="select-translations-panel-try-another-language"
+                  flex="1"
+                  value=""
+                  size="large"
+                  data-l10n-id="translations-panel-choose-language"
+                  aria-labelledby="select-translations-panel-try-another-language-label"
+                  noinitialselection="true">
+          <menupopup id="select-translations-panel-try-another-language-menupopup"
+                     class="translations-panel-language-menupopup-from">
+            <!-- The list of <menuitem> will be dynamically inserted. -->
+          </menupopup>
+        </menulist>
+      </vbox>
+    </html:div>
+    <html:div id="select-translations-panel-main-content">
+      <vbox class="select-translations-panel-content">
+        <hbox id="select-translations-panel-lang-selection">
+          <vbox flex="1">
+            <label id="select-translations-panel-from-label"
+                   class="select-translations-panel-label"
+                   data-l10n-id="select-translations-panel-from-label">
+            </label>
+            <menulist id="select-translations-panel-from"
+                      flex="1"
+                      value=""
+                      size="large"
+                      data-l10n-id="translations-panel-choose-language"
+                      aria-labelledby="select-translations-panel-from-label"
+                      noinitialselection="true">
+              <menupopup id="select-translations-panel-from-menupopup"
+                         class="translations-panel-language-menupopup-from">
+                <!-- The list of <menuitem> will be dynamically inserted. -->
+              </menupopup>
+            </menulist>
+          </vbox>
+          <vbox flex="1">
+            <label id="select-translations-panel-to-label"
+                   class="select-translations-panel-label"
+                   data-l10n-id="select-translations-panel-to-label">
+            </label>
+            <menulist id="select-translations-panel-to"
+                      flex="1"
+                      value=""
+                      size="large"
+                      data-l10n-id="translations-panel-choose-language"
+                      aria-labelledby="select-translations-panel-to-label"
+                      noinitialselection="true">
+              <menupopup id="select-translations-panel-to-menupopup"
+                         class="translations-panel-language-menupopup-to">
+                <!-- The list of <menuitem> will be dynamically inserted. -->
+              </menupopup>
+            </menulist>
+          </vbox>
+        </hbox>
+      </vbox>
+      <vbox class="select-translations-panel-content">
+        <html:textarea id="select-translations-panel-text-area"
+                       class="select-translations-panel-text-area"
+                       readonly="true"
+                       tabindex="0">
+        </html:textarea>
+        <html:moz-message-bar id="select-translations-panel-translation-failure-message-bar"
+                              type="error"
+                              hidden="true"
+                              data-l10n-id="select-translations-panel-translation-failure-message"
+                              data-l10n-attrs="message">
+        </html:moz-message-bar>
+      </vbox>
+    </html:div>
+    <html:div id="select-translations-panel-footer"
+              class="panel-footer translations-panel-footer">
       <button id="select-translations-panel-copy-button"
-              class="footer-button select-translations-panel-button select-translations-panel-copy-button"
+              class="footer-button select-translations-panel-copy-button"
               data-l10n-id="select-translations-panel-copy-button">
       </button>
-    </hbox>
-
-    <html:moz-button-group class="panel-footer translations-panel-footer">
-      <button id="select-translations-panel-translate-full-page-button"
-              class="footer-button select-translations-panel-button"
-              data-l10n-id="select-translations-panel-translate-full-page-button">
-      </button>
-      <button id="select-translations-panel-done-button"
-              class="footer-button select-translations-panel-button"
-              data-l10n-id="select-translations-panel-done-button"
-              default="true"
-              oncommand = "SelectTranslationsPanel.close()">
-      </button>
-    </html:moz-button-group>
+      <html:moz-button-group id="select-translations-panel-footer-button-group"
+                             class="translations-panel-button-group">
+        <button id="select-translations-panel-cancel-button"
+                class="footer-button"
+                hidden="true"
+                data-l10n-id="select-translations-panel-cancel-button">
+        </button>
+        <button id="select-translations-panel-done-button-secondary"
+                hidden="true"
+                class="footer-button"
+                data-l10n-id="select-translations-panel-done-button">
+        </button>
+        <button id="select-translations-panel-translate-full-page-button"
+                class="footer-button"
+                data-l10n-id="select-translations-panel-translate-full-page-button">
+        </button>
+        <button id="select-translations-panel-done-button-primary"
+                class="footer-button"
+                data-l10n-id="select-translations-panel-done-button"
+                default="true">
+        </button>
+        <button id="select-translations-panel-translate-button"
+                class="footer-button"
+                data-l10n-id="select-translations-panel-translate-button"
+                hidden="true"
+                default="true"
+                disabled="true">
+        </button>
+        <button id="select-translations-panel-try-again-button"
+                class="footer-button"
+                data-l10n-id="select-translations-panel-try-again-button"
+                hidden="true"
+                default="true">
+        </button>
+      </html:moz-button-group>
+    </html:div>
   </panel>
 </html:template>