<!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>[30338] trunk/src: Introduce Distraction-Free Writing v2, a re-think of DFW that uses the main editor instance</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="https://core.trac.wordpress.org/changeset/30338">30338</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/30338","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>markjaquith</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2014-11-13 22:30:55 +0000 (Thu, 13 Nov 2014)</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'>Introduce Distraction-Free Writing v2, a re-think of DFW that uses the main editor instance

* the "DFW" button is now an auto/off toggle
* defaulting to auto during beta, decide later for release
* "auto" means that DFW gets enabled as you start typing in editor
* tabbing and mousing out will bring the full interface back
* there is a slight grace period during which your mouse can quickly return

Feature plugin work happened here: https://github.com/avryl/focus

props avryl, azaozz, Michael Arestad
fixes <a href="https://core.trac.wordpress.org/ticket/29806">#29806</a></pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmineditformadvancedphp">trunk/src/wp-admin/edit-form-advanced.php</a></li>
<li><a href="#trunksrcwpadminjseditorexpandjs">trunk/src/wp-admin/js/editor-expand.js</a></li>
<li><a href="#trunksrcwpincludesclasswpeditorphp">trunk/src/wp-includes/class-wp-editor.php</a></li>
<li><a href="#trunksrcwpincludescsseditorcss">trunk/src/wp-includes/css/editor.css</a></li>
<li><a href="#trunksrcwpincludesjsquicktagsjs">trunk/src/wp-includes/js/quicktags.js</a></li>
<li><a href="#trunksrcwpincludesjstinymcepluginswordpresspluginjs">trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js</a></li>
<li><a href="#trunksrcwpincludesjstinymcepluginswpautoresizepluginjs">trunk/src/wp-includes/js/tinymce/plugins/wpautoresize/plugin.js</a></li>
<li><a href="#trunksrcwpincludesjstinymcepluginswpfullscreenpluginjs">trunk/src/wp-includes/js/tinymce/plugins/wpfullscreen/plugin.js</a></li>
<li><a href="#trunksrcwpincludesjstinymceskinswordpresswpcontentcss">trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css</a></li>
<li><a href="#trunksrcwpincludesscriptloaderphp">trunk/src/wp-includes/script-loader.php</a></li>
<li><a href="#trunksrcwpincludesversionphp">trunk/src/wp-includes/version.php</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmineditformadvancedphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/edit-form-advanced.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/edit-form-advanced.php 2014-11-13 22:03:15 UTC (rev 30337)
+++ trunk/src/wp-admin/edit-form-advanced.php   2014-11-13 22:30:55 UTC (rev 30338)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -512,7 +512,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <div id="postdivrich" class="postarea<?php if ( $_wp_editor_expand ) { echo ' wp-editor-expand'; } ?>">
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> <?php wp_editor( $post->post_content, 'content', array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        'dfw' => true,
</del><span class="cx" style="display: block; padding: 0 10px">         'drag_drop_upload' => true,
</span><span class="cx" style="display: block; padding: 0 10px">        'tabfocus_elements' => 'content-html,save-post',
</span><span class="cx" style="display: block; padding: 0 10px">        'editor_height' => 300,
</span></span></pre></div>
<a id="trunksrcwpadminjseditorexpandjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/editor-expand.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/editor-expand.js    2014-11-13 22:03:15 UTC (rev 30337)
+++ trunk/src/wp-admin/js/editor-expand.js      2014-11-13 22:30:55 UTC (rev 30338)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,409 +1,357 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* global tinymce */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+( function( window, $, undefined ) {
+       'use strict';
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-window.wp = window.wp || {};
-
-jQuery( document ).ready( function( $ ) {
</del><span class="cx" style="display: block; padding: 0 10px">         var $window = $( window ),
</span><span class="cx" style="display: block; padding: 0 10px">                $document = $( document ),
</span><span class="cx" style="display: block; padding: 0 10px">                $adminBar = $( '#wpadminbar' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $footer = $( '#wpfooter' ),
-               $wrap = $( '#postdivrich' ),
-               $contentWrap = $( '#wp-content-wrap' ),
-               $tools = $( '#wp-content-editor-tools' ),
-               $visualTop = $(),
-               $visualEditor = $(),
-               $textTop = $( '#ed_toolbar' ),
-               $textEditor = $( '#content' ),
-               $textEditorClone = $( '<div id="content-textarea-clone"></div>' ),
-               $bottom = $( '#post-status-info' ),
-               $menuBar = $(),
-               $statusBar = $(),
-               $sideSortables = $( '#side-sortables' ),
-               $postboxContainer = $( '#postbox-container-1' ),
-               $postBody = $('#post-body'),
-               fullscreen = window.wp.editor && window.wp.editor.fullscreen,
-               mceEditor,
-               mceBind = function(){},
-               mceUnbind = function(){},
-               fixedTop = false,
-               fixedBottom = false,
-               fixedSideTop = false,
-               fixedSideBottom = false,
-               scrollTimer,
-               lastScrollPosition = 0,
-               pageYOffsetAtTop = 130,
-               pinnedToolsTop = 56,
-               sidebarBottom = 20,
-               autoresizeMinHeight = 300,
-               initialMode = window.getUserSetting( 'editor' ),
-               // These are corrected when adjust() runs, except on scrolling if already set.
-               heights = {
-                       windowHeight: 0,
-                       windowWidth: 0,
-                       adminBarHeight: 0,
-                       toolsHeight: 0,
-                       menuBarHeight: 0,
-                       visualTopHeight: 0,
-                       textTopHeight: 0,
-                       bottomHeight: 0,
-                       statusBarHeight: 0,
-                       sideSortablesHeight: 0
-               };
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $footer = $( '#wpfooter' );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        $textEditorClone.insertAfter( $textEditor );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Autoresize editor. */
+       $( function() {
+               var $wrap = $( '#postdivrich' ),
+                       $contentWrap = $( '#wp-content-wrap' ),
+                       $tools = $( '#wp-content-editor-tools' ),
+                       $visualTop = $(),
+                       $visualEditor = $(),
+                       $textTop = $( '#ed_toolbar' ),
+                       $textEditor = $( '#content' ),
+                       $textEditorClone = $( '<div id="content-textarea-clone"></div>' ),
+                       $bottom = $( '#post-status-info' ),
+                       $menuBar = $(),
+                       $statusBar = $(),
+                       $sideSortables = $( '#side-sortables' ),
+                       $postboxContainer = $( '#postbox-container-1' ),
+                       $postBody = $('#post-body'),
+                       fullscreen = window.wp.editor && window.wp.editor.fullscreen,
+                       mceEditor,
+                       mceBind = function(){},
+                       mceUnbind = function(){},
+                       fixedTop = false,
+                       fixedBottom = false,
+                       fixedSideTop = false,
+                       fixedSideBottom = false,
+                       scrollTimer,
+                       lastScrollPosition = 0,
+                       pageYOffsetAtTop = 130,
+                       pinnedToolsTop = 56,
+                       sidebarBottom = 20,
+                       autoresizeMinHeight = 300,
+                       initialMode = window.getUserSetting( 'editor' ),
+                       advanced = !! parseInt( window.getUserSetting( 'hidetb' ), 10 ),
+                       // These are corrected when adjust() runs, except on scrolling if already set.
+                       heights = {
+                               windowHeight: 0,
+                               windowWidth: 0,
+                               adminBarHeight: 0,
+                               toolsHeight: 0,
+                               menuBarHeight: 0,
+                               visualTopHeight: 0,
+                               textTopHeight: 0,
+                               bottomHeight: 0,
+                               statusBarHeight: 0,
+                               sideSortablesHeight: 0
+                       };
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        $textEditorClone.css( {
-               'font-family': $textEditor.css( 'font-family' ),
-               'font-size': $textEditor.css( 'font-size' ),
-               'line-height': $textEditor.css( 'line-height' ),
-               'white-space': 'pre-wrap',
-               'word-wrap': 'break-word'
-       } );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $textEditorClone.insertAfter( $textEditor );
</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 getHeights() {
-               var windowWidth = $window.width();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $textEditorClone.css( {
+                       'font-family': $textEditor.css( 'font-family' ),
+                       'font-size': $textEditor.css( 'font-size' ),
+                       'line-height': $textEditor.css( 'line-height' ),
+                       'white-space': 'pre-wrap',
+                       'word-wrap': 'break-word'
+               } );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                heights = {
-                       windowHeight: $window.height(),
-                       windowWidth: windowWidth,
-                       adminBarHeight: ( windowWidth > 600 ? $adminBar.outerHeight() : 0 ),
-                       toolsHeight: $tools.outerHeight() || 0,
-                       menuBarHeight: $menuBar.outerHeight() || 0,
-                       visualTopHeight: $visualTop.outerHeight() || 0,
-                       textTopHeight: $textTop.outerHeight() || 0,
-                       bottomHeight: $bottom.outerHeight() || 0,
-                       statusBarHeight: $statusBar.outerHeight() || 0,
-                       sideSortablesHeight: $sideSortables.height() || 0
-               };
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function getHeights() {
+                       var windowWidth = $window.width();
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                // Adjust for hidden
-               if ( heights.menuBarHeight < 3 ) {
-                       heights.menuBarHeight = 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 heights = {
+                               windowHeight: $window.height(),
+                               windowWidth: windowWidth,
+                               adminBarHeight: ( windowWidth > 600 ? $adminBar.outerHeight() : 0 ),
+                               toolsHeight: $tools.outerHeight() || 0,
+                               menuBarHeight: $menuBar.outerHeight() || 0,
+                               visualTopHeight: $visualTop.outerHeight() || 0,
+                               textTopHeight: $textTop.outerHeight() || 0,
+                               bottomHeight: $bottom.outerHeight() || 0,
+                               statusBarHeight: $statusBar.outerHeight() || 0,
+                               sideSortablesHeight: $sideSortables.height() || 0
+                       };
+
+                       // Adjust for hidden
+                       if ( heights.menuBarHeight < 3 ) {
+                               heights.menuBarHeight = 0;
+                       }
</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 textEditorKeyup( event ) {
-               var VK = jQuery.ui.keyCode,
-                       key = event.keyCode,
-                       range = document.createRange(),
-                       selStart = $textEditor[0].selectionStart,
-                       selEnd = $textEditor[0].selectionEnd,
-                       textNode = $textEditorClone[0].firstChild,
-                       buffer = 10,
-                       offset, cursorTop, cursorBottom, editorTop, editorBottom;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function textEditorKeyup( event ) {
+                       var VK = jQuery.ui.keyCode,
+                               key = event.keyCode,
+                               range = document.createRange(),
+                               selStart = $textEditor[0].selectionStart,
+                               selEnd = $textEditor[0].selectionEnd,
+                               textNode = $textEditorClone[0].firstChild,
+                               buffer = 10,
+                               offset, cursorTop, cursorBottom, editorTop, editorBottom;
</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 ( selStart && selEnd && selStart !== selEnd ) {
-                       return;
-               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( selStart && selEnd && selStart !== selEnd ) {
+                               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">-                // These are not TinyMCE ranges.
-               try {
-                       range.setStart( textNode, selStart );
-                       range.setEnd( textNode, selEnd + 1 );
-               } catch ( ex ) {}
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // These are not TinyMCE ranges.
+                       try {
+                               range.setStart( textNode, selStart );
+                               range.setEnd( textNode, selEnd + 1 );
+                       } catch ( ex ) {}
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                offset = range.getBoundingClientRect();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 offset = range.getBoundingClientRect();
</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 ( ! offset.height ) {
-                       return;
-               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( ! offset.height ) {
+                               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">-                cursorTop = offset.top - buffer;
-               cursorBottom = cursorTop + offset.height + buffer;
-               editorTop = heights.adminBarHeight + heights.toolsHeight + heights.textTopHeight;
-               editorBottom = heights.windowHeight - heights.bottomHeight;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 cursorTop = offset.top - buffer;
+                       cursorBottom = cursorTop + offset.height + buffer;
+                       editorTop = heights.adminBarHeight + heights.toolsHeight + heights.textTopHeight;
+                       editorBottom = heights.windowHeight - heights.bottomHeight;
</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 ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
-                       window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
-               } else if ( cursorBottom > editorBottom ) {
-                       window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
+                               window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
+                       } else if ( cursorBottom > editorBottom ) {
+                               window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
+                       }
</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 textEditorResize() {
-               if ( ( mceEditor && ! mceEditor.isHidden() ) || ( ! mceEditor && initialMode === 'tinymce' ) ) {
-                       return;
-               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function textEditorResize() {
+                       if ( ( mceEditor && ! mceEditor.isHidden() ) || ( ! mceEditor && initialMode === 'tinymce' ) ) {
+                               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">-                var textEditorHeight = $textEditor.height(),
-                       hiddenHeight;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 var textEditorHeight = $textEditor.height(),
+                               hiddenHeight;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $textEditorClone.width( $textEditor.width() - 22 );
-               $textEditorClone.text( $textEditor.val() + '&nbsp;' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 $textEditorClone.width( $textEditor.width() - 22 );
+                       $textEditorClone.text( $textEditor.val() + '&nbsp;' );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                hiddenHeight = $textEditorClone.height();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 hiddenHeight = $textEditorClone.height();
</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 ( hiddenHeight < autoresizeMinHeight ) {
-                       hiddenHeight = autoresizeMinHeight;
-               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( hiddenHeight < autoresizeMinHeight ) {
+                               hiddenHeight = autoresizeMinHeight;
+                       }
</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 ( hiddenHeight === textEditorHeight ) {
-                       return;
-               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( hiddenHeight === textEditorHeight ) {
+                               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">-                $textEditor.height( hiddenHeight );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 $textEditor.height( hiddenHeight );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                adjust();
-       }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 adjust();
+               }
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        // We need to wait for TinyMCE to initialize.
-       $document.on( 'tinymce-editor-init.editor-expand', function( event, editor ) {
-               var hideFloatPanels = _.debounce( function() {
-                       ! $( '.mce-floatpanel:hover' ).length && tinymce.ui.FloatPanel.hideAll();
-                       $( '.mce-tooltip' ).hide();
-               }, 1000, true );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         // We need to wait for TinyMCE to initialize.
+               $document.on( 'tinymce-editor-init.editor-expand', function( event, editor ) {
+                       var VK = window.tinymce.util.VK,
+                               hideFloatPanels = _.debounce( function() {
+                                       ! $( '.mce-floatpanel:hover' ).length && window.tinymce.ui.FloatPanel.hideAll();
+                                       $( '.mce-tooltip' ).hide();
+                               }, 1000, true );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                // Make sure it's the main editor.
-               if ( editor.id !== 'content' ) {
-                       return;
-               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Make sure it's the main editor.
+                       if ( editor.id !== 'content' ) {
+                               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">-                // Copy the editor instance.
-               mceEditor = editor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Copy the editor instance.
+                       mceEditor = editor;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                // Set the minimum height to the initial viewport height.
-               editor.settings.autoresize_min_height = autoresizeMinHeight;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Set the minimum height to the initial viewport height.
+                       editor.settings.autoresize_min_height = autoresizeMinHeight;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                // Get the necessary UI elements.
-               $visualTop = $contentWrap.find( '.mce-toolbar-grp' );
-               $visualEditor = $contentWrap.find( '.mce-edit-area' );
-               $statusBar = $contentWrap.find( '.mce-statusbar' );
-               $menuBar = $contentWrap.find( '.mce-menubar' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Get the necessary UI elements.
+                       $visualTop = $contentWrap.find( '.mce-toolbar-grp' );
+                       $visualEditor = $contentWrap.find( '.mce-edit-area' );
+                       $statusBar = $contentWrap.find( '.mce-statusbar' );
+                       $menuBar = $contentWrap.find( '.mce-menubar' );
</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 mceGetCursorOffset() {
-                       var node = editor.selection.getNode(),
-                               range, view, offset;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 function mceGetCursorOffset() {
+                               var node = editor.selection.getNode(),
+                                       range, view, 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 ( editor.plugins.wpview && ( view = editor.plugins.wpview.getView( node ) ) ) {
-                               offset = view.getBoundingClientRect();
-                       } else {
-                               range = editor.selection.getRng();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         if ( editor.plugins.wpview && ( view = editor.plugins.wpview.getView( node ) ) ) {
+                                       offset = view.getBoundingClientRect();
+                               } else {
+                                       range = editor.selection.getRng();
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                try {
-                                       offset = range.getClientRects()[0];
-                               } catch( er ) {}
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 try {
+                                               offset = range.getClientRects()[0];
+                                       } catch( er ) {}
</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 ( ! offset ) {
-                                       offset = node.getBoundingClientRect();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 if ( ! offset ) {
+                                               offset = node.getBoundingClientRect();
+                                       }
</ins><span class="cx" style="display: block; padding: 0 10px">                                 }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+                               return offset.height ? offset : false;
</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">-                        return offset.height ? offset : false;
-               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Make sure the cursor is always visible.
+                       // This is not only necessary to keep the cursor between the toolbars,
+                       // but also to scroll the window when the cursor moves out of the viewport to a wpview.
+                       // Setting a buffer > 0 will prevent the browser default.
+                       // Some browsers will scroll to the middle,
+                       // others to the top/bottom of the *window* when moving the cursor out of the viewport.
+                       function mceKeyup( event ) {
+                               var key = event.keyCode;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                // Make sure the cursor is always visible.
-               // This is not only necessary to keep the cursor between the toolbars,
-               // but also to scroll the window when the cursor moves out of the viewport to a wpview.
-               // Setting a buffer > 0 will prevent the browser default.
-               // Some browsers will scroll to the middle,
-               // others to the top/bottom of the *window* when moving the cursor out of the viewport.
-               function mceKeyup( event ) {
-                       var VK = tinymce.util.VK,
-                               key = event.keyCode;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         // Bail on special keys.
+                               if ( key <= 47 && ! ( key === VK.SPACEBAR || key === VK.ENTER || key === VK.DELETE || key === VK.BACKSPACE || key === VK.UP || key === VK.LEFT || key === VK.DOWN || key === VK.UP ) ) {
+                                       return;
+                               // OS keys, function keys, num lock, scroll lock
+                               } else if ( ( key >= 91 && key <= 93 ) || ( key >= 112 && key <= 123 ) || key === 144 || key === 145 ) {
+                                       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">-                        // Bail on special keys.
-                       if ( key <= 47 && ! ( key === VK.SPACEBAR || key === VK.ENTER || key === VK.DELETE || key === VK.BACKSPACE ||
-                               key === VK.UP || key === VK.RIGHT || key === VK.DOWN || key === VK.LEFT ) ) {
-
-                               return;
-                       // OS keys, function keys, num lock, scroll lock
-                       } else if ( ( key >= 91 && key <= 93 ) || ( key >= 112 && key <= 123 ) || key === 144 || key === 145 ) {
-                               return;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         mceScroll( key );
</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">-                        mceScroll( key );
-               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 function mceScroll( key ) {
+                               var offset = mceGetCursorOffset(),
+                                       buffer = 50,
+                                       cursorTop, cursorBottom, editorTop, editorBottom;
</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 mceScroll( key ) {
-                       var VK = tinymce.util.VK,
-                               offset = mceGetCursorOffset(),
-                               buffer = 10,
-                               cursorTop, cursorBottom, editorTop, editorBottom;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         if ( ! offset ) {
+                                       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 ( ! offset ) {
-                               return;
-                       }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         cursorTop = offset.top + editor.iframeElement.getBoundingClientRect().top;
+                               cursorBottom = cursorTop + offset.height;
+                               cursorTop = cursorTop - buffer;
+                               cursorBottom = cursorBottom + buffer;
+                               editorTop = heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight + heights.visualTopHeight;
+                               editorBottom = heights.windowHeight - ( advanced ? heights.bottomHeight + heights.statusBarHeight : 0 );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        cursorTop = offset.top + editor.iframeElement.getBoundingClientRect().top;
-                       cursorBottom = cursorTop + offset.height + buffer;
-                       cursorTop -= buffer;
-                       editorTop = heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight + heights.visualTopHeight;
-                       editorBottom = heights.windowHeight - heights.bottomHeight - heights.statusBarHeight;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         // Don't scroll if the node is taller than the visible part of the editor
+                               if ( editorBottom - editorTop < offset.height ) {
+                                       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">-                        // Don't scroll if the node is taller than the visible part of the editor
-                       if ( editorBottom - editorTop < offset.height ) {
-                               return;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
+                                       window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
+                               } else if ( cursorBottom > editorBottom ) {
+                                       window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
+                               }
</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">-                        // WebKit browsers scroll-into-view to the middle of the window but not for arrow keys/backspace.
-                       // The others scroll to the top of the window, we need to account for the adminbar and editor toolbar(s).
-                       if ( cursorTop < editorTop && ( ! tinymce.Env.webkit ||
-                               ( key === VK.UP || key === VK.RIGHT || key === VK.DOWN || key === VK.LEFT || key === VK.BACKSPACE ) ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Adjust when switching editor modes.
+                       function mceShow() {
+                               $window.on( 'scroll.mce-float-panels', hideFloatPanels );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
-                       } else if ( cursorBottom > editorBottom ) {
-                               window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         setTimeout( function() {
+                                       editor.execCommand( 'wpAutoResize' );
+                                       adjust();
+                               }, 300 );
</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">-                // Adjust when switching editor modes.
-               function mceShow() {
-                       $window.on( 'scroll.mce-float-panels', hideFloatPanels );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 function mceHide() {
+                               $window.off( 'scroll.mce-float-panels' );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        setTimeout( function() {
-                               editor.execCommand( 'wpAutoResize' );
-                               adjust();
-                       }, 300 );
-               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         setTimeout( function() {
+                                       var top = $contentWrap.offset().top;
</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 mceHide() {
-                       $window.off( 'scroll.mce-float-panels' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 if ( window.pageYOffset > top ) {
+                                               window.scrollTo( window.pageXOffset, top - heights.adminBarHeight );
+                                       }
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        setTimeout( function() {
-                               var top = $contentWrap.offset().top;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 textEditorResize();
+                                       adjust();
+                               }, 100 );
</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 ( window.pageYOffset > top ) {
-                                       window.scrollTo( window.pageXOffset, top - heights.adminBarHeight );
-                               }
-
-                               textEditorResize();
</del><span class="cx" style="display: block; padding: 0 10px">                                 adjust();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        }, 100 );
</del><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">-                        adjust();
-               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 function toggleAdvanced() {
+                               advanced = ! advanced;
+                       }
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                mceBind = function() {
-                       editor.on( 'keyup', mceKeyup );
-                       editor.on( 'show', mceShow );
-                       editor.on( 'hide', mceHide );
-                       // Adjust when the editor resizes.
-                       editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
-                       // Scroll to the caret or selection after undo/redo
-                       editor.on( 'undo redo', mceScroll );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 mceBind = function() {
+                               editor.on( 'keyup', mceKeyup );
+                               editor.on( 'show', mceShow );
+                               editor.on( 'hide', mceHide );
+                               editor.on( 'wp-toolbar-toggle', toggleAdvanced );
+                               // Adjust when the editor resizes.
+                               editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
+                               // Don't hide the caret after undo/redo
+                               editor.on( 'undo redo', mceScroll );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        $window.off( 'scroll.mce-float-panels' ).on( 'scroll.mce-float-panels', hideFloatPanels );
-               };
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         $window.off( 'scroll.mce-float-panels' ).on( 'scroll.mce-float-panels', hideFloatPanels );
+                       };
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                mceUnbind = function() {
-                       editor.off( 'keyup', mceKeyup );
-                       editor.off( 'show', mceShow );
-                       editor.off( 'hide', mceHide );
-                       editor.off( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
-                       editor.off( 'undo redo', mceScroll );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 mceUnbind = function() {
+                               editor.off( 'keyup', mceKeyup );
+                               editor.off( 'show', mceShow );
+                               editor.off( 'hide', mceHide );
+                               editor.off( 'wp-toolbar-toggle', toggleAdvanced );
+                               editor.off( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
+                               editor.off( 'undo redo', mceScroll );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        $window.off( 'scroll.mce-float-panels' );
-               };
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         $window.off( 'scroll.mce-float-panels' );
+                       };
</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 ( $wrap.hasClass( 'wp-editor-expand' ) ) {
-                       // Adjust "immediately"
-                       mceBind();
-                       initialResize( adjust );
-               }
-       } );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
+                               // Adjust "immediately"
+                               mceBind();
+                               initialResize( adjust );
+                       }
+               } );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        // Adjust the toolbars based on the active editor mode.
-       function adjust( type ) {
-               // Make sure we're not in fullscreen mode.
-               if ( fullscreen && fullscreen.settings.visible ) {
-                       return;
-               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         // Adjust the toolbars based on the active editor mode.
+               function adjust( event ) {
+                       var type = event && event.type;
</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 windowPos = $window.scrollTop(),
-                       resize = type !== 'scroll',
-                       visual = ( mceEditor && ! mceEditor.isHidden() ),
-                       buffer = autoresizeMinHeight,
-                       postBodyTop = $postBody.offset().top,
-                       borderWidth = 1,
-                       contentWrapWidth = $contentWrap.width(),
-                       $top, $editor, sidebarTop, footerTop, canPin,
-                       topPos, topHeight, editorPos, editorHeight;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Make sure we're not in fullscreen mode.
+                       if ( fullscreen && fullscreen.settings.visible ) {
+                               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">-                // Refresh the heights
-               if ( resize || ! heights.windowHeight ) {
-                       getHeights();
-               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 var windowPos = $window.scrollTop(),
+                               resize = type !== 'scroll',
+                               visual = ( mceEditor && ! mceEditor.isHidden() ),
+                               buffer = autoresizeMinHeight,
+                               postBodyTop = $postBody.offset().top,
+                               borderWidth = 1,
+                               contentWrapWidth = $contentWrap.width(),
+                               $top, $editor, sidebarTop, footerTop, canPin,
+                               topPos, topHeight, editorPos, editorHeight;
</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 ( ! visual && type === 'resize' ) {
-                       textEditorResize();
-               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Refresh the heights
+                       if ( resize || ! heights.windowHeight ) {
+                               getHeights();
+                       }
</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 ( visual ) {
-                       $top = $visualTop;
-                       $editor = $visualEditor;
-                       topHeight = heights.visualTopHeight;
-               } else {
-                       $top = $textTop;
-                       $editor = $textEditor;
-                       topHeight = heights.textTopHeight;
-               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( ! visual && type === 'resize' ) {
+                               textEditorResize();
+                       }
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                topPos = $top.parent().offset().top;
-               editorPos = $editor.offset().top;
-               editorHeight = $editor.outerHeight();
-
-               // Should we pin?
-               canPin = visual ? autoresizeMinHeight + topHeight : autoresizeMinHeight + 20; // 20px from textarea padding
-               canPin = editorHeight > ( canPin + 5 );
-
-               if ( ! canPin ) {
-                       if ( resize ) {
-                               $tools.css( {
-                                       position: 'absolute',
-                                       top: 0,
-                                       width: contentWrapWidth
-                               } );
-
-                               if ( visual && $menuBar.length ) {
-                                       $menuBar.css( {
-                                               position: 'absolute',
-                                               top: 0,
-                                               width: contentWrapWidth - ( borderWidth * 2 )
-                                       } );
-                               }
-
-                               $top.css( {
-                                       position: 'absolute',
-                                       top: heights.menuBarHeight,
-                                       width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
-                               } );
-
-                               $statusBar.add( $bottom ).attr( 'style', '' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( visual ) {
+                               $top = $visualTop;
+                               $editor = $visualEditor;
+                               topHeight = heights.visualTopHeight;
+                       } else {
+                               $top = $textTop;
+                               $editor = $textEditor;
+                               topHeight = heights.textTopHeight;
</ins><span class="cx" style="display: block; padding: 0 10px">                         }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                } else {
-                       // Maybe pin the top.
-                       if ( ( ! fixedTop || resize ) &&
-                               // Handle scrolling down.
-                               ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight ) &&
-                               // Handle scrolling up.
-                               windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) ) {
-                               fixedTop = true;
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                $tools.css( {
-                                       position: 'fixed',
-                                       top: heights.adminBarHeight,
-                                       width: contentWrapWidth
-                               } );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 topPos = $top.parent().offset().top;
+                       editorPos = $editor.offset().top;
+                       editorHeight = $editor.outerHeight();
</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 ( visual && $menuBar.length ) {
-                                       $menuBar.css( {
-                                               position: 'fixed',
-                                               top: heights.adminBarHeight + heights.toolsHeight,
-                                               width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
-                                       } );
-                               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Should we pin?
+                       canPin = visual ? autoresizeMinHeight + topHeight : autoresizeMinHeight + 20; // 20px from textarea padding
+                       canPin = editorHeight > ( canPin + 5 );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                $top.css( {
-                                       position: 'fixed',
-                                       top: heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight,
-                                       width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
-                               } );
-                       // Maybe unpin the top.
-                       } else if ( fixedTop || resize ) {
-                               // Handle scrolling up.
-                               if ( windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight ) ) {
-                                       fixedTop = false;
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( ! canPin ) {
+                               if ( resize ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                                         $tools.css( {
</span><span class="cx" style="display: block; padding: 0 10px">                                                position: 'absolute',
</span><span class="cx" style="display: block; padding: 0 10px">                                                top: 0,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -423,311 +371,812 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                                top: heights.menuBarHeight,
</span><span class="cx" style="display: block; padding: 0 10px">                                                width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
</span><span class="cx" style="display: block; padding: 0 10px">                                        } );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                // Handle scrolling down.
-                               } else if ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) {
-                                       fixedTop = false;
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                        $statusBar.add( $bottom ).attr( 'style', '' );
+                               }
+                       } else {
+                               // Maybe pin the top.
+                               if ( ( ! fixedTop || resize ) &&
+                                       // Handle scrolling down.
+                                       ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight ) &&
+                                       // Handle scrolling up.
+                                       windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) ) {
+                                       fixedTop = true;
+
</ins><span class="cx" style="display: block; padding: 0 10px">                                         $tools.css( {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                                position: 'absolute',
-                                               top: editorHeight - buffer,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                         position: 'fixed',
+                                               top: heights.adminBarHeight,
</ins><span class="cx" style="display: block; padding: 0 10px">                                                 width: contentWrapWidth
</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">                                        if ( visual && $menuBar.length ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                                $menuBar.css( {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                                        position: 'absolute',
-                                                       top: editorHeight - buffer,
-                                                       width: contentWrapWidth - ( borderWidth * 2 )
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                                 position: 'fixed',
+                                                       top: heights.adminBarHeight + heights.toolsHeight,
+                                                       width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
</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">                                        $top.css( {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                                position: 'absolute',
-                                               top: editorHeight - buffer + heights.menuBarHeight,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                         position: 'fixed',
+                                               top: heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight,
</ins><span class="cx" style="display: block; padding: 0 10px">                                                 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
</span><span class="cx" style="display: block; padding: 0 10px">                                        } );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                // Maybe unpin the top.
+                               } else if ( fixedTop || resize ) {
+                                       // Handle scrolling up.
+                                       if ( windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight ) ) {
+                                               fixedTop = false;
+
+                                               $tools.css( {
+                                                       position: 'absolute',
+                                                       top: 0,
+                                                       width: contentWrapWidth
+                                               } );
+
+                                               if ( visual && $menuBar.length ) {
+                                                       $menuBar.css( {
+                                                               position: 'absolute',
+                                                               top: 0,
+                                                               width: contentWrapWidth - ( borderWidth * 2 )
+                                                       } );
+                                               }
+
+                                               $top.css( {
+                                                       position: 'absolute',
+                                                       top: heights.menuBarHeight,
+                                                       width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
+                                               } );
+                                       // Handle scrolling down.
+                                       } else if ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) {
+                                               fixedTop = false;
+
+                                               $tools.css( {
+                                                       position: 'absolute',
+                                                       top: editorHeight - buffer,
+                                                       width: contentWrapWidth
+                                               } );
+
+                                               if ( visual && $menuBar.length ) {
+                                                       $menuBar.css( {
+                                                               position: 'absolute',
+                                                               top: editorHeight - buffer,
+                                                               width: contentWrapWidth - ( borderWidth * 2 )
+                                                       } );
+                                               }
+
+                                               $top.css( {
+                                                       position: 'absolute',
+                                                       top: editorHeight - buffer + heights.menuBarHeight,
+                                                       width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
+                                               } );
+                                       }
</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">-                        // Maybe adjust the bottom bar.
-                       if ( ( ! fixedBottom || resize ) &&
-                               // +[n] for the border around the .wp-editor-container.
-                               ( windowPos + heights.windowHeight ) <= ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight + borderWidth ) ) {
-                               fixedBottom = true;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         // Maybe adjust the bottom bar.
+                               if ( ( ! fixedBottom || ( resize && advanced ) ) &&
+                                               // +[n] for the border around the .wp-editor-container.
+                                               ( windowPos + heights.windowHeight ) <= ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight + borderWidth ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                $statusBar.css( {
-                                       position: 'fixed',
-                                       bottom: heights.bottomHeight,
-                                       width: contentWrapWidth - ( borderWidth * 2 )
-                               } );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 if ( event && event.deltaHeight > 0 ) {
+                                               window.scrollBy( 0, event.deltaHeight );
+                                       } else if ( advanced ) {
+                                               fixedBottom = true;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                $bottom.css( {
-                                       position: 'fixed',
-                                       bottom: 0,
-                                       width: contentWrapWidth
-                               } );
-                       } else if ( ( fixedBottom || resize ) &&
-                                       ( windowPos + heights.windowHeight ) > ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight - borderWidth ) ) {
-                               fixedBottom = false;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                         $statusBar.css( {
+                                                       position: 'fixed',
+                                                       bottom: heights.bottomHeight,
+                                                       visibility: '',
+                                                       width: contentWrapWidth - ( borderWidth * 2 )
+                                               } );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                $statusBar.add( $bottom ).attr( 'style', '' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                         $bottom.css( {
+                                                       position: 'fixed',
+                                                       bottom: 0,
+                                                       width: contentWrapWidth
+                                               } );
+                                       }
+                               } else if ( ( ! advanced && fixedBottom ) ||
+                                               ( ( fixedBottom || resize ) &&
+                                               ( windowPos + heights.windowHeight ) > ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight - borderWidth ) ) ) {
+                                       fixedBottom = false;
+
+                                       $statusBar.add( $bottom ).attr( 'style', '' );
+
+                                       ! advanced && $statusBar.css( 'visibility', 'hidden' );
+                               }
</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">-                // Sidebar pinning
-               if ( $postboxContainer.width() < 300 && heights.windowWidth > 600 && // sidebar position is changed with @media from CSS, make sure it is on the side
-                       $document.height() > ( $sideSortables.height() + postBodyTop + 120 ) && // the sidebar is not the tallest element
-                       heights.windowHeight < editorHeight ) { // the editor is taller than the viewport
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Sidebar pinning
+                       if ( $postboxContainer.width() < 300 && heights.windowWidth > 600 && // sidebar position is changed with @media from CSS, make sure it is on the side
+                               $document.height() > ( $sideSortables.height() + postBodyTop + 120 ) && // the sidebar is not the tallest element
+                               heights.windowHeight < editorHeight ) { // the editor is taller than the viewport
</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 ( ( heights.sideSortablesHeight + pinnedToolsTop + sidebarBottom ) > heights.windowHeight || fixedSideTop || fixedSideBottom ) {
-                               // Reset when scrolling to the top
-                               if ( windowPos + pinnedToolsTop <= postBodyTop ) {
-                                       $sideSortables.attr( 'style', '' );
-                                       fixedSideTop = fixedSideBottom = false;
-                               } else {
-                                       if ( windowPos > lastScrollPosition ) {
-                                               // Scrolling down
-                                               if ( fixedSideTop ) {
-                                                       // let it scroll
-                                                       fixedSideTop = false;
-                                                       sidebarTop = $sideSortables.offset().top - heights.adminBarHeight;
-                                                       footerTop = $footer.offset().top;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         if ( ( heights.sideSortablesHeight + pinnedToolsTop + sidebarBottom ) > heights.windowHeight || fixedSideTop || fixedSideBottom ) {
+                                       // Reset when scrolling to the top
+                                       if ( windowPos + pinnedToolsTop <= postBodyTop ) {
+                                               $sideSortables.attr( 'style', '' );
+                                               fixedSideTop = fixedSideBottom = false;
+                                       } else {
+                                               if ( windowPos > lastScrollPosition ) {
+                                                       // Scrolling down
+                                                       if ( fixedSideTop ) {
+                                                               // let it scroll
+                                                               fixedSideTop = false;
+                                                               sidebarTop = $sideSortables.offset().top - heights.adminBarHeight;
+                                                               footerTop = $footer.offset().top;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                                        // don't get over the footer
-                                                       if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
-                                                               sidebarTop = footerTop - heights.sideSortablesHeight - 12;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                                         // don't get over the footer
+                                                               if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
+                                                                       sidebarTop = footerTop - heights.sideSortablesHeight - 12;
+                                                               }
+
+                                                               $sideSortables.css({
+                                                                       position: 'absolute',
+                                                                       top: sidebarTop,
+                                                                       bottom: ''
+                                                               });
+                                                       } else if ( ! fixedSideBottom && heights.sideSortablesHeight + $sideSortables.offset().top + sidebarBottom < windowPos + heights.windowHeight ) {
+                                                               // pin the bottom
+                                                               fixedSideBottom = true;
+
+                                                               $sideSortables.css({
+                                                                       position: 'fixed',
+                                                                       top: 'auto',
+                                                                       bottom: sidebarBottom
+                                                               });
</ins><span class="cx" style="display: block; padding: 0 10px">                                                         }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                                } else if ( windowPos < lastScrollPosition ) {
+                                                       // Scrolling up
+                                                       if ( fixedSideBottom ) {
+                                                               // let it scroll
+                                                               fixedSideBottom = false;
+                                                               sidebarTop = $sideSortables.offset().top - sidebarBottom;
+                                                               footerTop = $footer.offset().top;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                                        $sideSortables.css({
-                                                               position: 'absolute',
-                                                               top: sidebarTop,
-                                                               bottom: ''
-                                                       });
-                                               } else if ( ! fixedSideBottom && heights.sideSortablesHeight + $sideSortables.offset().top + sidebarBottom < windowPos + heights.windowHeight ) {
-                                                       // pin the bottom
-                                                       fixedSideBottom = true;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                                         // don't get over the footer
+                                                               if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
+                                                                       sidebarTop = footerTop - heights.sideSortablesHeight - 12;
+                                                               }
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                                        $sideSortables.css({
-                                                               position: 'fixed',
-                                                               top: 'auto',
-                                                               bottom: sidebarBottom
-                                                       });
-                                               }
-                                       } else if ( windowPos < lastScrollPosition ) {
-                                               // Scrolling up
-                                               if ( fixedSideBottom ) {
-                                                       // let it scroll
-                                                       fixedSideBottom = false;
-                                                       sidebarTop = $sideSortables.offset().top - sidebarBottom;
-                                                       footerTop = $footer.offset().top;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                                         $sideSortables.css({
+                                                                       position: 'absolute',
+                                                                       top: sidebarTop,
+                                                                       bottom: ''
+                                                               });
+                                                       } else if ( ! fixedSideTop && $sideSortables.offset().top >= windowPos + pinnedToolsTop ) {
+                                                               // pin the top
+                                                               fixedSideTop = true;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                                        // don't get over the footer
-                                                       if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
-                                                               sidebarTop = footerTop - heights.sideSortablesHeight - 12;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                                         $sideSortables.css({
+                                                                       position: 'fixed',
+                                                                       top: pinnedToolsTop,
+                                                                       bottom: ''
+                                                               });
</ins><span class="cx" style="display: block; padding: 0 10px">                                                         }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                                }
+                                       }
+                               } else {
+                                       // if the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling
+                                       if ( windowPos >= ( postBodyTop - pinnedToolsTop ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                                        $sideSortables.css({
-                                                               position: 'absolute',
-                                                               top: sidebarTop,
-                                                               bottom: ''
-                                                       });
-                                               } else if ( ! fixedSideTop && $sideSortables.offset().top >= windowPos + pinnedToolsTop ) {
-                                                       // pin the top
-                                                       fixedSideTop = true;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                         $sideSortables.css( {
+                                                       position: 'fixed',
+                                                       top: pinnedToolsTop
+                                               } );
+                                       } else {
+                                               $sideSortables.attr( 'style', '' );
+                                       }
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                                        $sideSortables.css({
-                                                               position: 'fixed',
-                                                               top: pinnedToolsTop,
-                                                               bottom: ''
-                                                       });
-                                               }
-                                       }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 fixedSideTop = fixedSideBottom = false;
</ins><span class="cx" style="display: block; padding: 0 10px">                                 }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+                               lastScrollPosition = windowPos;
</ins><span class="cx" style="display: block; padding: 0 10px">                         } else {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                // if the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling
-                               if ( windowPos >= ( postBodyTop - pinnedToolsTop ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         $sideSortables.attr( 'style', '' );
+                               fixedSideTop = fixedSideBottom = 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">-                                        $sideSortables.css( {
-                                               position: 'fixed',
-                                               top: pinnedToolsTop
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( resize ) {
+                               $contentWrap.css( {
+                                       paddingTop: heights.toolsHeight
+                               } );
+
+                               if ( visual ) {
+                                       $visualEditor.css( {
+                                               paddingTop: heights.visualTopHeight + heights.menuBarHeight
</ins><span class="cx" style="display: block; padding: 0 10px">                                         } );
</span><span class="cx" style="display: block; padding: 0 10px">                                } else {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        $sideSortables.attr( 'style', '' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 $textEditor.css( {
+                                               marginTop: heights.textTopHeight
+                                       } );
+
+                                       $textEditorClone.width( contentWrapWidth - 20 - ( borderWidth * 2 ) );
</ins><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">-                                fixedSideTop = fixedSideBottom = false;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function fullscreenHide() {
+                       textEditorResize();
+                       adjust();
+               }
+
+               function initialResize( callback ) {
+                       for ( var i = 1; i < 6; i++ ) {
+                               setTimeout( callback, 500 * i );
</ins><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">-                        lastScrollPosition = windowPos;
-               } else {
-                       $sideSortables.attr( 'style', '' );
-                       fixedSideTop = fixedSideBottom = false;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function afterScroll() {
+                       clearTimeout( scrollTimer );
+                       scrollTimer = setTimeout( adjust, 100 );
</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">-                if ( resize ) {
-                       $contentWrap.css( {
-                               paddingTop: heights.toolsHeight
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function on() {
+                       // Scroll to the top when triggering this from JS.
+                       // Ensures toolbars are pinned properly.
+                       if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
+                               window.scrollTo( window.pageXOffset, 0 );
+                       }
+
+                       $wrap.addClass( 'wp-editor-expand' );
+
+                       // Adjust when the window is scrolled or resized.
+                       $window.on( 'scroll.editor-expand resize.editor-expand', function( event ) {
+                               adjust( event.type );
+                               afterScroll();
</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">-                        if ( visual ) {
-                               $visualEditor.css( {
-                                       paddingTop: heights.visualTopHeight + heights.menuBarHeight
-                               } );
-                       } else {
-                               $textEditor.css( {
-                                       marginTop: heights.textTopHeight
-                               } );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Adjust when collapsing the menu, changing the columns, changing the body class.
+                       $document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust )
+                               .on( 'postbox-toggled.editor-expand', function() {
+                                       if ( ! fixedSideTop && ! fixedSideBottom && window.pageYOffset > pinnedToolsTop ) {
+                                               fixedSideBottom = true;
+                                               window.scrollBy( 0, -1 );
+                                               adjust();
+                                               window.scrollBy( 0, 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">-                                $textEditorClone.width( contentWrapWidth - 20 - ( borderWidth * 2 ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 adjust();
+                               }).on( 'wp-window-resized.editor-expand', function() {
+                                       if ( mceEditor && ! mceEditor.isHidden() ) {
+                                               mceEditor.execCommand( 'wpAutoResize' );
+                                       } else {
+                                               textEditorResize();
+                                       }
+                               });
+
+                       $textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
+                       $textEditor.on( 'keyup.editor-expand', textEditorKeyup );
+                       mceBind();
+
+                       // Adjust when entering/exiting fullscreen mode.
+                       fullscreen && fullscreen.pubsub.subscribe( 'hidden', fullscreenHide );
+
+                       if ( mceEditor ) {
+                               mceEditor.settings.wp_autoresize_on = true;
+                               mceEditor.execCommand( 'wpAutoResizeOn' );
+
+                               if ( ! mceEditor.isHidden() ) {
+                                       mceEditor.execCommand( 'wpAutoResize' );
+                               }
</ins><span class="cx" style="display: block; padding: 0 10px">                         }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+                       if ( ! mceEditor || mceEditor.isHidden() ) {
+                               textEditorResize();
+                       }
+
+                       adjust();
+
+                       $document.trigger( 'editor-expand-on' );
</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 fullscreenHide() {
-               textEditorResize();
-               adjust();
-       }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function off() {
+                       var height = window.getUserSetting('ed_size');
</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 initialResize( callback ) {
-               for ( var i = 1; i < 6; i++ ) {
-                       setTimeout( callback, 500 * i );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Scroll to the top when triggering this from JS.
+                       // Ensures toolbars are reset properly.
+                       if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
+                               window.scrollTo( window.pageXOffset, 0 );
+                       }
+
+                       $wrap.removeClass( 'wp-editor-expand' );
+
+                       $window.off( '.editor-expand' );
+                       $document.off( '.editor-expand' );
+                       $textEditor.off( '.editor-expand' );
+                       mceUnbind();
+
+                       // Adjust when entering/exiting fullscreen mode.
+                       fullscreen && fullscreen.pubsub.unsubscribe( 'hidden', fullscreenHide );
+
+                       // Reset all css
+                       $.each( [ $visualTop, $textTop, $tools, $menuBar, $bottom, $statusBar, $contentWrap, $visualEditor, $textEditor, $sideSortables ], function( i, element ) {
+                               element && element.attr( 'style', '' );
+                       });
+
+                       fixedTop = fixedBottom = fixedSideTop = fixedSideBottom = false;
+
+                       if ( mceEditor ) {
+                               mceEditor.settings.wp_autoresize_on = false;
+                               mceEditor.execCommand( 'wpAutoResizeOff' );
+
+                               if ( ! mceEditor.isHidden() ) {
+                                       $textEditor.hide();
+
+                                       if ( height ) {
+                                               mceEditor.theme.resizeTo( null, height );
+                                       }
+                               }
+                       }
+
+                       if ( height ) {
+                               $textEditor.height( height );
+                       }
+
+                       $document.trigger( 'editor-expand-off' );
</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 afterScroll() {
-               clearTimeout( scrollTimer );
-               scrollTimer = setTimeout( adjust, 100 );
-       }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         // Start on load
+               if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
+                       on();
</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 on() {
-               // Scroll to the top when triggering this from JS.
-               // Ensures toolbars are pinned properly.
-               if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
-                       window.scrollTo( window.pageXOffset, 0 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Ideally we need to resize just after CSS has fully loaded and QuickTags is ready.
+                       if ( $contentWrap.hasClass( 'html-active' ) ) {
+                               initialResize( function() {
+                                       adjust();
+                                       textEditorResize();
+                               } );
+                       }
</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">-                $wrap.addClass( 'wp-editor-expand' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         // Show the on/off checkbox
+               $( '#adv-settings .editor-expand' ).show();
+               $( '#editor-expand-toggle' ).on( 'change.editor-expand', function() {
+                       if ( $(this).prop( 'checked' ) ) {
+                               on();
+                               window.setUserSetting( 'editor_expand', 'on' );
+                       } else {
+                               off();
+                               window.setUserSetting( 'editor_expand', 'off' );
+                       }
+               });
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                // Adjust when the window is scrolled or resized.
-               $window.on( 'scroll.editor-expand resize.editor-expand', function( event ) {
-                       adjust( event.type );
-                       afterScroll();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         // Expose on() and off()
+               window.editorExpand = {
+                       on: on,
+                       off: off
+               };
+       } );
+
+       /* DFW. */
+       $( function() {
+               var $body = $( document.body ),
+                       $wrap = $( '#wpcontent' ),
+                       $editor = $( '#post-body-content' ),
+                       $title = $( '#title' ),
+                       $content = $( '#content' ),
+                       $overlay = $( document.createElement( 'DIV' ) ),
+                       $slug = $( '#edit-slug-box' ),
+                       $slugFocusEl = $slug.find( 'a' )
+                               .add( $slug.find( 'button' ) )
+                               .add( $slug.find( 'input' ) ),
+                       $menuWrap = $( '#adminmenuwrap' ),
+                       $editorWindow = $(),
+                       $editorIframe = $(),
+                       _isActive = window.getUserSetting( 'editor_expand', 'on' ) === 'on',
+                       _isOn = _isActive ? !! parseInt( window.getUserSetting( 'dfw', '1' ), 10 ) : false,
+                       traveledX = 0,
+                       traveledY = 0,
+                       buffer = 20,
+                       faded, fadedAdminBar, fadedSlug,
+                       editorRect, x, y, mouseY, scrollY,
+                       focusLostTimer, overlayTimer, editorHasFocus;
+
+               $body.append( $overlay );
+
+               $overlay.css( {
+                       display: 'none',
+                       position: 'fixed',
+                       top: $adminBar.height(),
+                       right: 0,
+                       bottom: 0,
+                       left: 0,
+                       'z-index': 9997
</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">-                // Adjust when collapsing the menu, changing the columns, changing the body class.
-               $document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust )
-                       .on( 'postbox-toggled.editor-expand', function() {
-                               if ( ! fixedSideTop && ! fixedSideBottom && window.pageYOffset > pinnedToolsTop ) {
-                                       fixedSideBottom = true;
-                                       window.scrollBy( 0, -1 );
-                                       adjust();
-                                       window.scrollBy( 0, 1 );
-                               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $editor.css( {
+                       position: 'relative'
+               } );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                adjust();
-                       }).on( 'wp-window-resized.editor-expand', function() {
-                               if ( mceEditor && ! mceEditor.isHidden() ) {
-                                       mceEditor.execCommand( 'wpAutoResize' );
-                               } else {
-                                       textEditorResize();
-                               }
-                       });
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $window.on( 'mousemove.focus', function( event ) {
+                       mouseY = event.pageY;
+               } );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
-               $textEditor.on( 'keyup.editor-expand', textEditorKeyup );
-               mceBind();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function activate() {
+                       if ( ! _isActive ) {
+                               _isActive = true;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                // Adjust when entering/exiting fullscreen mode.
-               fullscreen && fullscreen.pubsub.subscribe( 'hidden', fullscreenHide );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         $document.trigger( 'dfw-activate' );
+                       }
+               }
</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 ( mceEditor ) {
-                       mceEditor.settings.wp_autoresize_on = true;
-                       mceEditor.execCommand( 'wpAutoResizeOn' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function deactivate() {
+                       if ( _isActive ) {
+                               off();
</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 ( ! mceEditor.isHidden() ) {
-                               mceEditor.execCommand( 'wpAutoResize' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         _isActive = false;
+
+                               $document.trigger( 'dfw-deactivate' );
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                if ( ! mceEditor || mceEditor.isHidden() ) {
-                       textEditorResize();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function isActive() {
+                       return _isActive;
</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">-                adjust();
-       }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function on() {
+                       if ( ! _isOn && _isActive ) {
+                               _isOn = true;
</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 off() {
-               var height = window.getUserSetting('ed_size');
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         $content.on( 'keydown.focus', fadeOut );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                // Scroll to the top when triggering this from JS.
-               // Ensures toolbars are reset properly.
-               if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
-                       window.scrollTo( window.pageXOffset, 0 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         $title.add( $content ).on( 'blur.focus', maybeFadeIn );
+
+                               fadeOut();
+
+                               window.setUserSetting( 'dfw', '1' );
+
+                               $document.trigger( 'dfw-on' );
+                       }
</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">-                $wrap.removeClass( 'wp-editor-expand' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function off() {
+                       if ( _isOn ) {
+                               _isOn = 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">-                $window.off( '.editor-expand' );
-               $document.off( '.editor-expand' );
-               $textEditor.off( '.editor-expand' );
-               mceUnbind();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         $title.add( $content ).off( '.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">-                // Adjust when entering/exiting fullscreen mode.
-               fullscreen && fullscreen.pubsub.unsubscribe( 'hidden', fullscreenHide );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         fadeIn();
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                // Reset all css
-               $.each( [ $visualTop, $textTop, $tools, $menuBar, $bottom, $statusBar, $contentWrap, $visualEditor, $textEditor, $sideSortables ], function( i, element ) {
-                       element && element.attr( 'style', '' );
-               });
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         $editor.off( '.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">-                fixedTop = fixedBottom = fixedSideTop = fixedSideBottom = false;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         window.setUserSetting( 'dfw', '0' );
</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 ( mceEditor ) {
-                       mceEditor.settings.wp_autoresize_on = false;
-                       mceEditor.execCommand( 'wpAutoResizeOff' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         $document.trigger( 'dfw-off' );
+                       }
+               }
</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 ( ! mceEditor.isHidden() ) {
-                               $textEditor.hide();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function toggle() {
+                       ( _isOn ? off : on )();
+               }
</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 ( height ) {
-                                       mceEditor.theme.resizeTo( null, height );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function isOn() {
+                       return _isOn;
+               }
+
+               function fadeOut( event ) {
+                       var key = event && event.keyCode;
+
+                       if ( key === 27 ) {
+                               fadeIn();
+                               return;
+                       }
+
+                       if ( event && ( event.metaKey || ( event.ctrlKey && ! event.altKey ) || ( key && (
+                               // Special keys ( tab, ctrl, alt, esc, arrow keys... )
+                               ( key <= 47 && key !== 8 && key !== 13 && key !== 32 && key !== 46 ) ||
+                               // Windows keys
+                               ( key >= 91 && key <= 93 ) ||
+                               // F keys
+                               ( key >= 112 && key <= 135 ) ||
+                               // Num Lock, Scroll Lock, OEM
+                               ( key >= 144 && key <= 150 ) ||
+                               // OEM or non-printable
+                               key >= 224
+                       ) ) ) ) {
+                               return;
+                       }
+
+                       if ( ! faded ) {
+                               faded = true;
+
+                               clearTimeout( overlayTimer );
+
+                               overlayTimer = setTimeout( function() {
+                                       $overlay.show();
+                               }, 600 );
+
+                               $editor.css( 'z-index', 9998 );
+
+                               $overlay
+                                       // Always recalculate the editor area entering the overlay with the mouse.
+                                       .on( 'mouseenter.focus', function() {
+                                               editorRect = $editor.offset();
+                                               editorRect.right = editorRect.left + $editor.outerWidth();
+                                               editorRect.bottom = editorRect.top + $editor.outerHeight();
+
+                                               $window.on( 'scroll.focus', function() {
+                                                       var nScrollY = window.pageYOffset;
+
+                                                       if ( (
+                                                               scrollY && mouseY &&
+                                                               scrollY !== nScrollY
+                                                       ) && (
+                                                               mouseY < editorRect.top - buffer ||
+                                                               mouseY > editorRect.bottom + buffer
+                                                       ) ) {
+                                                               fadeIn();
+                                                       }
+
+                                                       scrollY = nScrollY;
+                                               } );
+                                       } )
+                                       .on( 'mouseleave.focus', function() {
+                                               x = y =  null;
+                                               traveledX = traveledY = 0;
+
+                                               $window.off( 'scroll.focus' );
+                                       } )
+                                       // Fade in when the mouse moves away form the editor area.
+                                       .on( 'mousemove.focus', function( event ) {
+                                               var nx = event.pageX,
+                                                       ny = event.pageY;
+
+                                               if ( x && y && ( nx !== x || ny !== y ) ) {
+                                                       if (
+                                                               ( ny <= y && ny < editorRect.top ) ||
+                                                               ( ny >= y && ny > editorRect.bottom ) ||
+                                                               ( nx <= x && nx < editorRect.left ) ||
+                                                               ( nx >= x && nx > editorRect.right )
+                                                       ) {
+                                                               traveledX += Math.abs( x - nx );
+                                                               traveledY += Math.abs( y - ny );
+
+                                                               if ( (
+                                                                       ny <= editorRect.top - buffer ||
+                                                                       ny >= editorRect.bottom + buffer ||
+                                                                       nx <= editorRect.left - buffer ||
+                                                                       nx >= editorRect.right + buffer
+                                                               ) && (
+                                                                       traveledX > 10 ||
+                                                                       traveledY > 10
+                                                               ) ) {
+                                                                       fadeIn();
+
+                                                                       x = y =  null;
+                                                                       traveledX = traveledY = 0;
+
+                                                                       return;
+                                                               }
+                                                       } else {
+                                                               traveledX = traveledY = 0;
+                                                       }
+                                               }
+
+                                               x = nx;
+                                               y = ny;
+                                       } )
+                                       // When the overlay is touched, always fade in and cancel the event.
+                                       .on( 'touchstart.focus', function( event ) {
+                                               event.preventDefault();
+                                               fadeIn();
+                                       } );
+
+                               $editor.off( 'mouseenter.focus' );
+
+                               if ( focusLostTimer ) {
+                                       clearTimeout( focusLostTimer );
+                                       focusLostTimer = null;
</ins><span class="cx" style="display: block; padding: 0 10px">                                 }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+                               $body.addClass( 'focus-on' ).removeClass( 'focus-off' );
</ins><span class="cx" style="display: block; padding: 0 10px">                         }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+                       fadeOutAdminBar();
+                       fadeOutSlug();
</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">-                if ( height ) {
-                       $textEditor.height( height );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function fadeIn() {
+                       if ( faded ) {
+                               faded = false;
+
+                               clearTimeout( overlayTimer );
+
+                               overlayTimer = setTimeout( function() {
+                                       $overlay.hide();
+                               }, 200 );
+
+                               $editor.css( 'z-index', '' );
+
+                               $overlay.off( 'mouseenter.focus mouseleave.focus mousemove.focus touchstart.focus' );
+
+                               $editor.on( 'mouseenter.focus', function() {
+                                       if ( $.contains( $editor.get( 0 ), document.activeElement ) || editorHasFocus ) {
+                                               fadeOut();
+                                       }
+                               } );
+
+                               focusLostTimer = setTimeout( function() {
+                                       focusLostTimer = null;
+                                       $editor.off( 'mouseenter.focus' );
+                               }, 1000 );
+
+                               $body.addClass( 'focus-off' ).removeClass( 'focus-on' );
+                       }
+
+                       fadeInAdminBar();
+                       fadeInSlug();
</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">-        // Start on load
-       if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
-               on();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function maybeFadeIn() {
+                       setTimeout( function() {
+                               var position = document.activeElement.compareDocumentPosition( $editor.get( 0 ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                // Ideally we need to resize just after CSS has fully loaded and QuickTags is ready.
-               if ( $contentWrap.hasClass( 'html-active' ) ) {
-                       initialResize( function() {
-                               adjust();
-                               textEditorResize();
-                       } );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         function hasFocus( $el ) {
+                                       return $.contains( $el.get( 0 ), document.activeElement );
+                               }
+
+                               // The focussed node is before or behind the editor area, and not ouside the wrap.
+                               if ( ( position === 2 || position === 4 ) && ( hasFocus( $menuWrap ) || hasFocus( $wrap ) || hasFocus( $footer ) ) ) {
+                                       fadeIn();
+                               }
+                       }, 0 );
</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">-        // Show the on/off checkbox
-       $( '#adv-settings .editor-expand' ).show();
-       $( '#editor-expand-toggle' ).on( 'change.editor-expand', function() {
-               if ( $(this).prop( 'checked' ) ) {
-                       on();
-                       window.setUserSetting( 'editor_expand', 'on' );
-               } else {
-                       off();
-                       window.setUserSetting( 'editor_expand', 'off' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function fadeOutAdminBar() {
+                       if ( ! fadedAdminBar && faded ) {
+                               fadedAdminBar = true;
+
+                               $adminBar
+                                       .on( 'mouseenter.focus', function() {
+                                               $adminBar.addClass( 'focus-off' );
+                                       } )
+                                       .on( 'mouseleave.focus', function() {
+                                               $adminBar.removeClass( 'focus-off' );
+                                       } );
+                       }
</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">-        // Expose on() and off()
-       window.editorExpand = {
-               on: on,
-               off: off
-       };
-});
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         function fadeInAdminBar() {
+                       if ( fadedAdminBar ) {
+                               fadedAdminBar = false;
+
+                               $adminBar.off( '.focus' );
+                       }
+               }
+
+               function fadeOutSlug() {
+                       if ( ! fadedSlug && faded && ! $slug.find( ':focus').length ) {
+                               fadedSlug = true;
+
+                               $slug.stop().fadeTo( 'fast', 0.3 ).on( 'mouseenter.focus', fadeInSlug ).off( 'mouseleave.focus' );
+
+                               $slugFocusEl.on( 'focus.focus', fadeInSlug ).off( 'blur.focus' );
+                       }
+               }
+
+               function fadeInSlug() {
+                       if ( fadedSlug ) {
+                               fadedSlug = false;
+
+                               $slug.stop().fadeTo( 'fast', 1 ).on( 'mouseleave.focus', fadeOutSlug ).off( 'mouseenter.focus' );
+
+                               $slugFocusEl.on( 'blur.focus', fadeOutSlug ).off( 'focus.focus' );
+                       }
+               }
+
+               $document.on( 'tinymce-editor-setup.focus', function( event, editor ) {
+                       editor.addButton( 'dfw', {
+                               active: _isOn,
+                               classes: 'wp-dfw btn widget',
+                               disabled: ! _isActive,
+                               onclick: toggle,
+                               onPostRender: function() {
+                                       var button = this;
+
+                                       $document
+                                       .on( 'dfw-activate.focus', function() {
+                                               button.disabled( false );
+                                       } )
+                                       .on( 'dfw-deactivate.focus', function() {
+                                               button.disabled( true );
+                                       } )
+                                       .on( 'dfw-on.focus', function() {
+                                               button.active( true );
+                                       } )
+                                       .on( 'dfw-off.focus', function() {
+                                               button.active( false );
+                                       } );
+                               },
+                               tooltip: 'Distraction Free Writing'
+                       } );
+               } );
+
+               $document.on( 'tinymce-editor-init.focus', function( event, editor ) {
+                       var mceBind, mceUnbind;
+
+                       function focus() {
+                               editorHasFocus = true;
+                       }
+
+                       function blur() {
+                               editorHasFocus = false;
+                       }
+
+                       if ( editor.id === 'content' ) {
+                               $editorWindow = $( editor.getWin() );
+                               $editorIframe = $( editor.getContentAreaContainer() ).find( 'iframe' );
+
+                               mceBind = function() {
+                                       editor.on( 'keydown', fadeOut );
+                                       editor.on( 'blur', maybeFadeIn );
+                                       editor.on( 'focus', focus );
+                                       editor.on( 'blur', blur );
+                               };
+
+                               mceUnbind = function() {
+                                       editor.off( 'keydown', fadeOut );
+                                       editor.off( 'blur', maybeFadeIn );
+                                       editor.off( 'focus', focus );
+                                       editor.off( 'blur', blur );
+                               };
+
+                               if ( _isOn ) {
+                                       mceBind();
+                               }
+
+                               $document.on( 'dfw-on.focus', mceBind ).on( 'dfw-off.focus', mceUnbind );
+
+                               // Make sure the body focusses when clicking outside it.
+                               editor.on( 'click', function( event ) {
+                                       if ( event.target === editor.getDoc().documentElement ) {
+                                               editor.focus();
+                                       }
+                               } );
+                       }
+               } );
+
+               $document.on( 'quicktags-init', function( event, editor ) {
+                       var $button;
+
+                       if ( editor.settings.buttons && ( ',' + editor.settings.buttons + ',' ).indexOf( ',dfw,' ) !== -1 ) {
+                               $button = $( '#' + editor.name + '_dfw' );
+
+                               $( document )
+                               .on( 'dfw-activate', function() {
+                                       $button.prop( 'disabled', false );
+                               } )
+                               .on( 'dfw-deactivate', function() {
+                                       $button.prop( 'disabled', true );
+                               } )
+                               .on( 'dfw-on', function() {
+                                       $button.addClass( 'active' );
+                               } )
+                               .on( 'dfw-off', function() {
+                                       $button.removeClass( 'active' );
+                               } );
+                       }
+               } );
+
+               $document.on( 'editor-expand-on.focus', activate ).on( 'editor-expand-off.focus', deactivate );
+
+               if ( _isOn ) {
+                       $content.on( 'keydown.focus', fadeOut );
+
+                       $title.add( $content ).on( 'blur.focus', maybeFadeIn );
+               }
+
+               window.wp = window.wp || {};
+               window.wp.editor = window.wp.editor || {};
+               window.wp.editor.dfw = {
+                       activate: activate,
+                       deactivate: deactivate,
+                       isActive: isActive,
+                       on: on,
+                       off: off,
+                       toggle: toggle,
+                       isOn: isOn
+               };
+       } );
+} )( window, window.jQuery );
</ins></span></pre></div>
<a id="trunksrcwpincludesclasswpeditorphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-editor.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-editor.php 2014-11-13 22:03:15 UTC (rev 30337)
+++ trunk/src/wp-includes/class-wp-editor.php   2014-11-13 22:30:55 UTC (rev 30338)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -278,6 +278,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        if ( $set['dfw'] )
</span><span class="cx" style="display: block; padding: 0 10px">                                $qtInit['buttons'] .= ',fullscreen';
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        if ( $editor_id === 'content' && ! wp_is_mobile() )
+                               $qtInit['buttons'] .= ',dfw';
+
</ins><span class="cx" style="display: block; padding: 0 10px">                         /**
</span><span class="cx" style="display: block; padding: 0 10px">                         * Filter the Quicktags settings.
</span><span class="cx" style="display: block; padding: 0 10px">                         *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -546,7 +549,14 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                $mce_buttons = apply_filters( 'teeny_mce_buttons', array('bold', 'italic', 'underline', 'blockquote', 'strikethrough', 'bullist', 'numlist', 'alignleft', 'aligncenter', 'alignright', 'undo', 'redo', 'link', 'unlink', 'fullscreen'), $editor_id );
</span><span class="cx" style="display: block; padding: 0 10px">                                $mce_buttons_2 = $mce_buttons_3 = $mce_buttons_4 = array();
</span><span class="cx" style="display: block; padding: 0 10px">                        } else {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                $mce_buttons = array( 'bold', 'italic', 'strikethrough', 'bullist', 'numlist', 'blockquote', 'hr', 'alignleft', 'aligncenter', 'alignright', 'link', 'unlink', 'wp_more', 'spellchecker', 'wp_adv' );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                if ( $editor_id ) {
+                                       $mce_buttons[] = 'dfw';
+                               } else {
+                                       $mce_buttons[] = 'fullscreen';
+                               }
+
</ins><span class="cx" style="display: block; padding: 0 10px">                                 /**
</span><span class="cx" style="display: block; padding: 0 10px">                                 * Filter the first-row list of TinyMCE buttons (Visual tab).
</span><span class="cx" style="display: block; padding: 0 10px">                                 *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -555,7 +565,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                 * @param array  $buttons   First-row list of buttons.
</span><span class="cx" style="display: block; padding: 0 10px">                                 * @param string $editor_id Unique editor identifier, e.g. 'content'.
</span><span class="cx" style="display: block; padding: 0 10px">                                 */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                $mce_buttons = apply_filters( 'mce_buttons', array('bold', 'italic', 'strikethrough', 'bullist', 'numlist', 'blockquote', 'hr', 'alignleft', 'aligncenter', 'alignright', 'link', 'unlink', 'wp_more', 'spellchecker', 'fullscreen', 'wp_adv' ), $editor_id );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         $mce_buttons = apply_filters( 'mce_buttons', $mce_buttons, $editor_id );
</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">                                 * Filter the second-row list of TinyMCE buttons (Visual tab).
</span></span></pre></div>
<a id="trunksrcwpincludescsseditorcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/css/editor.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/css/editor.css      2014-11-13 22:03:15 UTC (rev 30337)
+++ trunk/src/wp-includes/css/editor.css        2014-11-13 22:30:55 UTC (rev 30338)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -283,7 +283,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"> .mce-toolbar .mce-btn,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.qt-fullscreen {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.qt-dfw {
</ins><span class="cx" style="display: block; padding: 0 10px">         border-color: transparent;
</span><span class="cx" style="display: block; padding: 0 10px">        background: transparent;
</span><span class="cx" style="display: block; padding: 0 10px">        -webkit-box-shadow: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -294,7 +294,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wp-fullscreen-buttons .mce-btn,
</span><span class="cx" style="display: block; padding: 0 10px"> .mce-toolbar .mce-btn-group .mce-btn,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.qt-fullscreen {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.qt-dfw {
</ins><span class="cx" style="display: block; padding: 0 10px">         border: 1px solid transparent;
</span><span class="cx" style="display: block; padding: 0 10px">        margin: 2px;
</span><span class="cx" style="display: block; padding: 0 10px">        background-image: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -308,19 +308,21 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .mce-toolbar .mce-btn-group .mce-btn:hover,
</span><span class="cx" style="display: block; padding: 0 10px"> #wp-fullscreen-buttons .mce-btn:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> .mce-toolbar .mce-btn-group .mce-btn:focus,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.qt-fullscreen:hover,
-.qt-fullscreen:focus {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.qt-dfw:hover,
+.qt-dfw:focus {
</ins><span class="cx" style="display: block; padding: 0 10px">         background: #fafafa;
</span><span class="cx" style="display: block; padding: 0 10px">        border-color: #999;
</span><span class="cx" style="display: block; padding: 0 10px">        color: #222;
</span><span class="cx" style="display: block; padding: 0 10px">        -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
</span><span class="cx" style="display: block; padding: 0 10px">        box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        outline: none;
</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"> .mce-toolbar .mce-btn-group .mce-btn.mce-active,
</span><span class="cx" style="display: block; padding: 0 10px"> #wp-fullscreen-buttons .mce-btn.mce-active,
</span><span class="cx" style="display: block; padding: 0 10px"> .mce-toolbar .mce-btn-group .mce-btn:active,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#wp-fullscreen-buttons .mce-btn:active {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#wp-fullscreen-buttons .mce-btn:active,
+.qt-dfw.active {
</ins><span class="cx" style="display: block; padding: 0 10px">         background: #ebebeb;
</span><span class="cx" style="display: block; padding: 0 10px">        border-color: #999;
</span><span class="cx" style="display: block; padding: 0 10px">        -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.3 );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -353,7 +355,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"> .mce-toolbar .mce-btn button,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.qt-fullscreen {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.qt-dfw {
</ins><span class="cx" style="display: block; padding: 0 10px">         padding: 2px 3px;
</span><span class="cx" style="display: block; padding: 0 10px">        line-height: normal;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -668,7 +670,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">        padding: 0;
</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">-.qt-fullscreen {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.qt-dfw {
</ins><span class="cx" style="display: block; padding: 0 10px">         color: #777;
</span><span class="cx" style="display: block; padding: 0 10px">        line-height: 20px;
</span><span class="cx" style="display: block; padding: 0 10px">        width: 28px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -702,6 +704,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> i.mce-i-spellchecker,
</span><span class="cx" style="display: block; padding: 0 10px"> i.mce-i-fullscreen,
</span><span class="cx" style="display: block; padding: 0 10px"> i.mce-i-wp_fullscreen,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+i.mce-i-dfw,
</ins><span class="cx" style="display: block; padding: 0 10px"> i.mce-i-wp_adv,
</span><span class="cx" style="display: block; padding: 0 10px"> i.mce-i-underline,
</span><span class="cx" style="display: block; padding: 0 10px"> i.mce-i-alignjustify,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -733,7 +736,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">        padding-right: 2px;
</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">-.qt-fullscreen {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.qt-dfw {
</ins><span class="cx" style="display: block; padding: 0 10px">         font: normal 20px/1 'dashicons';
</span><span class="cx" style="display: block; padding: 0 10px">        vertical-align: top;
</span><span class="cx" style="display: block; padding: 0 10px">        speak: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -795,7 +798,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> i.mce-i-fullscreen:before,
</span><span class="cx" style="display: block; padding: 0 10px"> i.mce-i-wp_fullscreen:before,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.qt-fullscreen:before {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+i.mce-i-dfw:before,
+.qt-dfw:before {
</ins><span class="cx" style="display: block; padding: 0 10px">         content: '\f211';
</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">@@ -1071,8 +1075,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">        font-weight: bold;
</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">-.mce-toolbar .mce-btn-group .mce-btn.mce-wp-fullscreen,
-.qt-fullscreen {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.mce-toolbar .mce-btn-group .mce-btn.mce-wp-dfw,
+.qt-dfw {
</ins><span class="cx" style="display: block; padding: 0 10px">         position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px">        top: 0;
</span><span class="cx" style="display: block; padding: 0 10px">        right: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1081,7 +1085,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> @media screen and ( max-width: 782px ) {
</span><span class="cx" style="display: block; padding: 0 10px">        .mce-toolbar .mce-btn button,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        .qt-fullscreen {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .qt-dfw {
</ins><span class="cx" style="display: block; padding: 0 10px">                 padding: 6px 7px;
</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">@@ -1090,12 +1094,12 @@
</span><span class="cx" style="display: block; padding: 0 10px">                margin: 1px;
</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">-        .qt-fullscreen {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .qt-dfw {
</ins><span class="cx" style="display: block; padding: 0 10px">                 width: 36px;
</span><span class="cx" style="display: block; padding: 0 10px">                height: 34px;
</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">-        .mce-toolbar .mce-btn-group .mce-btn.mce-wp-fullscreen {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .mce-toolbar .mce-btn-group .mce-btn.mce-wp-dfw {
</ins><span class="cx" style="display: block; padding: 0 10px">                 margin: 4px 4px 0 0;
</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">@@ -2109,3 +2113,78 @@
</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"> /* TODO: DFW responsive */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+/* DFW 2
+-------------------------------------------------------------- */
+
+.focus-on .wrap > h2,
+.focus-on #wpfooter,
+.focus-on .postbox-container,
+.focus-on div.updated,
+.focus-on div.error,
+.focus-on #wp-toolbar {
+       opacity: 0;
+       -webkit-transition-duration: 0.6s;
+       transition-duration: 0.6s;
+       -webkit-transition-property: opacity;
+       transition-property: opacity;
+       -webkit-transition-timing-function: ease-in-out;
+       transition-timing-function: ease-in-out;
+}
+
+.focus-on #wp-toolbar {
+       opacity: 0.3;
+}
+
+.focus-off .wrap > h2,
+.focus-off #wpfooter,
+.focus-off .postbox-container,
+.focus-off div.updated,
+.focus-off div.error,
+.focus-off #wp-toolbar {
+       opacity: 1;
+       -webkit-transition-duration: 0.2s;
+       transition-duration: 0.2s;
+       -webkit-transition-property: opacity;
+       transition-property: opacity;
+       -webkit-transition-timing-function: ease-in-out;
+       transition-timing-function: ease-in-out;
+}
+
+.focus-on #adminmenuback,
+.focus-on #adminmenuwrap,
+.focus-on .screen-meta-toggle {
+       -webkit-transition-duration: 0.6s;
+       transition-duration: 0.6s;
+       -webkit-transition-property: -webkit-transform;
+       transition-property: transform;
+       -webkit-transition-timing-function: ease-in-out;
+       transition-timing-function: ease-in-out;
+}
+
+.focus-on #adminmenuback,
+.focus-on #adminmenuwrap {
+       -webkit-transform: translateX( -100% );
+       -ms-transform: translateX( -100% );
+       transform: translateX( -100% );
+}
+
+.focus-on .screen-meta-toggle {
+       -webkit-transform: translateY( -100% );
+       -ms-transform: translateY( -100% );
+       transform: translateY( -100% );
+}
+
+.focus-off #adminmenuback,
+.focus-off #adminmenuwrap,
+.focus-off .screen-meta-toggle {
+       -webkit-transform: translateX( 0 );
+       -ms-transform: translateX( 0 );
+       transform: translateX( 0 );
+       -webkit-transition-duration: 0.2s;
+       transition-duration: 0.2s;
+       -webkit-transition-property: -webkit-transform;
+       transition-property: transform;
+       -webkit-transition-timing-function: ease-in-out;
+       transition-timing-function: ease-in-out;
+}
</ins></span></pre></div>
<a id="trunksrcwpincludesjsquicktagsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/js/quicktags.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/js/quicktags.js     2014-11-13 22:03:15 UTC (rev 30337)
+++ trunk/src/wp-includes/js/quicktags.js       2014-11-13 22:30:55 UTC (rev 30338)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -288,6 +288,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                html += theButtons.fullscreen.html(name + '_');
</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">+                        if ( use && use.indexOf(',dfw,') !== -1 ) {
+                               theButtons.dfw = new qt.DFWButton();
+                               html += theButtons.dfw.html( name + '_' );
+                       }
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                        if ( 'rtl' === document.getElementsByTagName('html')[0].dir ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                theButtons.textdirection = new qt.TextDirectionButton();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -296,6 +300,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                        ed.toolbar.innerHTML = html;
</span><span class="cx" style="display: block; padding: 0 10px">                        ed.theButtons = theButtons;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+                       window.jQuery && window.jQuery( document ).trigger( 'quicktags-init', [ ed ] );
</ins><span class="cx" style="display: block; padding: 0 10px">                 }
</span><span class="cx" style="display: block; padding: 0 10px">                t.buttonsInitDone = true;
</span><span class="cx" style="display: block; padding: 0 10px">        };
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -405,11 +411,19 @@
</span><span class="cx" style="display: block; padding: 0 10px">                t.instance = instance || '';
</span><span class="cx" style="display: block; padding: 0 10px">        };
</span><span class="cx" style="display: block; padding: 0 10px">        qt.Button.prototype.html = function(idPrefix) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                var title = this.title ? ' title="' + this.title + '"' : '';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         var title = this.title ? ' title="' + this.title + '"' : '',
+                       active, on, wp,
+                       dfw = ( wp = window.wp ) && wp.editor && wp.editor.dfw;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                if ( this.id === 'fullscreen' ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        return '<button type="button" id="' + idPrefix + this.id + '" class="ed_button qt-fullscreen"' + title + '></button>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 return '<button type="button" id="' + idPrefix + this.id + '" class="ed_button qt-dfw"' + title + '></button>';
+               } else if ( this.id === 'dfw' ) {
+                       active = dfw && dfw.isActive() ? '' : ' disabled="disabled"';
+                       on = dfw && dfw.isOn() ? ' active' : '';
+
+                       return '<button type="button" id="' + idPrefix + this.id + '" class="ed_button qt-dfw' + on + '"' + title + active + '></button>';
</ins><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">                 return '<input type="button" id="' + idPrefix + this.id + '" class="ed_button button button-small"' + title + ' value="' + this.display + '" />';
</span><span class="cx" style="display: block; padding: 0 10px">        };
</span><span class="cx" style="display: block; padding: 0 10px">        qt.Button.prototype.callback = function(){};
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -619,6 +633,20 @@
</span><span class="cx" style="display: block; padding: 0 10px">                wp.editor.fullscreen.on();
</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">+        qt.DFWButton = function() {
+               qt.Button.call( this, 'dfw', '', 'f', quicktagsL10n.dfw );
+       };
+       qt.DFWButton.prototype = new qt.Button();
+       qt.DFWButton.prototype.callback = function() {
+               var wp;
+
+               if ( ! ( wp = window.wp ) || ! wp.editor || ! wp.editor.dfw ) {
+                       return;
+               }
+
+               window.wp.editor.dfw.toggle();
+       };
+
</ins><span class="cx" style="display: block; padding: 0 10px">         qt.TextDirectionButton = function() {
</span><span class="cx" style="display: block; padding: 0 10px">                qt.Button.call(this, 'textdirection', quicktagsL10n.textdirection, '', quicktagsL10n.toggleTextdirection);
</span><span class="cx" style="display: block; padding: 0 10px">        };
</span></span></pre></div>
<a id="trunksrcwpincludesjstinymcepluginswordpresspluginjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js      2014-11-13 22:03:15 UTC (rev 30337)
+++ trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js        2014-11-13 22:30:55 UTC (rev 30338)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,6 +7,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">        var DOM = tinymce.DOM, wpAdvButton, modKey, style,
</span><span class="cx" style="display: block; padding: 0 10px">                last = 0;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        if ( typeof window.jQuery !== 'undefined' ) {
+               window.jQuery( document ).triggerHandler( 'tinymce-editor-setup', [ editor ] );
+       }
+
</ins><span class="cx" style="display: block; padding: 0 10px">         function toggleToolbars( state ) {
</span><span class="cx" style="display: block; padding: 0 10px">                var iframe, initial, toolbars,
</span><span class="cx" style="display: block; padding: 0 10px">                        pixels = 0;
</span></span></pre></div>
<a id="trunksrcwpincludesjstinymcepluginswpautoresizepluginjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/js/tinymce/plugins/wpautoresize/plugin.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/js/tinymce/plugins/wpautoresize/plugin.js   2014-11-13 22:03:15 UTC (rev 30337)
+++ trunk/src/wp-includes/js/tinymce/plugins/wpautoresize/plugin.js     2014-11-13 22:30:55 UTC (rev 30338)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -117,7 +117,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                resize( e );
</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">-                        editor.fire( 'wp-autoresize', { height: resizeHeight } );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 editor.fire( 'wp-autoresize', { height: resizeHeight, deltaHeight: e.type === 'nodechange' ? deltaSize : null } );
</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="trunksrcwpincludesjstinymcepluginswpfullscreenpluginjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/js/tinymce/plugins/wpfullscreen/plugin.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/js/tinymce/plugins/wpfullscreen/plugin.js   2014-11-13 22:03:15 UTC (rev 30337)
+++ trunk/src/wp-includes/js/tinymce/plugins/wpfullscreen/plugin.js     2014-11-13 22:30:55 UTC (rev 30338)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -65,7 +65,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                tooltip: 'Distraction Free Writing',
</span><span class="cx" style="display: block; padding: 0 10px">                shortcut: 'Alt+Shift+W',
</span><span class="cx" style="display: block; padding: 0 10px">                onclick: toggleFullscreen,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                classes: 'wp-fullscreen btn widget' // This overwrites all classes on the container!
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         classes: 'wp-dfw btn widget' // This overwrites all classes on the container!
</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">        editor.addMenuItem( 'wp_fullscreen', {
</span></span></pre></div>
<a id="trunksrcwpincludesjstinymceskinswordpresswpcontentcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css   2014-11-13 22:03:15 UTC (rev 30337)
+++ trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css     2014-11-13 22:30:55 UTC (rev 30338)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -16,6 +16,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">        color: #333;
</span><span class="cx" style="display: block; padding: 0 10px">        margin: 9px 10px;
</span><span class="cx" style="display: block; padding: 0 10px">        max-width: 100%;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        -webkit-font-smoothing: antialiased !important;
</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"> body.rtl {
</span></span></pre></div>
<a id="trunksrcwpincludesscriptloaderphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/script-loader.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/script-loader.php   2014-11-13 22:03:15 UTC (rev 30337)
+++ trunk/src/wp-includes/script-loader.php     2014-11-13 22:30:55 UTC (rev 30338)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -94,7 +94,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">                'fullscreen'            => __( 'fullscreen' ),
</span><span class="cx" style="display: block; padding: 0 10px">                'toggleFullscreen'      => esc_attr__( 'Toggle fullscreen mode' ),
</span><span class="cx" style="display: block; padding: 0 10px">                'textdirection'         => esc_attr__( 'text direction' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                'toggleTextdirection'   => esc_attr__( 'Toggle Editor Text Direction' )
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         'toggleTextdirection'   => esc_attr__( 'Toggle Editor Text Direction' ),
+               'dfw'                   => esc_attr__( 'Distraction Free Writing' )
</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">        $scripts->add( 'colorpicker', "/wp-includes/js/colorpicker$suffix.js", array('prototype'), '3517m' );
</span></span></pre></div>
<a id="trunksrcwpincludesversionphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/version.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/version.php 2014-11-13 22:03:15 UTC (rev 30337)
+++ trunk/src/wp-includes/version.php   2014-11-13 22:30:55 UTC (rev 30338)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -18,7 +18,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">  *
</span><span class="cx" style="display: block; padding: 0 10px">  * @global string $tinymce_version
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$tinymce_version = '4106-20141022';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+$tinymce_version = '4106-20141113';
</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">  * Holds the required PHP version
</span></span></pre>
</div>
</div>

</body>
</html>