Commit d729409e authored by Greg Tatum's avatar Greg Tatum
Browse files

Bug 1829687 - Apply UX feedback to consolidate translation panel views;...

Bug 1829687 - Apply UX feedback to consolidate translation panel views; r=nordzilla,fluent-reviewers,flod

UX changed their mind on how the default translation panel should work.
I originally pushed back against getting this done for MVP, but the
logic is much easier when the translation panel can be manually invoked
by the user.

Differential Revision: https://phabricator.services.mozilla.com/D179087
parent 7ce36dd8
Loading
Loading
Loading
Loading
+60 −100
Original line number Diff line number Diff line
@@ -10,18 +10,16 @@
       noautofocus="true"
       aria-labelledby="translations-panel-main-header-label"
       orient="vertical">
  <panelmultiview id="translations-panel-multiview">
    <!-- Default page -->
  <panelmultiview id="translations-panel-multiview"
                  mainViewId="translations-panel-view-default">
    <panelview id="translations-panel-view-default"
               class="PanelUI-subView translations-panel-view"
               role="document"
               showheader="true">
      <hbox class="panel-header translations-panel-header">
        <html:h1>
          <html:span data-l10n-id="translations-panel-default-header"></html:span>
          <html:span id="translations-panel-header"></html:span>
        </html:h1>
        <!-- The "toolbarbutton#translations-panel-settings" will get cloned into other
             .panel-header elements. -->
        <toolbarbutton id="translations-panel-settings" class="panel-info-button"
                       data-l10n-id="translations-panel-settings-button"
                       closemenu="none"
@@ -47,9 +45,6 @@
                      autocheck="false"
                      oncommand="TranslationsPanel.onNeverTranslateSite()"/>
            <menuseparator/>
            <menuitem data-l10n-id="translations-panel-settings-change-source-language"
                      class="translations-panel-change-source"
                      oncommand="TranslationsPanel.showDualView()"/>
            <menuitem data-l10n-id="translations-panel-settings-manage-languages"
                      oncommand="TranslationsPanel.openManageLanguages()"/>
          </menupopup>
