Changeset 27499

Timestamp:

03/11/2014 07:46:27 AM (11 years ago)

Author:

nacin

Message:

Bring the theme browsing experience from 3.8 to the theme installer. First pass.

props matveb with assists from me and gcorne.
see #27055.

Location:

trunk/src

Files:

• wp-admin/css/themes.css (modified) (2 diffs)
• wp-admin/includes/theme-install.php (modified) (6 diffs)
• wp-admin/js/theme-install.js (deleted)
• wp-admin/js/theme-preview.js (deleted)
• wp-admin/js/theme.js (modified) (11 diffs)
• wp-admin/theme-install.php (modified) (5 diffs)
• wp-admin/update.php (modified) (1 diff)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/src/wp-admin/css/themes.css

@@ -26 +26 @@
 }
 
-.themes-php .wrap .theme-count {
+.themes-php .wrap .theme-count,
+.theme-navigation .theme-count {
     color: #fff;
     -webkit-border-radius: 30px;
@@ -1065 +1066 @@
 ------------------------------------------------------------------------------*/
 
-.theme-install-php h4 {
-    margin: 2.5em 0 8px;
-}
-
-.theme-install-php .tablenav {
-    height: auto;
-}
-
-.theme-install-php .spinner {
-    margin-top: 9px;
-}
-
-.available-theme {
+.theme-install-php h2 .upload {
+    margin-left: 10px;
+}
+.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;
+    font-size: 13px;
+    margin: 20px 0 30px;
+    padding: 0 20px;
+    position: relative;
+    width: 100%;
+}
+.upload-theme {
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    display: none;
+    margin: 0px 0 0;
+    padding: 0;
+    width: 100%;
     overflow: hidden;
-    padding: 20px 20px 20px 0;
+    position: relative;
+        top: 10px;
+}
+.upload-theme.opened {
+    display: block;
+}
+.upload-theme .wp-upload-form {
+    background: #fafafa;
+    border: 1px solid #e5e5e5;
+    padding: 30px;
+    margin: 30px auto;
+    max-width: 380px;
+}
+.upload-theme .install-help {
+    color: #999;
+    font-size: 18px;
+    font-style: normal;
+    margin: 0;
+    padding: 40px 0 0;
+    text-align: center;
+}
+.upload-theme.opened + .theme-navigation,
+.upload-theme.opened + .theme-navigation + .theme-browser {
+    display: none;
+}
+.theme-navigation .theme-count {
+    top: 3px;
+    margin-left: 0;
+}
+.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;
+}
+.theme-section.current,
+.theme-filter.current {
+    border-bottom: 4px solid #666;
+    color: #222;
+}
+.theme-top-filters {
+    display: inline-block;
+}
+.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;
+}
+.theme-install-php .theme-search {
+    position: absolute;
+        right: 10px;
+        top: 9px;
+    font-size: 16px;
+    font-weight: 300;
+    line-height: 1.5;
+    width: 280px;
+}
+.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;
-    width: 300px;
-}
-
-.available-theme .screenshot {
-    width: 300px;
-    height: 225px;
-    display: block;
-    border: 1px solid #ccc;
-    margin-bottom: 10px;
-    overflow: hidden;
-    background-color: #fff;
-}
-
-.available-theme img {
-    width: 300px;
-}
-
-.available-theme h3 {
-    margin: 15px 0 0;
-}
-
-.available-theme .theme-author {
-    line-height: 18px;
-}
-
-.available-theme .action-links {
-    margin-top: 10px;
-    overflow: hidden;
-}
-
-.available-theme a.screenshot:focus {
-    border-color: #777;
-}
-
-.available-theme .action-links li {
-    float: left;
-    padding-right: 10px;
-    margin-right: 10px;
-    border-right: 1px solid #dfdfdf;
-}
-
-.available-theme .action-links li {
-    padding-right: 8px;
-    margin-right: 8px;
-}
-
-.ie8 .available-theme .action-links li {
-    padding-right: 7px;
-    margin-right: 7px;
-}
-
-.available-theme .action-links li:last-child {
-    padding-right: 0;
-    margin-right: 0;
-    border-right: 0;
-}
-
-.available-theme .action-links .delete-theme {
-    float: right;
-    margin-left: 8px;
-    margin-right: 0;
-}
-
-.available-theme .action-links .delete-theme a {
-    color: red;
-    padding: 2px;
-}
-
-.available-theme .action-links .delete-theme a:hover {
-    background: red;
+    -moz-transition: color .1s ease-in 0;
+    -webkit-transition: color .1s ease-in 0;
+    transition: color .1s ease-in 0;
+    text-align: center;
+}
+.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;
-    }
-}
-
-/* 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%;
-    }
-}
-
-.feature-filter {
-    padding: 8px 12px 0;
-}
-
-.feature-filter .feature-group {
-    float: left;
-    margin: 5px 10px 10px;
-}
-
-.feature-filter .feature-group li {
+}
+.more-filters-container {
+    display: none;
+    padding: 30px;
+    border-top: 1px solid #eee;
+    margin: 0 -20px;
+    background: #fafafa;
+}
+body.more-filters-opened .more-filters-container {
+    display: block;
+}
+.theme-install-php .add-new-theme {
+    display: none !important;
+}
+
+.rating {
+    margin: 30px 0;
+}
+.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;
 }
 

trunk/src/wp-admin/includes/theme-install.php

@@ -133 +133 @@
 <?php
 }
-add_action('install_themes_dashboard', 'install_themes_dashboard');
-
-function install_themes_upload($page = 1) {
+// add_action('install_themes_dashboard', 'install_themes_dashboard');
+
+function install_themes_upload() {
 ?>
-<h4><?php _e('Install a theme in .zip format'); ?></h4>
 <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'); ?>">
@@ -146 +145 @@
     <?php
 }
-add_action('install_themes_upload', 'install_themes_upload', 10, 1);
+// add_action('install_themes_upload', 'install_themes_upload', 10, 0);
 
 /**
@@ -156 +155 @@
     _deprecated_function( __FUNCTION__, '3.4' );
     global $wp_list_table;
+    if ( ! isset( $wp_list_table ) ) {
+        $wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
+    }
+    $wp_list_table->prepare_items();
     $wp_list_table->single_row( $theme );
 }
@@ -167 +170 @@
     global $wp_list_table;
 
+    if ( ! isset( $wp_list_table ) ) {
+        $wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
+    }
+    $wp_list_table->prepare_items();
     $wp_list_table->display();
-}
-add_action('install_themes_search', 'display_themes');
-add_action('install_themes_featured', 'display_themes');
-add_action('install_themes_new', 'display_themes');
-add_action('install_themes_updated', 'display_themes');
+
+}
+// add_action('install_themes_search', 'display_themes');
+// add_action('install_themes_featured', 'display_themes');
+// add_action('install_themes_new', 'display_themes');
+// add_action('install_themes_updated', 'display_themes');
 
 /**
@@ -180 +188 @@
  */
 function install_theme_information() {
-    global $tab, $themes_allowedtags, $wp_list_table;
+    global $wp_list_table;
 
     $theme = themes_api( 'theme_information', array( 'slug' => wp_unslash( $_REQUEST['theme'] ) ) );
@@ -188 +196 @@
 
     iframe_header( __('Theme Install') );
+    if ( ! isset( $wp_list_table ) ) {
+        $wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
+    }
     $wp_list_table->theme_installer_single( $theme );
     iframe_footer();

trunk/src/wp-admin/js/theme.js

@@ -13 +13 @@
 l10n = themes.data.l10n;
 
+// Shortcut for isInstall check
+themes.isInstall = !! themes.data.settings.isInstall;
+
 // Setup app structure
 _.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });
 
