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

browser/components/translations/content/translationsPanel.inc.xhtml

+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>

browser/components/translations/content/translationsPanel.js

+203 −143

File changed.

Preview size limit exceeded, changes collapsed.

browser/locales-preview/translations.ftl

+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.

browser/themes/shared/translations/panel.css

+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;

}