<!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>[39140] trunk: Customize: Revert theme install feature.</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/39140">39140</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/39140","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>helen</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2016-11-04 15:53:01 +0000 (Fri, 04 Nov 2016)</dd>
</dl>

<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Customize: Revert theme install feature.

This is a great goal for core, and is close, but it is not in shape to be shipped for 4.7 and there is not enough time left in the development cycle to alter and polish sufficiently. There are bugs, but more than that, there are more fundamental questions around the use of existing UI, general UX, and how findable themes are (not) on the .org side.

see <a href="https://core.trac.wordpress.org/ticket/37661">#37661</a>.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscustomizecontrolscss">trunk/src/wp-admin/css/customize-controls.css</a></li>
<li><a href="#trunksrcwpadmincssthemescss">trunk/src/wp-admin/css/themes.css</a></li>
<li><a href="#trunksrcwpadmincustomizephp">trunk/src/wp-admin/customize.php</a></li>
<li><a href="#trunksrcwpadminincludesthemephp">trunk/src/wp-admin/includes/theme.php</a></li>
<li><a href="#trunksrcwpadminincludesupdatecorephp">trunk/src/wp-admin/includes/update-core.php</a></li>
<li><a href="#trunksrcwpadminjscustomizecontrolsjs">trunk/src/wp-admin/js/customize-controls.js</a></li>
<li><a href="#trunksrcwpadminjsupdatesjs">trunk/src/wp-admin/js/updates.js</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizemanagerphp">trunk/src/wp-includes/class-wp-customize-manager.php</a></li>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizethemecontrolphp">trunk/src/wp-includes/customize/class-wp-customize-theme-control.php</a></li>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizethemessectionphp">trunk/src/wp-includes/customize/class-wp-customize-themes-section.php</a></li>
<li><a href="#trunktestsphpunittestscustomizemanagerphp">trunk/tests/phpunit/tests/customize/manager.php</a></li>
</ul>