-themes.model = Backbone.Model.extend({});
+themes.Model = Backbone.Model.extend({
+    // Adds attributes to the default 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
@@ -29 +64 @@
 
     // 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
@@ -56 +92 @@
     },
 
+    // Defines search element container
+    searchContainer: $( '#wpbody h2:first' ),
+
     // Search input and view
     // for current theme collection
@@ -67 +106 @@
         }
 
-        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 );
@@ -96 +138 @@
 themes.Collection = Backbone.Collection.extend({
 
-    model: themes.model,
+    model: themes.Model,
 
     // Search terms
@@ -188 +230 @@
 
     events: {
-        'click': 'expand',
-        'keydown': 'expand',
-        'touchend': 'expand',
+        'click': themes.isInstall ? 'preview': 'expand',
+        'click .preview': 'preview',
+        'keydown': themes.isInstall ? 'preview': 'expand',
+        'touchend': themes.isInstall ? 'preview': 'expand',
         'touchmove': 'preventExpand'
     },
@@ -251 +294 @@
     preventExpand: function() {
         this.touchDrag = true;
+    },
+
+    preview: function( event ) {
+        // Bail if the user scrolled on a touch device
+        if ( this.touchDrag === true ) {
+            return this.touchDrag = false;
+        }
+
+        event.preventDefault();
+
+        event = event || window.event;
+
+        var preview = new themes.view.Preview({
+            model: this.model
+        });
+
+        preview.render();
+        $( 'div.wrap' ).append( preview.el );
     }
 });
