Fix Google Translate breaking web interface (#15610)

- marks the page as a whole as untranslatable
- still marks user text as translatable

Co-authored-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/mastodon/components/status_content.js

@@ -221,14 +221,14 @@ export default class StatusContent extends React.PureComponent {
       return (
         <div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
           <p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}>
-            <span dangerouslySetInnerHTML={spoilerContent} />
+            <span dangerouslySetInnerHTML={spoilerContent} className='translate' />
             {' '}
             <button tabIndex='0' className={`status__content__spoiler-link ${hidden ? 'status__content__spoiler-link--show-more' : 'status__content__spoiler-link--show-less'}`} onClick={this.handleSpoilerClick}>{toggleText}</button>
           </p>
 
           {mentionsPlaceholder}
 
-          <div tabIndex={!hidden ? 0 : null} className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''}`} dangerouslySetInnerHTML={content} />
+          <div tabIndex={!hidden ? 0 : null} className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''} translate`} dangerouslySetInnerHTML={content} />
 
           {!hidden && !!status.get('poll') && <PollContainer pollId={status.get('poll')} />}
 
@@ -238,7 +238,7 @@ export default class StatusContent extends React.PureComponent {
     } else if (this.props.onClick) {
       const output = [
         <div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content'>
-          <div className='status__content__text status__content__text--visible' dangerouslySetInnerHTML={content} />
+          <div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} />
 
           {!!status.get('poll') && <PollContainer pollId={status.get('poll')} />}
 
@@ -254,7 +254,7 @@ export default class StatusContent extends React.PureComponent {
     } else {
       return (
         <div className={classNames} ref={this.setRef} tabIndex='0'>
-          <div className='status__content__text status__content__text--visible' dangerouslySetInnerHTML={content} />
+          <div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} />
 
           {!!status.get('poll') && <PollContainer pollId={status.get('poll')} />}
 

app/javascript/mastodon/features/account/components/header.js

@@ -328,9 +328,9 @@ class Header extends ImmutablePureComponent {
                   ))}
                   {fields.map((pair, i) => (
                     <dl key={i}>
-                      <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} />
+                      <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' />
 
-                      <dd className={pair.get('verified_at') && 'verified'} title={pair.get('value_plain')}>
+                      <dd className={pair.get('verified_at') && 'verified'} title={pair.get('value_plain')} className='translate'>
                         {pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
                       </dd>
                     </dl>
@@ -340,7 +340,7 @@ class Header extends ImmutablePureComponent {
 
               {account.get('id') !== me && !suspended && <AccountNoteContainer account={account} />}
 
-              {account.get('note').length > 0 && account.get('note') !== '<p></p>' && <div className='account__header__content' dangerouslySetInnerHTML={content} />}
+              {account.get('note').length > 0 && account.get('note') !== '<p></p>' && <div className='account__header__content' dangerouslySetInnerHTML={content} className='translate' />}
             </div>
 
             {!suspended && (

app/javascript/mastodon/features/getting_started/components/announcements.js

@@ -145,7 +145,7 @@ class Content extends ImmutablePureComponent {
 
     return (
       <div
-        className='announcements__item__content'
+        className='announcements__item__content translate'
         ref={this.setRef}
         dangerouslySetInnerHTML={{ __html: announcement.get('contentHtml') }}
       />

app/views/home/index.html.haml

@@ -8,7 +8,7 @@
   = render_initial_state
   = javascript_pack_tag 'application', crossorigin: 'anonymous'
 
-.app-holder#mastodon{ data: { props: Oj.dump(default_props) } }
+.notranslate.app-holder#mastodon{ data: { props: Oj.dump(default_props) } }
   %noscript
     = image_pack_tag 'logo.svg', alt: 'Mastodon'
 

app/views/public_timelines/show.html.haml

@@ -14,4 +14,4 @@
     %p= t('about.browse_local_posts')
 
 #mastodon-timeline{ data: { props: Oj.dump(default_props.merge(local: !Setting.show_known_fediverse_at_about_page)) }}
-#modal-container
+.notranslate#modal-container

app/views/tags/show.html.haml

@@ -13,4 +13,4 @@
   %p= t('about.about_hashtag_html', hashtag: @tag.name)
 
 #mastodon-timeline{ data: { props: Oj.dump(default_props.merge(hashtag: @tag.name, local: @local)) }}
-#modal-container
+.notranslate#modal-container