<!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>[3852] sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer: developer.wordpress.org: Implement a tabbed interface for writing and previewing user contributed notes.</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 { 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/3852">3852</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/3852","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>coffee2code</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2016-08-24 20:22:35 +0000 (Wed, 24 Aug 2016)</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'>developer.wordpress.org: Implement a tabbed interface for writing and previewing user contributed notes.

Also wraps form header in 'h3' tag so it appears in table of contents.

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

<h3>Modified Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdevelopercommentsphp">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/comments.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperfunctionsphp">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/functions.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperincusercontentpreviewphp">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content-preview.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperincusercontentphp">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperjsusernotespreviewjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/user-notes-preview.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperjsusernotesjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/user-notes.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperscssmainscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperstylesheetsmaincss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperjstabsjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/tabs.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperstylesheetseditorstylecss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/editor-style.css</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdevelopercommentsphp"></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/themes/pub/wporg-developer/comments.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/themes/pub/wporg-developer/comments.php  2016-08-24 13:15:18 UTC (rev 3851)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/comments.php    2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -65,8 +65,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">                <p id="add-user-note" style="display:none;"><a href=""><?php _e( 'Have a note or feedback to contribute?', 'wporg' ); ?></a></p>
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                <?php comment_form( array(
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        'class_form'          => 'comment-form tab-container',
</ins><span class="cx" style="display: block; padding: 0 10px">                         'comment_field'       => DevHub_User_Submitted_Content::wp_editor_comments(),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        'comment_notes_after' => '<p>' .
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 'comment_notes_after' => DevHub_Note_Preview::comment_preview() .
+                               '<p>' .
</ins><span class="cx" style="display: block; padding: 0 10px">                                 __( 'Notes should supplement code reference entries, for example examples, tips, explanations, use-cases, and best practices.', 'wporg' ) .
</span><span class="cx" style="display: block; padding: 0 10px">                                '</p><p>' .
</span><span class="cx" style="display: block; padding: 0 10px">                                __( 'Feedback can be to report errors or omissions with the documentation on this page. Such feedback will not be publicly posted.', 'wporg' ) . 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -87,19 +89,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        'title_reply'         =>  '', //'Add Example'
</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">-                <!-- Comment Preview -->
-               <div id='comment-preview' class='comment byuser depth-1' style='display:none;'>
-                       <article class='comment-body'>
-                               <header class='comment-meta'>
-                                       <div>
-                                               <?php _e( 'Preview', 'wporg' ); ?>
-                                               <span class='spinner' style='display:none'></span>
-                                       </div>
-                               </header>
-                               <div class='comment-content'></div>
-                       </article>
-               </div>
-
</del><span class="cx" style="display: block; padding: 0 10px">         <?php endif; ?>
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        <?php if ( ! \DevHub\is_parsed_post_type() && comments_open() ) : ?>
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperfunctionsphp"></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/themes/pub/wporg-developer/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/themes/pub/wporg-developer/functions.php 2016-08-24 13:15:18 UTC (rev 3851)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/functions.php   2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -258,7 +258,14 @@
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><span class="cx" style="display: block; padding: 0 10px"> function header_js() {
</span><span class="cx" style="display: block; padding: 0 10px">        // Output CSS to hide markup with the class 'hide-if-js'. Ensures the markup is visible if JS is not present.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        echo "<script type=\"text/javascript\">jQuery( '<style>.hide-if-js { display: none; }</style>' ).appendTo( 'head' );</script>\n";
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Add class 'js' to the body element if JavaScript is enabled
+       echo "
+       <script type=\"text/javascript\">
+               jQuery( '<style>.hide-if-js { display: none; }</style>' ).appendTo( 'head' );
+               jQuery( function($) {
+                       $( 'body' ).addClass('js');
+               } );
+       </script>\n";
</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"> function theme_scripts_styles() {
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperincusercontentpreviewphp"></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/themes/pub/wporg-developer/inc/user-content-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/themes/pub/wporg-developer/inc/user-content-preview.php  2016-08-24 13:15:18 UTC (rev 3851)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content-preview.php    2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -35,11 +35,14 @@
</span><span class="cx" style="display: block; padding: 0 10px">         */
</span><span class="cx" style="display: block; padding: 0 10px">        public static function scripts_and_styles() {
</span><span class="cx" style="display: block; padding: 0 10px">                if ( is_singular() ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        wp_enqueue_script( 'wporg-developer-preview', get_template_directory_uri() . '/js/user-notes-preview.js', array( 'jquery', 'quicktags', 'wporg-developer-function-reference' ), '20160809', true );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 wp_enqueue_script( 'wporg-developer-tabs', get_template_directory_uri() . '/js/tabs.js', array( 'jquery' ), '20160809', true );
+                       wp_enqueue_script( 'wporg-developer-preview', get_template_directory_uri() . '/js/user-notes-preview.js', array( 'jquery', 'wporg-developer-function-reference', 'wporg-developer-tabs'  ), '20160809', true );
</ins><span class="cx" style="display: block; padding: 0 10px">                         wp_localize_script( 'wporg-developer-preview', 'wporg_note_preview', array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                'ajaxurl' => admin_url( 'admin-ajax.php' ),
-                               'nonce'   => wp_create_nonce( 'preview_nonce' ),
-                               'preview' => __( 'preview note', 'wporg' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         'ajaxurl'       => admin_url( 'admin-ajax.php' ),
+                               'nonce'         => wp_create_nonce( 'preview_nonce' ),
+                               'preview'       => __( 'preview note', 'wporg' ),
+                               'preview_empty' => __( 'Nothing to preview', 'wporg' ),
+                               'is_admin'      => is_admin(),
</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 class="lines" style="display: block; padding: 0 10px; color: #888">@@ -54,15 +57,38 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        wp_send_json_error( array( 'comment' => '' ) );
</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">-                $comment = apply_filters('pre_comment_content', $_POST['preview_comment'] );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $comment = apply_filters( 'pre_comment_content', $_POST['preview_comment'] );
</ins><span class="cx" style="display: block; padding: 0 10px">                 $comment = wp_unslash( $comment );
</span><span class="cx" style="display: block; padding: 0 10px">                $comment = apply_filters( 'get_comment_text', $comment );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $comment = apply_filters( 'comment_text', $comment );           
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $comment = apply_filters( 'comment_text', $comment );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                wp_send_json_success( array( 'comment' => $comment ) );
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+       /**
+        * Captures the comment-preview markup displayed (and populated) below the Add Note form.
+        *
+        * @access public
+        * @static
+        *
+        * @return string Comment preview HTML markup.
+        */
+       public static function comment_preview() {
+               if ( ! class_exists( 'DevHub_Note_Preview' ) ) {
+                       return '';
+               }
+
+               ob_start();
+?>
+               <div id='comment-preview' class='tab-section comment byuser depth-1 comment-preview' aria-hidden="true">
+                       <article class='preview-body comment-body'>
+                               <div class='preview-content comment-content'></div>
+                       </article>
+               </div>
+               <?php
+
+               return ob_get_clean();
+       }
</ins><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">-
</del><span class="cx" style="display: block; padding: 0 10px"> DevHub_Note_Preview::init();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperincusercontentphp"></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/themes/pub/wporg-developer/inc/user-content.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/themes/pub/wporg-developer/inc/user-content.php  2016-08-24 13:15:18 UTC (rev 3851)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content.php    2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -89,7 +89,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                wp_enqueue_style( 'syntaxhighlighter-theme-default' );
</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">-                        wp_enqueue_script( 'wporg-developer-user-notes', get_template_directory_uri() . '/js/user-notes.js', array( 'quicktags', 'wporg-developer-preview' ), '20160809', true );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 wp_enqueue_script( 'wporg-developer-user-notes', get_template_directory_uri() . '/js/user-notes.js', array( 'quicktags' ), '20160809', true );
</ins><span class="cx" style="display: block; padding: 0 10px">                         if ( get_option( 'thread_comments' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                wp_enqueue_script( 'comment-reply' );
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -126,9 +126,24 @@
</span><span class="cx" style="display: block; padding: 0 10px">         */
</span><span class="cx" style="display: block; padding: 0 10px">        public static function wp_editor_comments() {
</span><span class="cx" style="display: block; padding: 0 10px">                ob_start();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                echo '<p class="comment-form-comment"><label for="comment">' . _x( 'Add Note or Feedback', 'noun', 'wporg' ) . '</label>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         echo '<h3><label for="comment">' . _x( 'Add Note or Feedback', 'noun', 'wporg' ) . '</label></h3>';
+
+               if ( class_exists( 'DevHub_Note_Preview' ) ) {
+                       echo '<ul class="tablist" style="display:none;">';
+                       echo '<li><a href="#comment-form-comment">' . __( 'Write', 'wporg' ) . '</a></li>';
+                       echo '<li><a href="#comment-preview">' . __( 'Preview', 'wporg' ) . '</a></li></ul>';
+               }
+
+               $style = '<style type="text/css">';
+               ob_start();
+               include get_stylesheet_directory() . '/stylesheets/editor-style.css';
+               $style .= ob_get_clean();
+               $style .=' </style>';
+
+               echo '<div class="comment-form-comment tab-section" id="comment-form-comment">';
</ins><span class="cx" style="display: block; padding: 0 10px">                 wp_editor( '', 'comment', array(
</span><span class="cx" style="display: block; padding: 0 10px">                        'media_buttons' => false,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        'editor_css'    => $style,
</ins><span class="cx" style="display: block; padding: 0 10px">                         'textarea_name' => 'comment',
</span><span class="cx" style="display: block; padding: 0 10px">                        'textarea_rows' => 8,
</span><span class="cx" style="display: block; padding: 0 10px">                        'quicktags'     => array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -137,7 +152,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        'teeny'         => true,
</span><span class="cx" style="display: block; padding: 0 10px">                        'tinymce'       => false,
</span><span class="cx" style="display: block; padding: 0 10px">                ) );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                echo '</p>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         echo '</div>';
</ins><span class="cx" style="display: block; padding: 0 10px">                 return ob_get_clean();
</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_htmlwpcontentthemespubwporgdeveloperjstabsjs"></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/themes/pub/wporg-developer/js/tabs.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/themes/pub/wporg-developer/js/tabs.js                            (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/tabs.js      2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,156 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Takes care of hiding and displaying sections with tabs
+ * 
+ * Allow users to switch focus between the aria-selected tab and the content.
+ * Change focus between tabs using the left and right arrow keys.
+ * Use the TAB key as normal to focus the first element inside the visible tab panel.
+ *
+ * Html markup needed for a tabbed list
+ * 
+ * <div class=".tab-container">
+ *     <ul class="tablist">
+ *         <li><a href="#section-1">Section 1</a></li>
+ *         <li><a href="#section-2">Section 2</a></li>
+ *     </ul>
+ *     <div id="section-1" class="tab-section">Section 1 content</div>
+ *     <div id="section-2" class="tab-section">Section 2 content</div>
+ * </div> 
+ */
+
+
+( function( $ ) {
+
+       container = $( '.tab-container' );
+
+       if ( container.length ) {
+
+               container.each( function() {
+
+                       var tablist = $( this ).find( '.tablist' );
+                       var tabSections = $( this ).find( '.tab-section' );
+
+                       if ( tablist.length || tabSections.length ) {
+                               var tabs = tablist.find( 'a' );
+
+                               if ( ( 1 < tabs.length ) && ( tabs.length === tabSections.length ) ) {
+                                       setupTabs( tablist, tabs, tabSections );
+                                       tabEvents( tablist, tabs, tabSections );
+                               }
+                       }
+               } );
+       }
+
+       function setupTabs( tablist, tabs, tabSections ) {
+
+               tablist.attr( 'role', 'tablist' );
+               tablist.find( 'li' ).attr( 'role', 'presentation' );
+
+               tabs.attr( {
+                       'role': 'tab',
+                       'tabindex': '-1'
+               } );
+
+               // Make each aria-controls correspond id of targeted section (re href)
+               tabs.each( function() {
+                       $( this ).attr(
+                               'aria-controls', $( this ).attr( 'href' ).substring( 1 )
+                       );
+               } );
+
+               // Make the first tab selected by default and allow it focus
+               tabs.first().attr( {
+                       'aria-selected': 'true',
+                       'tabindex': '0'
+               } );
+
+               // Add 'tab-section-selected' to first section
+               tabSections.first().addClass( 'tab-section-selected' );
+               
+               // Make each section focusable and give it the tabpanel role
+               tabSections.attr( {
+                       'role': 'tabpanel'
+               } );
+
+               // Make first child of each panel focusable programmatically
+               tabSections.children().first().attr( {
+                       'tabindex': '0'
+               } );
+
+               // Make all but the first section hidden (ARIA state and display CSS)
+               $( tabSections ).not( ":first" ).attr( {
+                       'aria-hidden': 'true'
+               } );
+       }
+
+       function tabEvents( tablist, tabs, tabSections ) {
+
+               // Change focus between tabs with arrow keys
+               tabs.on( 'keydown', function( e ) {
+
+                       // define current, previous and next (possible) tabs
+                       var original = $( this );
+                       var prev = $( this ).parents( 'li' ).prev().children( '[role="tab"]' );
+                       var next = $( this ).parents( 'li' ).next().children( '[role="tab"]' );
+                       var target;
+
+                       // find the direction (prev or next)
+                       switch ( e.keyCode ) {
+                               case 37:
+                                       target = prev;
+                                       break;
+                               case 39:
+                                       target = next;
+                                       break;
+                               default:
+                                       target = false
+                                       break;
+                       }
+
+                       if ( target.length ) {
+                               original.attr( {
+                                       'tabindex': '-1',
+                                       'aria-selected': null
+                               } );
+                               target.attr( {
+                                       'tabindex': '0',
+                                       'aria-selected': true
+                               } ).focus();
+                       }
+
+                       // Hide panels
+                       tabSections.attr( 'aria-hidden', 'true' );
+
+                       // Show panel which corresponds to target
+                       $( '#' + $( document.activeElement ).attr( 'href' ).substring( 1 ) ).attr( 'aria-hidden', null );
+
+                       // Toggle 'tab-section-selected' class for tab sections
+                       tabSections.toggleClass( 'tab-section-selected' );
+               } );
+
+               // Handle click on tab to show + focus tabpanel
+               tabs.on( 'click', function( e ) {
+                       e.preventDefault();
+
+                       tabs.attr( {
+                               'tabindex': '-1',
+                               'aria-selected': null
+                       } );
+
+                       // replace above on clicked tab
+                       $( this ).attr( {
+                               'aria-selected': true,
+                               'tabindex': '0'
+                       } );
+
+                       // Hide panels
+                       tabSections.attr( 'aria-hidden', 'true' );
+
+                       // show corresponding panel
+                       $( '#' + $( this ).attr( 'href' ).substring( 1 ) ).attr( 'aria-hidden', null );
+
+                       // Toggle 'tab-section-selected' class for tab sections
+                       tabSections.toggleClass( 'tab-section-selected' );
+               } );
+       }
+
+} )( jQuery );
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperjsusernotespreviewjs"></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/themes/pub/wporg-developer/js/user-notes-preview.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/themes/pub/wporg-developer/js/user-notes-preview.js      2016-08-24 13:15:18 UTC (rev 3851)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/user-notes-preview.js        2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3,69 +3,95 @@
</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"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-var wporg_developer_note_preview = ( function( $ ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+( function( $ ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        var textarea, preview, previewContent, spinner;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var textarea, textareaHeight, text, preview, previewContent, tabs, processing, spinner;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        function init( textarea_selector, preview_selector ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function init() {
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                textarea = $( textarea_selector );
-               preview = $( preview_selector );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         if ( undefined === wporg_note_preview ) {
+                       return;
+               }
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                if ( textarea.length && preview.length && ( undefined !== wporg_note_preview ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         textarea = $( '.comment-form textarea' );
+               preview = $( '#comment-preview' );
+               tabs = $( '#commentform .tablist' ).find( 'a' );
+               spinner = $( '<span class="spinner" style="display:none;"></span>' );
+               text = '';
+               processing = false;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        previewContent = $( '.comment-content', preview );
-                       spinner = $( '.spinner', preview );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         if ( textarea.length && preview.length && tabs.length ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        if ( previewContent.length && spinner.length ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Append spinner to preview tab
+                       tabs.parents( 'li[role="presentation"]:last' ).append( spinner );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                add_preview_button();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 previewContent = $( '.preview-content', preview );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                var current_text = textarea.val();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( previewContent.length ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                if ( current_text.length ) {
-                                       update_preview( current_text );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         if ( !textarea.val().length ) {
+                                       previewContent.text( wporg_note_preview.preview_empty );
</ins><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">-                                add_preview_events();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         previewEvents();
</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 class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        function add_preview_button() {
-               QTags.addButton( 'preview', wporg_note_preview.preview, function() {
-                       var pos = preview.position();
-                       $( 'html,body' ).animate( {
-                               scrollTop: pos.top
-                       }, 1000 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function previewEvents() {
+
+               tabs.on( "keydown.note_preview, click.note_preview", function( e ) {
+
+                       if ( 'comment-preview' === $( this ).attr( 'aria-controls' ) ) {
+
+                               if ( !processing ) {
+                                       current_text = $.trim( textarea.val() );
+                                       if ( current_text.length && ( current_text !== wporg_note_preview.preview_empty ) ) {
+                                               if ( wporg_note_preview.preview_empty === previewContent.text() ) {
+                                                       // Remove "Nothing to preview" if there's new current text.
+                                                       previewContent.text( '' );
+                                               }
+                                               // Update the preview.
+                                               updatePreview( current_text );
+                                       } else {
+                                               previewContent.text( wporg_note_preview.preview_empty );
+                                       }
+                               }
+
+                               // Remove outline from tab if clicked.
+                               if ( "click" === e.type ) {
+                                       $( this ).blur();
+                               }
+                       } else {
+                               textarea.focus();
+                       }
</ins><span class="cx" style="display: block; padding: 0 10px">                 } );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        }
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        function add_preview_events() {
-
-               // Update Preview after QuickTag button is clicked.
-               var buttons = $( '#qt_comment_toolbar' ).find( 'input' ).not( '#qt_comment_preview' );
-               buttons.on( 'click', function() {
-                       // Set timeout to let the quicktags do it's thing first.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         // Set preview heigth when the textarea is visible
+               $( '#add-user-note, .table-of-contents a[href="#add-note-or-feedback"]' ).click( function( e ) {
+                       e.preventDefault();
+                       tabs.parents( '.tablist' ).show();
</ins><span class="cx" style="display: block; padding: 0 10px">                         setTimeout( function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                update_preview( textarea.val() );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         textareaHeight = textarea.outerHeight( true );
+                               if ( 0 < textareaHeight ) {
+                                       preview.css( 'min-height', textareaHeight + 'px' );
+                               }
</ins><span class="cx" style="display: block; padding: 0 10px">                         }, 500 );
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                // Update Preview after keykup event.
-               // Delay updating the preview by 2 seconds to not overload the server.
-               textarea.bind( 'keyup', debounce( function( e ) {
-                       update_preview( $( this ).val() );
-               }, 2000 ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function updatePreview( content ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                // Display a spinner as soon as the comment form changes input.
-               textarea.bind( 'input propertychange selectionchange', function( e ) {
-                       spinner.show();
-               } );
-       }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         // Don't update preview if nothing changed
+               if ( text == content ) {
+                       spinner.hide();
+                       return;
+               }
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        function update_preview( content ) {
</del><span class="cx" style="display: block; padding: 0 10px">                 spinner.show();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                text = content;
+               processing = true;
+
</ins><span class="cx" style="display: block; padding: 0 10px">                 $.post( wporg_note_preview.ajaxurl, {
</span><span class="cx" style="display: block; padding: 0 10px">                        action: "preview_comment",
</span><span class="cx" style="display: block; padding: 0 10px">                        preview_nonce: wporg_note_preview.nonce,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -73,7 +99,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">                .done( function( response ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        update_preview_html( response.data.comment );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 updatePreview_HTML( response.data.comment );
</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">                .fail( function( response ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -82,18 +108,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                .always( function( response ) {
</span><span class="cx" style="display: block; padding: 0 10px">                        spinner.hide();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        processing = false;
+
+                       // Make first child of the preview focusable
+                       preview.children().first().attr( {
+                               'tabindex': '0'
+                       } );
</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 class="cx" style="display: block; padding: 0 10px">        // Add toggle links to source code in preview if needed.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        function update_source_code() {
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function updateSourceCode() {
</ins><span class="cx" style="display: block; padding: 0 10px">                 if ( undefined !== wporg_developer ) {
</span><span class="cx" style="display: block; padding: 0 10px">                        wporg_developer.sourceCodeDisplay( preview );
</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"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        function update_preview_html( content ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function updatePreview_HTML( content ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                 // Update preview content
</span><span class="cx" style="display: block; padding: 0 10px">                previewContent.html( content );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -102,25 +133,10 @@
</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">                // Add toggle link to source code in preview if needed.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                update_source_code();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         updateSourceCode();
</ins><span class="cx" style="display: block; padding: 0 10px">                 spinner.hide();
</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">-        // https://remysharp.com/2010/07/21/throttling-function-calls
-       function debounce( fn, delay ) {
-               var timer = null;
-               return function() {
-                       var context = this,
-                               args = arguments;
-                       clearTimeout( timer );
-                       timer = setTimeout( function() {
-                               fn.apply( context, args );
-                       }, delay );
-               };
-       }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ init();
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        return {
-               init: init
-       }
-
</del><span class="cx" style="display: block; padding: 0 10px"> } )( jQuery );
</span><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperjsusernotesjs"></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/themes/pub/wporg-developer/js/user-notes.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/themes/pub/wporg-developer/js/user-notes.js      2016-08-24 13:15:18 UTC (rev 3851)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/user-notes.js        2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12,30 +12,21 @@
</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">        function showCommentForm() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $( '#respond, #add-user-note' ).toggle();
-               
-               var preview = $( '#comment-preview' );
-               if( preview.length && ( wporg_developer_note_preview !== undefined ) ) {
-                       preview.show();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $( '#respond' ).show();
+               $( '#add-user-note').hide();
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        //Initialize preview with textarea and preview selectors
-                       wporg_developer_note_preview.init( '.comment-form textarea', '#comment-preview' );
-               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         var target = $( '#commentform #add-note-or-feedback' );
+               if ( target.length ) {
+                       var pos = target.offset();
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                if ( pos = $( '#submit' ).position() ) {
-                       if ( pos.top < $(window).scrollTop() ) {
-                               // Scroll up
-                               $( 'html,body' ).animate( {scrollTop:pos.top}, 1000 );
-                       }
-                       else if ( pos.top + jQuery("selector").height() > $(window).scrollTop() + (window.innerHeight || document.documentElement.clientHeight) ){
-                               // Scroll down
-                               $( 'html,body' ).animate( {scrollTop:pos.top - (window.innerHeight || document.documentElement.clientHeight) + $( '#submit' ).height() + 30}, 1000 );
-                       }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 $( 'html,body' ).animate( {
+                               scrollTop: pos.top
+                       }, 1000 );
</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 class="cx" style="display: block; padding: 0 10px">        $( '#respond, #add-user-note' ).toggle();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        $( '#add-user-note' ).click( function( e ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( '#add-user-note, .table-of-contents a[href="#add-note-or-feedback"]' ).click( function( e ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                 e.preventDefault();
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                showCommentForm();
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperscssmainscss"></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/themes/pub/wporg-developer/scss/main.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss        2016-08-24 13:15:18 UTC (rev 3851)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss  2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -326,6 +326,47 @@
</span><span class="cx" style="display: block; padding: 0 10px">                margin: 0 0 1.5em;
</span><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">+        /* =Tabs
+       ----------------------------------------------- */
+
+       .tablist {
+               margin: 0;
+       }
+       .tablist li {
+               display: inline-block;
+               list-style: none;
+       }
+       .tablist a {
+               border-color: none;
+               background-color: transparent;
+               border-color: transparent;
+               border-image: none;
+               border-style: solid solid none;
+               border-width: 1px 1px 0;   
+               display: inline-block;
+               padding: .5em 1em;
+               margin-bottom:-1px;
+       }
+       .tablist a[aria-selected],
+       .tablist a:focus {
+               background-color: #fff;
+               border-color: #ccc;
+               border-radius: 3px 3px 0 0;
+               color: #333;  
+       }
+       .tab-section {
+               margin-top: 0;
+               padding: 0;
+               border: none;
+       }
+       .tab-section[aria-hidden="true"] {
+               display: none;
+       }
+       .tab-section:focus {
+               background: #eee;
+               outline: thin dotted;
+       }
+
</ins><span class="cx" style="display: block; padding: 0 10px">         /* =Media
</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">@@ -1188,22 +1229,40 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        background: #fff;
</span><span class="cx" style="display: block; padding: 0 10px">                        overflow: auto;
</span><span class="cx" style="display: block; padding: 0 10px">                        border: 1px solid #dfdfdf;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        border-radius: 2px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 border-radius: 0 2px 2px 2px;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                        article {
</span><span class="cx" style="display: block; padding: 0 10px">                                overflow: auto;
</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"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                #comment-preview {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         #comment-preview,
+               .js & .comment-form-comment {
+                       margin-top: 0;
+                       border: 1px solid #ccc;
+                       border-radius: 0 3px 3px 3px;
</ins><span class="cx" style="display: block; padding: 0 10px">                         clear:both;
</span><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">+                #comment-preview.tab-section-selected {
+                       border-radius: 3px;
+               }
+
</ins><span class="cx" style="display: block; padding: 0 10px">                 #comment-preview .comment-content {
</span><span class="cx" style="display: block; padding: 0 10px">                        min-height: 6em;
</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">-                #comment-preview .spinner {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         label[for=comment],
+               .comment-form-comment,
+               .comment-preview {
+                       margin-bottom: 1em;
+               }
+
+               .js & .comment-form-comment {
+                       padding: 0 .7em .7em;
+               }
+
+               .tablist .spinner {
</ins><span class="cx" style="display: block; padding: 0 10px">                         background: url("/wp-includes/images/spinner-2x.gif") no-repeat scroll 0 50%;
</span><span class="cx" style="display: block; padding: 0 10px">                        -webkit-background-size: 20px 20px;
</span><span class="cx" style="display: block; padding: 0 10px">                        background-size: 20px 20px;
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperstylesheetseditorstylecss"></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/themes/pub/wporg-developer/stylesheets/editor-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/themes/pub/wporg-developer/stylesheets/editor-style.css                          (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/editor-style.css    2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,32 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* 
+These styles are inserted inline in the comment editor.
+*/
+
+.js .quicktags-toolbar {
+       background-color: #fff;
+       border: none;
+}
+
+.js .wp-core-ui .quicktags-toolbar input.button.button-small:first-of-type {
+       margin: 2px 2px 2px 0;
+}
+
+.js .quicktags-toolbar {
+       padding: 8px 5px 5px 0;
+}
+/* 
+These styles are inserted inline in the comment editor.
+*/
+
+.js .quicktags-toolbar {
+       background-color: #fff;
+       border: none;
+}
+
+.js .wp-core-ui .quicktags-toolbar input.button.button-small:first-of-type {
+       margin: 2px 2px 2px 0;
+}
+
+.js .quicktags-toolbar {
+       padding: 8px 5px 5px 0;
+}
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><span class="cx" style="display: block; padding: 0 10px">Property changes on: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/editor-style.css
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperstylesheetsmaincss"></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/themes/pub/wporg-developer/stylesheets/main.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/themes/pub/wporg-developer/stylesheets/main.css  2016-08-24 13:15:18 UTC (rev 3851)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css    2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -287,6 +287,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">   /* Clearing */
</span><span class="cx" style="display: block; padding: 0 10px">   /* =Content
</span><span class="cx" style="display: block; padding: 0 10px">        ----------------------------------------------- */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  /* =Tabs
+       ----------------------------------------------- */
</ins><span class="cx" style="display: block; padding: 0 10px">   /* =Media
</span><span class="cx" style="display: block; padding: 0 10px">        ----------------------------------------------- */
</span><span class="cx" style="display: block; padding: 0 10px">   /* Make sure embeds and iframes fit their containers */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -677,6 +679,50 @@
</span><span class="cx" style="display: block; padding: 0 10px">   margin: 0 0 1.5em;
</span><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">+.devhub-wrap .tablist {
+  margin: 0;
+}
+
+.devhub-wrap .tablist li {
+  display: inline-block;
+  list-style: none;
+}
+
+.devhub-wrap .tablist a {
+  border-color: none;
+  background-color: transparent;
+  border-color: transparent;
+  border-image: none;
+  border-style: solid solid none;
+  border-width: 1px 1px 0;
+  display: inline-block;
+  padding: .5em 1em;
+  margin-bottom: -1px;
+}
+
+.devhub-wrap .tablist a[aria-selected],
+.devhub-wrap .tablist a:focus {
+  background-color: #fff;
+  border-color: #ccc;
+  border-radius: 3px 3px 0 0;
+  color: #333;
+}
+
+.devhub-wrap .tab-section {
+  margin-top: 0;
+  padding: 0;
+  border: none;
+}
+
+.devhub-wrap .tab-section[aria-hidden="true"] {
+  display: none;
+}
+
+.devhub-wrap .tab-section:focus {
+  background: #eee;
+  outline: thin dotted;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .devhub-wrap .page-content img.wp-smiley,
</span><span class="cx" style="display: block; padding: 0 10px"> .devhub-wrap .entry-content img.wp-smiley,
</span><span class="cx" style="display: block; padding: 0 10px"> .devhub-wrap .comment-content img.wp-smiley {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1563,7 +1609,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">   background: #fff;
</span><span class="cx" style="display: block; padding: 0 10px">   overflow: auto;
</span><span class="cx" style="display: block; padding: 0 10px">   border: 1px solid #dfdfdf;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-  border-radius: 2px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  border-radius: 0 2px 2px 2px;
</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"> .devhub-wrap.single-wp-parser-function .comment-list li article,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1574,15 +1620,42 @@
</span><span class="cx" style="display: block; padding: 0 10px">   overflow: auto;
</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">-.devhub-wrap.single-wp-parser-function #comment-preview, .devhub-wrap.single-wp-parser-method #comment-preview, .devhub-wrap.single-wp-parser-hook #comment-preview, .devhub-wrap.single-wp-parser-class #comment-preview {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.devhub-wrap.single-wp-parser-function #comment-preview,
+.js .devhub-wrap.single-wp-parser-function .comment-form-comment, .devhub-wrap.single-wp-parser-method #comment-preview,
+.js .devhub-wrap.single-wp-parser-method .comment-form-comment, .devhub-wrap.single-wp-parser-hook #comment-preview,
+.js .devhub-wrap.single-wp-parser-hook .comment-form-comment, .devhub-wrap.single-wp-parser-class #comment-preview,
+.js .devhub-wrap.single-wp-parser-class .comment-form-comment {
+  margin-top: 0;
+  border: 1px solid #ccc;
+  border-radius: 0 3px 3px 3px;
</ins><span class="cx" style="display: block; padding: 0 10px">   clear: both;
</span><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">+.devhub-wrap.single-wp-parser-function #comment-preview.tab-section-selected, .devhub-wrap.single-wp-parser-method #comment-preview.tab-section-selected, .devhub-wrap.single-wp-parser-hook #comment-preview.tab-section-selected, .devhub-wrap.single-wp-parser-class #comment-preview.tab-section-selected {
+  border-radius: 3px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .devhub-wrap.single-wp-parser-function #comment-preview .comment-content, .devhub-wrap.single-wp-parser-method #comment-preview .comment-content, .devhub-wrap.single-wp-parser-hook #comment-preview .comment-content, .devhub-wrap.single-wp-parser-class #comment-preview .comment-content {
</span><span class="cx" style="display: block; padding: 0 10px">   min-height: 6em;
</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">-.devhub-wrap.single-wp-parser-function #comment-preview .spinner, .devhub-wrap.single-wp-parser-method #comment-preview .spinner, .devhub-wrap.single-wp-parser-hook #comment-preview .spinner, .devhub-wrap.single-wp-parser-class #comment-preview .spinner {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.devhub-wrap.single-wp-parser-function label[for=comment],
+.devhub-wrap.single-wp-parser-function .comment-form-comment,
+.devhub-wrap.single-wp-parser-function .comment-preview, .devhub-wrap.single-wp-parser-method label[for=comment],
+.devhub-wrap.single-wp-parser-method .comment-form-comment,
+.devhub-wrap.single-wp-parser-method .comment-preview, .devhub-wrap.single-wp-parser-hook label[for=comment],
+.devhub-wrap.single-wp-parser-hook .comment-form-comment,
+.devhub-wrap.single-wp-parser-hook .comment-preview, .devhub-wrap.single-wp-parser-class label[for=comment],
+.devhub-wrap.single-wp-parser-class .comment-form-comment,
+.devhub-wrap.single-wp-parser-class .comment-preview {
+  margin-bottom: 1em;
+}
+
+.js .devhub-wrap.single-wp-parser-function .comment-form-comment, .js .devhub-wrap.single-wp-parser-method .comment-form-comment, .js .devhub-wrap.single-wp-parser-hook .comment-form-comment, .js .devhub-wrap.single-wp-parser-class .comment-form-comment {
+  padding: 0 .7em .7em;
+}
+
+.devhub-wrap.single-wp-parser-function .tablist .spinner, .devhub-wrap.single-wp-parser-method .tablist .spinner, .devhub-wrap.single-wp-parser-hook .tablist .spinner, .devhub-wrap.single-wp-parser-class .tablist .spinner {
</ins><span class="cx" style="display: block; padding: 0 10px">   background: url("/wp-includes/images/spinner-2x.gif") no-repeat scroll 0 50%;
</span><span class="cx" style="display: block; padding: 0 10px">   -webkit-background-size: 20px 20px;
</span><span class="cx" style="display: block; padding: 0 10px">   background-size: 20px 20px;
</span></span></pre>
</div>
</div>

</body>
</html>