@@ -416 +477 @@
 });
 
+// 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( '?theme=' + 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( '' ) );
+        return false;
+    },
+
+    collapse: function() {
+        this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
+        return false;
+    }
+});
+
 // Controls the rendering of div.themes,
 // a wrapper that will hold all the theme elements
@@ -733 +835 @@
 // 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: {
@@ -789 +891 @@
         // 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
@@ -806 +908 @@
             self.themes.doSearch( query );
         });
+
+        this.extraRoutes();
+    },
+
+    extraRoutes: function() {
+        return false;
     }
 };
 
+// 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 ) {
+        this.collection = this.options.parent.view.collection;
+
+        // Clear on escape.
+        if ( event.type === 'keyup' && event.which === 27 ) {
+            event.target.value = '';
+        }
+
+        _.debounce( _.bind( this.doSearch, this ), 300 )( event.target.value );
+    },
+
+    doSearch: function( value ) {
+        var request = {},
+            self = this;
+
+        request.search = value;
+
+        // Intercept an [author] search.
+        //
+        // If input value starts with `author:` send a request
+        // for `author` instead of a regular `search`
+        if ( value.substring( 0, 7 ) === 'author:' ) {
+            request.search = '';
+            request.author = value.slice( 7 );
+        }
+
+        // Intercept a [tag] search.
+        //
+        // If input value starts with `tag:` send a request
+        // for `tag` instead of a regular `search`
+        if ( value.substring( 0, 4 ) === 'tag:' ) {
+            request.search = '';
+            request.tag = [ value.slice( 4 ) ];
+        }
+
+        // Send Ajax POST request to api.wordpress.org/themes
+        themes.view.Installer.prototype.apiCall( request ).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' );
+                $( '.theme-browser' ).find( 'div.error' ).remove();
+        }).fail( function() {
+                $( '.theme-browser' ).find( 'div.error' ).remove();
+                $( '.theme-browser' ).append( '<div class="error"><p>' + l10n.error + '</p></div>' );
+        });
+
+        return false;
+    }
+});
+
+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'
+    },
+
+    // Send Ajax POST request to api.wordpress.org/themes
+    apiCall: function( request ) {
+        return $.ajax({
+            url: 'https://api.wordpress.org/themes/info/1.1/?action=query_themes',
+
+            // We want JSON data
+            dataType: 'json',
+            type: 'POST',
+            crossDomain: true,
+
+            // Request data
+            data: {
+                action: 'query_themes',
+                request: _.extend({
+                    per_page: 36,
+                    fields: {
+                        description: true,
+                        tested: true,
+                        requires: true,
+                        rating: true,
+                        downloaded: true,
+                        downloadLink: true,
+                        last_updated: true,
+                        homepage: true,
+                        num_ratings: true
+                    }
+                }, request)
+            },
+
+            beforeSend: function() {
+                // Spin it
+                $( 'body' ).addClass( 'loading-themes' );
+            }
+        });
+    },
+
+    // Handles all the rendering of the public theme directory
+    browse: function( section ) {
+        var self = this;
+
+        // @todo Cache the collection after fetching based on the section
+        this.collection = new themes.Collection();
+
+        // Create a new collection with the proper theme data
+        // for each section
+        this.apiCall({ browse: section }).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' );
+            $( '.theme-browser' ).find( 'div.error' ).remove();
+        });
+
+        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 ).addClass( 'rendered' );
+    },
+
+    // Initial render method
+    render: function() {
+        this.search();
+        this.uploader();
+        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 request,
+            $el = $( event.target ),
+            filter = $el.data( 'filter' ),
+            self = this;
+
+        // 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
+
+        // @todo Cache the collection after fetching based on the filter
+        request = { tag: [ filter ] };
+
+        // Send Ajax POST request to api.wordpress.org/themes
+        this.apiCall( request ).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' );
+                $( '.theme-browser' ).find( 'div.error' ).remove();
+        }).fail( function() {
+                $( '.theme-browser' ).find( 'div.error' ).remove();
+                $( '.theme-browser' ).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': 'preview',
+        'theme-install.php(?sort=:sort)': 'sort',
+        '': 'sort'
+    },
+
+    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({
+            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...
-jQuery( document ).ready(
-
-    // Bring on the themes
-    _.bind( themes.Run.init, themes.Run )
-
-);
+$( document ).ready(function() {
+    if ( themes.isInstall ) {
+        themes.RunInstaller.init();
+    } else {
+        themes.Run.init();
+    }
+});
 
 })( jQuery );

trunk/src/wp-admin/theme-install.php

@@ -7 +7 @@
  */
 
-if ( !defined( 'IFRAME_REQUEST' ) && isset( $_GET['tab'] ) && ( 'theme-information' == $_GET['tab'] ) )
-    define( 'IFRAME_REQUEST', true );
-
 /** WordPress Administration Bootstrap */
 require_once( dirname( __FILE__ ) . '/admin.php' );
+require( ABSPATH . 'wp-admin/includes/theme-install.php' );
+
+wp_reset_vars( array( 'tab' ) );
 
 if ( ! current_user_can('install_themes') )
@@ -21 +21 @@
 }
 
