<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[8751] sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations: Translate: Update editor interface for translations.</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="http://meta.trac.wordpress.org/changeset/8751">8751</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"http://meta.trac.wordpress.org/changeset/8751","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>ocean90</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2019-05-08 19:33:18 +0000 (Wed, 08 May 2019)</dd>
</dl>

<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Translate: Update editor interface for translations.

* Increase focus on translation by moving original, context and translation into the same column.
* Add tabs for plural forms.
* Move action buttons more closely to textarea.
* Increase size for textareas.
* Automatically resize textarea heights.
* Provide an area for suggestions, see <a href="http://meta.trac.wordpress.org/ticket/4430">#4430</a>.
* Add help dialog with support for locale resources, see <a href="http://meta.trac.wordpress.org/ticket/3522">#3522</a>.
* Stack columns on mobile.

See <a href="http://meta.trac.wordpress.org/ticket/4431">#4431</a>.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationsincclasspluginphp">sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/inc/class-plugin.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationstemplatesfooterphp">sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/footer.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationstemplateshelperfunctionsphp">sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/helper-functions.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationstemplatesstylecss">sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/style.css</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationstemplatestranslationroweditorphp">sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/translation-row-editor.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationstemplatestranslationrowpreviewphp">sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/translation-row-preview.php</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationstemplatesjsautosizeminjs">sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/js/autosize.min.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationstemplatesjsdetailselementpolyfillminjs">sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/js/details-element-polyfill.min.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationstemplatesjseditorjs">sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/js/editor.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationsincclasspluginphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/inc/class-plugin.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/inc/class-plugin.php     2019-05-08 17:02:43 UTC (rev 8750)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/inc/class-plugin.php       2019-05-08 19:33:18 UTC (rev 8751)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -258,6 +258,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">         */
</span><span class="cx" style="display: block; padding: 0 10px">        public function after_setup_theme() {
</span><span class="cx" style="display: block; padding: 0 10px">                register_nav_menu( 'wporg_header_subsite_nav', 'WordPress.org Header Sub-Navigation' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                register_nav_menu( 'wporg_translate_global_resources', 'Global Handbook Resources' );
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        /**
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationstemplatesfooterphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/footer.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/footer.php     2019-05-08 17:02:43 UTC (rev 8750)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/footer.php       2019-05-08 19:33:18 UTC (rev 8751)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,6 +1,4 @@
</span><span class="cx" style="display: block; padding: 0 10px">        </div><!-- gp-content -->
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        <p id="gp-footer" class="secondary">
-               <?php printf( __('Proudly powered by <a href="%s" title="Found in translation">GlotPress</a>.'), 'http://glotpress.org/' ); ?>
-       </p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php require WPORGPATH . 'footer.php';
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationstemplateshelperfunctionsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/helper-functions.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/helper-functions.php   2019-05-08 17:02:43 UTC (rev 8750)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/helper-functions.php     2019-05-08 19:33:18 UTC (rev 8751)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,13 +1,196 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-wp_register_style( 'wporg-translate', plugins_url( 'style.css', __FILE__ ), array( 'gp-base' ), '20190324' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+wp_register_style(
+               'wporg-translate',
+               plugins_url( 'style.css', __FILE__ ),
+               [ 'gp-base' ],
+               '20190324'
+);
</ins><span class="cx" style="display: block; padding: 0 10px"> gp_enqueue_style( 'wporg-translate' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-gp_enqueue_script( 'jquery' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+wp_register_script(
+       'details-element-polyfill',
+       plugins_url( 'js/details-element-polyfill.min.js', __FILE__ ),
+       [],
+       '2.3.1'
+);
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-wp_register_style( 'chartist', plugins_url( 'css/chartist.min.css', __FILE__ ), array(), '0.9.5' );
-wp_register_script( 'chartist', plugins_url( 'js/chartist.min.js', __FILE__ ), array(), '0.9.5' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+gp_enqueue_script( 'details-element-polyfill' );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+wp_register_script(
+       'autosize',
+       plugins_url( 'js/autosize.min.js', __FILE__ ),
+       [],
+       '4.0.2'
+);
+
+wp_register_script(
+               'wporg-translate-editor',
+               plugins_url( 'js/editor.js', __FILE__ ),
+               [ 'gp-editor', 'autosize' ],
+               '20190506'
+);
+
+wp_register_style(
+               'chartist',
+               plugins_url( 'css/chartist.min.css', __FILE__ ),
+               [],
+               '0.9.5'
+);
+wp_register_script(
+               'chartist',
+               plugins_url( 'js/chartist.min.js', __FILE__ ),
+               [],
+               '0.9.5'
+);
+
+if ( isset( $template ) && 'translations' === $template ) {
+       gp_enqueue_script( 'wporg-translate-editor' );
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Prints markup for translations help modal in footer.
+ */
+add_action( 'gp_footer', static function() use ( $template, $args ) {
+       if ( 'translations' === $template && ! empty( $args['locale_slug'] ) ) {
+               $locale = GP_Locales::by_slug( $args['locale_slug'] );
+               wporg_translation_help_modal( $locale );
+       }
+} );
+
+/**
+ * Prints markup for the translation help dialog.
+ *
+ * @param \GP_Locale $locale Locale of the current translation set.
+ */
+function wporg_translation_help_modal( $locale ) {
+       $locale_resources = wporg_get_locale_resources( $locale )
+       ?>
+       <div id="wporg-translation-help-modal" class="wporg-translate-modal">
+               <div class="wporg-translate-modal__overlay">
+                       <div class="wporg-translate-modal__frame" role="dialog" aria-labelledby="wporg-translation-help-modal-headline">
+                               <div class="wporg-translate-modal__header">
+                                       <h1 id="wporg-translation-help-modal-headline" class="wporg-translate-modal__headline">Help</h1>
+                                       <button type="button" aria-label="Close modal" class="wporg-translate-modal__close"><span class="screen-reader-text">Close</span><span aria-hidden="true" class="dashicons dashicons-no-alt"></span></button>
+                               </div>
+
+                               <div class="wporg-translate-modal__content">
+                                       <div class="wporg-translate-modal__content_primary">
+                                               <h2>Validating Translations</h2>
+                                               <p>After a contributor suggests a string, the string gets a status of “suggested”. In order to transform them into “approved” strings (which will be used in WordPress), a Translation Editor needs to accept (or reject) those suggestions.<br>
+                                                       Please give editors a reasonable time to validate suggestions — We are all volunteers.</p>
+
+                                               <h2>Translation Status</h2>
+                                               <ul class="no-list">
+                                                       <li><span style="color: #c1e1b9">◼︎</span> <strong>Current:</strong> Indicates an approved string.</li>
+                                                       <li><span style="color: #ffe399">◼︎</span> <strong>Waiting:</strong> Indicates a string that was suggested, but not yet approved by a Translation Editor.</li>
+                                                       <li><span style="color: #fbc5a9">◼︎</span> <strong>Fuzzy:</strong> Indicates a “fuzzy” string. Those translations need to be reviewed for accuracy and edited or approved.</li>
+                                                       <li><span style="color: #cdc5e1">◼︎</span> <strong>Old:</strong> Indicates a string that was obsoleted by a newer, approved translation.</li>
+                                                       <li><span style="color: #dc3232">◼︎</span> <strong>Warning:</strong> Indicates validation warnings. These translations either need to be corrected or their warnings explicitly discarded by a Translation Editor.</li>
+                                               </ul>
+                                       </div>
+                                       <div class="wporg-translate-modal__content_secondary">
+                                               <?php if ( $locale_resources ) : ?>
+                                                       <h2><span aria-hidden="true" class="dashicons dashicons-info"></span> Locale Resources for <?php echo esc_html( $locale->english_name ); ?></h2>
+                                                       <?php echo wp_kses_post( $locale_resources ); ?>
+                                               <?php endif; ?>
+
+                                               <h2><span aria-hidden="true" class="dashicons dashicons-admin-page"></span> Global Handbook Resources</h2>
+                                               <?php
+                                               add_filter( 'walker_nav_menu_start_el', 'wporg_add_nav_description', 10, 4 );
+                                               wp_nav_menu( [
+                                                       'theme_location' => 'wporg_translate_global_resources',
+                                                       'fallback_cb'    => false,
+                                                       'container'      => false,
+                                                       'menu_id'        => 'global-resources',
+                                                       'depth'          => 2,
+                                               ] );
+                                               remove_filter( 'walker_nav_menu_start_el', 'wporg_add_nav_description' );
+                                               ?>
+                                       </div>
+                               </div>
+                       </div>
+               </div>
+       </div>
+       <?php
+}
+
+/**
+ * Adds descriptions to navigation items.
+ *
+ * @param string  $item_output The menu item output.
+ * @param WP_Post $item        Menu item object.
+ * @param int     $depth       Depth of the menu.
+ * @param array   $args        wp_nav_menu() arguments.
+ * @return string Menu item with possible description.
+ */
+function wporg_add_nav_description( $item_output, $item, $depth, $args ) {
+       if ( $item->description ) {
+               $item_output = str_replace(
+                       $args->link_after . '</a>',
+                       $args->link_after . '</a>: <span class="menu-item-description">' . $item->description . '</span>',
+                       $item_output
+               );
+       }
+
+       return $item_output;
+}
+
+/**
+ * Retrieves the navigation menu from the assigned Rosetta site.
+ *
+ * Output is cached for an hour.
+ *
+ * @param \GP_Locale $locale
+ * @return string The HTML markup of the navigation menu.
+ */
+function wporg_get_locale_resources( $locale ) {
+       if ( empty( $locale->wp_locale ) ) {
+               return '';
+       }
+
+       $transient_key = 'locale-resources-' . $locale->wp_locale;
+       $cache         = get_transient( $transient_key );
+
+       if ( false !== $cache ) {
+               return $cache;
+       }
+
+       $result = get_sites( [
+               'locale'     => $locale->wp_locale,
+               'network_id' => WPORG_GLOBAL_NETWORK_ID,
+               'path'       => '/',
+               'fields'     => 'ids',
+               'number'     => '1',
+       ] );
+       $site_id = array_shift( $result );
+       if ( ! $site_id ) {
+               set_transient( $transient_key, '', HOUR_IN_SECONDS );
+               return '';
+       }
+
+       switch_to_blog( $site_id );
+
+       add_filter( 'walker_nav_menu_start_el', 'wporg_add_nav_description', 10, 4 );
+
+       $menu = wp_nav_menu( [
+               'theme_location' => 'rosetta_translation_contributor_resources',
+               'fallback_cb'    => false,
+               'container'      => false,
+               'menu_id'        => 'locale-resources',
+               'depth'          => 2,
+               'echo'           => false,
+       ] );
+
+       remove_filter( 'walker_nav_menu_start_el', 'wporg_add_nav_description' );
+
+       restore_current_blog();
+
+       set_transient( $transient_key, $menu, HOUR_IN_SECONDS );
+
+       return $menu;
+}
+
+/**
</ins><span class="cx" style="display: block; padding: 0 10px">  * Adds custom classes to the array of body classes.
</span><span class="cx" style="display: block; padding: 0 10px">  *
</span><span class="cx" style="display: block; padding: 0 10px">  * @param array $classes An array of body classes.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -50,3 +233,56 @@
</span><span class="cx" style="display: block; padding: 0 10px">        </script>
</span><span class="cx" style="display: block; padding: 0 10px">        <?php
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+/**
+ * Prints HTML markup for translation textareas.
+ *
+ * @param object $entry Current translation entry.
+ * @param array $permissions User's permissions.
+ * @param int $index Plural index.
+ */
+function wporg_gp_translate_textarea( $entry, $permissions, $index = 0 ) {
+       list( $can_edit, $can_approve ) = $permissions;
+       $disabled = $can_edit ? '' : 'disabled="disabled"';
+       ?>
+       <div class="textareas<?php echo ( 0 === $index ) ? ' active' : ''; ?>" data-plural-index="<?php echo $index; ?>">
+               <?php
+               if ( isset( $entry->warnings[ $index ] ) ) :
+                       $warnings = $entry->warnings[ $index ];
+                       foreach ( $warnings as $key => $value ) :
+                               ?>
+                               <div class="warning secondary">
+                                       <strong><?php _e( 'Warning:', 'glotpress' ); ?></strong> <?php echo esc_html( $value ); ?>
+
+                                       <?php if ( $can_approve ) : ?>
+                                               <a href="#" class="discard-warning" data-nonce="<?php echo esc_attr( wp_create_nonce( 'discard-warning_' . $index . $key ) ); ?>" data-key="<?php echo esc_attr( $key ); ?>" data-index="<?php echo esc_attr( $index ); ?>"><?php _e( 'Discard', 'glotpress' ); ?></a>
+                                       <?php endif; ?>
+                               </div>
+                               <?php
+                       endforeach;
+               endif;
+               ?>
+               <textarea placeholder="Enter translation here" class="foreign-text" name="translation[<?php echo esc_attr( $entry->original_id ); ?>][]" id="translation_<?php echo esc_attr( $entry->original_id ); ?>_<?php echo esc_attr( $index ); ?>" <?php echo $disabled; // WPCS: XSS ok. ?>><?php echo esc_translation( gp_array_get( $entry->translations, $index ) ); // WPCS: XSS ok. ?></textarea>
+       </div>
+       <?php
+}
+
+/**
+ * Counts the number of warnings.
+ *
+ * @param object $entry Current translation entry.
+ * @return int Number of warnings.
+ */
+function wporg_gp_count_warnings( $entry ) {
+       $count = 0;
+
+       if ( empty( $entry->warnings ) ) {
+               return $count;
+       }
+
+       foreach ( $entry->warnings as $warnings ) {
+               $count += count( $warnings );
+       }
+
+       return $count;
+}
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationstemplatesjsautosizeminjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/js/autosize.min.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/js/autosize.min.js                             (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/js/autosize.min.js       2019-05-08 19:33:18 UTC (rev 8751)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,6 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*!
+       autosize 4.0.2
+       license: MIT
+       http://www.jacklmoore.com/autosize
+*/
+!function(e,t){if("function"==typeof define&&define.amd)define(["module","exports"],t);else if("undefined"!=typeof exports)t(module,exports);else{var n={exports:{}};t(n,n.exports),e.autosize=n.exports}}(this,function(e,t){"use strict";var n,o,p="function"==typeof Map?new Map:(n=[],o=[],{has:function(e){return-1<n.indexOf(e)},get:function(e){return o[n.indexOf(e)]},set:function(e,t){-1===n.indexOf(e)&&(n.push(e),o.push(t))},delete:function(e){var t=n.indexOf(e);-1<t&&(n.splice(t,1),o.splice(t,1))}}),c=function(e){return new Event(e,{bubbles:!0})};try{new Event("test")}catch(e){c=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}function r(r){if(r&&r.nodeName&&"TEXTAREA"===r.nodeName&&!p.has(r)){var e,n=null,o=null,i=null,d=function(){r.clientWidth!==o&&a()},l=function(t){window.removeEventListener("re
 size",d,!1),r.removeEventListener("input",a,!1),r.removeEventListener("keyup",a,!1),r.removeEventListener("autosize:destroy",l,!1),r.removeEventListener("autosize:update",a,!1),Object.keys(t).forEach(function(e){r.style[e]=t[e]}),p.delete(r)}.bind(r,{height:r.style.height,resize:r.style.resize,overflowY:r.style.overflowY,overflowX:r.style.overflowX,wordWrap:r.style.wordWrap});r.addEventListener("autosize:destroy",l,!1),"onpropertychange"in r&&"oninput"in r&&r.addEventListener("keyup",a,!1),window.addEventListener("resize",d,!1),r.addEventListener("input",a,!1),r.addEventListener("autosize:update",a,!1),r.style.overflowX="hidden",r.style.wordWrap="break-word",p.set(r,{destroy:l,update:a}),"vertical"===(e=window.getComputedStyle(r,null)).resize?r.style.resize="none":"both"===e.resize&&(r.style.resiz
 e="horizontal"),n="content-box"===e.boxSizing?-(parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)):parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth),isNaN(n)&&(n=0),a()}function s(e){var t=r.style.width;r.style.width="0px",r.offsetWidth,r.style.width=t,r.style.overflowY=e}function u(){if(0!==r.scrollHeight){var e=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}(r),t=document.documentElement&&document.documentElement.scrollTop;r.style.height="",r.style.height=r.scrollHeight+n+"px",o=r.clientWidth,e.forEach(function(e){e.node.scrollTop=e.scrollTop}),t&&(document.documentElement.scrollTop=t)}}function a(){u();var e=Math.round(parseFloat(r.style.height)),t=window.getComputedStyle(r,null),n="content-box"===t.boxSizing?Math.round(parse
 Float(t.height)):r.offsetHeight;if(n<e?"hidden"===t.overflowY&&(s("scroll"),u(),n="content-box"===t.boxSizing?Math.round(parseFloat(window.getComputedStyle(r,null).height)):r.offsetHeight):"hidden"!==t.overflowY&&(s("hidden"),u(),n="content-box"===t.boxSizing?Math.round(parseFloat(window.getComputedStyle(r,null).height)):r.offsetHeight),i!==n){i=n;var o=c("autosize:resized");try{r.dispatchEvent(o)}catch(e){}}}}function i(e){var t=p.get(e);t&&t.destroy()}function d(e){var t=p.get(e);t&&t.update()}var l=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?((l=function(e){return e}).destroy=function(e){return e},l.update=function(e){return e}):((l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return r(e)}),e}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e},l.
 update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],d),e}),t.default=l,e.exports=t.default});
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationstemplatesjsdetailselementpolyfillminjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/js/details-element-polyfill.min.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/js/details-element-polyfill.min.js                             (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/js/details-element-polyfill.min.js       2019-05-08 19:33:18 UTC (rev 8751)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,5 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*
+Details Element Polyfill 2.3.1
+Copyright © 2019 Javan Makhmali
+*/
+!function(){"use strict";var t=document.createElement("details");t.innerHTML="<summary>a</summary>b",t.setAttribute("style","position: absolute; left: -9999px");var e="open"in t&&function(){(document.body||document.documentElement).appendChild(t);var e=t.offsetHeight;t.open=!0;var n=t.offsetHeight;return t.parentNode.removeChild(t),e!=n}(),n="ontoggle"in t;var r,i,o,a,u='\ndetails, summary {\n  display: block;\n}\ndetails:not([open]) > *:not(summary) {\n  display: none;\n}\nsummary::before {\n  content: "►";\n  padding-right: 0.3rem;\n  font-size: 0.6rem;\n  cursor: default;\n}\n[open] > summary::before {\n  content: "▼";\n}\n',s=[],c=s.forEach,d=s.slice;function m(t){(function(t,e){return(t.tagName==e?[t]:[]).concat("function"==typeof t.getElementsByTagName?d.call(t.getElementsByTagName(e)):[])})(t,"SUMMARY").forEach(function(t){var e=b(t,&quot
 ;DETAILS");t.setAttribute("aria-expanded",e.hasAttribute("open")),t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"),t.hasAttribute("role")||t.setAttribute("role","button")})}function l(t){return!(t.defaultPrevented||t.ctrlKey||t.metaKey||t.shiftKey||t.target.isContentEditable)}function f(t){addEventListener("click",function(e){if(l(e)&&e.which<=1){var n=b(e.target,"SUMMARY");n&&n.parentNode&&"DETAILS"==n.parentNode.tagName&&t(n.parentNode)}},!1),addEventListener("keydown",function(e){if(l(e)&&(13==e.keyCode||32==e.keyCode)){var n=b(e.target,"SUMMARY");n&&n.parentNode&&"DETAILS"==n.parentNode.tagName&&(t(n.parentNode),e.preventDefault())}},!1)}function p(t){var e=document.createEvent("Event");e.initEvent("toggle",!1,!1),t.dispatchEvent(e)}function
  b(t,e){if("function"==typeof t.closest)return t.closest(e);for(;t;){if(t.tagName==e)return t;t=t.parentNode}}e||(document.head.insertAdjacentHTML("afterbegin","<style>"+u+"</style>"),r=document.createElement("details").constructor.prototype,i=r.setAttribute,o=r.removeAttribute,a=Object.getOwnPropertyDescriptor(r,"open"),Object.defineProperties(r,{open:{get:function(){return"DETAILS"==this.tagName?this.hasAttribute("open"):a&&a.get?a.get.call(this):void 0},set:function(t){return"DETAILS"==this.tagName?t?this.setAttribute("open",""):this.removeAttribute("open"):a&&a.set?a.set.call(this,t):void 0}},setAttribute:{value:function(t,e){var n=this,r=function(){return i.call(n,t,e)};if("open"==t&&"DETAILS"==this.tagName){var o=this.hasAttribute("open"),a=r();if(!o){var u=this.querySelector("summary&quot
 ;);u&&u.setAttribute("aria-expanded",!0),p(this)}return a}return r()}},removeAttribute:{value:function(t){var e=this,n=function(){return o.call(e,t)};if("open"==t&&"DETAILS"==this.tagName){var r=this.hasAttribute("open"),i=n();if(r){var a=this.querySelector("summary");a&&a.setAttribute("aria-expanded",!1),p(this)}return i}return n()}}}),f(function(t){t.hasAttribute("open")?t.removeAttribute("open"):t.setAttribute("open","")}),m(document),window.MutationObserver?new MutationObserver(function(t){c.call(t,function(t){c.call(t.addedNodes,m)})}).observe(document.documentElement,{subtree:!0,childList:!0}):document.addEventListener("DOMNodeInserted",function(t){m(t.target)})),e&&!n&&(window.MutationObserver?new MutationObserver(function(t){c.call(t,function(t){var e=t.target,n=t.attributeName;"DETAILS"==e.tagName&&"open
 "==n&&p(e)})}).observe(document.documentElement,{attributes:!0,subtree:!0}):f(function(t){var e=t.getAttribute("open");setTimeout(function(){var n=t.getAttribute("open");e!=n&&p(t)},1)}))}();
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationstemplatesjseditorjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/js/editor.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/js/editor.js                           (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/js/editor.js     2019-05-08 19:33:18 UTC (rev 8751)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,146 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+( function( $ ){
+       var $html = $( 'html' );
+       var $document = $( document );
+
+       // Handle tab view for plural forms.
+       function switchPluralTabs() {
+               var $tab = $( this );
+               if ( $tab.hasClass( 'translation-form-list__tab--active' ) ) {
+                       return;
+               }
+
+               var $translationWrapper = $gp.editor.current.find( '.translation-wrapper' );
+               var $formWrapper = $translationWrapper.find( '.translation-form-wrapper' );
+               var $tabList = $formWrapper.find( '.translation-form-list' );
+               var $tabs = $translationWrapper.find( '.textareas' );
+
+               $tabList.find( '.translation-form-list__tab--active' ).removeClass( 'translation-form-list__tab--active' );
+               $tab.addClass( 'translation-form-list__tab--active' );
+
+               $tabs.removeClass( 'active' );
+
+               var index = $tab.data( 'plural-index' );
+               $tabs.filter( '[data-plural-index="' + index + '"]').addClass( 'active' );
+       }
+
+       // Open menu for contextual links.
+       function toggleLinkMenu() {
+               var $toggle = $( this );
+               var $menu = $toggle.parent( '.button-menu' );
+
+               $menu.toggleClass( 'active' );
+               $document.off( 'click.menu-toggle' );
+
+               if ( $menu.hasClass( 'active' ) ) {
+                       $document.on( 'click.menu-toggle', function( event ) {
+                               if ( ! $menu.is( event.target ) && 0 === $menu.has( event.target ).length ) {
+                                       $menu.removeClass( 'active' );
+                                       $document.off( 'click.menu-toggle' );
+                               }
+                       } );
+               }
+       }
+
+       // Automatically adjust textarea height to fit text.
+       function textareaAutosize() {
+               var $textarea = $( this );
+               if ( $textarea.hasClass( 'autosize' ) ) {
+                       return;
+               }
+
+               $textarea.addClass( 'autosize' );
+
+               autosize( $textarea );
+       }
+
+       // Override copy function to adopt custom markup.
+       $gp.editor.copy = function() {
+               var $activeTextarea = $gp.editor.current.find( '.textareas.active textarea' );
+               if ( ! $activeTextarea.length ) {
+                       return;
+               }
+
+               var chunks = $activeTextarea.attr( 'id' ).split( '_' );
+               var originalIndex = parseInt( chunks[ chunks.length - 1 ], 10 );
+
+               var $original;
+               if ( 0 === originalIndex ) {
+                       $original = $gp.editor.current.find( '.source-string__singular .original-raw' );
+               } else {
+                       $original = $gp.editor.current.find( '.source-string__plural .original-raw' );
+               }
+
+               if ( ! $original.length ) {
+                       return;
+               }
+
+               var originalText = $original.text();
+               if ( ! originalText ) {
+                       return;
+               }
+
+               $activeTextarea.val( originalText ).focus();
+
+               // Trigger input event for autosize().
+               var event = new Event( 'input' );
+               $activeTextarea[0].dispatchEvent( event );
+       };
+
+       function switchTextDirection() {
+               var direction = $( this ).is( '.translation-actions__ltr') ? 'ltr' : 'rtl';
+
+               var $wrapper = $gp.editor.current.find( '.translation-wrapper' );
+               if ( ! $wrapper.length ) {
+                       return;
+               }
+
+               $wrapper.removeClass( 'textarea-direction-rtl textarea-direction-ltr' );
+               $wrapper.addClass( 'textarea-direction-' + direction );
+       }
+
+       // Open the modal for translation help.
+       function openHelpModal() {
+               var $modal = $( '#wporg-translation-help-modal' );
+               var $closeButton = $modal.find( '.wporg-translate-modal__close' );
+
+               $html.addClass( 'modal-open' );
+               $modal.addClass( 'wporg-translate-modal--open' );
+               $closeButton.focus();
+
+               $document.on( 'keydown.modal', function( event ) {
+                       if ( 27 !== event.which ) { // ESC key.
+                               return;
+                       }
+
+                       $modal.removeClass( 'wporg-translate-modal--open' );
+                       $html.removeClass( 'modal-open' );
+                       $document.off( 'keydown.modal' );
+               } );
+
+               $closeButton.one( 'click', function() {
+                       $modal.removeClass( 'wporg-translate-modal--open' );
+                       $html.removeClass( 'modal-open' );
+                       $document.off( 'keydown.modal' );
+               } );
+       }
+
+       $gp.editor.install_hooks = ( function( original ) {
+               return function() {
+                       original.apply( $gp.editor, arguments );
+
+                       $( $gp.editor.table )
+                               .on( 'click', 'button.translation-form-list__tab', switchPluralTabs )
+                               .on( 'click', 'button.panel-header-actions__previous', $gp.editor.prev )
+                               .on( 'click', 'button.panel-header-actions__next', $gp.editor.next )
+                               .on( 'click', 'button.panel-header-actions__cancel', $gp.editor.hooks.cancel )
+                               .on( 'click', 'button.translation-actions__copy', $gp.editor.hooks.copy )
+                               .on( 'click', 'button.translation-actions__save', $gp.editor.hooks.ok )
+                               .on( 'click', 'button.translation-actions__help', openHelpModal )
+                               .on( 'click', 'button.translation-actions__ltr', switchTextDirection )
+                               .on( 'click', 'button.translation-actions__rtl', switchTextDirection )
+                               .on( 'focus', 'textarea', textareaAutosize )
+                               .on( 'click', 'button.button-menu__toggle', toggleLinkMenu );
+               }
+       })( $gp.editor.install_hooks );
+
+})( jQuery );
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationstemplatesstylecss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/style.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/style.css      2019-05-08 17:02:43 UTC (rev 8750)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/style.css        2019-05-08 19:33:18 UTC (rev 8751)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,3 +1,7 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+body, html {
+       height: 100%;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .site-header {
</span><span class="cx" style="display: block; padding: 0 10px">        font-family: "Open Sans", sans-serif;
</span><span class="cx" style="display: block; padding: 0 10px">        line-height: 1.5;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -9,6 +13,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .site-header .site-branding {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        box-sizing: border-box;
</ins><span class="cx" style="display: block; padding: 0 10px">         margin: 0 auto;
</span><span class="cx" style="display: block; padding: 0 10px">        max-width: 960px;
</span><span class="cx" style="display: block; padding: 0 10px">        padding: 0 10px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -24,8 +29,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">        font-size: 28px;
</span><span class="cx" style="display: block; padding: 0 10px">        font-weight: 300;
</span><span class="cx" style="display: block; padding: 0 10px">        line-height: 1;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        margin: 0 36px 0 0;
-       max-width: none;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .site-title a {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -299,6 +302,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">        padding: .1em 0;
</span><span class="cx" style="display: block; padding: 0 10px">        margin-left: .2em;
</span><span class="cx" style="display: block; padding: 0 10px">        background-color: #a0a5aa;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        -webkit-box-decoration-break: clone;
</ins><span class="cx" style="display: block; padding: 0 10px">         box-decoration-break: clone;
</span><span class="cx" style="display: block; padding: 0 10px">        box-shadow: .3em 0 0 #a0a5aa, -.3em 0 0 #a0a5aa;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -432,8 +436,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .editor .textareas textarea {
</span><span class="cx" style="display: block; padding: 0 10px">        width: 100%;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
</del><span class="cx" style="display: block; padding: 0 10px">         box-sizing: border-box;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -450,8 +452,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">        padding: 5px 10px;
</span><span class="cx" style="display: block; padding: 0 10px">        width: 39%;
</span><span class="cx" style="display: block; padding: 0 10px">        float: right;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
</del><span class="cx" style="display: block; padding: 0 10px">         box-sizing: border-box;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -520,10 +520,67 @@
</span><span class="cx" style="display: block; padding: 0 10px">        vertical-align: middle;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.strings .or-cancel {
-       margin-left: 5px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.strings textarea:-ms-input-placeholder {
+       color: #666;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.strings textarea::-ms-input-placeholder {
+       color: #666;
+}
+
+.strings textarea::placeholder {
+       color: #666;
+}
+
+.invisibles {
+       -webkit-user-select: none;
+       -moz-user-select: none;
+       -ms-user-select: none;
+       user-select: none;
+}
+
+span.translation-text,
+span.original-text {
+       white-space: pre-wrap;
+}
+
+.ui-tooltip {
+       background: #fff;
+       border: 1px solid #ccc;
+       box-shadow: 0 2px 10px rgba(0,0,0,.1);
+       border-radius: 0;
+}
+
+.ui-tooltip:after {
+       border-color: #fff transparent;
+       top: -9px;
+}
+
+.ui-tooltip:before {
+       display: block;
+       content: "";
+       border-color: #ccc transparent;
+       border-style: solid;
+       border-width: 0 10px 10px;
+       width: 0;
+       position: absolute;
+       top: -10px;
+       left: 1em;
+}
+
+.ui-tooltip ul {
+       padding: 0;
+       margin: 5px;
+}
+
+.ui-tooltip ul li {
+       font-size: 15px;
+}
+
+.ui-tooltip ul li + li {
+       margin-top: 5px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> #gp-footer {
</span><span class="cx" style="display: block; padding: 0 10px">        clear: both;
</span><span class="cx" style="display: block; padding: 0 10px">        font-family: 'Open Sans' !important;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -578,13 +635,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">        font-family: 'Open Sans' !important;
</span><span class="cx" style="display: block; padding: 0 10px">        display: inline-block;
</span><span class="cx" style="display: block; padding: 0 10px">        position: relative;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
</del><span class="cx" style="display: block; padding: 0 10px">         box-sizing: border-box;
</span><span class="cx" style="display: block; padding: 0 10px">        margin: 30px 0;
</span><span class="cx" style="display: block; padding: 0 10px">        padding: 0 20px;
</span><span class="cx" style="display: block; padding: 0 10px">        width: 100%;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
</del><span class="cx" style="display: block; padding: 0 10px">         box-shadow: 0 1px 1px rgba(0,0,0,0.04);
</span><span class="cx" style="display: block; padding: 0 10px">        border: 1px solid #dfdfdf;
</span><span class="cx" style="display: block; padding: 0 10px">        background: #efefef;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -614,7 +668,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .filter-header-links .current {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-shadow: none;
</del><span class="cx" style="display: block; padding: 0 10px">         box-shadow: none;
</span><span class="cx" style="display: block; padding: 0 10px">        border-bottom: 4px solid #666;
</span><span class="cx" style="display: block; padding: 0 10px">        color: #222;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -662,12 +715,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">        font-weight: 300;
</span><span class="cx" style="display: block; padding: 0 10px">        line-height: 1.5;
</span><span class="cx" style="display: block; padding: 0 10px">        border: 1px solid #ddd;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
</del><span class="cx" style="display: block; padding: 0 10px">         box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
</span><span class="cx" style="display: block; padding: 0 10px">        background-color: #fff;
</span><span class="cx" style="display: block; padding: 0 10px">        color: #333;
</span><span class="cx" style="display: block; padding: 0 10px">        outline: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-border-radius: 0;
</del><span class="cx" style="display: block; padding: 0 10px">         border-radius: 0;
</span><span class="cx" style="display: block; padding: 0 10px">        -webkit-appearance: textfield;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -688,7 +739,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> @supports (display: grid) {
</span><span class="cx" style="display: block; padding: 0 10px">        .locales {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                display: -ms-grid;
</ins><span class="cx" style="display: block; padding: 0 10px">                 display: grid;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                -ms-grid-columns: 1fr;
</ins><span class="cx" style="display: block; padding: 0 10px">                 grid-template-columns: 1fr;
</span><span class="cx" style="display: block; padding: 0 10px">                grid-gap: 30px;
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -695,6 +748,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        @media (min-width: 500px) {
</span><span class="cx" style="display: block; padding: 0 10px">                .locales {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        -ms-grid-columns: 1fr 30px 1fr;
</ins><span class="cx" style="display: block; padding: 0 10px">                         grid-template-columns: repeat(2, 1fr);
</span><span class="cx" style="display: block; padding: 0 10px">                }
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -701,6 +755,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        @media (min-width: 700px) {
</span><span class="cx" style="display: block; padding: 0 10px">                .locales {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
</ins><span class="cx" style="display: block; padding: 0 10px">                         grid-template-columns: repeat(3, 1fr);
</span><span class="cx" style="display: block; padding: 0 10px">                }
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -734,11 +789,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .locale {
</span><span class="cx" style="display: block; padding: 0 10px">        border: 1px solid #ccc;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
</del><span class="cx" style="display: block; padding: 0 10px">         box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
</span><span class="cx" style="display: block; padding: 0 10px">        background: #fff;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
</del><span class="cx" style="display: block; padding: 0 10px">         box-sizing: border-box;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -863,11 +915,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">        float: right;
</span><span class="cx" style="display: block; padding: 0 10px">        width: 250px;
</span><span class="cx" style="display: block; padding: 0 10px">        border: 1px solid #ccc;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
</del><span class="cx" style="display: block; padding: 0 10px">         box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
</span><span class="cx" style="display: block; padding: 0 10px">        background: #fff;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
</del><span class="cx" style="display: block; padding: 0 10px">         box-sizing: border-box;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -880,11 +929,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">        margin: 0 0 2.083% 2.083%;
</span><span class="cx" style="display: block; padding: 0 10px">        width: 47.917%;
</span><span class="cx" style="display: block; padding: 0 10px">        border: 1px solid #ccc;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
</del><span class="cx" style="display: block; padding: 0 10px">         box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
</span><span class="cx" style="display: block; padding: 0 10px">        background: #fff;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
</del><span class="cx" style="display: block; padding: 0 10px">         box-sizing: border-box;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -977,8 +1023,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">        float: left;
</span><span class="cx" style="display: block; padding: 0 10px">        margin: 20px 0;
</span><span class="cx" style="display: block; padding: 0 10px">        text-align: center;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
</del><span class="cx" style="display: block; padding: 0 10px">         box-sizing: border-box;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1035,11 +1079,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">        float: right;
</span><span class="cx" style="display: block; padding: 0 10px">        width: 350px;
</span><span class="cx" style="display: block; padding: 0 10px">        border: 1px solid #ccc;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
</del><span class="cx" style="display: block; padding: 0 10px">         box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
</span><span class="cx" style="display: block; padding: 0 10px">        background: #fff;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
</del><span class="cx" style="display: block; padding: 0 10px">         box-sizing: border-box;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1114,8 +1155,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">        position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px">        top: 50%;
</span><span class="cx" style="display: block; padding: 0 10px">        right: 15px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-transform: translateY(-50%);
-       -ms-transform: translateY(-50%);
</del><span class="cx" style="display: block; padding: 0 10px">         transform: translateY(-50%);
</span><span class="cx" style="display: block; padding: 0 10px">        font-size: 20px;
</span><span class="cx" style="display: block; padding: 0 10px">        font-weight: 600;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1163,7 +1202,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">        background: #f9f9f9;
</span><span class="cx" style="display: block; padding: 0 10px">        border: 1px solid #ccc;
</span><span class="cx" style="display: block; padding: 0 10px">        border-top: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.04);
</del><span class="cx" style="display: block; padding: 0 10px">         box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.04);
</span><span class="cx" style="display: block; padding: 0 10px">        display: none;
</span><span class="cx" style="display: block; padding: 0 10px">        z-index: 10;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1195,7 +1233,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">        font: 20px/1 "dashicons";
</span><span class="cx" style="display: block; padding: 0 10px">        border-left: 1px solid #eee;
</span><span class="cx" style="display: block; padding: 0 10px">        padding: 5px 0 5px 12px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-shadow: inset 1px 0 0 #fff;
</del><span class="cx" style="display: block; padding: 0 10px">         box-shadow: inset 1px 0 0 #fff;
</span><span class="cx" style="display: block; padding: 0 10px">        -webkit-font-smoothing: antialiased;
</span><span class="cx" style="display: block; padding: 0 10px">        -moz-osx-font-smoothing: grayscale;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1387,7 +1424,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">        text-align: left;
</span><span class="cx" style="display: block; padding: 0 10px">        padding: 10px;
</span><span class="cx" style="display: block; padding: 0 10px">        background: #f9f9f9;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.05);
</del><span class="cx" style="display: block; padding: 0 10px">         box-shadow: inset 0 1px 0 rgba(0,0,0,.05);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1405,7 +1441,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .stats-table tbody td {
</span><span class="cx" style="display: block; padding: 0 10px">        padding: 10px 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
</del><span class="cx" style="display: block; padding: 0 10px">         box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1552,7 +1587,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">        width: 12px;
</span><span class="cx" style="display: block; padding: 0 10px">        height: 12px;
</span><span class="cx" style="display: block; padding: 0 10px">        border: 3px solid transparent;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-border-radius: 2px;
</del><span class="cx" style="display: block; padding: 0 10px">         border-radius: 2px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1581,11 +1615,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                -webkit-column-gap: 3%;
</span><span class="cx" style="display: block; padding: 0 10px">                -moz-column-count: 2;
</span><span class="cx" style="display: block; padding: 0 10px">                -moz-column-gap: 3%;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                -webkit-column-count: 2;
-               -moz-column-count: 2;
</del><span class="cx" style="display: block; padding: 0 10px">                 column-count: 2;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                -webkit-column-gap: 3%;
-               -moz-column-gap: 3%;
</del><span class="cx" style="display: block; padding: 0 10px">                 column-gap: 3%;
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1597,10 +1627,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">        padding-bottom: 10px;
</span><span class="cx" style="display: block; padding: 0 10px">        border: 1px solid #ccc;
</span><span class="cx" style="display: block; padding: 0 10px">        background: #fff;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
</del><span class="cx" style="display: block; padding: 0 10px">         box-sizing: border-box;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-column-break-inside: avoid;
</del><span class="cx" style="display: block; padding: 0 10px">         page-break-inside: avoid;
</span><span class="cx" style="display: block; padding: 0 10px">        break-inside: avoid;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1650,12 +1677,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">        font-size: 13px;
</span><span class="cx" style="display: block; padding: 0 10px">        font-weight: 300;
</span><span class="cx" style="display: block; padding: 0 10px">        border: 1px solid #ddd;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
</del><span class="cx" style="display: block; padding: 0 10px">         box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
</span><span class="cx" style="display: block; padding: 0 10px">        background-color: #fff;
</span><span class="cx" style="display: block; padding: 0 10px">        color: #333;
</span><span class="cx" style="display: block; padding: 0 10px">        outline: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-border-radius: 0;
</del><span class="cx" style="display: block; padding: 0 10px">         border-radius: 0;
</span><span class="cx" style="display: block; padding: 0 10px">        -webkit-appearance: textfield;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1676,10 +1701,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .button-link {
</span><span class="cx" style="display: block; padding: 0 10px">        margin: 0;
</span><span class="cx" style="display: block; padding: 0 10px">        padding: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-shadow: none;
</del><span class="cx" style="display: block; padding: 0 10px">         box-shadow: none;
</span><span class="cx" style="display: block; padding: 0 10px">        border: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-border-radius: 0;
</del><span class="cx" style="display: block; padding: 0 10px">         border-radius: 0;
</span><span class="cx" style="display: block; padding: 0 10px">        background: none;
</span><span class="cx" style="display: block; padding: 0 10px">        outline: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1888,8 +1911,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .consistency-form-project {
</span><span class="cx" style="display: block; padding: 0 10px">        height: 30px;
</span><span class="cx" style="display: block; padding: 0 10px">        padding: 3px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
</del><span class="cx" style="display: block; padding: 0 10px">         box-sizing: border-box;
</span><span class="cx" style="display: block; padding: 0 10px">        font-size: 15px;
</span><span class="cx" style="display: block; padding: 0 10px">        line-height: 1;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1906,7 +1927,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .consistency-form-locale:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> .consistency-form-project:focus {
</span><span class="cx" style="display: block; padding: 0 10px">        outline: 1px solid #5b9dd9;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-shadow: 0 0 2px rgba(30,140,190,.8);
</del><span class="cx" style="display: block; padding: 0 10px">         box-shadow: 0 0 2px rgba(30,128,190,.8);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1952,7 +1972,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .consistency-form-submit:active {
</span><span class="cx" style="display: block; padding: 0 10px">        background: #0073aa;
</span><span class="cx" style="display: block; padding: 0 10px">        border-color: #006799;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        -webkit-box-shadow: inset 0 2px 0 #006799;
</del><span class="cx" style="display: block; padding: 0 10px">         box-shadow: inset 0 2px 0 #006799;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2116,3 +2135,676 @@
</span><span class="cx" style="display: block; padding: 0 10px">        width: 5em;
</span><span class="cx" style="display: block; padding: 0 10px">        text-align: center;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+table.translations td.translation span.missing {
+       color: #666;
+}
+
+/* NEW EDITOR */
+
+.editor .strings {
+       float: none;
+       width: 100%;
+       min-width: 100%;
+}
+
+.editor .textareas textarea {
+       width: 100%;
+       border: 0;
+       background: #fff;
+       color: #333;
+       outline: none;
+       padding: 15px 0;
+       font-size: 16px;
+       resize: vertical;
+}
+
+.textareas p,
+.textareas blockquote.translation {
+       display: none;
+}
+
+.editor .original {
+       max-width: 100%;
+       font-weight: normal;
+       font-size: 15px;
+}
+
+.editor .original-raw {
+       display: none;
+}
+
+.editor .meta {
+       float: none;
+       width: 100%;
+       background: transparent;
+       border: 0;
+}
+
+table.translations tr.editor td {
+       padding: 0;
+}
+
+@media screen and (min-width: 700px) {
+       .editor-panel {
+               display: flex;
+               align-items: flex-start;
+       }
+}
+
+.editor-panel * {
+       box-sizing: border-box;
+}
+
+.editor-panel__left {
+       flex: 1;
+       border-bottom: 3px solid #eee;
+       min-width: 1%;
+}
+
+@media screen and (min-width: 700px) {
+       .editor-panel__left {
+               border-bottom: 0;
+               border-right: 3px solid #eee;
+       }
+}
+
+.editor-panel__right {
+       flex: 0 0 20rem;
+       min-width: 1%;
+}
+
+.panel-header {
+       display: flex;
+       align-items: center;
+       justify-content: flex-end;
+       border-bottom: 1px solid #eee;
+       background-color: #fbfbfb;
+       height: 40px;
+}
+
+.editor-panel__left .panel-header {
+       position: -webkit-sticky;
+       position: sticky;
+       top: 0;
+       z-index: 10;
+}
+
+.admin-bar .editor-panel__left .panel-header {
+       top: 32px;
+}
+
+@media screen and (max-width: 782px) {
+       .admin-bar .editor-panel__left .panel-header {
+               top: 46px;
+       }
+}
+
+@media screen and (max-width: 600px) {
+       .admin-bar .editor-panel__left .panel-header {
+               top: 0;
+       }
+}
+
+.panel-header h3 {
+       flex: 1;
+       margin: 0 0 0 10px;
+       font-size: 13px;
+       line-height: 1;
+       font-weight: 400;
+       letter-spacing: 1px;
+       text-transform: uppercase;
+       color: #666;
+}
+
+.panel-header__bubble {
+       font-size: 12px;
+       padding: 2px 4px;
+       text-transform: none;
+       font-weight: 600;
+       border: 1px solid #666;
+}
+
+.panel-header__bubble--warning {
+       color: #e44b3e;
+       border-color: #e44b3e;
+}
+
+.panel-header__bubble--waiting {
+       color: #FFB900;
+       border-color: #FFB900;
+}
+
+.panel-header__bubble--fuzzy {
+       color: #F56E28;
+       border-color: #F56E28;
+}
+
+.panel-header__bubble--current {
+       color: #46B450;
+       border-color: #46B450;
+}
+
+.panel-header__bubble--old {
+       color: #826EB4;
+       border-color: #826EB4;
+}
+
+.panel-header-actions button {
+       background: none;
+       border: none;
+       height: 40px;
+       width: 40px;
+       padding: 0;
+       margin: 0;
+       vertical-align: middle;
+       box-shadow: none;
+       border-radius: 0;
+}
+
+.panel-header-actions button:hover {
+       background: #eee;
+}
+
+table.translations tbody > tr:first-child + tr  .panel-header-actions__previous,
+table.translations tbody > tr:last-child .panel-header-actions__next {
+       display: none;
+}
+
+.button-menu {
+       position: relative;
+       display: inline-block;
+}
+
+.button-menu__dropdown {
+       display: none;
+       list-style: none;
+       position: absolute;
+       top: 100%;
+       right: 0;
+       z-index: 1000;
+       min-width: 150px;
+       background-color: #fff;
+       white-space: nowrap;
+       border: 1px solid #ccc;
+       padding: 6px 12px !important;
+       box-shadow: 0 2px 10px rgba(0,0,0,.1);
+}
+
+.button-menu.active .button-menu__dropdown {
+       display: block;
+}
+
+.button-menu__dropdown li a {
+       padding: 6px 0;
+       display: inline-block;
+}
+
+.panel-content summary {
+       cursor: pointer;
+       outline: 0;
+}
+
+.panel-content summary:focus {
+       color: #0073aa;
+}
+
+.panel-content details[open] summary {
+       margin-bottom: 5px;
+}
+
+.source-string {
+       padding: 20px 10px;
+}
+
+.source-string__singular small,
+.source-string__plural small {
+       display: block;
+       color: #666;
+       font-size: 12px;
+}
+
+.source-string__plural {
+       margin-top: 15px;
+}
+
+.source-details {
+       padding: 0 10px;
+       color: #666;
+}
+
+.source-details dl + dl {
+       margin-top: 10px;
+}
+
+.source-details dt {
+       font-size: 12px;
+}
+
+.source-details dd {
+       color: #333;
+}
+
+.translation-wrapper {
+       padding: 0 10px;
+       margin: 15px 0;
+       border-top: 1px solid;
+       border-bottom: 1px solid;
+       border-color: #eee;
+       background: #fff;
+}
+
+.translation-wrapper:focus-within {
+       box-shadow:  0 0 2px 1px #33b3db;
+}
+
+.translation-wrapper .warning {
+       margin: 15px 0 0;
+}
+
+.translation-wrapper .textareas {
+       display: none;
+}
+
+.translation-wrapper .textareas.active {
+       display: block;
+}
+
+.translation-form-wrapper {
+       border-bottom: 1px solid #eee;
+       margin-left: -10px;
+       margin-right: -10px;
+       padding: 0 10px;
+       line-height: 40px;
+       display: flex;
+}
+
+.translation-form-wrapper span {
+       font-weight: 400;
+       letter-spacing: 1px;
+       text-transform: uppercase;
+       color: #666;
+       font-size: 13px;
+}
+
+ul.translation-form-list {
+       padding: 0;
+       list-style: none;
+       flex: 1;
+       margin-left: 10px;
+}
+
+ul.translation-form-list li {
+       display: inline-block;
+       margin-right: 5px;
+       cursor: pointer;
+}
+
+
+ul.translation-form-list button {
+       background: none;
+       border: 0;
+       box-shadow: none;
+       vertical-align: top;
+       height: auto;
+       font-size: 13px;
+       color: #333;
+       line-height: 40px;
+       margin: 0;
+       padding: 0 5px;
+       border-radius: 0;
+}
+
+ul.translation-form-list button:focus,
+ul.translation-form-list button:hover {
+       box-shadow: inset 0 -2px 0 0 #0085ba;
+       background: none;
+       border: 0;
+}
+
+ul.translation-form-list button.translation-form-list__tab--active {
+       font-weight: 600;
+       box-shadow: inset 0 -2px 0 0 #0085ba;
+}
+
+.translation-actions {
+       display: flex;
+       padding: 7px 0;
+       flex-direction: row-reverse;
+}
+
+.translation-actions .info {
+       font-style: italic;
+}
+
+.translation-actions__secondary {
+       flex: 1;
+}
+
+.translation-actions__secondary button {
+       height: 35px;
+}
+
+button.translation-actions__save {
+       font-size: 15px;
+       height: 35px;
+       line-height: 1;
+       background: #0085ba;
+       border-color: #0073aa #006799 #006799;
+       box-shadow: 0 1px 0 #006799;
+       color: #fff;
+       text-decoration: none;
+       text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
+}
+
+button.translation-actions__save:hover {
+       background: #008ec2;
+       border-color: #006799;
+       color: #fff;
+}
+
+button.translation-actions__save:focus {
+       background: #008ec2;
+       border-color: #006799;
+       box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db;
+       color: #fff;
+}
+
+.suggestions-wrapper {
+       padding: 0 10px;
+       margin-bottom: 15px;
+}
+
+.suggestions-wrapper details {
+       margin-bottom: 15px;
+       color: #666;
+}
+
+.suggestions-wrapper details:last-child {
+       margin-bottom: 0;
+}
+
+.with-tooltip {
+       position: relative;
+}
+
+@keyframes show {
+       0% {
+               opacity: 0
+       }
+
+       100% {
+               opacity: 1
+       }
+}
+
+.with-tooltip:active:after,
+.with-tooltip:active:before,
+.with-tooltip:focus:after,
+.with-tooltip:focus:before,
+.with-tooltip:hover:after,
+.with-tooltip:hover:before {
+       animation-delay: .3s;
+       animation-duration: .1s;
+       animation-fill-mode: forwards;
+       animation-name: show;
+       animation-timing-function: ease-in;
+       display: inline-block;
+}
+
+.with-tooltip:after {
+       transform: translateX(50%);
+       bottom: 100%;
+       margin-bottom: 6px;
+       right: 50%;
+       -webkit-font-smoothing: subpixel-antialiased;
+       background: #23282d;
+       border-radius: 3px;
+       color: #fff;
+       content: attr(aria-label);
+       display: none;
+       font: normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+       letter-spacing: normal;
+       opacity: 0;
+       padding: .5em .75em;
+       pointer-events: none;
+       position: absolute;
+       text-align: center;
+       text-decoration: none;
+       text-shadow: none;
+       text-transform: none;
+       white-space: pre;
+       word-wrap: break-word;
+       z-index: 100;
+}
+
+.with-tooltip:before {
+       border: 6px solid transparent;
+       border-top-color: #23282d;
+       bottom: auto;
+       margin-right: -6px;
+       right: 50%;
+       top: -7px;
+       color: #23282d;
+       content: "";
+       display: none;
+       height: 0;
+       opacity: 0;
+       pointer-events: none;
+       position: absolute;
+       width: 0;
+       z-index: 101;
+}
+
+@keyframes loading-indicator {
+       0%, 80%, 100% {
+               opacity: 0;
+       }
+       40% {
+               opacity: 1;
+       }
+}
+
+.suggestions__loading-indicator__icon {
+       font-size: 4px;
+       margin-left: .5rem;
+       line-height: 1;
+       display: inline-block;
+       vertical-align: middle;
+}
+
+.suggestions__loading-indicator__icon span {
+       animation-duration: 1s;
+       animation-delay: 0ms;
+       animation-iteration-count: infinite;
+       animation-name: loading-indicator;
+       animation-timing-function: ease-in-out;
+       background-color: #666;
+       border-radius: 50%;
+       display: inline-block;
+       width: 1em;
+       vertical-align: top;
+       height: 1em;
+}
+
+.suggestions__loading-indicator__icon span:nth-child(2) {
+       animation-delay: 160ms;
+       margin-left: 1em;
+}
+
+.suggestions__loading-indicator__icon span:nth-child(3) {
+       animation-delay: 320ms;
+       margin-left: 1em;
+}
+
+html.modal-open {
+       overflow: hidden;
+}
+
+.wporg-translate-modal {
+       display: none;
+}
+
+.wporg-translate-modal--open {
+       display: block;
+}
+
+.wporg-translate-modal__overlay {
+       animation: edit-post__fade-in-animation .2s ease-out 0s;
+       animation-fill-mode: forwards;
+       background-color: hsla(0,0%,100%,.4);
+       bottom: 0;
+       left: 0;
+       position: fixed;
+       right: 0;
+       top: 0;
+       z-index: 100000;
+}
+
+.wporg-translate-modal__frame {
+       background: #fff;
+       border: 1px solid #ccc;
+       box-shadow: 0 2px 10px rgba(0,0,0,.1);
+       box-sizing: border-box;
+       margin: 0;
+       overflow: auto;
+       position: absolute;
+       right: 0;
+       left: 0;
+       top: 0;
+       bottom: 0;
+       z-index: 1000;
+       font-family: "Open Sans", sans-serif;
+       padding: 15px;
+}
+
+@media (min-width: 600px) {
+       .wporg-translate-modal__frame {
+               bottom: auto;
+               left: 10%;
+               right: 10%;
+               top: 50%;
+               max-height: calc(100% - 100px);
+               max-width: 960px;
+               min-width: 360px;
+               transform: translate(0,-50%);
+               margin: 0 auto;
+       }
+}
+
+.wporg-translate-modal__header {
+       display: flex;
+       flex-direction: row;
+       align-items: center;
+       justify-content: space-between;
+       margin-bottom: 15px;
+       position: sticky;
+       top: -15px;
+       background: #fff;
+       box-shadow: 0 10px 10px #fff;
+}
+
+.wporg-translate-modal__headline {
+       line-height: 1;
+       font-weight: 300;
+       font-size: 22px;
+}
+
+.wporg-translate-modal__close {
+       background: none;
+       height: 40px;
+       width: 40px;
+       font-size: 20px;
+       padding: 0;
+       line-height: 20px;
+       color: #555;
+       border: 1px solid transparent;
+       cursor: pointer;
+       border-radius: 3px;
+}
+
+.wporg-translate-modal__close:focus,
+.wporg-translate-modal__close:hover {
+       background: #fafafa;
+       border-color: #999;
+       color: #23282d;
+}
+
+.wporg-translate-modal__close:focus {
+       border-color: #5b9dd9;
+       box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
+       outline: 0;
+}
+
+.wporg-translate-modal__content h2 {
+       line-height: 1;
+       font-weight: 300;
+       font-size: 18px;
+       margin: 30px 0 10px;
+       font-family: "Open Sans", sans-serif;
+}
+
+.wporg-translate-modal__content h2:first-child {
+       margin-top: 0;
+}
+
+.wporg-translate-modal__content ul {
+       margin-left: 25px;
+       padding-left: 0;
+}
+
+.wporg-translate-modal__content li > ul,
+.wporg-translate-modal__content li + li {
+       margin-top: 3px;
+}
+
+.wporg-translate-modal__content a {
+       color: #0073aa;
+}
+
+.wporg-translate-modal__content a:hover,
+.wporg-translate-modal__content a:focus {
+       color: #00a0d2;
+       text-decoration: underline;
+}
+
+.wporg-translate-modal__content .no-list {
+       list-style: none;
+       margin: 0;
+}
+
+.wporg-translate-modal__content_primary {
+       margin-bottom: 30px;
+}
+
+@media (min-width: 600px) {
+       .wporg-translate-modal__content {
+               display: flex;
+       }
+
+       .wporg-translate-modal__content_primary {
+               flex: 50%;
+               margin-right: 15px;
+               margin-bottom: 0;
+       }
+
+       .wporg-translate-modal__content_secondary {
+               flex: 50%;
+               margin-left: 15px;
+       }
+}
+
+.textarea-direction-ltr button.translation-actions__rtl,
+.translation-sets-rtl button.translation-actions__ltr {
+       display: inline-block;
+}
+
+.textarea-direction-ltr button.translation-actions__ltr,
+button.translation-actions__ltr,
+button.translation-actions__rtl {
+       display: none;
+}
+
+table.translations.translation-sets-rtl .textarea-direction-ltr .foreign-text {
+       direction: ltr;
+}
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationstemplatestranslationroweditorphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/translation-row-editor.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/translation-row-editor.php     2019-05-08 17:02:43 UTC (rev 8750)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/translation-row-editor.php       2019-05-08 19:33:18 UTC (rev 8751)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -9,14 +9,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $more_links = array();
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $t->translation_status ) {
</span><span class="cx" style="display: block; padding: 0 10px">        $translation_permalink = gp_url_project_locale( $project, $locale->slug, $translation_set->slug, array( 'filters[status]' => 'either', 'filters[original_id]' => $t->original_id, 'filters[translation_id]' => $t->id ) );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        $more_links['translation-permalink'] = '<a tabindex="-1" href="' . esc_url( $translation_permalink ) . '">' . __( 'Permalink to this translation', 'glotpress' ) . '</a>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $more_links['translation-permalink'] = '<a href="' . esc_url( $translation_permalink ) . '">Permalink to translation</a>';
</ins><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px">        $original_permalink = gp_url_project_locale( $project, $locale->slug, $translation_set->slug, array( 'filters[original_id]' => $t->original_id ) );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        $more_links['original-permalink'] = '<a tabindex="-1" href="' . esc_url( $original_permalink ) . '">' . __( 'Permalink to this original', 'glotpress' ) . '</a>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $more_links['original-permalink'] = '<a href="' . esc_url( $original_permalink ) . '">Permalink to original</a>';
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> $original_history = gp_url_project_locale( $project, $locale->slug, $translation_set->slug, array( 'filters[status]' => 'either', 'filters[original_id]' => $t->original_id, 'sort[by]' => 'translation_date_added', 'sort[how]' => 'asc' ) );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$more_links['history'] = '<a tabindex="-1" href="' . esc_url( $original_history ) . '">' . __( 'All translations of this original', 'glotpress' ) . '</a>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+$more_links['history'] = '<a href="' . esc_url( $original_history ) . '">Translation History</a>';
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px">  * Allows to modify the more links in the translation editor.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -39,154 +39,280 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        $t = map_glossary_entries_to_translation_originals( $t, $glossary, $glossary_entries_terms );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <tr class="editor <?php echo gp_translation_row_classes( $t ); ?>" id="editor-<?php echo esc_attr( $t->row_id ); ?>" row="<?php echo esc_attr( $t->row_id ); ?>">
</span><span class="cx" style="display: block; padding: 0 10px">        <td colspan="<?php echo $can_approve ? 5 : 4 ?>">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                <div class="strings">
-               <?php
-                       $singular = isset( $t->singular_glossary_markup ) ? $t->singular_glossary_markup : esc_translation( $t->singular );
-                       $plural   = isset( $t->plural_glossary_markup ) ? $t->plural_glossary_markup : esc_translation( $t->plural );
-               ?>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         <div class="editor-panel">
+                       <div class="editor-panel__left">
+                               <div class="panel-header">
+                                       <?php
+                                       $status = sprintf(
+                                               '<span class="panel-header__bubble%s">%s</span>',
+                                               $t->translation_status ? ' panel-header__bubble--' . $t->translation_status : '',
+                                               display_status( $t->translation_status )
+                                       );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                <?php if ( ! $t->plural ): ?>
-               <p class="original"><?php echo prepare_original( $singular ); ?></p>
-               <?php textareas( $t, array( $can_edit, $can_approve_translation ) ); ?>
-               <?php else: ?>
-                       <?php if ( $locale->nplurals == 2 && $locale->plural_expression == 'n != 1'): ?>
-                               <p><?php printf(__( 'Singular: %s', 'glotpress' ), '<span class="original">'. $singular .'</span>'); ?></p>
-                               <?php textareas( $t, array( $can_edit, $can_approve ), 0 ); ?>
-                               <p class="clear">
-                                       <?php printf(__( 'Plural: %s', 'glotpress' ), '<span class="original">'. $plural .'</span>'); ?>
-                               </p>
-                               <?php textareas( $t, array( $can_edit, $can_approve ), 1 ); ?>
-                       <?php else: ?>
-                               <!--
-                               TODO: labels for each plural textarea and a sample number
-                               -->
-                               <p><?php printf(__( 'Singular: %s', 'glotpress' ), '<span class="original">'. $singular .'</span>'); ?></p>
-                               <p class="clear">
-                                       <?php printf(__( 'Plural: %s', 'glotpress' ), '<span class="original">'. $plural .'</span>'); ?>
-                               </p>
-                               <?php foreach( range( 0, $locale->nplurals - 1 ) as $plural_index ): ?>
-                                       <?php if ( $locale->nplurals > 1 ): ?>
-                                       <p class="plural-numbers"><?php printf(__( 'This plural form is used for numbers like: %s', 'glotpress' ),
-                                                       '<span class="numbers">'.implode(', ', $locale->numbers_for_index( $plural_index ) ).'</span>' ); ?></p>
-                                       <?php endif; ?>
-                                       <?php textareas( $t, array( $can_edit, $can_approve ), $plural_index ); ?>
-                               <?php endforeach; ?>
-                       <?php endif; ?>
-               <?php endif; ?>
-               </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 $warnings_count = wporg_gp_count_warnings( $t );
+                                       $warnings_info  = '';
+                                       if ( $warnings_count ) {
+                                               $warnings_info = ' <span class="panel-header__bubble panel-header__bubble--warning">' . sprintf(
+                                                       _n( '%s warning', '%s warnings', $warnings_count ),
+                                                       number_format_i18n( $warnings_count )
+                                               ) . '</span>';
+                                       }
+                                       ?>
+                                       <h3>Original <?php echo $status . $warnings_info; ?></h3>
+                                       <div class="panel-header-actions">
+                                               <button type="button" class="panel-header-actions__cancel with-tooltip" aria-label="Close current editor">
+                                                       <span class="screen-reader-text">Close</span><span aria-hidden="true" class="dashicons dashicons-no-alt"></span>
+                                               </button>
+                                               <button type="button" class="panel-header-actions__previous with-tooltip" aria-label="Open previous editor">
+                                                       <span class="screen-reader-text">Previous</span><span aria-hidden="true" class="dashicons dashicons-arrow-up-alt2"></span>
+                                               </button>
+                                               <button type="button" class="panel-header-actions__next with-tooltip" aria-label="Open next editor">
+                                                       <span class="screen-reader-text">Next</span><span aria-hidden="true" class="dashicons dashicons-arrow-down-alt2"></span>
+                                               </button>
+                                               <div class="button-menu">
+                                                       <button type="button" class="button-menu__toggle with-tooltip" aria-label="Show contextual links">
+                                                               <span class="screen-reader-text">Links</span><span aria-hidden="true" class="dashicons dashicons-paperclip"></span>
+                                                       </button>
+                                                       <ul class="button-menu__dropdown">
+                                                               <?php foreach ( $more_links as $link ) : ?>
+                                                                       <li><?php echo $link; ?></li>
+                                                               <?php endforeach; ?>
+                                                       </ul>
+                                               </div>
+                                       </div>
+                               </div>
+                               <div class="panel-content">
+                                       <?php
+                                       $singular = isset( $t->singular_glossary_markup ) ? $t->singular_glossary_markup : esc_translation( $t->singular );
+                                       $plural   = isset( $t->plural_glossary_markup ) ? $t->plural_glossary_markup : esc_translation( $t->plural );
+                                       ?>
+                                       <div class="source-string strings">
+                                               <?php if ( ! $t->plural ) : ?>
+                                                       <div class="source-string__singular">
+                                                               <span class="original"><?php echo prepare_original( $singular ); ?></span>
+                                                               <span aria-hidden="true" class="original-raw"><?php echo esc_translation( $t->singular ); ?></span>
+                                                       </div>
+                                               <?php else: ?>
+                                                       <div class="source-string__singular">
+                                                               <small>Singular:</small>
+                                                               <span class="original"><?php echo $singular; ?></span>
+                                                               <span aria-hidden="true" class="original-raw"><?php echo esc_translation( $t->singular ); ?></span>
+                                                       </div>
+                                                       <div class="source-string__plural">
+                                                               <small>Plural:</small>
+                                                               <span class="original"><?php echo $plural; ?></span>
+                                                               <span aria-hidden="true" class="original-raw"><?php echo esc_translation( $t->plural ); ?></span>
+                                                       </div>
+                                               <?php endif; ?>
+                                       </div>
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                <div class="meta">
-                       <h3><?php _e( 'Meta', 'glotpress' ); ?></h3>
-                       <dl>
-                               <dt><?php _e( 'Status:', 'glotpress' ); ?></dt>
-                               <dd>
-                                       <?php echo display_status( $t->translation_status ); ?>
-                                       <?php if ( $t->translation_status ): ?>
-                                               <?php if ( $can_approve_translation ) : ?>
-                                                       <?php if ( 'current' !== $t->translation_status ) : ?>
-                                                       <button class="approve" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-current_' . $t->id ) ); ?>"><strong>+</strong> <?php _e( 'Approve', 'glotpress' ); ?></button>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 <details class="source-details">
+                                               <summary>Context</summary>
+
+                                               <?php if ( $t->context ): ?>
+                                                       <dl class="source-details__context">
+                                                               <dt><?php _e( 'Context:', 'glotpress' ); ?></dt>
+                                                               <dd><span class="context bubble"><?php echo esc_translation( $t->context ); ?></span></dd>
+                                                       </dl>
+                                               <?php endif; ?>
+                                               <?php if ( $t->extracted_comments ) :
+                                                       $comments = trim( preg_replace( '/^translators:/ ', '', $t->extracted_comments ) );
+                                                       ?>
+                                                       <dl class="source-details__comments">
+                                                               <dt><?php _e( 'Comment:', 'glotpress' ); ?></dt>
+                                                               <dd><?php echo make_clickable( esc_translation( $comments ) ); ?></dd>
+                                                       </dl>
+                                               <?php endif; ?>
+                                               <?php references( $project, $t ); ?>
+                                       </details>
+
+                                       <div class="translation-wrapper">
+                                               <?php if ( $t->plural && $locale->nplurals > 1 ) : ?>
+                                                       <div class="translation-form-wrapper">
+                                                               <span>Form:</span>
+                                                               <ul class="translation-form-list">
+                                                                       <?php if ( 2 === (int) $locale->nplurals && 'n != 1' === $locale->plural_expression ) : ?>
+                                                                               <li>
+                                                                                       <button class="translation-form-list__tab translation-form-list__tab--active with-tooltip"
+                                                                                                       type="button"
+                                                                                                       aria-label="Translation for singular form"
+                                                                                                       data-plural-index="0">
+                                                                                               Singular
+                                                                                       </button>
+                                                                               </li>
+                                                                               <li>
+                                                                                       <button class="translation-form-list__tab with-tooltip"
+                                                                                                       type="button"
+                                                                                                       aria-label="Translation for plural form"
+                                                                                                       data-plural-index="1">
+                                                                                               Plural
+                                                                                       </button>
+                                                                               </li>
+                                                                       <?php else : ?>
+                                                                               <?php foreach( range( 0, $locale->nplurals - 1 ) as $plural_index ):
+                                                                                       $plural_string = implode(', ', $locale->numbers_for_index( $plural_index ) );
+                                                                                       ?>
+                                                                                       <li>
+                                                                                               <button
+                                                                                                               class="translation-form-list__tab with-tooltip<?php echo ( 0 === $plural_index ) ? ' translation-form-list__tab--active' : ''; ?>"
+                                                                                                               data-plural-index="<?php echo $plural_index; ?>"
+                                                                                                               aria-label="<?php printf('This plural form is used for numbers like: %s', $plural_string ); ?>"
+                                                                                                               type="button">
+                                                                                                       <?php echo $plural_string; ?>
+                                                                                               </button>
+                                                                                       </li>
+                                                                               <?php endforeach; ?>
+                                                                       <?php endif; ?>
+                                                               </ul>
+                                                       </div>
+                                               <?php endif; ?>
+
+                                               <?php if ( ! $t->plural ) : ?>
+                                                       <?php wporg_gp_translate_textarea( $t, [ $can_edit, $can_approve_translation ] ); ?>
+                                               <?php else : ?>
+                                                       <?php foreach( range( 0, $locale->nplurals - 1 ) as $plural_index ): ?>
+                                                               <?php wporg_gp_translate_textarea( $t, [ $can_edit, $can_approve ], $plural_index ); ?>
+                                                       <?php endforeach; ?>
+                                               <?php endif; ?>
+
+                                               <div class="translation-actions">
+                                                       <?php if ( $can_edit ) : ?>
+                                                               <div class="translation-actions__primary">
+                                                                       <button class="translation-actions__save with-tooltip"
+                                                                                       type="button"
+                                                                                       aria-label="<?php echo $can_approve_translation ? 'Save and approve translation' : 'Suggest new translation'; ?>"
+                                                                                       data-nonce="<?php echo esc_attr( wp_create_nonce( 'add-translation_' . $t->original_id ) ); ?>">
+                                                                               <?php echo $can_approve_translation ? 'Save' : 'Suggest'; ?>
+                                                                       </button>
+                                                               </div>
+                                                               <div class="translation-actions__secondary">
+                                                                       <button type="button" class="translation-actions__copy with-tooltip" aria-label="Copy original">
+                                                                               <span class="screen-reader-text">Copy</span><span aria-hidden="true" class="dashicons dashicons-admin-page"></span>
+                                                                       </button>
+                                                                       <button type="button" class="translation-actions__ltr with-tooltip" aria-label="Switch to LTR">
+                                                                               <span class="screen-reader-text">LTR</span><span aria-hidden="true" class="dashicons dashicons-editor-ltr"></span>
+                                                                       </button>
+                                                                       <button type="button" class="translation-actions__rtl with-tooltip" aria-label="Switch to RTL">
+                                                                               <span class="screen-reader-text">RTL</span><span aria-hidden="true" class="dashicons dashicons-editor-rtl"></span>
+                                                                       </button>
+                                                                       <button type="button" class="translation-actions__help with-tooltip" aria-label="Show help">
+                                                                               <span class="screen-reader-text">Help</span><span aria-hidden="true" class="dashicons dashicons-editor-help"></span>
+                                                                       </button>
+                                                               </div>
+                                                       <?php elseif ( is_user_logged_in() ) : ?>
+                                                               You are not allowed to edit this translation.
+                                                       <?php else : ?>
+                                                               <p class="info">
+                                                                       <?php
+                                                                       printf(
+                                                                               'You <a href="%s">have to log in</a> to edit this translation.',
+                                                                               esc_url( wp_login_url( gp_url_current() ) )
+                                                                       );
+                                                                       ?>
+                                                               </p>
</ins><span class="cx" style="display: block; padding: 0 10px">                                                         <?php endif; ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                                        <?php if ( 'rejected' !== $t->translation_status ) : ?>
-                                                       <button class="reject" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-rejected_' . $t->id ) ); ?>"><strong>&minus;</strong> <?php _e( 'Reject', 'glotpress' ); ?></button>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                         </div>
+                                       </div>
+
+                                       <?php
+                                       if ( has_action( 'wporg_translate_suggestions' ) ) {
+                                               ?>
+                                               <div class="suggestions-wrapper">
+                                                       <?php do_action( 'wporg_translate_suggestions', $t ); ?>
+                                               </div>
+                                               <?php
+                                       }
+                                       ?>
+                               </div>
+                       </div>
+
+                       <div class="editor-panel__right">
+                               <div class="panel-header">
+                                       <h3><?php _e( 'Meta', 'glotpress' ); ?></h3>
+                               </div>
+                               <div class="panel-content">
+                                       <div class="meta">
+
+                                               <?php if ( $t->translation_status ): ?>
+                                                       <div class="status-actions">
+                                                       <?php if ( $can_approve_translation ) : ?>
+                                                               <?php if ( 'current' !== $t->translation_status ) : ?>
+                                                                       <button class="approve" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-current_' . $t->id ) ); ?>"><strong>+</strong> <?php _e( 'Approve', 'glotpress' ); ?></button>
+                                                               <?php endif; ?>
+                                                               <?php if ( 'rejected' !== $t->translation_status ) : ?>
+                                                                       <button class="reject" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-rejected_' . $t->id ) ); ?>"><strong>&minus;</strong> <?php _e( 'Reject', 'glotpress' ); ?></button>
+                                                               <?php endif; ?>
+                                                               <?php if ( 'fuzzy' !== $t->translation_status ) : ?>
+                                                                       <button class="fuzzy" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-fuzzy_' . $t->id ) ); ?>"><strong>~</strong> <?php _e( 'Fuzzy', 'glotpress' ); ?></button>
+                                                               <?php endif; ?>
+                                                       <?php elseif ( $can_reject_self ): ?>
+                                                               <button class="reject" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-rejected_' . $t->id ) ); ?>"><strong>&minus;</strong> <?php _e( 'Reject Suggestion', 'glotpress' ); ?></button>
+                                                               <button class="fuzzy" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-fuzzy_' . $t->id ) ); ?>"><strong>~</strong> <?php _e( 'Fuzzy', 'glotpress' ); ?></button>
</ins><span class="cx" style="display: block; padding: 0 10px">                                                         <?php endif; ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                                        <?php if ( 'fuzzy' !== $t->translation_status ) : ?>
-                                                       <button class="fuzzy" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-fuzzy_' . $t->id ) ); ?>"><strong>~</strong> <?php _e( 'Fuzzy', 'glotpress' ); ?></button>
-                                                       <?php endif; ?>
-                                               <?php elseif ( $can_reject_self ): ?>
-                                                       <button class="reject" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-rejected_' . $t->id ) ); ?>"><strong>&minus;</strong> <?php _e( 'Reject Suggestion', 'glotpress' ); ?></button>
-                                                       <button class="fuzzy" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-fuzzy_' . $t->id ) ); ?>"><strong>~</strong> <?php _e( 'Fuzzy', 'glotpress' ); ?></button>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                                 </div>
</ins><span class="cx" style="display: block; padding: 0 10px">                                                 <?php endif; ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        <?php endif; ?>
-                               </dd>
-                       </dl>
-                       <!--
-                       <dl>
-                               <dt><?php _e( 'Priority:', 'glotpress' ); ?></dt>
-                               <dd><?php echo esc_html($t->priority); ?></dd>
-                       </dl>
-                       -->
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        <?php if ( $t->context ): ?>
-                       <dl>
-                               <dt><?php _e( 'Context:', 'glotpress' ); ?></dt>
-                               <dd><span class="context bubble"><?php echo esc_translation($t->context); ?></span></dd>
-                       </dl>
-                       <?php endif; ?>
-                       <?php if ( $t->extracted_comments ): ?>
-                       <dl>
-                               <dt><?php _e( 'Comment:', 'glotpress' ); ?></dt>
-                               <dd><?php echo make_clickable( esc_translation($t->extracted_comments) ); ?></dd>
-                       </dl>
-                       <?php endif; ?>
-                       <?php if ( $t->translation_added && $t->translation_added != '0000-00-00 00:00:00' ): ?>
-                       <dl>
-                               <dt><?php _e( 'Date added:', 'glotpress' ); ?></dt>
-                               <dd><?php echo $t->translation_added; ?> GMT</dd>
-                       </dl>
-                       <?php endif; ?>
-                       <?php if ( $t->user ) : ?>
-                       <dl>
-                               <dt><?php _e( 'Translated by:', 'glotpress' ); ?></dt>
-                               <dd><?php gp_link_user( $t->user ); ?></dd>
-                       </dl>
-                       <?php endif; ?>
-                       <?php if ( $t->user_last_modified && ( ! $t->user || $t->user->ID !== $t->user_last_modified->ID ) ) : ?>
-                               <dl>
-                                       <dt><?php
-                                               if ( 'current' === $t->translation_status ) {
-                                                       _e( 'Approved by:', 'glotpress' );
-                                               } elseif ( 'rejected' === $t->translation_status ) {
-                                                       _e( 'Rejected by:', 'glotpress' );
-                                               } else {
-                                                       _e( 'Last updated by:', 'glotpress' );
-                                               }
-                                               ?>
-                                       </dt>
-                                       <dd><?php gp_link_user( $t->user_last_modified ); ?></dd>
-                               </dl>
-                       <?php endif; ?>
-                       <?php references( $project, $t ); ?>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                         <dl>
+                                                       <dt><?php _e( 'Status:', 'glotpress' ); ?></dt>
+                                                       <dd>
+                                                               <?php echo display_status( $t->translation_status ); ?>
+                                                       </dd>
+                                               </dl>
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        <dl>
-                           <dt><?php _e( 'Priority of the original:', 'glotpress' ); ?></dt>
-                       <?php if ( $can_write ): ?>
-                               <dd><?php
-                                       echo gp_select(
-                                               'priority-' . $t->original_id,
-                                               GP::$original->get_static( 'priorities' ),
-                                               $t->priority,
-                                               array(
-                                                       'class'      => 'priority',
-                                                       'tabindex'   => '-1',
-                                                       'data-nonce' => wp_create_nonce( 'set-priority_' . $t->original_id ),
-                                               )
-                                       );
-                                       ?></dd>
-                       <?php else : ?>
-                               <dd><?php echo gp_array_get( GP::$original->get_static( 'priorities' ), $t->priority, 'unknown' ); // WPCS: XSS ok. ?></dd>
-                       <?php endif; ?>
-                       </dl>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                         <?php if ( $t->translation_added && $t->translation_added != '0000-00-00 00:00:00' ): ?>
+                                                       <dl>
+                                                               <dt><?php _e( 'Date added:', 'glotpress' ); ?></dt>
+                                                               <dd><?php echo $t->translation_added; ?> GMT</dd>
+                                                       </dl>
+                                               <?php endif; ?>
+                                               <?php if ( $t->user ) : ?>
+                                                       <dl>
+                                                               <dt><?php _e( 'Translated by:', 'glotpress' ); ?></dt>
+                                                               <dd><?php gp_link_user( $t->user ); ?></dd>
+                                                       </dl>
+                                               <?php endif; ?>
+                                               <?php if ( $t->user_last_modified && ( ! $t->user || $t->user->ID !== $t->user_last_modified->ID ) ) : ?>
+                                                       <dl>
+                                                               <dt><?php
+                                                                       if ( 'current' === $t->translation_status ) {
+                                                                               _e( 'Approved by:', 'glotpress' );
+                                                                       } elseif ( 'rejected' === $t->translation_status ) {
+                                                                               _e( 'Rejected by:', 'glotpress' );
+                                                                       } else {
+                                                                               _e( 'Last updated by:', 'glotpress' );
+                                                                       }
+                                                                       ?>
+                                                               </dt>
+                                                               <dd><?php gp_link_user( $t->user_last_modified ); ?></dd>
+                                                       </dl>
+                                               <?php endif; ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        <dl>
-                           <dt><?php _e( 'More links:', 'glotpress' ); ?>
-                               <ul>
-                                       <?php foreach ( $more_links as $link ) : ?>
-                                               <li><?php echo $link; // WPCS: XSS ok. ?></li>
-                                       <?php endforeach; ?>
-                               </ul>
-                               </dt>
-                       </dl>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                         <dl>
+                                                       <dt><?php _e( 'Priority of the original:', 'glotpress' ); ?></dt>
+                                                       <?php if ( $can_write ): ?>
+                                                               <dd><?php
+                                                                       echo gp_select(
+                                                                               'priority-' . $t->original_id,
+                                                                               GP::$original->get_static( 'priorities' ),
+                                                                               $t->priority,
+                                                                               array(
+                                                                                       'class'      => 'priority',
+                                                                                       'tabindex'   => '-1',
+                                                                                       'data-nonce' => wp_create_nonce( 'set-priority_' . $t->original_id ),
+                                                                               )
+                                                                       );
+                                                                       ?></dd>
+                                                       <?php else : ?>
+                                                               <dd><?php echo gp_array_get( GP::$original->get_static( 'priorities' ), $t->priority, 'unknown' ); // WPCS: XSS ok. ?></dd>
+                                                       <?php endif; ?>
+                                               </dl>
+                                       </div>
+                               </div>
+                       </div>
</ins><span class="cx" style="display: block; padding: 0 10px">                 </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                <div class="actions">
-               <?php if ( $can_edit ): ?>
-                       <button class="ok" data-nonce="<?php echo esc_attr( wp_create_nonce( 'add-translation_' . $t->original_id ) ); ?>">
-                               <?php echo $can_approve_translation ? __( 'Add translation &rarr;', 'glotpress' ) : __( 'Suggest new translation &rarr;', 'glotpress' ); ?>
-                       </button>
-               <?php endif; ?>
-                       <?php _e( 'or', 'glotpress' ); ?> <a href="#" class="close"><?php _e( 'Cancel', 'glotpress' ); ?></a>
-               </div>
</del><span class="cx" style="display: block; padding: 0 10px">         </td>
</span><span class="cx" style="display: block; padding: 0 10px"> </tr>
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginswporggpcustomizationstemplatestranslationrowpreviewphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/translation-row-preview.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/translation-row-preview.php    2019-05-08 17:02:43 UTC (rev 8750)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/translation-row-preview.php      2019-05-08 19:33:18 UTC (rev 8751)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -21,7 +21,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">           <?php echo $priority_char[$t->priority][0] ?>
</span><span class="cx" style="display: block; padding: 0 10px">        </td>
</span><span class="cx" style="display: block; padding: 0 10px">        <td class="original">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                <?php echo prepare_original( esc_translation( $t->singular ) ); ?>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         <span class="original-text"><?php echo esc_translation( $t->singular ); ?></span>
</ins><span class="cx" style="display: block; padding: 0 10px">                 <?php if ( $t->context ): ?>
</span><span class="cx" style="display: block; padding: 0 10px">                <span class="context bubble" title="<?php printf( __( 'Context: %s', 'glotpress' ), esc_html($t->context) ); ?>"><?php echo esc_html($t->context); ?></span>
</span><span class="cx" style="display: block; padding: 0 10px">                <?php endif; ?>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -43,13 +43,13 @@
</span><span class="cx" style="display: block; padding: 0 10px">                if ( ! count( array_filter( $t->translations, 'gp_is_not_null' ) ) ) :
</span><span class="cx" style="display: block; padding: 0 10px">                        echo $missing_text;
</span><span class="cx" style="display: block; padding: 0 10px">                elseif ( ! $t->plural ) :
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        echo esc_translation( $t->translations[0] );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 echo '<span class="translation-text">' . esc_translation( $t->translations[0] ) . '</span>';
</ins><span class="cx" style="display: block; padding: 0 10px">                 else: ?>
</span><span class="cx" style="display: block; padding: 0 10px">                <ul>
</span><span class="cx" style="display: block; padding: 0 10px">                        <?php
</span><span class="cx" style="display: block; padding: 0 10px">                                foreach( $t->translations as $translation ):
</span><span class="cx" style="display: block; padding: 0 10px">                        ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                <li><?php echo gp_is_empty_string( $translation ) ? $missing_text : esc_translation( $translation ); ?></li>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         <li><?php echo gp_is_empty_string( $translation ) ? $missing_text : '<span class="translation-text">' . esc_translation( $translation ) . '</span>' ; ?></li>
</ins><span class="cx" style="display: block; padding: 0 10px">                         <?php
</span><span class="cx" style="display: block; padding: 0 10px">                                endforeach;
</span><span class="cx" style="display: block; padding: 0 10px">                        ?>
</span></span></pre>
</div>
</div>

</body>
</html>