@@ -57,129 +52,94 @@
      </hbox>

      <vbox class="translations-panel-content">
        <description id="translations-panel-default-description"></description>
        <label data-l10n-id="translations-panel-default-translate-to-label"></label>
        <menulist id="translations-panel-default-to"
                  flex="1"
                  value="detect"
                  size="large">
          <menupopup id="translations-panel-default-to-menupopup"
                     class="translations-panel-language-menupopup-to">
            <!-- The list of <menuitem> will be dynamically inserted. -->
          </menupopup>
        </menulist>
      </vbox>

      <hbox class="panel-footer translations-panel-footer">
        <hbox id="translations-panel-error">
          <image class="translations-panel-error-icon" />
          <description id="translations-panel-error-message"></description>
        </hbox>
        <button class="subviewbutton panel-subview-footer-button"
                id="translations-panel-not-now"
                oncommand="TranslationsPanel.onCancel(event);"
                data-l10n-id="translations-panel-default-translate-cancel"
                tabindex="0">
        </button>
        <button default="true"
                class="subviewbutton panel-subview-footer-button"
                oncommand="TranslationsPanel.onDefaultTranslate(event);"
                data-l10n-id="translations-panel-default-translate-button"
                tabindex="0">
        </button>
      </hbox>
    </panelview>

    <!-- Dual language selection view -->
    <panelview id="translations-panel-view-dual"
               class="PanelUI-subView translations-panel-view"
               role="document"
               data-l10n-id="translations-panel-dual-header">
      <vbox class="translations-panel-content">
        <label data-l10n-id="translations-panel-dual-from-label"></label>
        <menulist id="translations-panel-dual-from"
        <vbox id="translations-panel-lang-selection">
          <label data-l10n-id="translations-panel-from-label"></label>
          <menulist id="translations-panel-from"
                    flex="1"
                    value="detect"
                    size="large"
                  oncommand="TranslationsPanel.onChangeDualLanguages(event)">
          <menupopup id="translations-panel-dual-from-menupopup"
                    oncommand="TranslationsPanel.onChangeLanguages(event)">
            <menupopup id="translations-panel-from-menupopup"
                      class="translations-panel-language-menupopup-from">
              <menuitem data-l10n-id="translations-panel-choose-language" value=""></menuitem>
              <!-- The list of <menuitem> will be dynamically inserted. -->
            </menupopup>
          </menulist>

        <label data-l10n-id="translations-panel-dual-to-label"></label>
        <menulist id="translations-panel-dual-to"
          <label data-l10n-id="translations-panel-to-label"></label>
          <menulist id="translations-panel-to"
                    flex="1"
                    value="detect"
                    size="large"
                  oncommand="TranslationsPanel.onChangeDualLanguages(event)">
          <menupopup id="translations-panel-dual-to-menupopup"
                    oncommand="TranslationsPanel.onChangeLanguages(event)">
            <menupopup id="translations-panel-to-menupopup"
                      class="translations-panel-language-menupopup-to">
              <menuitem data-l10n-id="translations-panel-choose-language" value=""></menuitem>
              <!-- The list of <menuitem> will be dynamically inserted. -->
            </menupopup>
          </menulist>
        </vbox>

        <vbox id="translations-panel-error">
          <hbox class="translations-panel-error-header">
            <image class="translations-panel-error-icon translations-panel-error-header-icon" />
            <description id="translations-panel-error-message"></description>
          </hbox>
          <hbox id="translations-panel-error-message-hint"></hbox>
          <hbox pack="end">
            <button id="translations-panel-translate-hint-action" />
          </hbox>
        </vbox>
      </vbox>

      <hbox class="panel-footer translations-panel-footer">
        <button class="subviewbutton panel-subview-footer-button"
                id="translations-panel-not-now"
        <button id="translations-panel-restore-button"
                class="subviewbutton panel-subview-footer-button"
                oncommand="TranslationsPanel.onRestore(event);"
                data-l10n-id="translations-panel-restore-button"
                tabindex="0">
        </button>
        <button id="translations-panel-not-now"
                class="subviewbutton panel-subview-footer-button"
                oncommand="TranslationsPanel.onCancel(event);"
                data-l10n-id="translations-panel-dual-cancel-button"
                data-l10n-id="translations-panel-translate-cancel"
                tabindex="0">
        </button>
        <button id="translations-panel-dual-translate"
                default="true"
        <button id="translations-panel-translate"
                class="subviewbutton panel-subview-footer-button"
                oncommand="TranslationsPanel.onDualTranslate(event);"
                data-l10n-id="translations-panel-default-translate-button"
                oncommand="TranslationsPanel.onTranslate(event);"
                data-l10n-id="translations-panel-translate-button"
                default="true"
                tabindex="0">
        </button>
      </hbox>
    </panelview>

    <!-- Revisit the translations panel -->
    <panelview id="translations-panel-view-revisit"
    <panelview id="translations-panel-view-unsupported-language"
               class="PanelUI-subView translations-panel-view"
               role="document"
               showheader="true">
      <hbox class="panel-header translations-panel-header">
        <image class="translations-panel-error-icon" />
        <html:h1>
          <html:span id="translations-panel-revisit-header">
            <!-- The "to" and "from" languages will be set here -->
          </html:span>
          <html:span data-l10n-id="translations-panel-error-unsupported"></html:span>
        </html:h1>
        <!-- The "toolbarbutton#translations-panel-settings" gets cloned here. -->
      </hbox>

      <vbox class="translations-panel-content">
        <label id="translations-panel-revisit-label"
               data-l10n-id="translations-panel-revisit-label">
        </label>
        <menulist id="translations-panel-revisit-to"
                flex="1"
                value="detect"
                size="large"
                oncommand="TranslationsPanel.onChangeRevisitTo(event)">
          <menupopup class="translations-panel-language-menupopup-to">
            <menuitem data-l10n-id="translations-panel-choose-language" value=""></menuitem>
            <!-- The list of <menuitem> will be dynamically inserted. -->
          </menupopup>
        </menulist>
        <description id="translations-panel-error-unsupported-hint"></description>
      </vbox>

      <hbox class="panel-footer translations-panel-footer">
        <button class="subviewbutton panel-subview-footer-button"
                oncommand="TranslationsPanel.onRestore(event);"
                data-l10n-id="translations-panel-revisit-restore-button"
                oncommand="TranslationsPanel.onChangeSourceLanguage(event);"
                data-l10n-id="translations-panel-error-change-button"
                tabindex="0">
        </button>
        <button id="translations-panel-revisit-translate"
        <button class="subviewbutton panel-subview-footer-button"
                oncommand="TranslationsPanel.onCancel(event);"
                data-l10n-id="translations-panel-error-dismiss-button"
                default="true"
                class="subviewbutton panel-subview-footer-button"
                oncommand="TranslationsPanel.onRevisitTranslate(event);"
                data-l10n-id="translations-panel-revisit-translate-button"
                tabindex="0">
        </button>
      </hbox>
+203 −143

File changed.

Preview size limit exceeded, changes collapsed.

+26 −36
Original line number Diff line number Diff line
@@ -19,34 +19,9 @@ translations-panel-displayname-beta =

translations-panel-settings-manage-languages =
  .label = Manage languages
translations-panel-settings-change-source-language =
  .label = Change source language
# TODO(Bug 1831341): We still need the link for this menu item.
translations-panel-settings-about = About translations in { -brand-shorter-name }

## The translation panel appears from the url bar, and this view is the default
## translation view.

translations-panel-default-header = Translate this page?

# If your language requires declining the language name, a possible solution
# is to adapt the structure of the phrase, or use a support noun, e.g.
# `Looks like this page is in another language ({ $pageLanguage }). Want to translate it?`
# Variables:
#   $pageLanguage (string) - The localized display name of the page's language
translations-panel-default-description = Looks like this page is in { $pageLanguage }. Want to translate it?