-$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-preview' );
-
-$body_id = $tab;
+}
+
+$sections = array(
+    'featured' => __( 'Featured Themes' ),
+    'popular'  => __( 'Popular Themes' ),
+    'new'      => __( 'Newest Themes' ),
+);
+
+wp_localize_script( 'theme', '_wpThemeSettings', array(
+    'themes'   => false,
+    'settings' => array(
+        'isInstall'     => true,
+        'canInstall'    => current_user_can( 'install_themes' ),
+        'installURI'    => current_user_can( 'install_themes' ) ? self_admin_url( 'theme-install.php' ) : null,
+        'adminUrl'      => parse_url( self_admin_url(), PHP_URL_PATH ),
+        'updateURI'     => self_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' => $sections,
+    ),
+) );
+
+wp_enqueue_script( 'theme' );
 
 /**
@@ -44 +68 @@
  * @since 2.8.0
  */
-do_action( "install_themes_pre_{$tab}" );
+if ( $tab ) {
+    do_action( "install_themes_pre_{$tab}" );
+}
 
 $help_overview =
@@ -74 +100 @@
 
 include(ABSPATH . 'wp-admin/admin-header.php');
+
 ?>
 <div class="wrap">
-<h2><?php echo esc_html( $title ); ?></h2>
-<?php
-
-$wp_list_table->views(); ?>
-
-<br class="clear" />
+    <h2>
+        <?php echo esc_html( $title ); ?>
+        <a class="upload button button-secondary"><?php esc_html_e( 'Upload Theme' ); ?></a>
+    </h2>
+
+    <div class="upload-theme">
+    <?php install_themes_upload(); ?>
+    </div>
+
+    <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>
+
+    <span class="spinner"></span>
+
+    <br class="clear" />
 <?php
 /**
@@ -94 +145 @@
  * @param int $paged Number of the current page of results being viewed.
  */
-do_action( "install_themes_{$tab}", $paged );
+if ( $tab ) {
+    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 _ex( 'Details &amp; Preview', 'theme' ); ?></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-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="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>
+                    <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');

trunk/src/wp-admin/update.php

@@ -203 +203 @@
         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.
 

trunk/src/wp-includes/script-loader.php

@@ -455 +455 @@
 
         $scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'wp-backbone' ), false, 1 );
-        $scripts->add( 'theme-install', "/wp-admin/js/theme-install$suffix.js", array( 'jquery' ), false, 1 );
-
-        // @todo: Core no longer uses theme-preview.js. Remove?
-        $scripts->add( 'theme-preview', "/wp-admin/js/theme-preview$suffix.js", array( 'thickbox', 'jquery' ), false, 1 );
 
         $scripts->add( 'inline-edit-post', "/wp-admin/js/inline-edit-post$suffix.js", array( 'jquery', 'suggest', 'heartbeat' ), false, 1 );