Ticket #26952: 26952.16.patch

src/wp-includes/css/editor.css

@@ -73 +73 @@
         width: calc( 100% - 36px );
 }
 
+.mce-wp-help .mce-window-head {
+        border-bottom: none;
+}
+
 .mce-textbox {
         border: 1px solid #ddd;
         -webkit-border-radius: 0;

src/wp-includes/js/tinymce/plugins/wordpress/plugin.js

@@ -182 +182 @@
                         url: tinymce.baseURL + '/wp-mce-help.php',
                         width: 450,
                         height: 420,
-                        inline: 1
+                        inline: 1,
+                        classes: 'wp-help'
                 });
         });
 

src/wp-includes/js/tinymce/wp-mce-help.php

@@ -27 +27 @@
                 min-width: 0;
         }
 
-        #tabs-wrap {
+        .wp-core-ui #tabs {
+                margin-top: 1px;
+                padding: 0 6px;
                 position: absolute;
                 top: 0;
+                right: 0;
+                left: 0;
+                height: 31px;
+                z-index: 1;
         }
 
-        #tabs {
-                box-shadow: 0 3px 5px rgba( 255, 255, 255, 0.2 );
-                margin: 0;
-                padding: 0;
+        .wp-core-ui #tabs a {
                 position: relative;
-                -webkit-user-select: none;
-                -moz-user-select: none;
-                -ms-user-select: none;
-                user-select: none;
-        }
-
-        #tabs a {
-                -webkit-transition: none;
-                transition: none;
-        }
-        
-        #tabs-wrap #tabs > a {
                 float: left;
-                font-size: 14px;
+                padding: 6px 10px;
+                margin: 0;
                 height: 18px;
                 line-height: 18px;
-                margin: 0;
-                padding: 7px 10px;
-                position: relative;
                 text-decoration: none;
-                border-right: 1px solid #ddd;
-                background-color: #eee;
-                color: inherit;
-        }
-
-        #tabs > a:active,
-        #tabs > a:focus {
-                outline: none;
+                -webkit-transition: none;
+                transition: none;
         }
 
-        #tabs-wrap #tabs .active,
-        #tabs-wrap #tabs .active:hover {
-                color: #333;
+        #tabs a.active {
+                margin: -1px -1px 0;
                 background: #fff;
-                border-bottom: 1px solid #fff;
+                border: 1px solid #ddd;
+                border-bottom: none;
+                color: #333;
         }
 
         #tabs .active:after {
@@ -83 +67 @@
                 border-top: 1px solid #ddd;
                 height: 360px;
                 margin: 0;
-                margin-top: 32px;
-                overflow-y: scroll;
+                margin-top: 30px;
+                overflow: auto;
                 padding: 10px 16px;
         }
 
@@ -151 +135 @@
         document.body.className = document.body.className.replace(/windows/, 'macos');
 </script>
 
-<div id="tabs-wrap">
-        <div id="tabs">
-                <a id="tab1" href="javascript:flipTab(1)" title="<?php esc_attr_e('Basics of Rich Editing'); ?>" accesskey="1" class="active"><?php _e('Basics'); ?></a>
-                <a id="tab2" href="javascript:flipTab(2)" title="<?php esc_attr_e('Advanced use of the Rich Editor'); ?>" accesskey="2"><?php _e('Advanced'); ?></a>
-                <a id="tab3" href="javascript:flipTab(3)" title="<?php esc_attr_e('Hotkeys'); ?>" accesskey="3"><?php _e('Hotkeys'); ?></a>
-                <a id="tab4" href="javascript:flipTab(4)" title="<?php esc_attr_e('About the software'); ?>" accesskey="4"><?php _e('About'); ?></a>
-        </div>
+<div id="tabs">
+        <a id="tab1" href="javascript:flipTab(1)" title="<?php esc_attr_e('Basics of Rich Editing'); ?>" accesskey="1" class="active"><?php _e('Basics'); ?></a>
+        <a id="tab2" href="javascript:flipTab(2)" title="<?php esc_attr_e('Advanced use of the Rich Editor'); ?>" accesskey="2"><?php _e('Advanced'); ?></a>
+        <a id="tab3" href="javascript:flipTab(3)" title="<?php esc_attr_e('Hotkeys'); ?>" accesskey="3"><?php _e('Hotkeys'); ?></a>
+        <a id="tab4" href="javascript:flipTab(4)" title="<?php esc_attr_e('About the software'); ?>" accesskey="4"><?php _e('About'); ?></a>
 </div>
 
 <div id="flipper" class="wrap">