<h3>Removed Paths</h3>
<ul>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizethemespanelphp">trunk/src/wp-includes/customize/class-wp-customize-themes-panel.php</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsscustomizecontrolscss"></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/css/customize-controls.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/customize-controls.css     2016-11-04 12:14:05 UTC (rev 39139)
+++ trunk/src/wp-admin/css/customize-controls.css       2016-11-04 15:53:01 UTC (rev 39140)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -308,17 +308,21 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .customize-pane-child.open,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#customize-theme-controls .customize-pane-child.current-panel {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-theme-controls .customize-pane-child.current-panel,
+#customize-theme-controls .customize-themes-panel.customize-pane-child.current-panel {
</ins><span class="cx" style="display: block; padding: 0 10px">         -webkit-transform: none;
</span><span class="cx" style="display: block; padding: 0 10px">        -ms-transform: none;
</span><span class="cx" style="display: block; padding: 0 10px">        transform: none;
</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">+#customize-theme-controls .customize-themes-panel.customize-pane-child,
</ins><span class="cx" style="display: block; padding: 0 10px"> .section-open #customize-theme-controls .customize-pane-parent,
</span><span class="cx" style="display: block; padding: 0 10px"> .in-sub-panel #customize-theme-controls .customize-pane-parent,
</span><span class="cx" style="display: block; padding: 0 10px"> .section-open #customize-info,
</span><span class="cx" style="display: block; padding: 0 10px"> .in-sub-panel #customize-info,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel,
+.in-themes-panel #customize-theme-controls .customize-pane-parent,
+.in-themes-panel #customize-info {
</ins><span class="cx" style="display: block; padding: 0 10px">         visibility: hidden;
</span><span class="cx" style="display: block; padding: 0 10px">        height: 0;
</span><span class="cx" style="display: block; padding: 0 10px">        overflow: hidden;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -329,8 +333,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .section-open #customize-theme-controls .customize-pane-parent.busy,
</span><span class="cx" style="display: block; padding: 0 10px"> .in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.in-themes-panel #customize-theme-controls .customize-pane-parent.busy,
</ins><span class="cx" style="display: block; padding: 0 10px"> .section-open #customize-info.busy,
</span><span class="cx" style="display: block; padding: 0 10px"> .in-sub-panel #customize-info.busy,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.in-themes-panel #customize-info.busy,
</ins><span class="cx" style="display: block; padding: 0 10px"> .busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .customize-pane-child.open,
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .customize-pane-child.current-panel,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -340,6 +346,13 @@
</span><span class="cx" style="display: block; padding: 0 10px">        overflow: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.in-themes-panel #customize-theme-controls .customize-pane-parent,
+.in-themes-panel #customize-info {
+       -webkit-transform: translateX(100%);
+       -ms-transform: translateX(100%);
+       transform: translateX(100%);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .customize-pane-child.accordion-section-content,
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .customize-pane-child.accordion-sub-container {
</span><span class="cx" style="display: block; padding: 0 10px">        display: block;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1150,21 +1163,15 @@
</span><span class="cx" style="display: block; padding: 0 10px">        animation: customize-reload .75s;
</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">-#customize-theme-controls .control-panel-themes {
-       border-bottom: none;
-}
-
-#customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */
-#customize-theme-controls .control-panel-themes > .accordion-section-title {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-theme-controls .control-section-themes .accordion-section-title:hover, /* Not a focusable element. */
+#customize-theme-controls .control-section-themes .accordion-section-title {
</ins><span class="cx" style="display: block; padding: 0 10px">         cursor: default;
</span><span class="cx" style="display: block; padding: 0 10px">        background: #fff;
</span><span class="cx" style="display: block; padding: 0 10px">        color: #555;
</span><span class="cx" style="display: block; padding: 0 10px">        border-top: 1px solid #ddd;
</span><span class="cx" style="display: block; padding: 0 10px">        border-bottom: 1px solid #ddd;
</span><span class="cx" style="display: block; padding: 0 10px">        border-left: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        border-right: none;
-       margin: 0 0 15px 0;
-       padding-right: 100px; /* Space for the button */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-top: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1172,14 +1179,29 @@
</span><span class="cx" style="display: block; padding: 0 10px">        border-top: 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">-.control-panel-themes .accordion-section-title span.customize-action,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
+#customize-theme-controls .control-section-themes > .accordion-section-title {
+       margin: 0 0 15px;
+}
+
+#customize-controls .customize-themes-panel .accordion-section-title {
+       margin: 15px -8px;
+}
+
+#customize-controls .control-section-themes .accordion-section-title,
+#customize-controls .customize-themes-panel .accordion-section-title {
+       padding-right: 100px; /* Space for the button */
+}
+
+#customize-controls .control-section-themes .accordion-section-title span.customize-action,
</ins><span class="cx" style="display: block; padding: 0 10px"> #customize-controls .customize-section-title span.customize-action {
</span><span class="cx" style="display: block; padding: 0 10px">        font-size: 13px;
</span><span class="cx" style="display: block; padding: 0 10px">        display: block;
</span><span class="cx" style="display: block; padding: 0 10px">        font-weight: 400;
</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">-.control-panel-themes .accordion-section-title .change-theme {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .control-section-themes .accordion-section-title .change-theme,
+#customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
</ins><span class="cx" style="display: block; padding: 0 10px">         position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px">        right: 10px;
</span><span class="cx" style="display: block; padding: 0 10px">        top: 50%;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1187,393 +1209,40 @@
</span><span class="cx" style="display: block; padding: 0 10px">        font-weight: 400;
</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">-#customize-theme-controls .control-panel-themes > .accordion-section-title:after {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .control-section-themes .accordion-section-title:before {
</ins><span class="cx" style="display: block; padding: 0 10px">         display: none;
</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">-.control-panel-themes .customize-themes-full-container {
-       position: fixed;
-       top: 0;
-       left: 0;
-       -webkit-transition: .18s left ease-in-out;
-       transition: .18s left ease-in-out;
-       margin: 0 0 0 300px;
-       padding:25px;
-       overflow-y: scroll;
-       width: -webkit-calc(100% - 350px);
-       width: calc(100% - 350px);
-       height: -webkit-calc(100% - 50px);
-       height: calc(100% - 50px);
-       background: #eee;
-       z-index: 20;
-}
-
-/* Animations for opening the themes panel */
-#customize-header-actions .save,
-#customize-header-actions .spinner,
-#customize-header-actions .customize-controls-preview-toggle {
-       position: relative;
-       top: 0;
-       -webkit-transition: .18s top ease-in-out;
-       transition: .18s top ease-in-out;
-}
-
-#customize-footer-actions,
-#customize-footer-actions .collapse-sidebar {
-       bottom: 0;
-       -webkit-transition: .18s bottom ease-in-out;
-       transition: .18s bottom ease-in-out;
-}
-
-.in-themes-panel:not(.animating) #customize-header-actions .save,
-.in-themes-panel:not(.animating) #customize-header-actions .spinner,
-.in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle,
-.in-themes-panel:not(.animating) #customize-preview,
-.in-themes-panel:not(.animating) #customize-footer-actions {
-       visibility: hidden;
-}
-
-.wp-full-overlay.in-themes-panel {
-       background: #eee; /* Prevents a black flash when fading in the panel */
-}
-
-.in-themes-panel #customize-header-actions .save,
-.in-themes-panel #customize-header-actions .spinner,
-.in-themes-panel #customize-header-actions .customize-controls-preview-toggle {
-       top: -45px;
-}
-
-.in-themes-panel #customize-footer-actions,
-.in-themes-panel #customize-footer-actions .collapse-sidebar {
-       bottom: -45px;
-}
-
-/* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */
-.in-themes-panel.animating .control-panel-themes .filter-themes-count {
-       display: none;
-}
-
-.in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
-       bottom: 0;
-}
-
-/* Adds a delay before fading in to avoid it "jumping" */
-@-webkit-keyframes themes-fade-in {
-       0% {
-               opacity: 0;
-       }
-       50% {
-               opacity: 0;
-       }
-       100% {
-               opacity: 1;
-       }
-}
-@keyframes themes-fade-in {
-       0% {
-               opacity: 0;
-       }
-       50% {
-               opacity: 0;
-       }
-       100% {
-               opacity: 1;
-       }
-}
-
-.control-panel-themes .customize-themes-full-container.animate {
-       -webkit-animation: .6s themes-fade-in 1;
-       animation: .6s themes-fade-in 1;
-}
-
-.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
-       -webkit-animation: .6s themes-fade-in 1;
-       animation: .6s themes-fade-in 1;
-}
-
-.control-panel-themes .filter-themes-count {
-       position: fixed;
-       top: 0;
-       left: 48px;
-       width: 222px;
-       padding: 6px 15px;
-       margin: 0;
-       line-height: 32px;
-       text-align: right;
-       z-index: 10;
-}
-
-.control-panel-themes .filter-themes-count .themes-displayed {
-       font-weight: 600;
-       color: #555d66;
-}
-
-.control-panel-themes .filter-themes-count .see-themes,
-.control-panel-themes .filter-themes-count .filter-themes {
-       display: none;
-}
-
-
-/* Mobile - toggle between themes and filters */
-@media screen and (max-width:600px) {
-
-       /* Show a spinner in the filters view also, reusing the main customize spinner */
-       .in-themes-panel.loading #customize-header-actions .spinner {
-               position: fixed;
-               top: 0;
-               left: 48px;
-               visibility: visible;
-       }
-
-       .in-themes-panel.loading.showing-themes #customize-header-actions .spinner {
-               visibility: hidden;
-       }
-
-       .control-panel-themes .filter-themes-count {
-               width: -webkit-calc(100% - 93px);
-               width: calc(100% - 93px);
-       }
-
-       .control-panel-themes .filter-themes-count .themes-displayed {
-               display: none;
-       }
-
-       .wp-full-overlay:not(.showing-themes) .control-panel-themes .filter-themes-count .see-themes {
-               display: block;
-               float: right;
-       }
-
-       .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
-               display: block;
-               float: right;
-       }
-
-       .in-themes-panel.showing-themes .control-panel-themes .customize-panel-back {
-               position: fixed;
-               top: 0;
-               left: 0;
-               z-index: 10;
-               height: 45px;
-               background: #eee;
-       }
-
-       .in-themes-panel.showing-themes .control-panel-themes .customize-panel-back:before {
-               line-height: 45px;
-       }
-
-       .control-panel-themes .customize-themes-full-container {
-               width: -webkit-calc(100% - 50px);
-               width: calc(100% - 50px);
-               margin: 0;
-               top: 46px;
-               height: -webkit-calc(100% - 96px);
-               height: calc(100% - 96px);
-               z-index: 1;
-               display: none;
-       }
-
-       .showing-themes .control-panel-themes .customize-themes-full-container {
-               display: block;
-       }
-}
-
-.control-panel-themes .customize-themes-notifications .notice {
-       margin: 0 0 25px 0;
-}
-
-.customize-themes-full-container .customize-themes-section {
-       display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
-       overflow: hidden;
-}
-
-.customize-themes-full-container .customize-themes-section.current-section {
-       display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
-}
-
-.theme-section .customize-themes-text-before {
-       padding: 0 0 8px 15px;
-       margin: 15px 0 0 0;
-       line-height: 16px;
-       border-bottom: 1px solid #ddd;
-       color: #555d66;
-}
-
-.control-panel-themes .customize-themes-section-title {
-       width: 100%;
-       background: #fff;
-       -webkit-box-shadow: none;
-       box-shadow: none;
-       outline: none;
-       border-top: none;
-       border-bottom: 1px solid #ddd;
-       border-left: 4px solid #fff;
-       border-right: none;
-       cursor: pointer;
-       padding: 10px 15px;
-       position: relative;
-       text-align: left;
-       font-size: 14px;
-       font-weight: 600;
-       color: #555d66;
-       text-shadow: none;
-}
-
-.control-panel-themes .theme-section {
-       margin: 0;
-       position: relative;
-}
-
-.control-panel-themes .customize-themes-section-title:focus,
-.control-panel-themes .customize-themes-section-title:hover {
-       border-left-color: #0073aa;
-       color: #0073aa;
-       background: #f5f5f5;
-}
-
-.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
-       content: "\f147";
-       font: 16px/1 dashicons;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-themes-panel {
+       padding: 0 8px;
+       background: #f1f1f1;
</ins><span class="cx" style="display: block; padding: 0 10px">         -webkit-box-sizing: border-box;
</span><span class="cx" style="display: block; padding: 0 10px">        -moz-box-sizing: border-box;
</span><span class="cx" style="display: block; padding: 0 10px">        box-sizing: border-box;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        width: 20px;
-       height: 20px;
-       padding: 3px 3px 1px 1px; /* Re-align the icon to the smaller grid */
-       -webkit-border-radius: 100%;
-       border-radius: 100%;
-       position: absolute;
-       top: 9px;
-       right: 15px;
-       background: #0073aa;
-       color: #fff;
</del><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">-.control-panel-themes .customize-themes-section-title.selected {
-       color: #0073aa;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-themes-panel .accordion-section-title:first-child {
+       margin-top: 0;
</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">-.control-panel-themes .customize-themes-section-title.themes-section-search_themes {
-       border-left: none;
-       padding: 5px 10px 5px 15px;
-       width: auto;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
+       font-size: 14px;
+       font-weight: 600;
</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">-.control-panel-themes .customize-themes-section-title.themes-section-feature_filter_themes:after,
-.control-panel-themes .customize-themes-section-title.themes-section-favorites_themes:after {
-       content: "\f140";
-       font: 20px/1 dashicons;
-       position: absolute;
-       right: 15px;
-       top: 8px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-themes-panel > h2 {
+       padding: 15px 8px 0 8px;
</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">-.control-panel-themes .customize-themes-section-title.themes-section-search_themes .wp-filter-search {
-       width: 100%;
-}
-
-.control-panel-themes .customize-themes-section-title.themes-section-search_themes.selected,
-.control-panel-themes .customize-themes-section-title.themes-section-search_themes:hover {
-       background: #fff;
-       cursor: default;
-}
-
-.control-panel-themes .customize-themes-section-title.themes-section-feature_filter_themes {
-       margin-top: 15px;
-       border-top: 1px solid #ddd;
-}
-
-.control-panel-themes .filter-details {
-       background: #f5f5f5;
-       margin: 0;
-       padding: 8px 15px;
-       border-top: none;
-       border-bottom: 1px solid #ddd;
-       display: none;
-}
-
-.control-panel-themes .customize-themes-section-title.selected.details-open {
-       border-bottom-color: #f5f5f5;
-    border-left-color: #f5f5f5;
-       background: #f5f5f5;
-}
-
-.control-panel-themes .favorites-form.filter-details label {
-       padding-bottom: 6px;
-       display: inline-block;
-}
-
-.control-panel-themes .filter-details .filter-group {
-       float: none;
-       width: 100%;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-theme-controls .customize-themes-panel .accordion-section-content {
</ins><span class="cx" style="display: block; padding: 0 10px">         background: transparent;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        border: none;
-       padding: 0;
-       -webkit-box-shadow: none;
-       box-shadow: none;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: block;
</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">-.control-panel-themes .filter-details .filter-group legend button {
-       padding: 18px 15px 8px 10px;
-       line-height: 14px;
-       border-bottom: 1px solid #ddd;
-       width: 100%;
-       text-align: left;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control.customize-control-theme {
+       margin-bottom: 8px;
</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">-.control-panel-themes .filter-details .filter-group legend {
-       position: relative;
-       top: 0;
-       width: 100%;
-}
-
-.control-panel-themes .filter-details .filter-group legend button:after {
-       content: "\f140";
-       font: 20px/1 dashicons;
-       position: absolute;
-       bottom: 6px;
-       right: 5px;
-}
-
-.control-panel-themes .filter-details .filter-group legend button:hover,
-.control-panel-themes .filter-details .filter-group legend button:focus {
-       color: #0073aa;
-       border-bottom-color: #0073aa; /* Color change for focus style should be acceptable because border-bottom is barely visible previously. */
-       outline: none;
-       -webkit-box-shadow: none;
-       box-shadow: none;
-}
-
-.control-panel-themes .filter-details .filter-group legend button.open:after {
-       content: "\f142";
-}
-
-.control-panel-themes .filter-details .filter-group .filter-group-feature {
-       display: none;
-       margin: 0;
-}
-
-.control-panel-themes .filter-details .filter-group-feature label {
-       border: 1px solid #ddd;
-       border-top: 0;
-       background: #fff;
-       color: #555d66;
-       margin: 0;
-       padding: 12px 10px 12px 34px;
-       width: -webkit-calc(100% - 46px);
-       width: calc(100% - 46px);
-       line-height: 16px;
-       font-weight: 600;
-}
-
-.control-panel-themes .filter-details .filter-group-feature input {
-       position: absolute;
-       margin: 12px 10px;
-}
-
-.control-panel-themes .filter-details .filter-group-feature label:hover {
-       color: #0073aa;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .themes.accordion-section-content {
</span><span class="cx" style="display: block; padding: 0 10px">        position: relative;
</span><span class="cx" style="display: block; padding: 0 10px">        left: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1581,111 +1250,17 @@
</span><span class="cx" style="display: block; padding: 0 10px">        width: 100%;
</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">-.loading .customize-themes-section .spinner {
-       display: block;
-       visibility: visible;
-       position: relative;
-       clear: both;
-       width: 20px;
-       height: 20px;
-       left: -webkit-calc(50% - 10px);
-       left: calc(50% - 10px);
-       float: none;
-       margin-top: 50px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-customizer .theme-browser .themes {
+       padding-bottom: 8px;
</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">-.customize-themes-section .filter-drawer {
-       border-top: none;
-       display: block;
-       background: transparent;
-       padding-top: 5px;
-}
-
-.customize-themes-section .clear-filters {
-       margin-left: 8px;
-       display: none;
-}
-
-.customize-themes-section .no-themes {
-       display: none;
-}
-
-.themes-section-installed_themes .theme .notice-success {
-       display: none; /* Hide "installed" notice on installed themes tab. */
-}
-
-.control-panel-themes .theme-browser .theme .theme-actions .button-primary {
-       margin: 0 0 0 8px;
-}
-
-.customize-control-theme .theme {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-customizer .theme-browser .theme {
+       margin: 0;
</ins><span class="cx" style="display: block; padding: 0 10px">         width: 100%;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        margin: 0;
</del><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">-.customize-control.customize-control-theme { /* override most properties on .customize-control */
-       -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
-       box-sizing: border-box;
-       width: 18.4%;
-       margin: 0 2% 2% 0;
-       padding: 0;
-       clear: none;
-}
-
-/* 5 columns above 2100px */
-@media screen and (min-width: 2101px) {
-       .customize-control.customize-control-theme:nth-child(5n) {
-               margin-right: 0;
-       }
-}
-
-/* 4 columns up to 2100px */
-@media screen and (min-width: 1601px) and (max-width: 2100px) {
-       .customize-control.customize-control-theme {
-               width: 23.5%;
-       }
-
-       .customize-control.customize-control-theme:nth-child(4n) {
-               margin-right: 0;
-       }
-}
-
-/* 3 columns up to 1600px */
-@media screen and (min-width: 1201px) and (max-width: 1600px) {
-       .customize-control.customize-control-theme {
-               width: 32%;
-       }
-
-       .customize-control.customize-control-theme:nth-child(3n) {
-               margin-right: 0;
-       }
-}
-
-/* 2 columns up to 1200px */
-@media screen and (min-width: 851px) and (max-width: 1200px) {
-       .customize-control.customize-control-theme {
-               width: 49%;
-       }
-
-       .customize-control.customize-control-theme:nth-child(even) {
-               margin-right: 0;
-       }
-}
-
-/* 1 column up to 850 px */
-@media screen and (max-width: 850px) {
-       .customize-control.customize-control-theme {
-               width: 100%;
-               margin: 0 0 3% 0;
-       }
-}
-
-.wp-customizer .theme-browser .themes {
-       padding-bottom: 8px;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-customizer .theme-browser .theme .theme-actions {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
</ins><span class="cx" style="display: block; padding: 0 10px">         opacity: 1;
</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">@@ -1704,6 +1279,15 @@
</span><span class="cx" style="display: block; padding: 0 10px">        width: 100%;
</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">+.control-section-themes .accordion-section-title:after,
+.customize-themes-panel .accordion-section-title:after {
+       display: none;
+}
+
+.customize-themes-panel.control-panel-content {
+       border-top: 1px solid #ddd;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /* Details View */
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-customizer .theme-overlay {
</span><span class="cx" style="display: block; padding: 0 10px">        display: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1718,58 +1302,31 @@
</span><span class="cx" style="display: block; padding: 0 10px">        z-index: 109;
</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">-/* Avoid a z-index war by resetting elements that should be under the overlay.
-   This is likely required because of the way that sections and panels are positioned. */
-.wp-customizer.modal-open #customize-header-actions,
-.wp-customizer.modal-open .control-panel-themes .filter-themes-count,
-.wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after {
-       z-index: -1;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-customizer .theme-overlay .theme-backdrop {
</span><span class="cx" style="display: block; padding: 0 10px">        background: rgba( 238, 238, 238, 0.75 );
</span><span class="cx" style="display: block; padding: 0 10px">        position: fixed;
</span><span class="cx" style="display: block; padding: 0 10px">        z-index: 110;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-customizer .theme-overlay .star-rating {
-       float: left;
-       margin-right: 8px;
-}
-
-.wp-customizer .theme-rating .num-ratings {
-       line-height: 20px;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-customizer .theme-overlay .theme-wrap {
</span><span class="cx" style="display: block; padding: 0 10px">        left: 90px;
</span><span class="cx" style="display: block; padding: 0 10px">        right: 90px;
</span><span class="cx" style="display: block; padding: 0 10px">        top: 45px;
</span><span class="cx" style="display: block; padding: 0 10px">        bottom: 45px;
</span><span class="cx" style="display: block; padding: 0 10px">        z-index: 120;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        max-width: 1740px; /* To ensure that theme screenshots are not displayed larger than 880px wide. */
</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"> .wp-customizer .theme-overlay .theme-actions {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
-       padding: 10px 15px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */
</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">-.wp-customizer .theme-overlay .theme-actions .theme-install.preview {
-       margin-left: 8px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.ie8 .wp-customizer .theme-overlay .theme-header,
+.ie8 .wp-customizer .theme-overlay .theme-about,
+.ie8 .wp-customizer .theme-overlay .theme-actions {
+       position: static;
</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">-.control-panel-themes .theme-actions .delete-theme {
-       left: 15px; /* these override themes.css on mobile */
-       right: auto;
-       bottom: auto;
-       position: absolute;
-}
-
-.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
-       overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
-}
-
-
</del><span class="cx" style="display: block; padding: 0 10px"> /* Small Screens */
</span><span class="cx" style="display: block; padding: 0 10px"> @media (max-width:850px), (max-height:472px) {
</span><span class="cx" style="display: block; padding: 0 10px">        .wp-customizer .theme-overlay .theme-wrap {
</span></span></pre></div>
<a id="trunksrcwpadmincssthemescss"></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/css/themes.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/themes.css 2016-11-04 12:14:05 UTC (rev 39139)
+++ trunk/src/wp-admin/css/themes.css   2016-11-04 15:53:01 UTC (rev 39140)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -570,7 +570,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">        float: left;
</span><span class="cx" style="display: block; padding: 0 10px">        margin: 0 30px 0 0;
</span><span class="cx" style="display: block; padding: 0 10px">        width: 55%;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        max-width: 1200px; /* Recommended theme screenshot width, set here to avoid stretching */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ max-width: 880px;
</ins><span class="cx" style="display: block; padding: 0 10px">         text-align: center;
</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="trunksrcwpadmincustomizephp"></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/customize.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/customize.php  2016-11-04 12:14:05 UTC (rev 39139)
+++ trunk/src/wp-admin/customize.php    2016-11-04 15:53:01 UTC (rev 39140)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -109,8 +109,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ?><title><?php echo $admin_title; ?></title>
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> <script type="text/javascript">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-var ajaxurl = <?php echo wp_json_encode( admin_url( 'admin-ajax.php', 'relative' ) ); ?>,
-    pagenow = 'customize';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+var ajaxurl = <?php echo wp_json_encode( admin_url( 'admin-ajax.php', 'relative' ) ); ?>;
</ins><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span></span></pre></div>
<a id="trunksrcwpadminincludesthemephp"></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/includes/theme.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/theme.php     2016-11-04 12:14:05 UTC (rev 39139)
+++ trunk/src/wp-admin/includes/theme.php       2016-11-04 15:53:01 UTC (rev 39140)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -609,6 +609,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">  * @since 4.2.0
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><span class="cx" style="display: block; padding: 0 10px"> function customize_themes_print_templates() {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        $preview_url = esc_url( add_query_arg( 'theme', '__THEME__' ) ); // Token because esc_url() strips curly braces.
+       $preview_url = str_replace( '__THEME__', '{{ data.id }}', $preview_url );
</ins><span class="cx" style="display: block; padding: 0 10px">         ?>
</span><span class="cx" style="display: block; padding: 0 10px">        <script type="text/html" id="tmpl-customize-themes-details-view">
</span><span class="cx" style="display: block; padding: 0 10px">                <div class="theme-backdrop"></div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -620,7 +622,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        </div>
</span><span class="cx" style="display: block; padding: 0 10px">                        <div class="theme-about wp-clearfix">
</span><span class="cx" style="display: block; padding: 0 10px">                                <div class="theme-screenshots">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                <# if ( data.screenshot && data.screenshot[0] ) { #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         <# if ( data.screenshot[0] ) { #>
</ins><span class="cx" style="display: block; padding: 0 10px">                                         <div class="screenshot"><img src="{{ data.screenshot[0] }}" alt="" /></div>
</span><span class="cx" style="display: block; padding: 0 10px">                                <# } else { #>
</span><span class="cx" style="display: block; padding: 0 10px">                                        <div class="screenshot blank"></div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -633,47 +635,29 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                        <# } #>
</span><span class="cx" style="display: block; padding: 0 10px">                                        <h2 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{ data.version }}' ); ?></span></h2>
</span><span class="cx" style="display: block; padding: 0 10px">                                        <h3 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.authorAndUri }}}' ); ?></h3>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
-                                       <# if ( data.stars && 0 != data.num_ratings ) { #>
-                                               <div class="theme-rating">
-                                                       {{{ data.stars }}}
-                                                       <span class="num-ratings"><?php echo sprintf( __( '(%s ratings)' ), '{{ data.num_ratings }}' ); ?></span>
-                                               </div>
-                                       <# } #>
-
-                                       <# if ( data.hasUpdate ) { #>
-                                               <div class="notice notice-warning notice-alt notice-large" data-slug="{{ data.id }}">
-                                                       <h3 class="notice-title"><?php _e( 'Update Available' ); ?></h3>
-                                                       {{{ data.update }}}
-                                               </div>
-                                       <# } #>
-
</del><span class="cx" style="display: block; padding: 0 10px">                                         <p class="theme-description">{{{ data.description }}}</p>
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                                        <# if ( data.parent ) { #>
</span><span class="cx" style="display: block; padding: 0 10px">                                                <p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), '<strong>{{{ data.parent }}}</strong>' ); ?></p>
</span><span class="cx" style="display: block; padding: 0 10px">                                        <# } #>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px">                                         <# if ( data.tags ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                                <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{{ data.tags }}}</p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                         <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{ data.tags }}</p>
</ins><span class="cx" style="display: block; padding: 0 10px">                                         <# } #>
</span><span class="cx" style="display: block; padding: 0 10px">                                </div>
</span><span class="cx" style="display: block; padding: 0 10px">                        </div>
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        <div class="theme-actions">
-                               <# if ( data.active ) { #>
-                                       <button type="button" class="button button-primary customize-theme"><?php _e( 'Customize' ); ?></a>
-                               <# } else if ( 'installed' === data.type ) { #>
-                                       <?php if ( current_user_can( 'delete_themes' ) ) { ?>
-                                               <# if ( data.actions && data.actions['delete'] ) { #>
-                                                       <a href="{{{ data.actions['delete'] }}}" data-slug="{{ data.id }}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
-                                               <# } #>
-                                       <?php } ?>
-                                       <button type="button" class="button button-primary preview-theme" data-slug="{{ data.id }}"><?php _e( 'Live Preview' ); ?></span>
-                               <# } else { #>
-                                       <button type="button" class="button theme-install" data-slug="{{ data.id }}"><?php _e( 'Install' ); ?></button>
-                                       <button type="button" class="button button-primary theme-install preview" data-slug="{{ data.id }}"><?php _e( 'Install & Preview' ); ?></button>
-                               <# } #>
-                       </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 <# if ( ! data.active ) { #>
+                               <div class="theme-actions">
+                                       <div class="inactive-theme">
+                                               <?php
+                                               /* translators: %s: Theme name */
+                                               $aria_label = sprintf( __( 'Preview %s' ), '{{ data.name }}' );
+                                               ?>
+                                               <a href="<?php echo $preview_url; ?>" target="_top" class="button button-primary" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Live Preview' ); ?></a>
+                                       </div>
+                               </div>
+                       <# } #>
</ins><span class="cx" style="display: block; padding: 0 10px">                 </div>
</span><span class="cx" style="display: block; padding: 0 10px">        </script>
</span><span class="cx" style="display: block; padding: 0 10px">        <?php
</span></span></pre></div>
<a id="trunksrcwpadminincludesupdatecorephp"></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/includes/update-core.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/update-core.php       2016-11-04 12:14:05 UTC (rev 39139)
+++ trunk/src/wp-admin/includes/update-core.php 2016-11-04 15:53:01 UTC (rev 39140)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -710,6 +710,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'wp-includes/class-feed.php',
</span><span class="cx" style="display: block; padding: 0 10px"> 'wp-includes/locale.php',
</span><span class="cx" style="display: block; padding: 0 10px"> 'wp-includes/session.php',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+'wp-includes/customize/class-wp-customize-themes-panel.php', // Removed in beta; when the feature comes back remember to remove it from this array. See #37661.
</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="trunksrcwpadminjscustomizecontrolsjs"></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/customize-controls.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/customize-controls.js       2016-11-04 12:14:05 UTC (rev 39139)
+++ trunk/src/wp-admin/js/customize-controls.js 2016-11-04 15:53:01 UTC (rev 39140)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,4 +1,4 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer, console */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer */
</ins><span class="cx" style="display: block; padding: 0 10px"> (function( exports, $ ){
</span><span class="cx" style="display: block; padding: 0 10px">        var Container, focus, normalizedTransitionendEventName, api = wp.customize;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -864,13 +864,13 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                section = this,
</span><span class="cx" style="display: block; padding: 0 10px">                                container = $( '#customize-theme-controls' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        // Watch for changes to the panel state.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Watch for changes to the panel state
</ins><span class="cx" style="display: block; padding: 0 10px">                         inject = function ( panelId ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                var parentContainer;
</span><span class="cx" style="display: block; padding: 0 10px">                                if ( panelId ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        // The panel has been supplied, so wait until the panel object is registered.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 // The panel has been supplied, so wait until the panel object is registered
</ins><span class="cx" style="display: block; padding: 0 10px">                                         api.panel( panelId, function ( panel ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                                // The panel has been registered, wait for it to become ready/initialized.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                         // The panel has been registered, wait for it to become ready/initialized
</ins><span class="cx" style="display: block; padding: 0 10px">                                                 panel.deferred.embedded.done( function () {
</span><span class="cx" style="display: block; padding: 0 10px">                                                        parentContainer = panel.contentContainer;
</span><span class="cx" style="display: block; padding: 0 10px">                                                        if ( ! section.headContainer.parent().is( parentContainer ) ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -895,7 +895,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">                        section.panel.bind( inject );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one
</ins><span class="cx" style="display: block; padding: 0 10px">                 },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1062,8 +1062,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">        /**
</span><span class="cx" style="display: block; padding: 0 10px">         * wp.customize.ThemesSection
</span><span class="cx" style="display: block; padding: 0 10px">         *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         * Custom section for themes that loads themes by category, and also
-        * handles the theme-details view rendering and navigation.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  * Custom section for themes that functions similarly to a backwards panel,
+        * and also handles the theme-details view rendering and navigation.
</ins><span class="cx" style="display: block; padding: 0 10px">          *
</span><span class="cx" style="display: block; padding: 0 10px">         * @constructor
</span><span class="cx" style="display: block; padding: 0 10px">         * @augments wp.customize.Section
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1075,43 +1075,13 @@
</span><span class="cx" style="display: block; padding: 0 10px">                template: '',
</span><span class="cx" style="display: block; padding: 0 10px">                screenshotQueue: null,
</span><span class="cx" style="display: block; padding: 0 10px">                $window: $( window ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                loaded: 0,
-               loading: false,
-               fullyLoaded: false,
-               term: '',
-               filterContainer: $(),
</del><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">-                 * Embed the section in the DOM when the themes panel is ready.
-                *
-                * Insert the section before the themes container. Assume that a themes section is within a panel, but not necessarily the themes panel.
-                *
-                * @since 4.7.0
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+          * @since 4.2.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">-                embed: function () {
-                       var inject,
-                               section = this,
-                               container = $( '#customize-theme-controls' );
-
-                       // Watch for changes to the panel state
-                       inject = function ( panelId ) {
-                               var parentContainer;
-                               api.panel( panelId, function ( panel ) {
-                                       // The panel has been registered, wait for it to become ready/initialized
-                                       panel.deferred.embedded.done( function () {
-                                               parentContainer = panel.contentContainer;
-                                               if ( ! section.headContainer.parent().is( parentContainer ) ) {
-                                                       parentContainer.find( '.customize-themes-full-container-container' ).before( section.headContainer );
-                                               }
-                                               if ( ! section.contentContainer.parent().is( section.headContainer ) ) {
-                                                       container.append( section.contentContainer );
-                                               }
-                                               section.deferred.embedded.resolve();
-                                       });
-                               } );
-                       };
-                       section.panel.bind( inject );
-                       inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         initialize: function () {
+                       this.$customizeSidebar = $( '.wp-full-overlay-sidebar-content:first' );
+                       return api.Section.prototype.initialize.apply( this, arguments );
</ins><span class="cx" style="display: block; padding: 0 10px">                 },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1145,15 +1115,15 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                }
</span><span class="cx" style="display: block; padding: 0 10px">                        });
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        _.bindAll( this, 'renderScreenshots', 'loadMore', 'checkTerm', 'filtersChecked' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 _.bindAll( this, 'renderScreenshots' );
</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">                 * Override Section.isContextuallyActive method.
</span><span class="cx" style="display: block; padding: 0 10px">                 *
</span><span class="cx" style="display: block; padding: 0 10px">                 * Ignore the active states' of the contained theme controls, and just
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                 * use the section's own active state instead. This prevents empty search
-                * results for theme sections from causing the section to become inactive.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+          * use the section's own active state instead. This ensures empty search
+                * results for themes to cause the section to become inactive.
</ins><span class="cx" style="display: block; padding: 0 10px">                  *
</span><span class="cx" style="display: block; padding: 0 10px">                 * @since 4.2.0
</span><span class="cx" style="display: block; padding: 0 10px">                 *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1169,53 +1139,53 @@
</span><span class="cx" style="display: block; padding: 0 10px">                attachEvents: function () {
</span><span class="cx" style="display: block; padding: 0 10px">                        var section = this;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        section.filterContainer = $( '#accordion-section-' + section.id );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Expand/Collapse section/panel.
+                       section.container.find( '.change-theme, .customize-theme' ).on( 'click keydown', function( event ) {
+                               if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+                                       return;
+                               }
+                               event.preventDefault(); // Keep this AFTER the key filter above
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        // Expand section/panel. Only collapse when opening another section.
-                       section.filterContainer.on( 'click', '.customize-themes-section-title', function() {
-                               // Open the section.
-                               if ( ! section.expanded() ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         if ( section.expanded() ) {
+                                       section.collapse();
+                               } else {
</ins><span class="cx" style="display: block; padding: 0 10px">                                         section.expand();
</span><span class="cx" style="display: block; padding: 0 10px">                                }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        });
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                // Toggle filters.
-                               if ( section.filterContainer.find( '.filter-details' ).length ) {
-                                       section.filterContainer.find( '.customize-themes-section-title' )
-                                               .toggleClass( 'details-open' )
-                                               .attr('aria-expanded', function ( i, attr ) {
-                                                       return attr === 'true' ? 'false' : 'true';
-                                               });
-                                       section.filterContainer.find( '.filter-details' ).slideToggle( 180 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Theme navigation in details view.
+                       section.container.on( 'click keydown', '.left', function( event ) {
+                               if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+                                       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">-                        });
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        // Preview installed themes.
-                       section.container.on( 'click', '.theme-actions .preview-theme', function() {
-                               var themeId = $( this ).data( 'slug' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         event.preventDefault(); // Keep this AFTER the key filter above
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                $( '.wp-full-overlay' ).addClass( 'customize-loading' );
-                               api.panel( 'themes' ).loadThemePreview( themeId ).fail( function() {
-                                       $( '.wp-full-overlay' ).removeClass( 'customize-loading' );
-                               } );
-                       });
-
-                       // Theme navigation in details view.
-                       section.container.on( 'click', '.left', function() {
</del><span class="cx" style="display: block; padding: 0 10px">                                 section.previousTheme();
</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">-                        section.container.on( 'click', '.right', function() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 section.container.on( 'click keydown', '.right', function( event ) {
+                               if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+                                       return;
+                               }
+
+                               event.preventDefault(); // Keep this AFTER the key filter above
+
</ins><span class="cx" style="display: block; padding: 0 10px">                                 section.nextTheme();
</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">-                        section.container.on( 'click', '.theme-backdrop, .close', function() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 section.container.on( 'click keydown', '.theme-backdrop, .close', function( event ) {
+                               if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+                                       return;
+                               }
+
+                               event.preventDefault(); // Keep this AFTER the key filter above
+
</ins><span class="cx" style="display: block; padding: 0 10px">                                 section.closeDetails();
</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">                        var renderScreenshots = _.throttle( _.bind( section.renderScreenshots, this ), 100 );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
-                       // Only used when there is only one section - installed themes.
-                       $( '.control-panel-themes' ).on( 'input', '#themes-filter', function( event ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 section.container.on( 'input', '#themes-filter', function( event ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                                 var count,
</span><span class="cx" style="display: block; padding: 0 10px">                                        term = event.currentTarget.value.toLowerCase().trim().replace( '-', ' ' ),
</span><span class="cx" style="display: block; padding: 0 10px">                                        controls = section.controls();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1227,58 +1197,19 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                renderScreenshots();
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                                // Update theme count.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                count = section.contentContainer.find( 'li.customize-control:visible' ).length;
-                               $( '.control-panel-themes' ).find( '.theme-count' ).text( count );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         count = section.container.find( 'li.customize-control:visible' ).length;
+                               section.container.find( '.theme-count' ).text( count );
</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">-                        // Event listeners for queries with user-entered terms.
-                       if ( 'search' === section.params.action ) {
-                               var debounced = _.debounce( section.checkTerm, 500 ); // Wait until there is no input for 500 milliseconds to initiate a search.
-                               $( '.control-panel-themes' ).on( 'input', '#wp-filter-search-input', function() {
-                                       debounced( section );
-                                       if ( ! section.expanded() ) {
-                                               section.expand();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Pre-load the first 3 theme screenshots.
+                       api.bind( 'ready', function () {
+                               _.each( section.controls().slice( 0, 3 ), function ( control ) {
+                                       var img, src = control.params.theme.screenshot[0];
+                                       if ( src ) {
+                                               img = new Image();
+                                               img.src = src;
</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">-
-                               // Focus the input if the icon is clicked.
-                               section.filterContainer.find( '.search-form' ).on( 'click', function( e ) {
-                                       if ( ! $( e.currentTarget ).hasClass( 'wp-filter-search' ) ) {
-                                               $( e.currentTarget ).find( '.wp-filter-search' ).focus();
-                                       }
-                               });
-                       } else if ( 'favorites' === section.params.action ) {
-                               section.container.on( 'click', '.favorites-form-submit', function() {
-                                       section.checkTerm( section );
-                               });
-                               section.container.on( 'keydown', '#wporg-username-input', function( e ) {
-                                       if ( api.utils.isKeydownButNotEnterEvent( e ) ) {
-                                               return;
-                                       }
-                                       section.checkTerm( section );
-                               });
-                       } else if ( 'feature_filter' === section.params.action ) {
-                               section.container.on( 'click', '.filter-group input', function() {
-                                       section.filtersChecked();
-                                       section.checkTerm( section );
-                               });
-
-                               // Toggle feature filter sections.
-                               section.container.on( 'click', '.filter-group legend button', function( e ) {
-                                       $( e.currentTarget )
-                                               .toggleClass( 'open' )
-                                               .attr('aria-expanded', function ( i, attr ) {
-                                                       return attr === 'true' ? 'false' : 'true';
-                                               })
-                                               .parent().next( '.filter-group-feature' ).slideToggle( 180 );
-                               });
-                       }
-
-                       // Move section controls to the themes area.
-                       api.bind( 'ready', function () {
-                               section.contentContainer = section.container.find( '.customize-themes-section' );
-                               section.contentContainer.appendTo( $( '.customize-themes-full-container' ) );
-                               section.container.add( section.filterContainer );
</del><span class="cx" style="display: block; padding: 0 10px">                         });
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1290,7 +1221,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                 * @param {Boolean}  expanded
</span><span class="cx" style="display: block; padding: 0 10px">                 * @param {Object}   args
</span><span class="cx" style="display: block; padding: 0 10px">                 * @param {Boolean}  args.unchanged
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                 * @param {Function} args.completeCallback
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+          * @param {Callback} args.completeCallback
</ins><span class="cx" style="display: block; padding: 0 10px">                  */
</span><span class="cx" style="display: block; padding: 0 10px">                onChangeExpanded: function ( expanded, args ) {
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1303,282 +1234,59 @@
</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">                        // Note: there is a second argument 'args' passed
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        var section = this,
-                               container = section.contentContainer.closest( '.customize-themes-full-container' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 var panel = this,
+                               section = panel.contentContainer,
+                               overlay = section.closest( '.wp-full-overlay' ),
+                               container = section.closest( '.wp-full-overlay-sidebar-content' ),
+                               customizeBtn = section.find( '.customize-theme' ),
+                               changeBtn = panel.headContainer.find( '.change-theme' );
</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 ( expanded ) {
-
-                               if ( -1 !== $.inArray( section.params.action, [ 'search', 'favorites', 'feature_filter' ] ) && '' === section.term ) {
-                                       section.collapse(); // Note that the current section hasn't been collapsed yet, so this is all we need to do to do nothing.
-                                       return; // Don't expand to an empty section that can't load any themes.
-                               }
-
-                               // Load controls if none are loaded yet.
-                               if ( 0 === section.loaded ) {
-                                       section.loadControls();
-                               }
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( expanded && ! section.hasClass( 'current-panel' ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                                 // Collapse any sibling sections/panels
</span><span class="cx" style="display: block; padding: 0 10px">                                api.section.each( function ( otherSection ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        if ( otherSection !== section ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 if ( otherSection !== panel ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                                                 otherSection.collapse( { duration: args.duration } );
</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">+                                api.panel.each( function ( otherPanel ) {
+                                       otherPanel.collapse( { duration: 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">-                                section.contentContainer.addClass( 'current-section' );
-                               container.scrollTop();
-                               section.filterContainer.find( '.customize-themes-section-title' ).addClass( 'selected' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         panel._animateChangeExpanded( function() {
+                                       changeBtn.attr( 'tabindex', '-1' );
+                                       customizeBtn.attr( 'tabindex', '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">-                                container.on( 'scroll', _.throttle( section.renderScreenshots, 300 ) );
-                               container.on( 'scroll', _.throttle( section.loadMore, 300 ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 customizeBtn.focus();
+                                       section.css( 'top', '' );
+                                       container.scrollTop( 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 ( args.completeCallback ) {
-                                       args.completeCallback();
-                               }
-                               section.updateCount(); // Show this section's count.
-                       } else {
-                               section.contentContainer.removeClass( 'current-section' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 if ( args.completeCallback ) {
+                                               args.completeCallback();
+                                       }
+                               } );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                // Always hide, even if they don't exist or are already hidden.
-                               section.filterContainer.find( '.customize-themes-section-title' ).removeClass( 'selected details-open' ).attr( 'aria-expanded', 'false' );
-                               section.filterContainer.find( '.filter-details' ).slideUp( 180 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         overlay.addClass( 'in-themes-panel' );
+                               section.addClass( 'current-panel' );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                container.off( 'scroll' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 } else if ( ! expanded && section.hasClass( 'current-panel' ) ) {
+                               panel._animateChangeExpanded( function() {
+                                       changeBtn.attr( 'tabindex', '0' );
+                                       customizeBtn.attr( 'tabindex', '-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">-                                if ( args.completeCallback ) {
-                                       args.completeCallback();
-                               }
-                       }
-               },
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 changeBtn.focus();
+                                       section.css( '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">-                /**
-                * Return the section's content element without detachng from the parent.
-                *
-                * @since 4.7.0
-                */
-               getContent: function() {
-                       return this.container.find( '.control-section-content' );
-               },
-
-               /**
-                * Load theme data via ajax and add themes to the section as controls.
-                *
-                * @since 4.7.0
-                */
-               loadControls: function() {
-                       var section = this, params, page, request;
-
-                       if ( section.loading ) {
-                               return; // We're already loading a batch of themes.
-                       }
-
-                       // Parameters for every API query. Additional params are set in PHP.
-                       page = Math.ceil( section.loaded / 100 ) + 1;
-                       params = {
-                               'switch-themes-nonce': api.settings.nonce['switch-themes'],
-                               'wp_customize': 'on',
-                               'theme_action': section.params.action,
-                               'customized_theme': api.settings.theme.stylesheet,
-                               'page': page
-                       };
-
-                       // Add fields for special request actions.
-                       if ( 'search' === section.params.action ) {
-                               if ( '' === section.term ) {
-                                       return;
-                               } else {
-                                       params.search = section.term;
-                               }
-                       } else if ( 'favorites' === section.params.action ) {
-                               if ( '' === section.term ) {
-                                       return;
-                               } else {
-                                       params.user = section.term;
-                               }
-                       } else if ( 'feature_filter' === section.params.action ) {
-                               if ( '' === section.term ) {
-                                       return;
-                               } else {
-                                       params.tags = section.term;
-                               }
-                       }
-
-                       // Load themes.
-                       section.headContainer.closest( '.wp-full-overlay' ).addClass( 'loading' );
-                       section.loading = true;
-                       section.container.find( '.no-themes' ).hide();
-                       request = wp.ajax.post( 'customize-load-themes', params );
-                       request.done(function( data ) {
-                               var themes = data.themes,
-                                   themeControl, newThemeControls;
-                               if ( 0 !== themes.length ) {
-                                       newThemeControls = [];
-                                       // Add controls for each theme.
-                                       _.each( themes, function ( theme ) {
-                                               var customizeId = section.params.action + '_theme_' + theme.id;
-                                               themeControl = new api.controlConstructor.theme( customizeId, {
-                                                       params: {
-                                                               type: 'theme',
-                                                               content: '<li id="customize-control-theme-' + section.params.action + '_' + theme.id + '" class="customize-control customize-control-theme"></li>',
-                                                               section: section.params.id,
-                                                               active: true,
-                                                               theme: theme,
-                                                               priority: section.loaded + 1
-                                                       },
-                                                       previewer: api.previewer
-                                               } );
-
-                                               api.control.add( customizeId, themeControl );
-                                               newThemeControls.push( themeControl );
-                                               section.loaded = section.loaded + 1;
-                                       });
-
-                                       if ( 1 === page ) {
-                                               // Pre-load the first 3 theme screenshots.
-                                               _.each( section.controls().slice( 0, 3 ), function ( control ) {
-                                                       var img, src = control.params.theme.screenshot[0];
-                                                       if ( src ) {
-                                                               img = new Image();
-                                                               img.src = src;
-                                                       }
-                                               });
-                                               if ( 'search' === section.params.action ) {
-                                                       wp.a11y.speak( api.settings.l10n.themeSearchResults.replace( '%d', data.info.results ) );
-                                               }
-                                       } else {
-                                               Array.prototype.push.apply( section.screenshotQueue, newThemeControls ); // Add new themes to the screenshot queue.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 if ( args.completeCallback ) {
+                                               args.completeCallback();
</ins><span class="cx" style="display: block; padding: 0 10px">                                         }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        _.delay( section.renderScreenshots, 100 ); // Wait for the controls to become visible.
</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">-                                        if ( 'installed' === section.action || 100 > themes.length ) { // If we have less than the requested 100 themes, it's the end of the list.
-                                               section.fullyLoaded = true;
-                                       }
-                               } else {
-                                       if ( 0 === section.loaded ) {
-                                               section.container.find( '.no-themes' ).show();
-                                               wp.a11y.speak( section.container.find( '.no-themes' ).text() );
-                                       } else {
-                                               section.fullyLoaded = true;
-                                       }
-                               }
-                               if ( 'installed' === section.params.action ) {
-                                       section.updateCount();
-                               } else {
-                                       section.updateCount( data.info.results );
-                               }
-                               section.container.find( '.unexpected-error' ).hide(); // Hide error notice in case it was previously shown.
-
-                               // This cannot run on request.always, as section.loading may turn false before the new controls load in the success case.
-                               section.headContainer.closest( '.wp-full-overlay' ).removeClass( 'loading' );
-                               section.loading = false;
-                       });
-                       request.fail(function( data ) {
-                               if ( 'undefined' === typeof data ) {
-                                       section.container.find( '.unexpected-error' ).show();
-                                       wp.a11y.speak( section.container.find( '.unexpected-error' ).text() );
-                               } else if ( typeof console !== 'undefined' && console.error ) {
-                                       console.error( data );
-                               }
-
-                               // This cannot run on request.always, as section.loading may turn false before the new controls load in the success case.
-                               section.headContainer.closest( '.wp-full-overlay' ).removeClass( 'loading' );
-                               section.loading = false;
-                       });
-               },
-
-               /**
-                * Determines whether more themes should be loaded, and loads them.
-                *
-                * @since 4.7.0
-                */
-               loadMore: function() {
-                       var section = this, container, bottom, threshold;
-                       if ( ! section.fullyLoaded && ! section.loading ) {
-                               container = section.container.closest( '.customize-themes-full-container' );
-
-                               bottom = container.scrollTop() + container.height();
-                               threshold = container.prop( 'scrollHeight' ) - 3000; // Use a fixed distance to the bottom of loaded results to avoid unnecessarily loading results sooner when using a percentage of scroll distance.
-
-                               if ( bottom > threshold ) {
-                                       section.loadControls();
-                               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         overlay.removeClass( 'in-themes-panel' );
+                               section.removeClass( 'current-panel' );
</ins><span class="cx" style="display: block; padding: 0 10px">                         }
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                 * Event handler for search, feature filter, and favorites input that determines if the term has changed and loads new controls as needed.
-                *
-                * @since 4.7.0
-                *
-                * @param {wp.customize.ThemesSection} section The current theme section, passed through the debouncer.
-                */
-               checkTerm: function( section ) {
-                       var newTerm;
-
-                       // Find term.
-                       if ( 'search' === section.params.action ) {
-                               newTerm = $( '#wp-filter-search-input' ).val();
-                       } else if ( 'favorites' === section.params.action ) {
-                               newTerm = $( '#wporg-username-input' ).val();
-                       } else if ( 'feature_filter' === section.params.action ) {
-                               newTerm = section.term; // Set separately by filtersChecked(), as they're changed.
-                               if ( '' === newTerm ) {
-                                       return;
-                               }
-                       } else {
-                               return;
-                       }
-
-                       if ( section.term === newTerm && 'feature_filter' !== section.params.action ) {
-                               return;
-                       }
-
-                       // Clear the controls in the section.
-                       _.each( section.controls(), function( control ) {
-                               control.container.remove();
-                               api.control.remove( control.id );
-                       });
-                       section.loaded = 0;
-                       section.fullyLoaded = false;
-                       section.screenshotQueue = null;
-
-                       if ( '' !== newTerm ) { // Empty term should not show any results.
-                               // Run a new query, with loadControls handling paging, etc.
-                               section.term = newTerm;
-                               section.loadControls();
-                               if ( ! section.expanded() ) {
-                                       section.expand(); // Expand the section if it isn't expanded.
-                               }
-                       }
-               },
-
-               /**
-                * Check for filters checked in the feature filter list.
-                *
-                * @since 4.7.0
-                */
-               filtersChecked: function() {
-                       var section = this,
-                           items = section.container.find( '.filter-group' ).find( ':checkbox' ),
-                           tags = [];
-
-                       if ( 'feature_filter' !== section.params.action ) {
-                               return false;
-                       }
-
-                       _.each( items.filter( ':checked' ), function( item ) {
-                               tags.push( $( item ).prop( 'value' ) );
-                       });
-
-                       // When no filters are checked, restore initial state and return
-                       if ( tags.length === 0 ) {
-                               section.term = '';
-                       } else {
-                               section.term = tags;
-                       }
-               },
-
-               /**
</del><span class="cx" style="display: block; padding: 0 10px">                  * Render control's screenshot if the control comes into view.
</span><span class="cx" style="display: block; padding: 0 10px">                 *
</span><span class="cx" style="display: block; padding: 0 10px">                 * @since 4.2.0
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1586,15 +1294,12 @@
</span><span class="cx" style="display: block; padding: 0 10px">                renderScreenshots: function( ) {
</span><span class="cx" style="display: block; padding: 0 10px">                        var section = this;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        // Fill queue initially, or check for more if empty.
-                       if ( section.screenshotQueue === null || 0 === section.screenshotQueue.length ) {
-                               // Add controls that haven't had their screenshots rendered.
-                               section.screenshotQueue = _.filter( section.controls(), function( control ) {
-                                       return ! control.screenshotRendered;
-                               });
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Fill queue initially.
+                       if ( section.screenshotQueue === null ) {
+                               section.screenshotQueue = section.controls();
</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">-                        // Are all screenshots rendered (for now)?
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // Are all screenshots rendered?
</ins><span class="cx" style="display: block; padding: 0 10px">                         if ( ! section.screenshotQueue.length ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                return;
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1630,31 +1335,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                 * Update the number of themes in the section.
-                *
-                * @since 4.7.0
-                */
-               updateCount: function ( count ) {
-                       if ( ! count ) {
-                               count = this.loaded;
-                       }
-
-                       var displayed = this.container.closest( '.control-panel-content' ).find( '.themes-displayed' ),
-                           countEl = this.container.closest( '.control-panel-content' ).find( '.theme-count' );
-
-                       if ( 0 === count ) {
-                               countEl.text( count );
-                       } else {
-                               // Animate the count change for emphasis.
-                               displayed.fadeOut( 180, function() {
-                                       countEl.text( count );
-                                       displayed.fadeIn( 180 );
-                               } );
-                               wp.a11y.speak( api.settings.l10n.announceThemeCount.replace( '%d', count ) );
-                       }
-               },
-
-               /**
</del><span class="cx" style="display: block; padding: 0 10px">                  * Advance the modal to the next theme.
</span><span class="cx" style="display: block; padding: 0 10px">                 *
</span><span class="cx" style="display: block; padding: 0 10px">                 * @since 4.2.0
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1674,13 +1354,13 @@
</span><span class="cx" style="display: block; padding: 0 10px">                 * @since 4.2.0
</span><span class="cx" style="display: block; padding: 0 10px">                 */
</span><span class="cx" style="display: block; padding: 0 10px">                getNextTheme: function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        var section = this, control, next;
-                       control = api.control( section.params.action + '_theme_' + this.currentTheme );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 var control, next;
+                       control = api.control( 'theme_' + this.currentTheme );
</ins><span class="cx" style="display: block; padding: 0 10px">                         next = control.container.next( 'li.customize-control-theme' );
</span><span class="cx" style="display: block; padding: 0 10px">                        if ( ! next.length ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                return false;
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        next = next[0].id.replace( 'customize-control-theme-' + section.params.action, section.params.action + '_theme' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 next = next[0].id.replace( 'customize-control-', '' );
</ins><span class="cx" style="display: block; padding: 0 10px">                         control = api.control( next );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                        return control.params.theme;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1706,13 +1386,13 @@
</span><span class="cx" style="display: block; padding: 0 10px">                 * @since 4.2.0
</span><span class="cx" style="display: block; padding: 0 10px">                 */
</span><span class="cx" style="display: block; padding: 0 10px">                getPreviousTheme: function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        var section = this, control, previous;
-                       control = api.control( section.params.action + '_theme_' + this.currentTheme );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 var control, previous;
+                       control = api.control( 'theme_' + this.currentTheme );
</ins><span class="cx" style="display: block; padding: 0 10px">                         previous = control.container.prev( 'li.customize-control-theme' );
</span><span class="cx" style="display: block; padding: 0 10px">                        if ( ! previous.length ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                return false;
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        previous = previous[0].id.replace( 'customize-control-theme-' + section.params.action, section.params.action + '_theme' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 previous = previous[0].id.replace( 'customize-control-', '' );
</ins><span class="cx" style="display: block; padding: 0 10px">                         control = api.control( previous );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                        return control.params.theme;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1733,6 +1413,57 @@
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 * Load theme preview.
+                *
+                * @since 4.7.0
+                *
+                * @param {string} themeId Theme ID.
+                * @returns {jQuery.promise} Promise.
+                */
+               loadThemePreview: function( themeId ) {
+                       var deferred = $.Deferred(), onceProcessingComplete, overlay, urlParser;
+
+                       urlParser = document.createElement( 'a' );
+                       urlParser.href = location.href;
+                       urlParser.search = $.param( _.extend(
+                               api.utils.parseQueryString( urlParser.search.substr( 1 ) ),
+                               {
+                                       theme: themeId,
+                                       changeset_uuid: api.settings.changeset.uuid
+                               }
+                       ) );
+
+                       overlay = $( '.wp-full-overlay' );
+                       overlay.addClass( 'customize-loading' );
+
+                       onceProcessingComplete = function() {
+                               var request;
+                               if ( api.state( 'processing' ).get() > 0 ) {
+                                       return;
+                               }
+
+                               api.state( 'processing' ).unbind( onceProcessingComplete );
+
+                               request = api.requestChangesetUpdate();
+                               request.done( function() {
+                                       $( window ).off( 'beforeunload.customize-confirm' );
+                                       window.location.href = urlParser.href;
+                               } );
+                               request.fail( function() {
+                                       overlay.removeClass( 'customize-loading' );
+                               } );
+                       };
+
+                       if ( 0 === api.state( 'processing' ).get() ) {
+                               onceProcessingComplete();
+                       } else {
+                               api.state( 'processing' ).bind( onceProcessingComplete );
+                       }
+
+                       return deferred.promise();
+               },
+
+               /**
</ins><span class="cx" style="display: block; padding: 0 10px">                  * Render & show the theme details for a given theme model.
</span><span class="cx" style="display: block; padding: 0 10px">                 *
</span><span class="cx" style="display: block; padding: 0 10px">                 * @since 4.2.0
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1740,7 +1471,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                 * @param {Object}   theme
</span><span class="cx" style="display: block; padding: 0 10px">                 */
</span><span class="cx" style="display: block; padding: 0 10px">                showDetails: function ( theme, callback ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        var section = this;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 var section = this, link;
</ins><span class="cx" style="display: block; padding: 0 10px">                         callback = callback || function(){};
</span><span class="cx" style="display: block; padding: 0 10px">                        section.currentTheme = theme.id;
</span><span class="cx" style="display: block; padding: 0 10px">                        section.overlay.html( section.template( theme ) )
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1749,7 +1480,22 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        $( 'body' ).addClass( 'modal-open' );
</span><span class="cx" style="display: block; padding: 0 10px">                        section.containFocus( section.overlay );
</span><span class="cx" style="display: block; padding: 0 10px">                        section.updateLimits();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        wp.a11y.speak( api.settings.l10n.announceThemeDetails.replace( '%s', theme.name ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+                       link = section.overlay.find( '.inactive-theme > a' );
+
+                       link.on( 'click', function( event ) {
+                               event.preventDefault();
+
+                               // Short-circuit if request is currently being made.
+                               if ( link.hasClass( 'disabled' ) ) {
+                                       return;
+                               }
+                               link.addClass( 'disabled' );
+
+                               section.loadThemePreview( theme.id ).fail( function() {
+                                       link.removeClass( 'disabled' );
+                               } );
+                       } );
</ins><span class="cx" style="display: block; padding: 0 10px">                         callback();
</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">@@ -1761,7 +1507,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                closeDetails: function () {
</span><span class="cx" style="display: block; padding: 0 10px">                        $( 'body' ).removeClass( 'modal-open' );
</span><span class="cx" style="display: block; padding: 0 10px">                        this.overlay.fadeOut( 'fast' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        api.control( this.params.action + '_theme_' + this.currentTheme ).container.find( '.theme' ).focus();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 api.control( 'theme_' + this.currentTheme ).focus();
</ins><span class="cx" style="display: block; padding: 0 10px">                 },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1841,8 +1587,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><span class="cx" style="display: block; padding: 0 10px">                        if ( ! panel.contentContainer.parent().is( panel.headContainer ) ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                container.append( panel.contentContainer );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                panel.renderContent();
</ins><span class="cx" style="display: block; padding: 0 10px">                         }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        panel.renderContent();
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                        panel.deferred.embedded.resolve();
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2035,302 +1781,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"> 
</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">-         * wp.customize.ThemesPanel
-        *
-        * Custom section for themes that displays without the customize preview.
-        *
-        * @constructor
-        * @augments wp.customize.Panel
-        * @augments wp.customize.Container
-        */
-       api.ThemesPanel = api.Panel.extend({
-               installingThemes: [],
-
-               /**
-                * @since 4.7.0
-                */
-               attachEvents: function () {
-                       var panel = this;
-
-                       // Attach regular panel events.
-                       api.Panel.prototype.attachEvents.apply( this );
-
-                       // Collapse panel to customize the current theme.
-                       panel.contentContainer.on( 'click', '.customize-theme', function() {
-                               panel.collapse();
-                       });
-
-                       // Toggle between filtering and browsing themes on mobile.
-                       panel.contentContainer.on( 'click', '.see-themes, .filter-themes', function() {
-                               $( '.wp-full-overlay' ).toggleClass( 'showing-themes' );
-                       });
-
-                       // Install (and maybe preview) a theme.
-                       panel.contentContainer.on( 'click', '.theme-install', function( event ) {
-                               panel.installTheme( event );
-                       });
-
-                       // Update a theme. Theme cards have the class, the details modal has the id.
-                       panel.contentContainer.on( 'click', '.update-theme, #update-theme', function( event ) {
-                               // #update-theme is a link.
-                               event.preventDefault();
-                               event.stopPropagation();
-
-                               panel.updateTheme( event );
-                       });
-
-                       // Delete a theme.
-                       panel.contentContainer.on( 'click', '.delete-theme', function( event ) {
-                               panel.deleteTheme( event );
-                       });
-
-                       _.bindAll( this, 'installTheme', 'updateTheme' );
-               },
-
-               /**
-                * Update UI to reflect expanded state
-                *
-                * @since 4.7.0
-                *
-                * @param {Boolean}  expanded
-                * @param {Object}   args
-                * @param {Boolean}  args.unchanged
-                * @param {Function} args.completeCallback
-                */
-               onChangeExpanded: function ( expanded, args ) {
-
-                       // Expand/collapse the panel normally.
-                       api.Panel.prototype.onChangeExpanded.apply( this, [ expanded, args ] );
-
-                       // Immediately call the complete callback if there were no changes
-                       if ( args.unchanged ) {
-                               if ( args.completeCallback ) {
-                                       args.completeCallback();
-                               }
-                               return;
-                       }
-
-                       // Note: there is a second argument 'args' passed
-                       var panel = this,
-                               overlay = panel.headContainer.closest( '.wp-full-overlay' );
-
-                       if ( expanded ) {
-                               overlay
-                                       .addClass( 'in-themes-panel' ).addClass( 'showing-themes' )
-                                       .delay( 200 ).find( '.customize-themes-full-container' ).addClass( 'animate' );
-
-                               // Automatically open the installed themes section.
-                               api.section( 'installed_themes' ).expand();
-                       } else {
-                               overlay
-                                       .removeClass( 'in-themes-panel' )
-                                       .find( '.customize-themes-full-container' ).removeClass( 'animate' );
-                       }
-               },
-
-               /**
-                * Install a theme via wp.updates.
-                *
-                * @since 4.7.0
-                */
-               installTheme: function( event ) {
-                       var panel = this, preview = false, slug = $( event.target ).data( 'slug' );
-
-                       if ( -1 !== $.inArray( this.installingThemes, slug ) ) {
-                               return; // Theme is already being installed.
-                       }
-
-                       wp.updates.maybeRequestFilesystemCredentials( event );
-
-                       $( document ).one( 'wp-theme-install-success', function( event, response ) {
-                               var theme = false, customizeId, themeControl;
-                               if ( preview ) {
-
-                                       panel.loadThemePreview( slug ).fail( function() {
-                                               $( '.wp-full-overlay' ).removeClass( 'customize-loading' );
-                                       } );
-
-                               } else {
-                                       api.control.each( function( control ) {
-                                               if ( 'theme' === control.params.type && control.params.theme.id === response.slug ) {
-                                                       theme = control.params.theme; // Used below to add theme control.
-                                                       control.rerenderAsInstalled( true );
-                                               }
-                                       });
-
-                                       // Don't add the same theme more than once.
-                                       if ( ! theme || 'undefined' !== typeof api.control( 'installed_theme_' + theme.id ) ) {
-                                               return;
-                                       }
-
-                                       // Add theme control to installed section.
-                                       theme.type = 'installed';
-                                       customizeId = 'installed_theme_' + theme.id;
-                                       themeControl = new api.controlConstructor.theme( customizeId, {
-                                               params: {
-                                                       type: 'theme',
-                                                       content: $( '<li class="customize-control customize-control-theme"></li>' ).attr( 'id', 'customize-control-theme-installed_' + theme.id ).prop( 'outerHTML' ),
-                                                       section: 'installed_themes',
-                                                       active: true,
-                                                       theme: theme,
-                                                       priority: 0 // Add all newly-installed themes to the top.
-                                               },
-                                               previewer: api.previewer
-                                       } );
-
-                                       api.control.add( customizeId, themeControl );
-                                       api.control( customizeId ).container.trigger( 'render-screenshot' );
-
-                                       // Close the details modal if it's open to the installed theme.
-                                       api.section.each( function( section ) {
-                                               if ( 'themes' === section.params.type ) {
-                                                       if ( theme.id === section.currentTheme ) { // Don't close the modal if the user has navigated elsewhere.
-                                                               section.closeDetails();
-                                                       }
-                                               }
-                                       });
-                               }
-                       } );
-
-                       this.installingThemes.push( $( event.target ).data( 'slug' ) ); // Note: we don't remove elements from installingThemes, since they shouldn't be installed again.
-                       wp.updates.installTheme( {
-                               slug: slug
-                       } );
-
-                       // Also preview the theme as the event is triggered on Install & Preview.
-                       if ( $( event.target ).hasClass( 'preview' ) ) {
-                               preview = true;
-                               $( '.wp-full-overlay' ).addClass( 'customize-loading' );
-                       }
-               },
-
-               /**
-                * Load theme preview.
-                *
-                * @since 4.7.0
-                *
-                * @param {string} themeId Theme ID.
-                * @returns {jQuery.promise} Promise.
-                */
-               loadThemePreview: function( themeId ) {
-                       var deferred = $.Deferred(), onceProcessingComplete, overlay, urlParser;
-
-                       urlParser = document.createElement( 'a' );
-                       urlParser.href = location.href;
-                       urlParser.search = $.param( _.extend(
-                               api.utils.parseQueryString( urlParser.search.substr( 1 ) ),
-                               {
-                                       theme: themeId,
-                                       changeset_uuid: api.settings.changeset.uuid
-                               }
-                       ) );
-
-                       overlay = $( '.wp-full-overlay' );
-                       overlay.addClass( 'customize-loading' );
-
-                       onceProcessingComplete = function() {
-                               var request;
-                               if ( api.state( 'processing' ).get() > 0 ) {
-                                       return;
-                               }
-
-                               api.state( 'processing' ).unbind( onceProcessingComplete );
-
-                               request = api.requestChangesetUpdate();
-                               request.done( function() {
-                                       $( window ).off( 'beforeunload.customize-confirm' );
-                                       window.location.href = urlParser.href;
-                               } );
-                               request.fail( function() {
-                                       overlay.removeClass( 'customize-loading' );
-                               } );
-                       };
-
-                       if ( 0 === api.state( 'processing' ).get() ) {
-                               onceProcessingComplete();
-                       } else {
-                               api.state( 'processing' ).bind( onceProcessingComplete );
-                       }
-
-                       return deferred.promise();
-               },
-
-               /**
-                * Update a theme via wp.updates.
-                *
-                * @since 4.7.0
-                */
-               updateTheme: function( event ) {
-                       wp.updates.maybeRequestFilesystemCredentials( event );
-
-                       $( document ).one( 'wp-theme-update-success', function( event, response ) {
-                               // Rerender the control to reflect the update.
-                               api.control.each( function( control ) {
-                                       if ( 'theme' === control.params.type && control.params.theme.id === response.slug ) {
-                                               control.params.theme.hasUpdate = false;
-                                               control.rerenderAsInstalled( true );
-                                       }
-                               });
-                       } );
-
-                       wp.updates.updateTheme( {
-                               slug: $( event.target ).closest( '.notice' ).data( 'slug' )
-                       } );
-               },
-
-               /**
-                * Delete a theme via wp.updates.
-                *
-                * @since 4.7.0
-                */
-               deleteTheme: function( event ) {
-                       var theme, section;
-                       theme = $( event.target ).data( 'slug' );
-                       section = api.section( 'installed_themes' );
-
-                       event.preventDefault();
-
-                       // Confirmation dialog for deleting a theme.
-                       if ( ! window.confirm( api.settings.l10n.confirmDeleteTheme ) ) {
-                               return;
-                       }
-
-                       wp.updates.maybeRequestFilesystemCredentials( event );
-
-                       $( document ).one( 'wp-theme-delete-success', function() {
-                               var control = api.control( 'installed_theme_' + theme );
-
-                               // Remove theme control.
-                               control.container.remove();
-                               api.control.remove( control.id );
-
-                               // Update installed count.
-                               section.loaded = section.loaded - 1;
-                               section.updateCount();
-
-                               // Rerender any other theme controls as uninstalled.
-                               api.control.each( function( control ) {
-                                       if ( 'theme' === control.params.type && control.params.theme.id === theme ) {
-                                               control.rerenderAsInstalled( false );
-                                       }
-                               });
-                       } );
-
-                       wp.updates.deleteTheme( {
-                               slug: theme
-                       } );
-
-                       // Close modal and focus the section.
-                       section.closeDetails();
-                       section.focus();
-               }
-
-       });
-
-
-       /**
</del><span class="cx" style="display: block; padding: 0 10px">          * A Customizer Control.
</span><span class="cx" style="display: block; padding: 0 10px">         *
</span><span class="cx" style="display: block; padding: 0 10px">         * A control provides a UI element that allows a user to modify a Customizer Setting.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2644,7 +2095,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                 * @param {Boolean}  active
</span><span class="cx" style="display: block; padding: 0 10px">                 * @param {Object}   args
</span><span class="cx" style="display: block; padding: 0 10px">                 * @param {Number}   args.duration
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                 * @param {Function} args.completeCallback
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+          * @param {Callback} args.completeCallback
</ins><span class="cx" style="display: block; padding: 0 10px">                  */
</span><span class="cx" style="display: block; padding: 0 10px">                onChangeActive: function ( active, args ) {
</span><span class="cx" style="display: block; padding: 0 10px">                        if ( args.unchanged ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3815,11 +3266,35 @@
</span><span class="cx" style="display: block; padding: 0 10px">        api.ThemeControl = api.Control.extend({
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                touchDrag: false,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                screenshotRendered: false,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         isRendered: false,
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 * Defer rendering the theme control until the section is displayed.
+                *
</ins><span class="cx" style="display: block; padding: 0 10px">                  * @since 4.2.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">+                renderContent: function () {
+                       var control = this,
+                               renderContentArgs = arguments;
+
+                       api.section( control.section(), function( section ) {
+                               if ( section.expanded() ) {
+                                       api.Control.prototype.renderContent.apply( control, renderContentArgs );
+                                       control.isRendered = true;
+                               } else {
+                                       section.expanded.bind( function( expanded ) {
+                                               if ( expanded && ! control.isRendered ) {
+                                                       api.Control.prototype.renderContent.apply( control, renderContentArgs );
+                                                       control.isRendered = true;
+                                               }
+                                       } );
+                               }
+                       } );
+               },
+
+               /**
+                * @since 4.2.0
+                */
</ins><span class="cx" style="display: block; padding: 0 10px">                 ready: function() {
</span><span class="cx" style="display: block; padding: 0 10px">                        var control = this;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3839,11 +3314,20 @@
</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">                                // Prevent the modal from showing when the user clicks the action button.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                if ( $( event.target ).is( '.theme-actions .button, .update-theme' ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         if ( $( event.target ).is( '.theme-actions .button' ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                                         return;
</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">+                                api.section( control.section() ).loadThemePreview( control.params.theme.id );
+                       });
+
+                       control.container.on( 'click keydown', '.theme-actions .theme-details', function( event ) {
+                               if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+                                       return;
+                               }
+
</ins><span class="cx" style="display: block; padding: 0 10px">                                 event.preventDefault(); // Keep this AFTER the key filter above
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px">                                 api.section( control.section() ).showDetails( control.params.theme );
</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">@@ -3854,12 +3338,11 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                if ( source ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                        $screenshot.attr( 'src', source );
</span><span class="cx" style="display: block; padding: 0 10px">                                }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                control.screenshotRendered = true;
</del><span class="cx" style="display: block; padding: 0 10px">                         });
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                 * Show or hide the theme based on the presence of the term in the title, description, tags, and author.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+          * Show or hide the theme based on the presence of the term in the title, description, and author.
</ins><span class="cx" style="display: block; padding: 0 10px">                  *
</span><span class="cx" style="display: block; padding: 0 10px">                 * @since 4.2.0
</span><span class="cx" style="display: block; padding: 0 10px">                 */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3875,23 +3358,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        } else {
</span><span class="cx" style="display: block; padding: 0 10px">                                control.deactivate();
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                },
-
-               /**
-                * Rerender the theme from its JS template with the installed type.
-                *
-                * @since 4.7.0
-                */
-               rerenderAsInstalled: function( installed ) {
-                       var control = this, section;
-                       if ( installed ) {
-                               control.params.theme.type = 'installed';
-                       } else {
-                               section = api.section( control.params.section );
-                               control.params.theme.type = section.params.action;
-                       }
-                       control.renderContent(); // replaces existing content
-                       control.container.trigger( 'render-screenshot' );
</del><span class="cx" style="display: block; padding: 0 10px">                 }
</span><span class="cx" style="display: block; padding: 0 10px">        });
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4584,9 +4050,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                background_position: api.BackgroundPositionControl,
</span><span class="cx" style="display: block; padding: 0 10px">                theme:               api.ThemeControl
</span><span class="cx" style="display: block; padding: 0 10px">        };
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        api.panelConstructor = {
-               themes: api.ThemesPanel
-       };
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ api.panelConstructor = {};
</ins><span class="cx" style="display: block; padding: 0 10px">         api.sectionConstructor = {
</span><span class="cx" style="display: block; padding: 0 10px">                themes: api.ThemesSection
</span><span class="cx" style="display: block; padding: 0 10px">        };
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4704,10 +4168,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                // Sort the sections within each panel
</span><span class="cx" style="display: block; padding: 0 10px">                api.panel.each( function ( panel ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        if ( 'themes' === panel.id ) {
-                               return; // Don't reflow theme sections, as doing so moves them after the themes container.
-                       }
-
</del><span class="cx" style="display: block; padding: 0 10px">                         var sections = panel.sections(),
</span><span class="cx" style="display: block; padding: 0 10px">                                sectionHeadContainers = _.pluck( sections, 'headContainer' );
</span><span class="cx" style="display: block; padding: 0 10px">                        rootNodes.push( panel );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5349,16 +4809,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        // Collapse the most granular expanded object.
</span><span class="cx" style="display: block; padding: 0 10px">                        collapsedObject = expandedControls[0] || expandedSections[0] || expandedPanels[0];
</span><span class="cx" style="display: block; padding: 0 10px">                        if ( collapsedObject ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                if ( 'themes' === collapsedObject.params.type ) {
-                                       // Themes panel or section.
-                                       if ( $( 'body' ).hasClass( 'modal-open' ) ) {
-                                               collapsedObject.closeDetails();
-                                       } else {
-                                               // If we're collapsing a section, collapse the panel also.
-                                               wp.customize.panel( 'themes' ).collapse();
-                                       }
-                                       return;
-                               }
</del><span class="cx" style="display: block; padding: 0 10px">                                 collapsedObject.collapse();
</span><span class="cx" style="display: block; padding: 0 10px">                                event.preventDefault();
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span></span></pre></div>
<a id="trunksrcwpadminjsupdatesjs"></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/updates.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/updates.js  2016-11-04 12:14:05 UTC (rev 39139)
+++ trunk/src/wp-admin/js/updates.js    2016-11-04 15:53:01 UTC (rev 39140)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -181,11 +181,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                if ( $notice.length ) {
</span><span class="cx" style="display: block; padding: 0 10px">                        $notice.replaceWith( $adminNotice );
</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">-                        if ( 'customize' === pagenow ) {
-                               $( '.customize-themes-notifications' ).append( $adminNotice );
-                       } else {
-                               $( '.wrap' ).find( '> h1' ).after( $adminNotice );
-                       }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 $( '.wrap' ).find( '> h1' ).after( $adminNotice );
</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">                $document.trigger( 'wp-updates-notice-added' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -930,17 +926,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                if ( 'themes-network' === pagenow ) {
</span><span class="cx" style="display: block; padding: 0 10px">                        $notice = $( '[data-slug="' + args.slug + '"]' ).find( '.update-message' ).removeClass( 'notice-error' ).addClass( 'updating-message notice-warning' ).find( 'p' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                } else if ( 'customize' === pagenow ) {
-
-                       // Update the theme details UI.
-                       $notice = $( '#update-theme' ).closest( '.notice' ).removeClass( 'notice-large' );
-
-                       $notice.find( 'h3' ).remove();
-
-                       // Add the top-level UI, and update both.
-                       $notice = $notice.add( $( '#customize-control-theme-installed_' + args.slug ).find( '.update-message' ) );
-                       $notice = $notice.addClass( 'updating-message' ).find( 'p' );
-
</del><span class="cx" style="display: block; padding: 0 10px">                 } else {
</span><span class="cx" style="display: block; padding: 0 10px">                        $notice = $( '#update-theme' ).closest( '.notice' ).removeClass( 'notice-large' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -983,10 +968,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        },
</span><span class="cx" style="display: block; padding: 0 10px">                        $notice, newText;
</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 ( 'customize' === pagenow ) {
-                       $theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
-               }
-
</del><span class="cx" style="display: block; padding: 0 10px">                 if ( 'themes-network' === pagenow ) {
</span><span class="cx" style="display: block; padding: 0 10px">                        $notice = $theme.find( '.update-message' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1041,10 +1022,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        return;
</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 ( 'customize' === pagenow ) {
-                       $theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
-               }
-
</del><span class="cx" style="display: block; padding: 0 10px">                 if ( 'themes-network' === pagenow ) {
</span><span class="cx" style="display: block; padding: 0 10px">                        $notice = $theme.find( '.update-message ' );
</span><span class="cx" style="display: block; padding: 0 10px">                } else {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1181,23 +1158,12 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        return;
</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 ( 'customize' === pagenow ) {
-                       if ( $document.find( 'body' ).hasClass( 'modal-open' ) ) {
-                               $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
-                               $card   = $( '.theme-overlay .theme-info' ).prepend( $message );
-                       } else {
-                               $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
-                               $card   = $button.closest( '.theme' ).addClass( 'theme-install-failed' ).append( $message );
-                       }
-                       $( '.wp-full-overlay' ).removeClass( 'customize-loading' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         if ( $document.find( 'body' ).hasClass( 'full-overlay-active' ) ) {
+                       $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
+                       $card   = $( '.install-theme-info' ).prepend( $message );
</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 ( $document.find( 'body' ).hasClass( 'full-overlay-active' ) ) {
-                               $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
-                               $card   = $( '.install-theme-info' ).prepend( $message );
-                       } else {
-                               $card   = $( '[data-slug="' + response.slug + '"]' ).removeClass( 'focus' ).addClass( 'theme-install-failed' ).append( $message );
-                               $button = $card.find( '.theme-install' );
-                       }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 $card   = $( '[data-slug="' + response.slug + '"]' ).removeClass( 'focus' ).addClass( 'theme-install-failed' ).append( $message );
+                       $button = $card.find( '.theme-install' );
</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">                $button
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizemanagerphp"></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-customize-manager.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-manager.php      2016-11-04 12:14:05 UTC (rev 39139)
+++ trunk/src/wp-includes/class-wp-customize-manager.php        2016-11-04 15:53:01 UTC (rev 39140)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -295,7 +295,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menus-panel.php' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-panel.php' );
</del><span class="cx" style="display: block; padding: 0 10px">                 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-section.php' );
</span><span class="cx" style="display: block; padding: 0 10px">                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-sidebar-section.php' );
</span><span class="cx" style="display: block; padding: 0 10px">                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-section.php' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -351,7 +350,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                add_action( 'wp_ajax_customize_save',           array( $this, 'save' ) );
</span><span class="cx" style="display: block; padding: 0 10px">                add_action( 'wp_ajax_customize_refresh_nonces', array( $this, 'refresh_nonces' ) );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                add_action( 'wp_ajax_customize-load-themes',    array( $this, 'load_themes_ajax' ) );
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                add_action( 'customize_register',                 array( $this, 'register_controls' ) );
</span><span class="cx" style="display: block; padding: 0 10px">                add_action( 'customize_register',                 array( $this, 'register_dynamic_settings' ), 11 ); // allow code to create settings first
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -368,12 +366,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                // Export the settings to JS via the _wpCustomizeSettings variable.
</span><span class="cx" style="display: block; padding: 0 10px">                add_action( 'customize_controls_print_footer_scripts', array( $this, 'customize_pane_settings' ), 1000 );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
-               // Add theme update notices.
-               if ( current_user_can( 'install_themes' ) || current_user_can( 'update_themes' ) ) {
-                       require_once( ABSPATH . '/wp-admin/includes/update.php' );
-                       add_action( 'customize_controls_print_footer_scripts', 'wp_print_admin_notice_templates' );
-               }
</del><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2758,9 +2750,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                foreach ( $this->controls as $control ) {
</span><span class="cx" style="display: block; padding: 0 10px">                        $control->enqueue();
</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 ( ! is_multisite() && ( current_user_can( 'install_themes' ) || current_user_can( 'update_themes' ) || current_user_can( 'delete_themes' ) ) ) {
-                       wp_enqueue_script( 'updates' );
-               }
</del><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2975,7 +2964,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                $nonces = array(
</span><span class="cx" style="display: block; padding: 0 10px">                        'save' => wp_create_nonce( 'save-customize_' . $this->get_stylesheet() ),
</span><span class="cx" style="display: block; padding: 0 10px">                        'preview' => wp_create_nonce( 'preview-customize_' . $this->get_stylesheet() ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        'switch-themes' => wp_create_nonce( 'switch-themes' ),
</del><span class="cx" style="display: block; padding: 0 10px">                 );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3049,14 +3037,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        'autofocus' => $this->get_autofocus(),
</span><span class="cx" style="display: block; padding: 0 10px">                        'documentTitleTmpl' => $this->get_document_title_template(),
</span><span class="cx" style="display: block; padding: 0 10px">                        'previewableDevices' => $this->get_previewable_devices(),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        'l10n' => array(
-                               'confirmDeleteTheme' => __( 'Are you sure you want to delete this theme?' ),
-                               /* translators: %d is the number of theme search results, which cannot consider singular vs. plural forms */
-                               'themeSearchResults' => __( '%d themes found' ),
-                               /* translators: %d is the number of themes being displayed, which cannot consider singular vs. plural forms */
-                               'announceThemeCount' => __( 'Displaying %d themes' ),
-                               'announceThemeDetails' => __( 'Showing details for theme: %s' ),
-                       ),
</del><span class="cx" style="display: block; padding: 0 10px">                 );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                // Prepare Customize Section objects to pass to JavaScript.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3160,10 +3140,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /* Panel, Section, and Control Types */
</span><span class="cx" style="display: block; padding: 0 10px">                $this->register_panel_type( 'WP_Customize_Panel' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $this->register_panel_type( 'WP_Customize_Themes_Panel' );
</del><span class="cx" style="display: block; padding: 0 10px">                 $this->register_section_type( 'WP_Customize_Section' );
</span><span class="cx" style="display: block; padding: 0 10px">                $this->register_section_type( 'WP_Customize_Sidebar_Section' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $this->register_section_type( 'WP_Customize_Themes_Section' );
</del><span class="cx" style="display: block; padding: 0 10px">                 $this->register_control_type( 'WP_Customize_Color_Control' );
</span><span class="cx" style="display: block; padding: 0 10px">                $this->register_control_type( 'WP_Customize_Media_Control' );
</span><span class="cx" style="display: block; padding: 0 10px">                $this->register_control_type( 'WP_Customize_Upload_Control' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3174,80 +3152,50 @@
</span><span class="cx" style="display: block; padding: 0 10px">                $this->register_control_type( 'WP_Customize_Site_Icon_Control' );
</span><span class="cx" style="display: block; padding: 0 10px">                $this->register_control_type( 'WP_Customize_Theme_Control' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                /* Themes (controls are loaded via ajax) */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         /* Themes */
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $this->add_panel( new WP_Customize_Themes_Panel( $this, 'themes', array(
-                       'title'       => $this->theme()->display( 'Name' ),
-                       'description' => __( 'Once themes are installed, you can live-preview them on your site, customize them, and publish your new design. Browse available themes via the filters in this menu.' ),
-                       'capability'  => 'switch_themes',
-                       'priority'    => 0,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array(
+                       'title'      => $this->theme()->display( 'Name' ),
+                       'capability' => 'switch_themes',
+                       'priority'   => 0,
</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">-                $this->add_section( new WP_Customize_Themes_Section( $this, 'installed_themes', array(
-                       'title'       => __( 'Installed' ),
-                       'text_before' => __( 'Your local site' ),
-                       'action'      => 'installed',
-                       'capability'  => 'switch_themes',
-                       'panel'       => 'themes',
-                       'priority'    => 0,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         // Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
+               $this->add_setting( new WP_Customize_Filter_Setting( $this, 'active_theme', array(
+                       'capability' => 'switch_themes',
</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 ( ! is_multisite() ) {
-                       $this->add_section( new WP_Customize_Themes_Section( $this, 'search_themes', array(
-                               'title'       => __( 'Search themes&hellip;' ),
-                               'text_before' => __( 'Browse all WordPress.org themes' ),
-                               'action'      => 'search',
-                               'capability'  => 'install_themes',
-                               'panel'       => 'themes',
-                               'priority'    => 5,
-                       ) ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         require_once( ABSPATH . 'wp-admin/includes/theme.php' );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        $this->add_section( new WP_Customize_Themes_Section( $this, 'featured_themes', array(
-                               'title'      => __( 'Featured' ),
-                               'action'     => 'featured',
-                               'capability' => 'install_themes',
-                               'panel'      => 'themes',
-                               'priority'   => 10,
-                       ) ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         // Theme Controls.
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        $this->add_section( new WP_Customize_Themes_Section( $this, 'popular_themes', array(
-                               'title'      => __( 'Popular' ),
-                               'action'     => 'popular',
-                               'capability' => 'install_themes',
-                               'panel'      => 'themes',
-                               'priority'   => 15,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         // Add a control for the active/original theme.
+               if ( ! $this->is_theme_active() ) {
+                       $themes = wp_prepare_themes_for_js( array( wp_get_theme( $this->original_stylesheet ) ) );
+                       $active_theme = current( $themes );
+                       $active_theme['isActiveTheme'] = true;
+                       $this->add_control( new WP_Customize_Theme_Control( $this, $active_theme['id'], array(
+                               'theme'    => $active_theme,
+                               'section'  => 'themes',
+                               'settings' => 'active_theme',
</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">-                        $this->add_section( new WP_Customize_Themes_Section( $this, 'latest_themes', array(
-                               'title'      => __( 'Latest' ),
-                               'action'     => 'latest',
-                               'capability' => 'install_themes',
-                               'panel'      => 'themes',
-                               'priority'   => 20,
-                       ) ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $themes = wp_prepare_themes_for_js();
+               foreach ( $themes as $theme ) {
+                       if ( $theme['active'] || $theme['id'] === $this->original_stylesheet ) {
+                               continue;
+                       }
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        $this->add_section( new WP_Customize_Themes_Section( $this, 'feature_filter_themes', array(
-                               'title'      => __( 'Feature Filter' ),
-                               'action'     => 'feature_filter',
-                               'capability' => 'install_themes',
-                               'panel'      => 'themes',
-                               'priority'   => 25,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 $theme_id = 'theme_' . $theme['id'];
+                       $theme['isActiveTheme'] = false;
+                       $this->add_control( new WP_Customize_Theme_Control( $this, $theme_id, array(
+                               'theme'    => $theme,
+                               'section'  => 'themes',
+                               'settings' => 'active_theme',
</ins><span class="cx" style="display: block; padding: 0 10px">                         ) ) );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
-                       $this->add_section( new WP_Customize_Themes_Section( $this, 'favorites_themes', array(
-                               'title'      => __( 'Favorites' ),
-                               'action'     => 'favorites',
-                               'capability' => 'install_themes',
-                               'panel'      => 'themes',
-                               'priority'   => 30,
-                       ) ) );
</del><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">-                // Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
-               $this->add_setting( new WP_Customize_Filter_Setting( $this, 'active_theme', array(
-                       'capability' => 'switch_themes',
-               ) ) );
-
</del><span class="cx" style="display: block; padding: 0 10px">                 /* Site Identity */
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                $this->add_section( 'title_tagline', array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3701,150 +3649,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         * Load themes into the theme browsing/installation UI.
-        *
-        * @since 4.7.0
-        * @access public
-        */
-       public function load_themes_ajax() {
-               check_ajax_referer( 'switch-themes', 'switch-themes-nonce' );
-
-               if ( ! current_user_can( 'switch_themes' ) ) {
-                       wp_die( -1 );
-               }
-
-               if ( empty( $_POST['theme_action'] ) ) {
-                       wp_send_json_error( 'missing_theme_action' );
-               }
-
-               if ( 'search' === $_POST['theme_action'] && ! array_key_exists( 'search', $_POST ) ) {
-                       wp_send_json_error( 'empty_search' );
-               } elseif ( 'favorites' === $_POST['theme_action'] && ! array_key_exists( 'user', $_POST ) ) {
-                       wp_send_json_error( 'empty_user' );
-               } elseif ( 'feature_filter' === $_POST['theme_action'] && ! array_key_exists( 'tags', $_POST ) ) {
-                       wp_send_json_error( 'no_features' );
-               }
-
-               require_once( ABSPATH . 'wp-admin/includes/theme.php' );
-               if ( 'installed' === $_POST['theme_action'] ) {
-                       $themes = array( 'themes' => wp_prepare_themes_for_js() );
-                       foreach ( $themes['themes'] as &$theme ) {
-                               $theme['type'] = 'installed';
-                               // Set active based on customized theme.
-                               if ( $_POST['customized_theme'] === $theme['id'] ) {
-                                       $theme['active'] = true;
-                               } else {
-                                       $theme['active'] = false;
-                               }
-                       }
-               } else {
-                       if ( ! current_user_can( 'install_themes' ) ) {
-                               wp_die( -1 );
-                       }
-
-                       // Arguments for all queries.
-                       $args = array(
-                               'per_page' => 100,
-                               'page' => absint( $_POST['page'] ),
-                               'fields' => array(
-                                       'slug' => true,
-                                       'screenshot' => true,
-                                       'description' => true,
-                                       'requires' => true,
-                                       'rating' => true,
-                                       'downloaded' => true,
-                                       'downloadLink' => true,
-                                       'last_updated' => true,
-                                       'homepage' => true,
-                                       'num_ratings' => true,
-                                       'tags' => true,
-                               ),
-                       );
-
-                       // Specialized handling for each query.
-                       switch ( $_POST['theme_action'] ) {
-                               case 'search':
-                                       $args['search'] = wp_unslash( $_POST['search'] );
-                                       break;
-                               case 'favorites':
-                                       $args['user'] = wp_unslash( $_POST['user'] );
-                               case 'featured':
-                               case 'popular':
-                                       $args['browse'] = wp_unslash( $_POST['theme_action'] );
-                                       break;
-                               case 'latest':
-                                       $args['browse'] = 'new';
-                                       break;
-                               case 'feature_filter':
-                                       $args['tag'] = wp_unslash( $_POST['tags'] );
-                                       break;
-                       }
-
-                       // Load themes from the .org API.
-                       $themes = themes_api( 'query_themes', $args );
-                       if ( is_wp_error( $themes ) ) {
-                               wp_send_json_error();
-                       }
-
-                       // This list matches the allowed tags in wp-admin/includes/theme-install.php.
-                       $themes_allowedtags = array('a' => array('href' => array(), 'title' => array(), 'target' => array()),
-                               'abbr' => array('title' => array()), 'acronym' => array('title' => array()),
-                               'code' => array(), 'pre' => array(), 'em' => array(), 'strong' => array(),
-                               'div' => array(), 'p' => array(), 'ul' => array(), 'ol' => array(), 'li' => array(),
-                               'h1' => array(), 'h2' => array(), 'h3' => array(), 'h4' => array(), 'h5' => array(), 'h6' => array(),
-                               'img' => array('src' => array(), 'class' => array(), 'alt' => array())
-                       );
-
-                       // Prepare a list of installed themes to check against before the loop.
-                       $installed_themes = array();
-                       $wp_themes = wp_get_themes();
-                       foreach ( $wp_themes as $theme ) {
-                               $installed_themes[] = $theme->get_stylesheet();
-                       }
-                       $update_php = network_admin_url( 'update.php?action=install-theme' );
-                       foreach ( $themes->themes as &$theme ) {
-                               $theme->install_url = add_query_arg( array(
-                                       'theme'    => $theme->slug,
-                                       '_wpnonce' => wp_create_nonce( 'install-theme_' . $theme->slug ),
-                               ), $update_php );
-
-                               $theme->name        = wp_kses( $theme->name, $themes_allowedtags );
-                               $theme->author      = wp_kses( $theme->author, $themes_allowedtags );
-                               $theme->version     = wp_kses( $theme->version, $themes_allowedtags );
-                               $theme->description = wp_kses( $theme->description, $themes_allowedtags );
-                               $theme->tags        = implode( ', ', $theme->tags );
-                               $theme->stars       = wp_star_rating( array( 'rating' => $theme->rating, 'type' => 'percent', 'number' => $theme->num_ratings, 'echo' => false ) );
-                               $theme->num_ratings = number_format_i18n( $theme->num_ratings );
-                               $theme->preview_url = set_url_scheme( $theme->preview_url );
-
-                               // Handle themes that are already installed as installed themes.
-                               if ( in_array( $theme->slug, $installed_themes, true ) ) {
-                                       $theme->type = 'installed';
-                               } else {
-                                       $theme->type = $_POST['theme_action'];
-                               }
-
-                               // Set active based on customized theme.
-                               if ( $_POST['customized_theme'] === $theme->slug ) {
-                                       $theme->active = true;
-                               } else {
-                                       $theme->active = false;
-                               }
-
-                               // Map available theme properties to installed theme properties.
-                               $theme->id           = $theme->slug;
-                               $theme->screenshot   = array( $theme->screenshot_url );
-                               $theme->authorAndUri = $theme->author;
-                               unset( $theme->slug );
-                               unset( $theme->screenshot_url );
-                               unset( $theme->author );
-                       } // End foreach().
-               } // End if().
-               wp_send_json_success( $themes );
-       }
-
-
-       /**
</del><span class="cx" style="display: block; padding: 0 10px">          * Callback for validating the header_textcolor value.
</span><span class="cx" style="display: block; padding: 0 10px">         *
</span><span class="cx" style="display: block; padding: 0 10px">         * Accepts 'blank', and otherwise uses sanitize_hex_color_no_hash().
</span></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizethemecontrolphp"></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/customize/class-wp-customize-theme-control.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-theme-control.php      2016-11-04 12:14:05 UTC (rev 39139)
+++ trunk/src/wp-includes/customize/class-wp-customize-theme-control.php        2016-11-04 15:53:01 UTC (rev 39140)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -62,22 +62,18 @@
</span><span class="cx" style="display: block; padding: 0 10px">         * @access public
</span><span class="cx" style="display: block; padding: 0 10px">         */
</span><span class="cx" style="display: block; padding: 0 10px">        public function content_template() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                /* translators: %s: theme name */
-               $details_label = sprintf( __( 'Details for theme: %s' ), '{{ data.theme.name }}' );
-               /* translators: %s: theme name */
-               $customize_label = sprintf( __( 'Customize theme: %s' ), '{{ data.theme.name }}' );
-               /* translators: %s: theme name */
-               $preview_label = sprintf( __( 'Live preview theme: %s' ), '{{ data.theme.name }}' );
-               /* translators: %s: theme name */
-               $install_label = sprintf( __( 'Install and preview theme: %s' ), '{{ data.theme.name }}' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $current_url = set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );
+               $active_url  = esc_url( remove_query_arg( 'customize_theme', $current_url ) );
+               $preview_url = esc_url( add_query_arg( 'customize_theme', '__THEME__', $current_url ) ); // Token because esc_url() strips curly braces.
+               $preview_url = str_replace( '__THEME__', '{{ data.theme.id }}', $preview_url );
</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 ( data.theme.active ) { #>
-                       <div class="theme active" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         <# if ( data.theme.isActiveTheme ) { #>
+                       <div class="theme active" tabindex="0" data-preview-url="<?php echo esc_attr( $active_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
</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">-                        <div class="theme" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 <div class="theme" tabindex="0" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
</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 ( data.theme.screenshot && data.theme.screenshot[0] ) { #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 <# if ( data.theme.screenshot[0] ) { #>
</ins><span class="cx" style="display: block; padding: 0 10px">                                 <div class="theme-screenshot">
</span><span class="cx" style="display: block; padding: 0 10px">                                        <img data-src="{{ data.theme.screenshot[0] }}" alt="" />
</span><span class="cx" style="display: block; padding: 0 10px">                                </div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -85,34 +81,25 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                <div class="theme-screenshot blank"></div>
</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">-                        <span class="more-details theme-details" id="{{ data.section }}-{{ data.theme.id }}-action" aria-label="<?php echo esc_attr( $details_label ); ?>"><?php _e( 'Theme Details' ); ?></span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 <# if ( data.theme.isActiveTheme ) { #>
+                               <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Customize' ); ?></span>
+                       <# } else { #>
+                               <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Live Preview' ); ?></span>
+                       <# } #>
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        <div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.theme.author }}' ); ?></div>
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        <# if ( 'installed' === data.theme.type && data.theme.hasUpdate ) { #>
-                               <div class="update-message notice inline notice-warning notice-alt" data-slug="{{ data.theme.id }}"><p><?php printf( __( 'New version available. %s' ), '<button class="button-link update-theme" type="button">' . __( 'Update now' ) . '</button>' ); ?></p></div>
-                       <# } #>
-
-                       <# if ( data.theme.active ) { #>
-                               <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 <# if ( data.theme.isActiveTheme ) { #>
+                               <h3 class="theme-name" id="{{ data.theme.id }}-name">
</ins><span class="cx" style="display: block; padding: 0 10px">                                         <?php
</span><span class="cx" style="display: block; padding: 0 10px">                                        /* translators: %s: theme name */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        printf( __( '<span>Current:</span> %s' ), '{{ data.theme.name }}' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 printf( __( '<span>Active:</span> %s' ), '{{{ data.theme.name }}}' );
</ins><span class="cx" style="display: block; padding: 0 10px">                                         ?>
</span><span class="cx" style="display: block; padding: 0 10px">                                </h3>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                <div class="theme-actions">
-                                       <button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button>
-                               </div>
-                               <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
-                       <# } else if ( 'installed' === data.theme.type ) { #>
-                               <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
-                               <div class="theme-actions">
-                                       <button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-slug="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></span>
-                               </div>
-                               <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
</del><span class="cx" style="display: block; padding: 0 10px">                         <# } else { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         <h3 class="theme-name" id="{{ data.theme.id }}-name">{{{ data.theme.name }}}</h3>
</ins><span class="cx" style="display: block; padding: 0 10px">                                 <div class="theme-actions">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        <button type="button" class="button button-primary theme-install preview" aria-label="<?php echo esc_attr( $install_label ); ?>" data-slug="{{ data.theme.id }}" data-name="{{ data.theme.name }}"><?php _e( 'Install & Preview' ); ?></button>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 <button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></button>
</ins><span class="cx" style="display: block; padding: 0 10px">                                 </div>
</span><span class="cx" style="display: block; padding: 0 10px">                        <# } #>
</span><span class="cx" style="display: block; padding: 0 10px">                </div>
</span></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizethemespanelphp"></a>
<div class="delfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Deleted: trunk/src/wp-includes/customize/class-wp-customize-themes-panel.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-themes-panel.php       2016-11-04 12:14:05 UTC (rev 39139)
+++ trunk/src/wp-includes/customize/class-wp-customize-themes-panel.php 2016-11-04 15:53:01 UTC (rev 39140)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,113 +0,0 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-<?php
-/**
- * Customize API: WP_Customize_Themes_Panel class
- *
- * @package WordPress
- * @subpackage Customize
- * @since 4.7.0
- */
-
-/**
- * Customize Themes Panel Class
- *
- * @since 4.7.0
- *
- * @see WP_Customize_Panel
- */
-class WP_Customize_Themes_Panel extends WP_Customize_Panel {
-
-       /**
-        * Panel type.
-        *
-        * @since 4.7.0
-        * @access public
-        * @var string
-        */
-       public $type = 'themes';
-
-       /**
-        * An Underscore (JS) template for rendering this panel's container.
-        *
-        * The themes panel renders a custom panel heading with the current theme and a switch themes button.
-        *
-        * @see WP_Customize_Panel::print_template()
-        *
-        * @since 4.7.0
-        * @access protected
-        */
-       protected function render_template() {
-               ?>
-               <li id="accordion-section-{{ data.id }}" class="accordion-section control-panel-themes">
-                       <h3 class="accordion-section-title">
-                               <?php
-                               if ( $this->manager->is_theme_active() ) {
-                                       echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> {{ data.title }}';
-                               } else {
-                                       echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> {{ data.title }}';
-                               }
-                               ?>
-
-                               <?php
-                               if ( current_user_can( 'switch_themes' ) ) : ?>
-                                       <button type="button" class="button change-theme" aria-label="<?php _e( 'Change theme' ); ?>"><?php _ex( 'Change', 'theme' ); ?></button>
-                               <?php endif; ?>
-                       </h3>
-                       <ul class="accordion-sub-container control-panel-content"></ul>
-               </li>
-               <?php
-       }
-
-       /**
-        * An Underscore (JS) template for this panel's content (but not its container).
-        *
-        * Class variables for this panel class are available in the `data` JS object;
-        * export custom variables by overriding WP_Customize_Panel::json().
-        *
-        * @since 4.7.0
-        * @access protected
-        *
-        * @see WP_Customize_Panel::print_template()
-        */
-       protected function content_template() {
-               ?>
-               <li class="filter-themes-count">
-                       <span class="themes-displayed"><?php
-                               /* translators: %s: number of themes displayed; plural forms cannot be accommodated here so assume plurality or translate as "Themes: %s" */
-                               echo sprintf( __( 'Displaying %s themes' ), '<span class="theme-count">0</span>' );
-                       ?></span>
-                       <button type="button" class="button button-primary see-themes"><?php
-                               /* translators: %s: number of themes displayed; plural forms cannot be accommodated here so assume plurality or omit the count and translate as "Show themes" */
-                               echo sprintf( __( 'Show %s themes' ), '<span class="theme-count">0</span>' );
-                       ?></button>
-                       <button type="button" class="button button-primary filter-themes"><?php _e( 'Filter themes' ); ?></button>
-               </li>
-               <li class="panel-meta customize-info accordion-section <# if ( ! data.description ) { #> cannot-expand<# } #>">
-                       <button class="customize-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
-                       <div class="accordion-section-title">
-                               <span class="preview-notice"><?php
-                                       /* translators: %s: themes panel title in the Customizer */
-                                       echo sprintf( __( 'You are browsing %s' ), '<strong class="panel-title">' . __( 'Themes' ) . '</strong>' ); // Separate strings for consistency with other panels.
-                               ?></span>
-                               <?php if ( current_user_can( 'install_themes' ) && ! is_multisite() ) : ?>
-                                       <# if ( data.description ) { #>
-                                               <button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
-                                       <# } #>
-                               <?php endif; ?>   
-                       </div>
-                       <?php if ( current_user_can( 'install_themes' ) && ! is_multisite() ) : ?>
-                               <# if ( data.description ) { #>
-                                       <div class="description customize-panel-description">
-                                               {{{ data.description }}}
-                                       </div>
-                               <# } #>
-                       <?php endif; ?>
-               </li>
-               <li id="customize-container"></li><?php // Used as a full-screen overlay transition after clicking to preview a theme. ?>
-               <li class="customize-themes-full-container-container">
-                       <ul class="customize-themes-full-container">
-                               <li class="customize-themes-notifications"></li>
-                       </ul>
-               </li>
-               <?php
-       }
-}
</del></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizethemessectionphp"></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/customize/class-wp-customize-themes-section.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-themes-section.php     2016-11-04 12:14:05 UTC (rev 39139)
+++ trunk/src/wp-includes/customize/class-wp-customize-themes-section.php       2016-11-04 15:53:01 UTC (rev 39140)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -10,7 +10,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px">  * Customize Themes Section class.
</span><span class="cx" style="display: block; padding: 0 10px">  *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * A UI container for theme controls, which are displayed in tabbed sections.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * A UI container for theme controls, which behaves like a backwards Panel.
</ins><span class="cx" style="display: block; padding: 0 10px">  *
</span><span class="cx" style="display: block; padding: 0 10px">  * @since 4.2.0
</span><span class="cx" style="display: block; padding: 0 10px">  *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -28,115 +28,57 @@
</span><span class="cx" style="display: block; padding: 0 10px">        public $type = 'themes';
</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">-         * Theme section action.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  * Render the themes section, which behaves like a panel.
</ins><span class="cx" style="display: block; padding: 0 10px">          *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         * Defines the type of themes to load (installed, featured, latest, etc.).
-        *
-        * @since 4.7.0
-        * @access public
-        * @var string
-        */
-       public $action = '';
-
-       /**
-        * Text before theme section heading.
-        *
-        * @since 4.7.0
-        * @access public
-        * @var string
-        */
-       public $text_before = '';
-
-       /**
-        * Get section parameters for JS.
-        *
-        * @since 4.7.0
-        * @access public
-        * @return array Exported parameters.
-        */
-       public function json() {
-               $exported = parent::json();
-               $exported['action'] = $this->action;
-               $exported['text_before'] = $this->text_before;
-
-               return $exported;
-       }
-
-       /**
-        * Render a themes section as a JS template.
-        *
-        * The template is only rendered by PHP once, so all actions are prepared at once on the server side.
-        *
-        * @since 4.7.0
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  * @since 4.2.0
</ins><span class="cx" style="display: block; padding: 0 10px">          * @access protected
</span><span class="cx" style="display: block; padding: 0 10px">         */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        protected function render_template() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ protected function render() {
+               $classes = 'accordion-section control-section control-section-' . $this->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">-                <li id="accordion-section-{{ data.id }}" class="theme-section">
-                       <# if ( '' !== data.text_before ) { #>
-                               <p class="customize-themes-text-before">{{ data.text_before }}</p>
-                       <# } #>
-                       <# if ( 'search' === data.action ) { #>
-                               <div class="search-form customize-themes-section-title themes-section-search_themes">
-                                       <label class="screen-reader-text" for="wp-filter-search-input">{{ data.title }}</label>
-                                       <input placeholder="{{ data.title }}" type="text" aria-describedby="live-search-desc" id="wp-filter-search-input" class="wp-filter-search">
-                                       <span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
-                               </div>
-                       <# } else { #>
-                               <# if ( 'favorites' === data.action || 'feature_filter' === data.action ) {
-                                       var attr = ' aria-expanded="false"';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
+                       <h3 class="accordion-section-title">
+                               <?php
+                               if ( $this->manager->is_theme_active() ) {
+                                       echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
</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">-                                        var attr = '';
-                               } #>
-                               <button type="button" class="customize-themes-section-title themes-section-{{ data.id }}"{{{ attr }}}>{{ data.title }}</button>
-                       <# } #>
-                       <?php if ( ! current_user_can( 'install_themes' ) || is_multisite() ) : ?>
-                               <# if ( 'installed' === data.action ) { #>
-                                       <p class="themes-filter-container">
-                                               <label for="themes-filter">
-                                                       <span class="screen-reader-text"><?php _e( 'Search installed themes&hellip;' ); ?></span>
-                                                       <input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes&hellip;' ); ?>" />
-                                               </label>
-                                       </p>
-                               <# } #>
-                       <?php endif; ?>
-                       <# if ( 'favorites' === data.action ) { #>
-                               <div class="favorites-form filter-details">
-                                       <p class="install-help"><?php _e( 'If you have marked themes as favorites on WordPress.org, you can browse them here.' ); ?></p>
-                                       <p>
-                                               <label for="wporg-username-input"><?php _e( 'Your WordPress.org username:' ); ?></label>
-                                               <input type="search" id="wporg-username-input" value="">
-                                               <button type="button" class="button button-secondary favorites-form-submit"><?php _e( 'Get Favorites' ); ?></button>
-                                       </p>
-                               </div>
-                       <# } else if ( 'feature_filter' === data.action ) { #>
-                               <div class="filter-drawer filter-details">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
+                               }
+                               ?>
+
+                               <?php if ( count( $this->controls ) > 0 ) : ?>
+                                       <button type="button" class="button change-theme" tabindex="0"><?php _ex( 'Change', 'theme' ); ?></button>
+                               <?php endif; ?>
+                       </h3>
+                       <div class="customize-themes-panel control-panel-content themes-php">
+                               <h3 class="accordion-section-title customize-section-title">
+                                       <span class="customize-action"><?php _e( 'Customizing' ); ?></span>
+                                       <?php _e( 'Themes' ); ?>
+                                       <span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
+                               </h3>
+                               <h3 class="accordion-section-title customize-section-title">
</ins><span class="cx" style="display: block; padding: 0 10px">                                         <?php
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        $feature_list = get_theme_feature_list();
-                                       foreach ( $feature_list as $feature_name => $features ) {
-                                               echo '<fieldset class="filter-group">';
-                                               $feature_name = esc_html( $feature_name );
-                                               echo '<legend><button type="button" class="button-link" aria-expanded="false">' . $feature_name . '</button></legend>';
-                                               echo '<div class="filter-group-feature">';
-                                               foreach ( $features as $feature => $feature_name ) {
-                                                       $feature = esc_attr( $feature );
-                                                       echo '<input type="checkbox" id="filter-id-' . $feature . '" value="' . $feature . '" /> ';
-                                                       echo '<label for="filter-id-' . $feature . '">' . $feature_name . '</label><br>';
-                                               }
-                                               echo '</div>';
-                                               echo '</fieldset>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 if ( $this->manager->is_theme_active() ) {
+                                               echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
+                                       } else {
+                                               echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
</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">-                                </div>
-                       <# } #>
-                       <div class="customize-themes-section themes-section-{{ data.id }} control-section-content themes-php">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 <button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>
+                               </h3>
+
</ins><span class="cx" style="display: block; padding: 0 10px">                                 <div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+                               <div id="customize-container"></div>
+                               <?php if ( count( $this->controls ) > 4 ) : ?>
+                                       <p><label for="themes-filter">
+                                               <span class="screen-reader-text"><?php _e( 'Search installed themes&hellip;' ); ?></span>
+                                               <input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes&hellip;' ); ?>" />
+                                       </label></p>
+                               <?php endif; ?>
</ins><span class="cx" style="display: block; padding: 0 10px">                                 <div class="theme-browser rendered">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        <div class="error unexpected-error" style="display: none; "><p><?php _e( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' ); ?></p></div>
-                                       <ul class="themes">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 <ul class="themes accordion-section-content">
</ins><span class="cx" style="display: block; padding: 0 10px">                                         </ul>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
-                                       <p class="spinner"></p>
</del><span class="cx" style="display: block; padding: 0 10px">                                 </div>
</span><span class="cx" style="display: block; padding: 0 10px">                        </div>
</span><span class="cx" style="display: block; padding: 0 10px">                </li>
</span></span></pre></div>
<a id="trunktestsphpunittestscustomizemanagerphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/customize/manager.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/customize/manager.php   2016-11-04 12:14:05 UTC (rev 39139)
+++ trunk/tests/phpunit/tests/customize/manager.php     2016-11-04 15:53:01 UTC (rev 39140)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1506,7 +1506,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                $data = json_decode( $json, true );
</span><span class="cx" style="display: block; padding: 0 10px">                $this->assertNotEmpty( $data );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'changeset', 'timeouts', 'l10n' ), array_keys( $data ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'changeset', 'timeouts' ), array_keys( $data ) );
</ins><span class="cx" style="display: block; padding: 0 10px">                 $this->assertEquals( $autofocus, $data['autofocus'] );
</span><span class="cx" style="display: block; padding: 0 10px">                $this->assertArrayHasKey( 'save', $data['nonce'] );
</span><span class="cx" style="display: block; padding: 0 10px">                $this->assertArrayHasKey( 'preview', $data['nonce'] );
</span></span></pre>
</div>
</div>

</body>
</html>