# This label is followed, on a new line, by a dropdown list of language names.
# If this structure is problematic for your locale, an alternative way is to
# translate this as `Target language:`
translations-panel-default-translate-to-label = Translate to
translations-panel-default-translate-button = Translate
translations-panel-default-translate-cancel = Not now

translations-panel-error-translating = There was a problem translating. Please try again.
translations-panel-error-load-languages = Couldn’t load languages
translations-panel-error-load-languages-hint = Check your internet connection and try again.

# Text displayed for the option to always translate a given language
# Variables:
#   $language (string) - The localized display name of the detected language
@@ -67,19 +42,36 @@ translations-panel-settings-never-translate-unknown-language =
translations-panel-settings-never-translate-site =
  .label = Never translate this site

## The translation panel appears from the url bar, and this view is the "dual" translate
## view that lets you choose a source language and target language for translation
## The translation panel appears from the url bar, and this view is the default
## translation view.

translations-panel-header = Translate this page?
translations-panel-translate-button = Translate
translations-panel-translate-cancel = Cancel

translations-panel-error-translating = There was a problem translating. Please try again.
translations-panel-error-load-languages = Couldn’t load languages
translations-panel-error-load-languages-hint = Check your internet connection and try again.
translations-panel-error-load-languages-hint-button = Try again

translations-panel-dual-header =
  .title = Translate this page?
translations-panel-dual-cancel-button = Cancel
translations-panel-error-unsupported = Translation isn’t available for this page
translations-panel-error-dismiss-button = Got it
translations-panel-error-change-button = Change source language
# If your language requires declining the language name, a possible solution
# is to adapt the structure of the phrase, or use a support noun, e.g.
# `Sorry, we don't support the language yet: { $language }
#
# Variables:
#   $language (string) - The language of the document.
translations-panel-error-unsupported-hint-known = Sorry, we don’t support { $language } yet.
translations-panel-error-unsupported-hint-unknown = Sorry, we don’t support this language yet.

## Each label is followed, on a new line, by a dropdown list of language names.
## If this structure is problematic for your locale, an alternative way is to
## translate them as `Source language:` and `Target language:`

translations-panel-dual-from-label = Translate from
translations-panel-dual-to-label = Translate to
translations-panel-from-label = Translate from
translations-panel-to-label = Translate to

## The translation panel appears from the url bar, and this view is the "restore" view
## that lets a user restore a page to the original language, or translate into another
@@ -92,12 +84,10 @@ translations-panel-dual-to-label = Translate to
# Variables:
#   $fromLanguage (string) - The original language of the document.
#   $toLanguage (string) - The target language of the translation.
translations-panel-revisit-header = The page is translated from { $fromLanguage } to { $toLanguage }
translations-panel-revisit-label = Want to try another language?
translations-panel-revisit-header = This page is translated from { $fromLanguage } to { $toLanguage }
translations-panel-choose-language =
  .label = Choose a language
translations-panel-revisit-restore-button = Show original
translations-panel-revisit-translate-button = Translate
translations-panel-restore-button = Show original

## Firefox Translations language management in about:preferences.

+39 −18
Original line number Diff line number Diff line
@@ -23,16 +23,15 @@ image.translations-panel-gear-icon {
}

.translations-panel-content {
  display: flex;
  flex-direction: column;
  padding: var(--arrowpanel-padding);
  gap: var(--arrowpanel-padding);
}

.translations-panel-content > label:first-child {
#translations-panel-lang-selection > label:first-child {
  margin-block-start: 0;
}

.translations-panel-content > label {
#translations-panel-lang-selection > label {
  margin-block: var(--arrowpanel-padding) 6px;
}

@@ -43,18 +42,35 @@ image.translations-panel-gear-icon {
  background-color: var(--button-primary-bgcolor);
}

#translations-panel-error {
  color: #e22850;
  /* Align the error icon to the start. */
  align-items: start;
#translations-panel-translate-hint-action {
  appearance: none;
  background-color: var(--button-bgcolor);
  border-radius: 4px;
  color: var(--button-color);
  padding: 8px 16px;
  font-size: 0.9em;
}

@media (-moz-platform: windows) {
  #translations-panel-error {
    /* On windows the default button in the panel-footer is flipped with the order
       property. In order to keep the error on the flex-start, it also needs a -1 order. */
    order: -1;
#translations-panel-translate-hint-action:hover {
  background-color: var(--button-hover-bgcolor);
}

#translations-panel-translate-hint-action:hover:active {
  background-color: var(--button-active-bgcolor);
}

#translations-panel-translate-hint-action:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

#translations-panel-error-message-hint {
  margin-inline-start: 21px;
  margin-block: 8px;
}

#translations-panel-error-message {
  font-weight: 600;
}

.translations-panel-error-icon {
@@ -62,10 +78,15 @@ image.translations-panel-gear-icon {
  fill: currentColor;
  list-style-image: url(chrome://global/skin/icons/error.svg);
  margin-inline-end: 5px;
  width: 16px;
}

@media (prefers-color-scheme: dark) {
  #translations-panel-error {
    color: #ff9aa2;
.translations-panel-error-header {
  align-items: start;
}

#translations-panel-error {
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 12px;
}