Ticket #27055: 27055.9.diff

src/wp-admin/css/themes.css

@@ -25 +25 @@
         margin-left: 20px;
 }
 
-.themes-php .wrap .theme-count {
+.themes-php .wrap .theme-count,
+.theme-navigation .theme-count {
         color: #fff;
         -webkit-border-radius: 30px;
         border-radius: 30px;
@@ -1064 +1065 @@
   16.2 - Install Themes
 ------------------------------------------------------------------------------*/
 
-.theme-install-php h4 {
-        margin: 2.5em 0 8px;
-}
-
-.theme-install-php .tablenav {
-        height: auto;
-}
-
-.theme-install-php .spinner {
-        margin-top: 9px;
+.theme-install-php h2 .upload {
+        margin-left: 10px;
 }
-
-.available-theme {
+.theme-navigation {
+        background: #fff;
+        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        color: #555;
         display: inline-block;
-        margin-right: 10px;
-        overflow: hidden;
-        padding: 20px 20px 20px 0;
-        vertical-align: top;
-        width: 300px;
+        font-size: 13px;
+        margin: 20px 0 30px;
+        padding: 0 20px;
+        position: relative;
+        width: 100%;
 }
-
-.available-theme .screenshot {
-        width: 300px;
-        height: 225px;
-        display: block;
-        border: 1px solid #ccc;
-        margin-bottom: 10px;
+.upload-theme {
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        display: none;
+        margin: 0px 0 0;
+        padding: 0;
+        width: 100%;
         overflow: hidden;
-        background-color: #fff;
+        position: relative;
+                top: 10px;
 }
-
-.available-theme img {
-        width: 300px;
+.upload-theme.opened {
+        display: block;
 }
-
-.available-theme h3 {
-        margin: 15px 0 0;
+.upload-theme .wp-upload-form {
+        background: #fafafa;
+        border: 1px solid #e5e5e5;
+        padding: 30px;
+        margin: 30px auto;
+        max-width: 380px;
 }
-
-.available-theme .theme-author {
-        line-height: 18px;
+.upload-theme .install-help {
+        color: #999;
+        font-size: 18px;
+        font-style: normal;
+        margin: 0;
+        padding: 40px 0 0;
+        text-align: center;
 }
-
-.available-theme .action-links {
-        margin-top: 10px;
-        overflow: hidden;
+.upload-theme.opened + .theme-navigation,
+.upload-theme.opened + .theme-navigation + .theme-browser {
+        display: none;
 }
-
-.available-theme a.screenshot:focus {
-        border-color: #777;
+.theme-navigation .theme-count {
+        top: 3px;
+        margin-left: 0;
 }
-
-.available-theme .action-links li {
-        float: left;
-        padding-right: 10px;
-        margin-right: 10px;
-        border-right: 1px solid #dfdfdf;
+.theme-section,
+.theme-filter {
+        border-bottom: 4px solid #fff;
+        color: #666;
+        cursor: pointer;
+        display: inline-block;
+        margin: 0 10px;
+        padding: 15px 0;
+        -moz-transition: border-color .1s ease-in;
+        -webkit-transition: border-color .1s ease-in;
 }
-
-.available-theme .action-links li {
-        padding-right: 8px;
-        margin-right: 8px;
+.theme-section.current,
+.theme-filter.current {
+        border-bottom: 4px solid #666;
+        color: #222;
 }
-
-.ie8 .available-theme .action-links li {
-        padding-right: 7px;
-        margin-right: 7px;
+.theme-top-filters {
+        display: inline-block;
 }
-
-.available-theme .action-links li:last-child {
-        padding-right: 0;
-        margin-right: 0;
-        border-right: 0;
+.theme-navigation .more-filters {
+        color: #666;
+        cursor: pointer;
+        display: inline-block;
+        margin: 0 10px;
+        padding: 4px 5px;
+        -moz-transition: color .1s ease-in, background .1s ease-in;
+        -webkit-transition: color .1s ease-in, background .1s ease-in;
+        transition: color .1s ease-in, background .1s ease-in;
+}
+body.more-filters-opened .more-filters,
+.theme-navigation .more-filters.current {
+        background: rgb(46, 162, 204);
+        border-radius: 2px;
+        border: none;
+        color: #fff;
 }
-
-.available-theme .action-links .delete-theme {
-        float: right;
-        margin-left: 8px;
-        margin-right: 0;
+.theme-install-php .theme-search {
+        position: absolute;
+                right: 10px;
+                top: 9px;
+        font-size: 16px;
+        font-weight: 300;
+        line-height: 1.5;
+        width: 280px;
 }
-
-.available-theme .action-links .delete-theme a {
-        color: red;
-        padding: 2px;
+.more-filters:before {
+        color: #777;
+        text-align: center;
+        margin: 0 5px 0 0;
+        content: "\f111";
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        -webkit-font-smoothing: antialiased;
+        font-size: 16px;
+        line-height: 1;
+        font-family: "dashicons";
+        text-decoration: inherit;
+        font-weight: normal;
+        font-style: normal;
+        vertical-align: top;
+        -moz-transition: color .1s ease-in 0;
+        -webkit-transition: color .1s ease-in 0;
+        transition: color .1s ease-in 0;
+        text-align: center;
 }
-
-.available-theme .action-links .delete-theme a:hover {
-        background: red;
+.more-filters.current:before {
         color: #fff;
-        text-decoration: none;
-}
-
-.available-theme .action-links p {
-        float: left;
-}
-
-/* Allow for three-up in small windows when sidebar is collapsed */
-@media only screen and (max-width: 1200px) {
-        .folded .available-theme,
-        .folded .available-theme .screenshot {
-                width: 300px;
-        }
-
-        .folded .available-theme .screenshot {
-                height: 225px;
-        }
 }
-
-/* Adjust three-up display in smaller windows when sidebar is collapsed */
-@media only screen and (max-width: 1079px) {
-        .folded .available-theme,
-        .folded .available-theme .screenshot {
-                width: 270px;
-        }
-
-        .folded .available-theme .screenshot {
-                height: 203px;
-        }
+.more-filters-container {
+        display: none;
+        padding: 30px;
+        border-top: 1px solid #eee;
+        margin: 0 -20px;
+        background: #fafafa;
 }
-
-/* Allow for three-up on 1024px wide screens, e.g. tablets */
-@media only screen and (max-width: 1200px) {
-        .available-theme,
-        .available-theme .screenshot {
-                width: 240px;
-        }
-
-        .available-theme .screenshot {
-                height: 180px;
-        }
-
-        .available-theme img {
-                width: 100%;
-        }
+body.more-filters-opened .more-filters-container {
+        display: block;
 }
-
-.feature-filter {
-        padding: 8px 12px 0;
+.theme-install-php .add-new-theme {
+        display: none !important;
 }
 
-.feature-filter .feature-group {
-        float: left;
-        margin: 5px 10px 10px;
+.rating {
+        margin: 30px 0;
 }
-
-.feature-filter .feature-group li {
+.rating span:before {
+        color: #e6b800;
+        content: "\f154";
         display: inline-block;
+        -webkit-font-smoothing: antialiased;
+        font: normal 20px/1 'dashicons';
         vertical-align: top;
-        list-style-type: none;
-        padding-right: 25px;
-        width: 150px;
+}
+/* Half stars */
+.rating-10 span.one:before,
+.rating-30 span.two:before,
+.rating-50 span.three:before,
+.rating-70 span.four:before,
+.rating-90 span.five:before {
+        content: "\f459";
+}
+/* Full stars */
+.rating-20 span.one:before {
+        content: "\f155";
+}
+.rating-30 span.one:before,
+.rating-40 span.one:before,
+.rating-40 span.two:before {
+        content: "\f155";
+}
+.rating-50 span.one:before,
+.rating-50 span.two:before,
+.rating-60 span.one:before,
+.rating-60 span.two:before,
+.rating-60 span.three:before {
+        content: "\f155";
+}
+.rating-70 span.one:before,
+.rating-70 span.two:before,
+.rating-70 span.three:before,
+.rating-80 span.one:before,
+.rating-80 span.two:before,
+.rating-80 span.three:before,
+.rating-80 span.four:before {
+        content: "\f155";
+}
+.rating-90 span.one:before,
+.rating-90 span.two:before,
+.rating-90 span.three:before,
+.rating-90 span.four:before,
+.rating-100 span.one:before,
+.rating-100 span.two:before,
+.rating-100 span.three:before,
+.rating-100 span.four:before,
+.rating-100 span.five:before {
+        content: "\f155";
+}
+.rating .votes {
+        display: inline;
+        margin-left: 10px;
+        line-height: 20px;
+}
+.loading-themes .theme-browser,
+.error .theme-browser {
+        display: none;
+}
+.loading-themes .spinner {
+        display: block;
+        margin: 40px auto 0;
+        float: none;
 }
 
 /*------------------------------------------------------------------------------

src/wp-admin/includes/theme.php

@@ -453 +453 @@
          */
         $prepared_themes = apply_filters( 'wp_prepare_themes_for_js', $prepared_themes );
         return array_values( $prepared_themes );
+}
+
+
+/**
+ * Get public themes from the themes directory
+ * and prepare them for JavaScript
+ *
+ * @since 3.8.0
+ *
+ * @uses themes_api themes_directory_sections
+ * @return array with $theme objects
+ */
+function prepare_public_themes_for_js( $themes = array() ) {
+
+        $sections = array(
+                'featured' => __( 'Featured Themes' ),
+                'popular'  => __( 'Popular Themes' ),
+                'new'      => __( 'Newest Themes' ),
+        );
+
+        $sections = array_keys( $sections );
+
+        $args = array(
+                'page' => 1,
+                'per_page' => 24,
+        );
+
+        foreach ( $sections as $section ) {
+                $args['browse'] = $section;
+                $themes[ $section ] = themes_api( 'query_themes', $args );
+        }
+
+        return $themes;
 }
+ No newline at end of file

src/wp-admin/js/theme.js

@@ -12 +12 @@
 themes.data = _wpThemeSettings;
 l10n = themes.data.l10n;
 
+// Shortcut for (bool) isBrowsing check
+themes.isInstall = themes.data.settings.isBrowsing;
+
 // Setup app structure
-_.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });
+_.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template, orgAPI: {} });
 
-themes.model = Backbone.Model.extend({});
+themes.Model = Backbone.Model.extend({
+        // Adds attributes to the defaul data coming through the .org themes api
+        // Map `id` to `slug` for shared code
+        initialize: function() {
+                var install, preview;
+
+                // Install url for the theme
+                // using the install nonce
+                install = {
+                        action: 'install-theme',
+                        theme: this.get( 'slug' ),
+                        _wpnonce: themes.data.settings._nonceInstall
+                };
+
+                // Build the url query
+                install = themes.data.settings.updateURI + '?' + $.param( install );
+
+                // Preview url for the theme
+                preview = {
+                        tab: 'theme-information',
+                        theme: this.get( 'slug' )
+                };
+
+                preview = themes.data.settings.installURI + '?' + $.param( preview );
+
+                // Set the attributes
+                this.set({
+                        installURI: install,
+                        previewURI: preview,
+                        id: this.get( 'slug' )
+                });
+        }
+});
 
 // Main view controller for themes.php
 // Unifies and renders all available views
@@ -28 +63 @@
         page: 0,
 
         // Sets up a throttler for binding to 'scroll'
-        initialize: function() {
+        initialize: function( options ) {
                 // Scroller checks how far the scroll position is
                 _.bindAll( this, 'scroller' );
 
+                this.SearchView = options.SearchView ? options.SearchView : themes.view.Search;
                 // Bind to the scroll event and throttle
                 // the results from this.scroller
                 this.window.bind( 'scroll', _.throttle( this.scroller, 300 ) );
@@ -55 +91 @@
                 this.$el.append( '<br class="clear"/>' );
         },
 
+        // Defines search element container
+        searchContainer: $( '#wpbody h2:first' ),
+
         // Search input and view
         // for current theme collection
         search: function() {
@@ -66 +105 @@
                         return;
                 }
 
-                view = new themes.view.Search({ collection: self.collection, parent: this });
+                view = new this.SearchView({
+                        collection: self.collection,
+                        parent: this
+                });
 
                 // Render and append after screen title
                 view.render();
-                $('#wpbody h2:first')
+                this.searchContainer
                         .append( $.parseHTML( '<label class="screen-reader-text" for="theme-search-input">' + l10n.search + '</label>' ) )
                         .append( view.el );
         },
@@ -95 +137 @@
 // @has 'id' 'name' 'screenshot' 'author' 'authorURI' 'version' 'active' ...
 themes.Collection = Backbone.Collection.extend({
 
-        model: themes.model,
+        model: themes.Model,
 
         // Search terms
         terms: '',
@@ -188 +230 @@
 
         events: {
                 'click': 'expand',
+                'click .preview': 'preview',
                 'keydown': 'expand',
                 'touchend': 'expand',
                 'touchmove': 'preventExpand'
@@ -250 +293 @@
 
         preventExpand: function() {
                 this.touchDrag = true;
+        },
+
+        preview: function( event ) {
+                event.preventDefault();
+
+                event = event || window.event;
+
+                var preview = new themes.view.Preview({
+                        model: this.model
+                });
+
+                preview.render();
+                $( '#appearance' ).append( preview.el );
         }
 });
 
@@ -415 +471 @@
         }
 });
 
+// Theme Preview view
+// Set ups a modal overlay with the expanded theme data
+themes.view.Preview = wp.Backbone.View.extend({
+
+        className: 'wp-full-overlay expanded',
+        el: '#theme-installer',
+
+        events: {
+                'click .close-full-overlay': 'close',
+                'click .collapse-sidebar': 'collapse'
+        },
+
+        // The HTML template for the theme preview
+        html: themes.template( 'theme-preview' ),
+
+        render: function() {
+                var data = this.model.toJSON();
+                this.$el.html( this.html( data ) );
+
+                themes.router.navigate( themes.router.baseUrl( '?preview=' + this.model.get( 'id' ) ), { replace: true } );
+
+                this.$el.fadeIn( 200, function() {
+                        $( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
+                });
+        },
+
+        close: function() {
+                this.$el.fadeOut( 200, function() {
+                        $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
+                });
+
+                themes.router.navigate( themes.router.baseUrl( '' ) );
+        },
+
+        collapse: function() {
+                this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
+        }
+});
+
 // Controls the rendering of div.themes,
 // a wrapper that will hold all the theme elements
 themes.view.Themes = wp.Backbone.View.extend({
@@ -732 +827 @@
 
 // Sets up the routes events for relevant url queries
 // Listens to [theme] and [search] params
-themes.routes = Backbone.Router.extend({
+themes.Router = Backbone.Router.extend({
 
         routes: {
                 'themes.php?theme=:slug': 'theme',
@@ -788 +883 @@
                 var self = this;
                 // Bind to our global thx object
                 // so that the object is available to sub-views
-                themes.router = new themes.routes();
+                themes.router = new themes.Router();
 
                 // Handles theme details route event
                 themes.router.on( 'route:theme', function( slug ) {
@@ -805 +900 @@
                         self.view.trigger( 'theme:close' );
                         self.themes.doSearch( query );
                 });
+
+                this.extraRoutes();
+        },
+
+        extraRoutes: function() {
+                return false;
         }
 };
 
-// Ready...
-jQuery( document ).ready(
+// Extend the main Search view
+themes.view.InstallerSearch =  themes.view.Search.extend({
+
+        events: {
+                'keyup': 'search'
+        },
+
+        // Handles Ajax request for searching through themes in public repo
+        search: function( event ) {
+                var data,
+                        self = this;
 
-        // Bring on the themes
-        _.bind( themes.Run.init, themes.Run )
+                this.collection = this.options.parent.view.collection;
+
+                // Clear on escape.
+                if ( event.type === 'keyup' && event.which === 27 ) {
+                        event.target.value = '';
+                }
+
+                // Construct the main `search` request
+                // using the default values
+                data = _.defaults( {}, themes.orgAPI.data );
+
+                data.request.search = event.target.value;
+
+                // Intercept an [author] search.
+                //
+                // If input value starts with `author:` send a request
+                // for `author` instead of a regular `search`
+                if ( event.target.value.substring( 0, 7 ) === 'author:' ) {
+                        data.request.search = '';
+                        data.request.author = event.target.value.slice( 7 );
+                }
+
+                // Intercept a [tag] search.
+                //
+                // If input value starts with `tag:` send a request
+                // for `tag` instead of a regular `search`
+                if ( event.target.value.substring( 0, 4 ) === 'tag:' ) {
+                        data.request.search = '';
+                        data.request.tag = [ event.target.value.slice( 4 ) ];
+                }
+
+                // Send Ajax POST request to api.wordpress.org/themes
+                $.ajax({
+                        url: themes.orgAPI.url,
+
+                        // We want JSON data
+                        dataType: 'json',
+                        type: 'POST',
+                        crossDomain: true,
+
+                        // Request data
+                        data: data,
+
+                        beforeSend: function() {
+                                // Spin it
+                                $( 'body' ).addClass( 'loading-themes' );
+                        }
+                })
+                        .done( function( data ) {
+                                // Update the collection with the queried data
+                                self.collection.reset( data.themes );
+                                // Trigger a collection refresh event to render the views
+                                self.collection.trigger( 'update' );
+
+                                // Un-spin it
+                                $( 'body' ).removeClass( 'loading-themes' );
+                                $( '#appearance' ).find( 'div.error' ).remove();
+                })
+                        .fail( function() {
+                                $( '#appearance' ).find( 'div.error' ).remove();
+                                $( '#appearance' ).append( '<div class="error"><p>' + l10n.error + '</p></div>' );
+                });
+
+                return false;
+        }
+});
+
+// Store api.wordpress.org/themes values and structure
+// for internal access
+themes.orgAPI = {
+
+        // Default data request
+        data: {
+                action: 'query_themes',
+                request: {}
+        },
+
+        url: 'https://api.wordpress.org/themes/info/1.1/?action=query_themes'
+};
+
+themes.view.Installer = themes.view.Appearance.extend({
+
+        el: '#wpbody-content .wrap',
+
+        // Register events for sorting and filters in theme-navigation
+        events: {
+                'click .theme-section': 'onSort',
+                'click .theme-filter': 'onFilter',
+                'click .more-filters': 'moreFilters'
+        },
+
+        // Handles all the rendering of the public theme directory
+        browse: function( section ) {
+                // Create a new collection with the proper theme data
+                // for each section
+                this.collection = new themes.Collection( themes.data.browse.publicThemes[ section ].themes );
+
+                if ( this.view ) {
+                        this.view.remove();
+                }
+
+                // Set ups the view and passes the section argument
+                this.view = new themes.view.Themes({
+                        collection: this.collection,
+                        section: section,
+                        parent: this
+                });
+
+                // Reset pagination every time the install view handler is run
+                this.page = 0;
+
+                // Render and append
+                this.$el.find( '.themes' ).remove();
+                this.view.render();
+                this.$el.find( '.theme-browser' ).append( this.view.el );
+
+                this.uploader();
+        },
 
-);
+        // Initial render method
+        render: function() {
+                this.search();
+                return this.browse( this.options.section );
+        },
+
+        // Sorting navigation
+        onSort: function( event ) {
+                var $el = $( event.target ),
+                        sort = $el.data( 'sort' );
+
+                // Bail if this is already active
+                if ( $el.hasClass( this.activeClass ) ) {
+                        return;
+                }
+
+                this.sort( sort );
+
+                // Trigger a router.naviagte update
+                themes.router.navigate( themes.router.baseUrl( '?sort=' + sort ) );
+        },
+
+        sort: function( sort ) {
+                $( '#theme-search-input' ).val( '' );
+
+                $( '.theme-section, .theme-filter' ).removeClass( this.activeClass );
+                $( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
+
+                this.browse( sort );
+        },
+
+        // Filters and Tags
+        onFilter: function( event ) {
+                var $el = $( event.target ),
+                        filter = $el.data( 'filter' ),
+                        self = this,
+                        data;
+
+                // Bail if this is already active
+                if ( $el.hasClass( this.activeClass ) ) {
+                        return;
+                }
+
+                $( '.theme-filter, .theme-section' ).removeClass( this.activeClass );
+                $el.addClass( this.activeClass );
+
+                if ( ! filter ) {
+                        return;
+                }
+
+                // Construct the filter request
+                // using the default values
+                data = _.defaults( {}, themes.orgAPI.data );
+
+                data.request = _.defaults({
+                        tag: [ filter ]
+                }, themes.orgAPI.data.request );
+
+                // Send Ajax POST request to api.wordpress.org/themes
+                $.ajax({
+                        url: themes.orgAPI.url,
+
+                        // We want JSON data
+                        dataType: 'json',
+                        type: 'POST',
+                        crossDomain: true,
+
+                        // Request data
+                        data: data,
+
+                        beforeSend: function() {
+                                // Spin it
+                                $( 'body' ).addClass( 'loading-themes' );
+                        }
+                })
+                        .done( function( data ) {
+                                // Update the collection with the queried data
+                                self.collection.reset( data.themes );
+                                // Trigger a collection refresh event to render the views
+                                self.collection.trigger( 'update' );
+
+                                // Un-spin it
+                                $( 'body' ).removeClass( 'loading-themes' );
+                                $( '#appearance' ).find( 'div.error' ).remove();
+                })
+                        .fail( function() {
+                                $( '#appearance' ).find( 'div.error' ).remove();
+                                $( '#appearance' ).append( '<div class="error"><p>' + l10n.error + '</p></div>' );
+                });
+
+                return false;
+        },
+
+        activeClass: 'current',
+
+        // Overwrite search container class to append search
+        // in new location
+        searchContainer: $( '.theme-navigation' ),
+
+        uploader: function() {
+                $( 'a.upload.button' ).on( 'click', function() {
+                        $( '.upload-theme' )
+                                .toggleClass( 'opened' )
+                                .hasClass( 'opened' ) ? $( this ).text( l10n.back ) : $( this ).text( l10n.upload );
+                });
+        },
+
+        moreFilters: function() {
+                $( 'body' ).toggleClass( 'more-filters-opened' );
+        }
+});
+
+themes.InstallerRouter = Backbone.Router.extend({
+        routes: {
+                'theme-install.php?theme=:slug': 'theme',
+                '': 'sort',
+                'theme-install.php(?sort=:sort)': 'sort',
+                'theme-install.php?preview=:slug': 'preview'
+        },
+
+        baseUrl: function( url ) {
+                return 'theme-install.php' + url;
+        }
+});
+
+
+themes.RunInstaller = {
+
+        init: function() {
+                // Set up the view
+                // Passes the default 'section' as an option
+                this.view = new themes.view.Installer({
+                        el: $( '#appearance' ),
+                        section: 'featured',
+                        SearchView: themes.view.InstallerSearch
+                });
+
+                // Render results
+                this.render();
+
+        },
+
+        render: function() {
+
+                // Render results
+                this.view.render();
+                this.routes();
+
+                Backbone.history.start({
+                        root: themes.data.settings.adminUrl,
+                        pushState: true,
+                        hashChange: false
+                });
+        },
+
+        routes: function() {
+                var self = this;
+                // Bind to our global thx object
+                // so that the object is available to sub-views
+                themes.router = new themes.InstallerRouter();
+
+                // Handles theme details route event
+                themes.router.on( 'route:theme', function( slug ) {
+                        self.view.view.expand( slug );
+                });
+
+                themes.router.on( 'route:sort', function( sort ) {
+                        if ( ! sort ) {
+                                sort = 'featured';
+                        }
+                        self.view.sort( sort );
+                        self.view.trigger( 'theme:close' );
+                });
+
+                this.extraRoutes();
+        },
+
+        extraRoutes: function() {
+                return false;
+        }
+};
+
+// Ready...
+$( document ).ready(function() {
+        if ( themes.isInstall ) {
+                themes.RunInstaller.init();
+        } else {
+                themes.Run.init();
+        }
+});
 
 })( jQuery );
 

src/wp-admin/theme-install.php

@@ -20 +20 @@
         exit();
 }
 
-$wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
-$pagenum = $wp_list_table->get_pagenum();
-$wp_list_table->prepare_items();
+// $wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
+// $pagenum = $wp_list_table->get_pagenum();
+// $wp_list_table->prepare_items();
 
-$title = __('Install Themes');
+$title = __( 'Add Themes' );
 $parent_file = 'themes.php';
-if ( !is_network_admin() )
+
+if ( ! is_network_admin() ) {
         $submenu_file = 'themes.php';
+}
 
-wp_enqueue_script( 'theme-install' );
+// wp_enqueue_script( 'theme-install' );
 wp_enqueue_script( 'theme-preview' );
 
-$body_id = $tab;
+wp_localize_script( 'theme', '_wpThemeSettings', array(
+        'themes'   => false,
+        'settings' => array(
+                'isBrowsing'    => (bool) ( get_current_screen()->id == 'theme-install' ),
+                'canInstall'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ),
+                'installURI'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ) ? admin_url( 'theme-install.php' ) : null,
+                'adminUrl'      => parse_url( admin_url(), PHP_URL_PATH ),
+                'updateURI'     => admin_url( 'update.php' ),
+                '_nonceInstall' => wp_create_nonce( 'install-theme' )
+        ),
+        'l10n' => array(
+                'addNew' => __( 'Add New Theme' ),
+                'search'  => __( 'Search Themes' ),
+                'searchPlaceholder' => __( 'Search themes...' ),
+                'upload' => __( 'Upload Theme' ),
+                'back'   => __( 'Back' ),
+                'error'  => __( 'There was a problem trying to load the themes. Please, try again.' ),
+        ),
+        'browse' => array(
+                'sections' => apply_filters( 'install_theme_sections', array(
+                        'featured' => __( 'Featured Themes' ),
+                        'popular'  => __( 'Popular Themes' ),
+                        'new'      => __( 'Newest Themes' ),
+                ) ),
+                'publicThemes' => ( get_current_screen()->id == 'theme-install' ) ? prepare_public_themes_for_js() : null,
+        ),
+) );
+
+wp_enqueue_script( 'theme' );
+
+// $body_id = $tab;
 
 /**
  * Fires before each of the tabs are rendered on the Install Themes page.
@@ -43 +75 @@
  *
  * @since 2.8.0
  */
-do_action( "install_themes_pre_{$tab}" );
+// do_action( "install_themes_pre_{$tab}" );
 
 $help_overview =
         '<p>' . sprintf(__('You can find additional themes for your site by using the Theme Browser/Installer on this screen, which will display themes from the <a href="%s" target="_blank">WordPress.org Theme Directory</a>. These themes are designed and developed by third parties, are available free of charge, and are compatible with the license WordPress uses.'), 'https://wordpress.org/themes/') . '</p>' .
@@ -73 +105 @@
 );
 
 include(ABSPATH . 'wp-admin/admin-header.php');
+
+/**
+ * Uploader
+ */
+function install_themes_upload() {
+        ?>
+        <div class="upload-theme">
+                <p class="install-help"><?php _e( 'If you have a theme in a .zip format, you may install it by uploading it here.' ); ?></p>
+                <form method="post" enctype="multipart/form-data" class="wp-upload-form" action="<?php echo self_admin_url('update.php?action=upload-theme'); ?>">
+                        <?php wp_nonce_field( 'theme-upload'); ?>
+                        <input type="file" name="themezip" />
+                        <?php submit_button( __( 'Install Now' ), 'button', 'install-theme-submit', false ); ?>
+                </form>
+        </div>
+        <?php
+}
+add_action( 'install_themes_upload', 'install_themes_upload', 10, 1 );
+
 ?>
-<div class="wrap">
-<h2><?php echo esc_html( $title ); ?></h2>
-<?php
+<div id="appearance" class="wrap">
+        <h2>
+                <?php echo esc_html( $title ); ?>
+                <a class="upload button button-secondary"><?php esc_html_e( 'Upload Theme' ); ?></a>
+        </h2>
+
+        <?php install_themes_upload(); ?>
+
+        <div class="theme-navigation">
+                <span class="theme-count"></span>
+                <span class="theme-section current" data-sort="featured"><?php esc_html_e( 'Featured' ); ?></span>
+                <span class="theme-section" data-sort="popular"><?php esc_html_e( 'Popular' ); ?></span>
+                <span class="theme-section" data-sort="new"><?php esc_html_e( 'Latest' ); ?></span>
+                <div class="theme-top-filters">
+                        <span class="theme-filter" data-filter="photoblogging">Photography</span>
+                        <span class="theme-filter" data-filter="responsive-layout">Responsive</span>
+                        <span class="theme-filter more-filters">More</span>
+                </div>
+                <div class="more-filters-container">
+                        Display more filters.
+                </div>
+        </div>
+        <div class="theme-browser"></div>
+        <div class="theme-overlay"></div>
+        <div id="theme-installer" class="wp-full-overlay expanded"></div>
 
-$wp_list_table->views(); ?>
+        <span class="spinner"></span>
 
-<br class="clear" />
+        <br class="clear" />
 <?php
 /**
  * Fires at the top of each of the tabs on the Install Themes page.
@@ -93 +165 @@
  *
  * @param int $paged Number of the current page of results being viewed.
  */
-do_action( "install_themes_{$tab}", $paged );
+// do_action( "install_themes_{$tab}", $paged );
 ?>
 </div>
+
+
+<script id="tmpl-theme" type="text/template">
+        <# if ( data.screenshot_url ) { #>
+                <div class="theme-screenshot">
+                        <img src="{{ data.screenshot_url }}" alt="" />
+                </div>
+        <# } else { #>
+                <div class="theme-screenshot blank"></div>
+        <# } #>
+        <span class="more-details"><?php _e( 'Theme Details' ); ?></span>
+        <div class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></div>
+        <h3 class="theme-name">{{{ data.name }}}</h3>
+
+        <div class="theme-actions">
+                <a class="button button-primary" href="{{{ data.installURI }}}"><?php esc_html_e( 'Install' ); ?></a>
+                <a class="button button-secondary preview install-theme-preview" href=""><?php esc_html_e( 'Preview' ); ?></a>
+        </div>
+</script>
+
+<script id="tmpl-theme-single" type="text/template">
+        <div class="theme-backdrop"></div>
+        <div class="theme-wrap">
+                <div class="theme-header">
+                        <button alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></button>
+                        <button alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></button>
+                        <button alt="<?php _e( 'Close overlay' ); ?>" class="close dashicons dashicons-no"></button>
+                </div>
+                <div class="theme-about">
+                        <div class="theme-screenshots">
+                        <# if ( data.screenshot_url ) { #>
+                                <div class="screenshot"><img src="{{ data.screenshot_url }}" alt="" /></div>
+                        <# } else { #>
+                                <div class="screenshot blank"></div>
+                        <# } #>
+                        </div>
+
+                        <div class="theme-info">
+                                <h3 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{{ data.version }}}' ); ?></span></h3>
+                                <h4 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></h4>
+                                <p class="theme-description">{{{ data.description }}}</p>
+
+                                <div class="rating rating-{{ Math.round( data.rating / 10 ) * 10 }}">
+                                        <span class="one"></span>
+                                        <span class="two"></span>
+                                        <span class="three"></span>
+                                        <span class="four"></span>
+                                        <span class="five"></span>
+                                        <p class="votes"><?php printf( __( 'Based on %s ratings.' ), '{{{ data.num_ratings }}}' ); ?></p>
+                                </div>
+
+                                <# if ( data.tags ) { #>
+                                        <p class="theme-tags">
+                                                <span><?php _e( 'Tags:' ); ?></span>
+                                                <# _.each( data.tags, function( tag ) { #>
+                                                        {{{ tag }}}
+                                                <# }); #>
+                                        </p>
+                                <# } #>
+                        </div>
+                </div>
+
+                <div class="theme-actions">
+                        <a href="{{{ data.installURI }}}" class="button button-primary"><?php _e( 'Install' ); ?></a>
+                        <a href="" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
+                        <a href="{{{ data.homepage }}}" class="button button-secondary"><?php _e( 'More Info' ); ?></a>
+                </div>
+        </div>
+</script>
+
+<script id="tmpl-theme-preview" type="text/template">
+        <div class="wp-full-overlay-sidebar">
+                <div class="wp-full-overlay-header">
+                        <a href="" class="close-full-overlay button-secondary"><?php _e( 'Close' ); ?></a>
+                        <a href="{{{ data.installURI }}}" class="button button-primary theme-install"><?php _e( 'Install' ); ?></a>
+                </div>
+                <div class="wp-full-overlay-sidebar-content">
+                        <div class="install-theme-info">
+                                <h3 class="theme-name">{{{ data.name }}}</h3>
+                                <span class="theme-by"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></span>
+
+                                <img class="theme-screenshot" src="{{ data.screenshot_url }}" alt="" />
+
+                                <div class="theme-details">
+                                        <div class="star-rating" title="4.5 rating based on 25 ratings"></div>
+                                        <div class="theme-version"><?php printf( __( 'Version: %s' ), '{{{ data.version }}}' ); ?></div>
+                                        <div class="theme-description">{{{ data.description }}}</div>
+                                </div>
+                        </div>
+                </div>
+                <div class="wp-full-overlay-footer">
+                        <a href="" class="collapse-sidebar" title="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
+                                <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
+                                <span class="collapse-sidebar-arrow"></span>
+                        </a>
+                </div>
+        </div>
+        <div class="wp-full-overlay-main">
+                <iframe src="{{{ data.preview_url }}}" />
+        </div>
+</script>
+
 <?php
 include(ABSPATH . 'wp-admin/admin-footer.php');

src/wp-admin/update.php

@@ -202 +202 @@
 
                 include_once ABSPATH . 'wp-admin/includes/theme-install.php'; //for themes_api..
 
-                check_admin_referer('install-theme_' . $theme);
+                check_admin_referer( 'install-theme' );
                 $api = themes_api('theme_information', array('slug' => $theme, 'fields' => array('sections' => false, 'tags' => false) ) ); //Save on a bit of bandwidth.
 
                 if ( is_wp_error($api) )