Ticket #28673: 28673.2.diff

trunk/src/wp-admin/admin-ajax.php

@@ -60 +60 @@
         'wp-remove-post-lock', 'dismiss-wp-pointer', 'upload-attachment', 'get-attachment',
         'query-attachments', 'save-attachment', 'save-attachment-compat', 'send-link-to-editor',
         'send-attachment-to-editor', 'save-attachment-order', 'heartbeat', 'get-revision-diffs',
-        'save-user-color-scheme', 'update-widget', 'query-themes', 'parse-embed', 'set-attachment-thumbnail'
+        'save-user-color-scheme', 'update-widget', 'query-themes', 'query-plugins', 'parse-embed', 
+        'set-attachment-thumbnail'
 );
 
 // Register core Ajax calls.
@@ -73 +74 @@
 add_action( 'wp_ajax_nopriv_heartbeat', 'wp_ajax_nopriv_heartbeat', 1 );
 
 if ( is_user_logged_in() ) {
+
         /**
          * Fires authenticated AJAX actions for logged-in users.
          *

trunk/src/wp-admin/css/colors/_admin.scss

@@ -434 +434 @@
         background: $highlight-color;
 }
 
-.theme-section.current,
-.theme-filter.current {
-        border-bottom-color: $menu-background;
-}
-
-body.more-filters-opened .more-filters {
-        color: $menu-text;
-        background-color: $menu-background;
-}
-
-body.more-filters-opened .more-filters:before {
-        color: $menu-text;
-}
-
-body.more-filters-opened .more-filters:hover,
-body.more-filters-opened .more-filters:focus {
-        background-color: $menu-highlight-background;
-        color: $menu-highlight-text;
-}
-
-body.more-filters-opened .more-filters:hover:before,
-body.more-filters-opened .more-filters:focus:before {
-        color: $menu-highlight-text;
-}
-
 .theme-install-overlay .close-full-overlay:hover,
 .theme-install-overlay .close-full-overlay:focus,
 .theme-install-overlay .previous-theme:hover,
@@ -469 +444 @@
         color: $menu-highlight-text;
 }
 
+/* Filter */
+
+.wp-filter-link.current {
+        border-bottom-color: $menu-background;
+}
+
+body.show-filter-drawer {
+        .wp-filter-drawer-toggle {
+                background-color: $menu-background;
+                color: $menu-text;
+        }
+        .wp-filter-drawer-toggle:before {
+                color: $menu-text;
+        }
+        .wp-filter-drawer-toggle:hover,
+        .wp-filter-drawer-toggle:focus {
+                background-color: $menu-highlight-background;
+                color: $menu-highlight-text;    
+        }
+        .wp-filter-drawer-toggle:hover:before,
+        .wp-filter-drawer-toggle:focus:before {
+                color: $menu-highlight-text;    
+        }
+}
+
 /* Widgets */
 
 .widgets-chooser li.widgets-chooser-selected {
@@ -529 +529 @@
         background: $menu-highlight-background;
 }
 
-.star-rating .star {
+.star-rating .star,
+.rating span:before {
         color: $highlight-color;
 }
 

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

@@ -627 +627 @@
         padding-right: 0;
 }
 
+.wp-title-count {
+        display: inline;
+        padding: 4px 10px;
+        -webkit-border-radius: 30px;
+        border-radius: 30px;
+        background: #777;
+        font-size: 14px;
+        font-weight: 600;
+        color: #fff;
+        position: relative;
+        top: -3px;
+        margin-left: 5px;
+        margin-right: 20px;
+}
+
 .wp-dialog {
         background-color: #fff;
 }
@@ -1800 +1815 @@
         margin: 6px 0 0;
 }
 
+.rating span:before {
+        content: "\f154";
+        display: inline-block;
+        -webkit-font-smoothing: antialiased;
+        font: normal 20px/1 'dashicons';
+        vertical-align: top;
+        color: #0074a2;
+}
+/* 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 .ratings {
+        display: inline;
+        margin-left: 10px;
+        line-height: 20px;
+        color: #999;
+}
+
 /* Plugin install thickbox */
 #plugin-information {
         background: #fcfcfc;

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

@@ +1 @@
+.wp-filter {
+        background: #fff;
+        border: 1px solid #e5e5e5;
+        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        color: #555;
+        display: inline-block;
+        font-size: 13px;
+        margin: 12px 0 22px;
+        padding: 0 20px;
+        position: relative;
+        width: 100%;
+}
+.wp-filter a {
+        text-decoration: none;
+}
+
+.wp-filter-count {
+        display: inline-block;
+        vertical-align: middle;
+        min-width: 4em;
+}
+.wp-filter-count .count {
+        display: inline-block;
+        padding: 4px 10px;
+        -webkit-border-radius: 30px;
+        border-radius: 30px;
+        background: #777;
+        font-size: 14px;
+        font-weight: 600;
+        color: #fff;
+        position: relative;
+        top: -1px;
+}
+
+.wp-filter-links {
+        margin: 0;
+        display: inline-block;
+}
+.wp-filter-links li {
+        margin: 0;
+        display: inline-block;
+}
+.wp-filter-link {
+        border-bottom: 4px solid #fff;
+        color: #666;
+        cursor: pointer;
+        display: inline-block;
+        margin: 0 10px;
+        padding: 15px 0;
+}
+.wp-filter-links .current {
+        border-bottom: 4px solid #666;
+        color: #222;
+}
+
+.wp-filter-search {
+        position: absolute;
+        right: 10px;
+        top: 9px;
+        left: auto;
+        font-size: 16px;
+        font-weight: 300;
+        line-height: 1.5;
+        width: 280px;
+        padding: 3px 5px;
+}
+
+.wp-filter-drawer-toggle {
+        color: #666;
+        cursor: pointer;
+        display: inline-block;
+        margin: 0 10px;
+        padding: 4px 6px;
+}
+.wp-filter-drawer-toggle:before {
+        margin: 0 2px 0 0;
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
+        -webkit-transition: none;
+        transition: none;
+}
+
+.wp-filter-drawer {
+        display: none;
+        padding: 20px;
+        border-top: 1px solid #eee;
+        margin: 0 -20px;
+        background: #fafafa;
+}
+
+body.show-filter-drawer .wp-filter-drawer {
+        display: block;
+        overflow: hidden;
+}
+
+body.show-filter-drawer .wp-filter-drawer-toggle {
+        background: #777;
+        -webkit-border-radius: 2px;
+        border-radius: 2px;
+        border: none;
+        color: #fff;
+}
+
+body.show-filter-drawer .wp-filter-drawer-toggle:hover,
+body.show-filter-drawer .wp-filter-drawer-toggle:focus {
+        background: rgb(46, 162, 204);
+}
+
+body.show-filter-drawer .wp-filter-drawer-toggle:before {
+        color: #fff;
+}
+
+body.show-filter-drawer .wp-filter-link.current {
+        border-bottom: none;
+}
+
+.wp-filter-group {
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        float: left;
+        width: 19%;
+        background: #fff;
+        margin: 0 1% 0 0;
+        border: 1px solid #e5e5e5;
+        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+        padding: 10px;
+}
+.wp-filter-group-wide {
+        width: 38%;
+}
+.wp-filter-group-title {
+        margin: 0;
+        position: relative;
+}
+
+.wp-filter-drawer ol {
+        list-style-type: none;
+        margin: 20px 0 0;
+        font-size: 12px;
+}
+.wp-filter-drawer li {
+        display: inline-block;
+        vertical-align: top;
+        list-style-type: none;
+        margin: 5px 0;
+        padding-right: 25px;
+        width: 160px;
+}
+
+.wp-filter .button.wp-filter-drawer-apply {
+        margin: 0 0 20px;
+}
+.wp-filter .button.wp-filter-drawer-apply span {
+        display: inline-block;
+        font-size: 12px;
+        text-indent: 10px;
+        opacity: 0.8;
+}
+.wp-filter .button.wp-filter-drawer-clear {
+        display: none;
+        margin: 0 0 20px 10px;
+}
+
+.wp-filter-by {
+        display: none;
+        margin: 0;
+}
+.wp-filter-by > span {
+        font-weight: 600;
+}
+.wp-filter-by a {
+        margin-left: 10px;
+}
+.wp-filter-by .tags {
+        display: inline;
+}
+.wp-filter-by .tag {
+        background: #fff;
+        border: 1px solid #e5e5e5;
+        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+        font-size: 11px;
+        margin: 0 5px;
+        padding: 4px 8px;
+}
+
+body.filters-applied .wp-filter-group,
+body.filters-applied .wp-filter-drawer a.button,
+body.filters-applied .wp-filter-drawer br {
+        display: none !important;
+}
+body.filters-applied .wp-filter-by {
+        display: block;
+}
+body.filters-applied .wp-filter-drawer {
+        padding: 20px;
+}
+
+body.show-filter-drawer .wp-filter-content,
+body.show-filter-drawer.filters-applied.loading-content .wp-filter-content {
+        display: none;
+}
+body.show-filter-drawer.filters-applied .wp-filter-content {
+        display: block;
+}
+
+.loading-content .wp-filter-content,
+.error .wp-filter-content {
+        display: none;
+}
+.loading-content .spinner {
+        display: block;
+        margin: 40px auto 0;
+        float: none;
+}
+
+.wp-filter-notice {
+        color: #999;
+        font-size: 18px;
+        font-style: normal;
+        margin: 0;
+        padding: 0;
+        text-align: center;
+        display: none;
+}
+body.no-results .wp-filter-notice {
+        display: block;
+}
+
+@media only screen and (max-width: 1120px) {
+
+        .wp-filter-search {
+                margin: 20px 0;
+                position: static;
+                width: 100%;
+        }
+        
+        .wp-filter-drawer {
+                border-bottom: 1px solid #eee;
+        }
+        .wp-filter-group {
+                margin-bottom: 0;
+                margin-top: 5px;
+                width: 100%;
+        }
+        .wp-filter-group li {
+                margin: 10px 0;
+        }
+}
+
+@media only screen and (max-width: 782px) {
+
+        .wp-filter-group,
+        .wp-filter-group li {
+                width: 100%;
+        }
+
+}
+ No newline at end of file

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

@@ -751 +751 @@
         margin: -3px 3px;
 }
 
+/*------------------------------------------------------------------------------
+  21.0 - Upload File
+------------------------------------------------------------------------------*/
+
+.wp-upload-container {
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        margin: 0px 0 0;
+        padding: 0;
+        width: 100%;
+        overflow: hidden;
+        position: relative;
+        top: 10px;
+}
+.wp-upload-container-hidden {
+        display: none;
+}
+.wp-upload-container .wp-upload-form {
+        background: #fafafa;
+        border: 1px solid #e5e5e5;
+        padding: 30px;
+        margin: 30px auto;
+        max-width: 380px;
+}
+.wp-upload-container .install-help {
+        color: #999;
+        font-size: 18px;
+        font-style: normal;
+        margin: 0;
+        padding: 40px 0 0;
+        text-align: center;
+}
+
+body.show-upload-container .hide-on-upload,
+body.show-upload-container .wp-upload-show {
+        display: none;
+}
+body.show-upload-container .wp-upload-container-hidden {
+        display: block;
+}
+
+.wp-upload-hide {
+        display: none;
+}
+body.show-upload-container .wp-upload-hide {
+        display: inline;
+}
+
 /* =Media Queries
 -------------------------------------------------------------- */
 
+@media only screen and (max-width: 1120px) {
+        .wp-upload-container .wp-upload-form {
+                margin: 20px 0;
+                max-width: 100%;
+        }
+        .wp-upload-container .install-help {
+                font-size: 15px;
+                padding: 20px 0 0;
+                text-align: left;
+        }
+}
+
 @media screen and ( max-width: 782px ) {
         /* Input Elements */
         textarea {

trunk/src/wp-admin/css/list-tables.css

@@ -1216 +1216 @@
 }
 
 /* Plugin card table view */
+
+.plugin-browser .plugins {
+        clear: both;
+        padding: 0 0 100px;
+}
+
 .plugin-card {
         float: left;
         margin: 0 8px 16px;
@@ -1223 +1229 @@
         width: -webkit-calc( 50% - 8px );
         width: calc( 50% - 8px );
         background-color: #fff;
-        border: 1px solid #dedede;
+        border: 1px solid #e5e5e5;
+        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
 }
 
+.plugin-card .column-hidden {
+        display: none;
+}
+
+.plugin-card .column-visible {
+        display: block;
+}
+
+.plugin-card a {
+        text-decoration: none;
+}
+
 @media screen and ( max-width: 782px ) {
         .plugin-card {
                 margin-left: 0;
@@ -1237 +1257 @@
         }
 }
 
-.plugin-card:nth-child(odd) {
+.plugins .plugin:nth-child(odd) .plugin-card {
         clear: both;
         margin-left: 0;
 }
 
-.plugin-card:nth-child(even) {
+.plugins .plugin:nth-child(even) .plugin-card {
         margin-right: 0
 }
 
@@ -1280 +1300 @@
         clear: both;
         padding: 12px 20px;
         background-color: #fafafa;
-        border-top: 1px solid #dedede;
+        border-top: 1px solid #e5e5e5;
         overflow: hidden;
 }
 
-.plugin-card-bottom .star-rating {
+.plugin-card-bottom .rating {
         display: inline;
+        margin-right: .35em;
 }
+.plugin-card-bottom .rating span:before {
+        float: left;
+}
 
 .plugin-card .column-rating {
         line-height: 23px;

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

@@ -25 +25 @@
         margin-left: 20px;
 }
 
-.themes-php .wrap .theme-count,
-.theme-navigation .theme-count {
-        color: #fff;
-        -webkit-border-radius: 30px;
-        border-radius: 30px;
-        background: #777;
-        font-size: 14px;
-        padding: 4px 10px;
-        font-weight: 600;
-        margin-left: 5px;
-        margin-right: 20px;
-        position: relative;
-        top: -3px;
-}
-
-.theme-navigation a {
-        text-decoration:none;
-}
-
 /* Position admin messages */
 .themes-php div.updated,
 .themes-php div.error {
@@ -51 +32 @@
         clear: both;
 }
 
+/*
+ * The search form
+ */
+.themes-php .wp-filter-search {
+        position: relative;
+        top: -2px;
+        left: 20px;
+        font-size: 16px;
+        font-weight: 300;
+        line-height: 1.5;
+        width: 280px;
+        margin: 0;
+}
+
 .themes-php div.updated a {
         text-decoration: underline;
 }
@@ -401 +396 @@
         z-index: 2;
 }
 
-/*
- * The search form
- */
-.themes-php .theme-search {
-        position: relative;
-        top: -2px;
-        left: 20px;
-        font-size: 16px;
-        font-weight: 300;
-        line-height: 1.5;
-        width: 280px;
-}
-
 /**
  * Theme Overlay
  * Shown when clicking a theme
@@ -1024 +1006 @@
         .themes-php .wrap h2 {
                 width: 100%;
         }
-
-        .themes-php .theme-search {
+        
+        .themes-php .wp-filter-search {
                 float: none;
                 clear: both;
                 left: 0;
@@ -1088 +1070 @@
         display: none !important;
 }
 
-.theme-navigation {
-        background: #fff;
-        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
-        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-        color: #555;
-        display: inline-block;
-        font-size: 13px;
-        margin: 20px 0 30px;
-        padding: 0 20px;
-        position: relative;
-        width: 100%;
-}
-.theme-install-php a.upload,
-.theme-install-php a.browse-themes {
-        cursor: pointer;
-}
-.theme-install-php a.browse-themes,
-.theme-install-php.show-upload-theme a.upload {
-        display: none;
-}
-.theme-install-php.show-upload-theme a.browse-themes {
-        display: inline;
-}
-.upload-theme {
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-        display: none;
-        margin: 0px 0 0;
-        padding: 0;
-        width: 100%;
-        overflow: hidden;
-        position: relative;
-        top: 10px;
-}
-body.show-upload-theme .upload-theme {
-        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;
-}
-body.show-upload-theme .upload-theme + .theme-navigation,
-body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
-        display: none;
-}
-.theme-navigation .theme-count {
-        margin-left: 0;
-        position: absolute;
-        top: 12px;
-}
-.theme-count + .theme-section {
-        margin-left: 60px;
-}
-.theme-section,
-.theme-filter {
-        border-bottom: 4px solid #fff;
-        color: #666;
-        cursor: pointer;
-        display: inline-block;
-        margin: 0 10px;
-        padding: 15px 0;
-}
-.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 6px;
-}
-body.more-filters-opened .more-filters {
-        background: #777;
-        -webkit-border-radius: 2px;
-        border-radius: 2px;
-        border: none;
-        color: #fff;
-}
-
-body.more-filters-opened .more-filters:before {
-        color: #fff;
-}
-
-body.more-filters-opened .more-filters:hover,
-body.more-filters-opened .more-filters:focus {
-        background: rgb(46, 162, 204);
-}
-
-.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;
-        -webkit-transition: color .1s ease-in 0;
-        transition: color .1s ease-in 0;
-        text-align: center;
-}
-.more-filters.current:before {
-        color: #fff;
-}
-.more-filters-container {
-        display: none;
-        padding: 20px;
-        border-top: 1px solid #eee;
-        margin: 0 -20px;
-        background: #fafafa;
-}
-body.more-filters-opened .more-filters-container {
-        display: block;
-        overflow: hidden;
-}
-body.more-filters-opened .theme-section.current {
-        border-bottom: none;
-}
-body.more-filters-opened .theme-browser,
-body.more-filters-opened.filters-applied.loading-themes .theme-browser {
-        display: none;
-}
-body.more-filters-opened.filters-applied .theme-browser {
-        display: block;
-}
-.more-filters-container .filters-group {
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-        float: left;
-        width: 19%;
-        background: #fff;
-        margin: 0 1% 0 0;
-        border: 1px solid #e5e5e5;
-        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
-        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
-        padding: 10px;
-}
-.more-filters-container .wide-filters-group {
-        width: 38%;
-}
-.more-filters-container .feature-name {
-        margin: 0;
-        position: relative;
-}
-.more-filters-container ol {
-        list-style-type: none;
-        margin: 20px 0 0;
-        font-size: 12px;
-}
-.more-filters-container li {
-        display: inline-block;
-        vertical-align: top;
-        list-style-type: none;
-        margin: 5px 0;
-        padding-right: 25px;
-        width: 160px;
-}
-.theme-navigation .more-filters-container .apply-filters {
-        margin: 0 0 20px;
-}
-.theme-navigation .more-filters-container .clear-filters {
-        display: none;
-        margin: 0 0 20px 10px;
-}
-.more-filters-container .apply-filters span {
-        display: inline-block;
-        font-size: 12px;
-        text-indent: 10px;
-        opacity: 0.8;
-}
-.more-filters-container .filtering-by {
-        display: none;
-        margin: 0;
-}
-.more-filters-container .filtering-by > span {
-        font-weight: 600;
-}
-.more-filters-container .filtering-by .tags {
-        display: inline;
-}
-.more-filters-container .filtering-by .tag {
-        background: #fff;
-        border: 1px solid #e5e5e5;
-        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
-        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
-        font-size: 11px;
-        margin: 0 5px;
-        padding: 4px 8px;
-}
-.more-filters-container .filtering-by a {
-        margin-left: 10px;
-}
-body.filters-applied .more-filters-container .filters-group,
-body.filters-applied .more-filters-container a.button,
-body.filters-applied .more-filters-container br {
-        display: none !important;
-}
-body.filters-applied .more-filters-container .filtering-by {
-        display: block;
-}
-body.filters-applied .more-filters-container {
-        padding: 20px;
-}
-p.no-themes {
-        color: #999;
-        font-size: 18px;
-        font-style: normal;
-        margin: 0;
-        padding: 0;
-        text-align: center;
-        display: none;
-}
-body.no-results p.no-themes {
-        display: block;
-}
-body.show-upload-theme p.no-themes {
-        display: none !important;
-}
-
-
-.theme-install-php .add-new-theme {
-        display: none !important;
-}
-
-@media only screen and (max-width: 1120px) {
-        .theme-install-php .theme-search {
-                margin: 20px 0;
-                position: static;
-                width: 100%;
-        }
-        .more-filters-container {
-                border-bottom: 1px solid #eee;
-        }
-        .upload-theme .wp-upload-form {
-                margin: 20px 0;
-                max-width: 100%;
-        }
-        .upload-theme .install-help {
-                font-size: 15px;
-                padding: 20px 0 0;
-                text-align: left;
-        }
-        .more-filters-container .filters-group {
-                margin-bottom: 0;
-                margin-top: 5px;
-                width: 100%;
-        }
-        .more-filters-container .filters-group li {
-                margin: 10px 0;
-        }
-}
-
-@media only screen and (max-width: 782px) {
-        .more-filters-container .filters-group {
-                width: 100%;
-        }
-        .more-filters-container .filters-group li {
-                width: 100%;
-        }
-}
-
-.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;
-}
-/* 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 .ratings {
-        display: inline;
-        margin-left: 10px;
-        line-height: 20px;
-        color: #999;
-}
-.loading-themes .theme-browser,
-.error .theme-browser {
-        display: none;
-}
-.loading-themes .spinner {
-        display: block;
-        margin: 40px auto 0;
-        float: none;
-}
-
 /*------------------------------------------------------------------------------
   16.3 - Custom Header Screen
 ------------------------------------------------------------------------------*/
@@ -1618 +1230 @@
         overflow: auto;
 }
 
+.wp-full-overlay-sidebar .rating {
+        display: block;
+        margin: 30px 0;
+}
+.wp-full-overlay-sidebar .rating span:before {
+        color: #e6b800;
+}
+
 /* Close & Navigation Links */
 .theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
         padding: 0;

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

@@ -12 +12 @@
 @import url(nav-menus.css);
 @import url(widgets.css);
 @import url(l10n.css);
+@import url(filter.css);

trunk/src/wp-admin/includes/ajax-actions.php

@@ -2605 +2605 @@
 }
 
 /**
+ * Ajax handler for getting plugins from plugins_api().
+ *
+ * @since 4.0.0
+ */
+function wp_ajax_query_plugins() {
+        global $plugins_allowedtags, $plugins_field_defaults;
+        
+        if ( ! current_user_can( 'install_plugins' ) ) {
+                wp_send_json_error();
+        }
+        $args = wp_parse_args( wp_unslash( $_REQUEST['request'] ), array(
+                'per_page' => 20,
+                'fields'   => $plugins_field_defaults
+        ) );
+
+        $old_filter = isset( $args['browse'] ) ? $args['browse'] : 'search';
+
+        /** This filter is documented in wp-admin/includes/class-wp-theme-install-list-table.php */
+        $args = apply_filters( 'install_plugins_table_api_args_' . $old_filter, $args );
+
+        require( ABSPATH . 'wp-admin/includes/plugin-install.php' ); // Needed for plugins_api
+        
+        $api = plugins_api( 'query_plugins', $args );
+
+        if ( is_wp_error( $api ) ) {
+                wp_send_json_error();
+        }
+
+        foreach ( $api->plugins as &$plugin ) {
+                
+                if ( version_compare( substr( $GLOBALS['wp_version'], 0, strlen( $plugin->tested ) ), $plugin->tested, '>' ) ) {
+                        $plugin->compatibility = 'untested';
+                } else if ( version_compare( substr( $GLOBALS['wp_version'], 0, strlen( $plugin->requires ) ), $plugin->requires, '<' ) ) {
+                        $plugin->compatibility = 'incompatible';
+                } else {
+                        $plugin->compatibility = 'compatible';
+                }
+                
+                $details_link   = self_admin_url( 'plugin-install.php?tab=plugin-information&amp;plugin=' . $plugin->slug .
+                                                                '&amp;TB_iframe=true&amp;width=830&amp;height=654' );
+                                                                
+                /**
+                 * Filter the details link for a plugin.
+                 *
+                 * @since 4.0.0
+                 *
+                 * @param string $details_link Link to view the current plugin's details.
+                 * @param array  $plugin       The plugin currently being listed.
+                 */
+                $plugin->detail_url = apply_filters( 'plugin_install_details_link', $details_link, (array) $plugin );
+                
+                $action_links = array();
+                
+                $name = strip_tags( $plugin->name . ' ' . $plugin->version );
+                
+                $status = install_plugin_install_status( $plugin );
+                
+                switch ( $status['status'] ) {
+                        case 'install':
+                                if ( $status['url'] ) {
+                                        $action_links[]  = '<a class="install-now button" href="' . $status['url'] . '" title="' . esc_attr( sprintf( __( 'Install %s' ), $name ) ) . '">' . __( 'Install Now' ) . '</a>';
+                                }
+
+                                break;
+                        case 'update_available':
+                                if ( $status['url'] ) {
+                                        $action_links[] = '<a class="button" href="' . $status['url'] . '" title="' . esc_attr( sprintf( __( 'Update to version %s' ), $status['version'] ) ) . '">' . __( 'Update Now' ) . '</a>';
+                                }
+
+                                break;
+                        case 'latest_installed':
+                        case 'newer_installed':
+                                $action_links[] = '<span class="button button-disabled" title="' . esc_attr__( 'This plugin is already installed and is up to date' ) . ' ">' . _x( 'Installed', 'plugin' ) . '</span>';
+                                break;
+                }
+                
+                $action_links[] = '<a href="' . esc_attr( $details_link ) . '" class="thickbox" title="' .
+                                                                esc_attr( sprintf( __( 'More information about %s' ), $plugin->name ) ) . '">' . __( 'More Details' ) . '</a>';
+
+                /**
+                 * Filter the install action links for a plugin.
+                 *
+                 * @since 2.7.0
+                 *
+                 * @param array $action_links An array of plugin action hyperlinks. Defaults are links to Details and Install Now.
+                 * @param array $plugin       The plugin currently being listed.
+                 */
+                $plugin->action_links = apply_filters( 'plugin_install_action_links', $action_links, (array) $plugin );
+                
+                $plugin->name                                   = wp_kses( strip_tags( $plugin->name ), $plugins_allowedtags );
+                $plugin->author                                 = wp_kses( $plugin->author, $plugins_allowedtags );
+                $plugin->slug                                   = wp_kses( $plugin->slug, $plugins_allowedtags );
+                $plugin->version                                = wp_kses( $plugin->version, $plugins_allowedtags );
+                $plugin->description                    = strip_tags( $plugin->description );
+                $plugin->short_description              = strip_tags( $plugin->short_description );
+                $plugin->rating                                 = wp_kses( $plugin->rating, $plugins_allowedtags );
+                $plugin->ratings                                = wp_kses( $plugin->ratings, $plugins_allowedtags );
+                $plugin->num_ratings                    = $plugin->num_ratings;
+                $plugin->num_ratings_formatted  = number_format_i18n( $plugin->num_ratings );
+                $plugin->downloaded                             = number_format_i18n( $plugin->downloaded );
+                $plugin->last_updated                   = sprintf( __( '%s ago' ), human_time_diff( strtotime( $plugin->last_updated ) ) );
+        }
+
+        wp_send_json_success( $api );
+}
+
+/**
  * Apply [embed] handlers to a string.
  *
  * @since 4.0.0

trunk/src/wp-admin/includes/class-wp-plugin-install-list-table.php

@@ -27 +27 @@
                 // These are the tabs which are shown on the page
                 $tabs = array();
                 $tabs['dashboard'] = __( 'Search' );
-                if ( 'search' == $tab )
+                if ( 'search' == $tab ) {
                         $tabs['search'] = __( 'Search Results' );
-                $tabs['upload']    = __( 'Upload' );
+                }
                 $tabs['featured']  = _x( 'Featured', 'Plugin Installer' );
                 $tabs['popular']   = _x( 'Popular', 'Plugin Installer' );
                 $tabs['new']       = _x( 'Newest', 'Plugin Installer' );
@@ -40 +40 @@
 
                 $nonmenu_tabs = array( 'plugin-information' ); //Valid actions to perform which do not have a Menu item.
 
-                /**
-                 * Filter the tabs shown on the Plugin Install screen.
-                 *
-                 * @since 2.7.0
-                 *
-                 * @param array $tabs The tabs shown on the Plugin Install screen. Defaults are 'dashboard', 'search',
-                 *                    'upload', 'featured', 'popular', 'new', and 'favorites'.
-                 */
+                /** This filter is documented in wp-admin/plugin-install.php */
                 $tabs = apply_filters( 'install_plugins_tabs', $tabs );
 
                 /**
@@ -112 +105 @@
                  * Filter API request arguments for each Plugin Install screen tab.
                  *
                  * The dynamic portion of the hook name, $tab, refers to the plugin install tabs.
-                 * Default tabs are 'dashboard', 'search', 'upload', 'featured', 'popular', 'new',
+                 * Default tabs are 'dashboard', 'search', 'featured', 'popular', 'new',
                  * and 'favorites'.
                  *
                  * @since 3.7.0

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

@@ -126 +126 @@
 
 function install_dashboard() {
         ?>
-        <p><?php printf( __( 'Plugins extend and expand the functionality of WordPress. You may automatically install plugins from the <a href="%1$s">WordPress Plugin Directory</a> or upload a plugin in .zip format via <a href="%2$s">this page</a>.' ), 'https://wordpress.org/plugins/', self_admin_url( 'plugin-install.php?tab=upload' ) ); ?></p>
+        <p><?php printf( __( 'Plugins extend and expand the functionality of WordPress. You may automatically install plugins from the <a href="%1$s">WordPress Plugin Directory</a> or <a href="%2$s" class="wp-upload-show">upload a plugin</a> in .zip format.' ), 'https://wordpress.org/plugins/', self_admin_url( 'plugin-install.php?upload' ) ); ?></p>
 
         <h4><?php _e('Search') ?></h4>
         <?php install_search_form( false ); ?>
@@ -187 +187 @@
  */
 function install_plugins_upload( $page = 1 ) {
 ?>
-        <h4><?php _e('Install a plugin in .zip format'); ?></h4>
-        <p class="install-help"><?php _e('If you have a plugin 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-plugin'); ?>">
-                <?php wp_nonce_field( 'plugin-upload'); ?>
-                <label class="screen-reader-text" for="pluginzip"><?php _e('Plugin zip file'); ?></label>
-                <input type="file" id="pluginzip" name="pluginzip" />
-                <?php submit_button( __( 'Install Now' ), 'button', 'install-plugin-submit', false ); ?>
-        </form>
+        <div class="wp-upload-container wp-upload-container-hidden">
+                <p class="install-help"><?php _e( 'If you have a plugin 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-plugin' ); ?>">
+                        <?php wp_nonce_field( 'plugin-upload' ); ?>
+                        <label class="screen-reader-text" for="pluginzip"><?php _e( 'Plugin zip file' ); ?></label>
+                        <input type="file" id="pluginzip" name="pluginzip" />
+                        <?php submit_button( __( 'Install Now' ), 'button', 'install-plugin-submit', false ); ?>
+                </form>
+        </div>
 <?php
 }
 add_action('install_plugins_upload', 'install_plugins_upload', 10, 1);

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

@@ -136 +136 @@
 
 function install_themes_upload() {
 ?>
-<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>
-        <?php
+        <div class="wp-upload-container wp-upload-container-hidden">
+                <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, 0);
 

trunk/src/wp-admin/js/plugin-install.js

@@ -1 @@
-/* global plugininstallL10n, tb_click, confirm */
-
-/* Plugin Browser Thickbox related JS*/
-var tb_position;
-jQuery( document ).ready( function( $ ) {
-        tb_position = function() {
-                var tbWindow = $( '#TB_window' ),
-                        width = $( window ).width(),
-                        H = $( window ).height() - ( ( 850 < width ) ? 60 : 20 ),
-                        W = ( 850 < width ) ? 830 : width - 20;
-
-                if ( tbWindow.size() ) {
-                        tbWindow.width( W ).height( H );
-                        $( '#TB_iframeContent' ).width( W ).height( H );
-                        tbWindow.css({
-                                'margin-left': '-' + parseInt( ( W / 2 ), 10 ) + 'px'
-                        });
-                        if ( typeof document.body.style.maxWidth !== 'undefined' ) {
-                                tbWindow.css({
-                                        'top': ( ( 850 < width ) ? 30 : 10 ) + 'px',
-                                        'margin-top': '0'
-                                });
-                        }
-                }
-
-                return $( 'a.thickbox' ).each( function() {
-                        var href = $( this ).attr( 'href' );
-                        if ( ! href ) {
-                                return;
-                        }
-                        href = href.replace( /&width=[0-9]+/g, '' );
-                        href = href.replace( /&height=[0-9]+/g, '' );
-                        $(this).attr( 'href', href + '&width=' + W + '&height=' + ( H ) );
-                });
-        };
-
-        $( window ).resize( function() {
-                tb_position();
-        });
-
-        $('.plugins').on( 'click', 'a.thickbox', function() {
-                tb_click.call(this);
-
-                $('#TB_title').css({'background-color':'#222','color':'#cfcfcf'});
-                $('#TB_ajaxWindowTitle').html('<strong>' + plugininstallL10n.plugin_information + '</strong>&nbsp;' + $(this).attr('title') );
-                return false;
-        });
-
-        /* Plugin install related JS*/
-        $( '#plugin-information-tabs a' ).click( function( event ) {
-                var tab = $( this ).attr( 'name' );
-                event.preventDefault();
-                //Flip the tab
-                $( '#plugin-information-tabs a.current' ).removeClass( 'current' );
-                $( this ).addClass( 'current' );
-                //Only show the fyi box in the description section, on smaller screen, where it's otherwise always displayed at the top.
-                if ( 'description' != $( this ).attr( 'name' ) && $( 'body').width() < 830 )
-                        $( '#plugin-information-content div.fyi' ).hide();
-                else
-                        $( '#plugin-information-content div.fyi' ).show();
-                //Flip the content.
-                $( '#section-holder div.section' ).hide(); //Hide 'em all
-                $( '#section-' + tab ).show();
-        });
-
-        $( 'a.install-now' ).click( function() {
-                return confirm( plugininstallL10n.ays );
-        });
-});

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

@@ +1 @@
+/* global _wpPluginSettings */
+window.wp = window.wp || {};
+
+(function($) {
+
+// Set up our namespace...
+var plugins, l10n;
+plugins = wp.plugins = wp.plugins || {};
+
+// Store the plugin data and settings for organized and quick access
+plugins.data = _wpPluginSettings;
+l10n = plugins.data.l10n;
+
+// Setup app structure
+_.extend( plugins, {  view: {}, routes: {}, router: {}, template: wp.template });
+
+// Set up the Collection for our plugin data
+// @has 'id' 'name' 'screenshot' 'author' 'authorURI' 'version' 'active' ...
+plugins.Collection = Backbone.Collection.extend({
+
+        // Paginates the collection with a helper method
+        // that slices the collection
+        paginate: function( instance ) {
+                var collection = this;
+                instance = instance || 0;
+                
+                // Plugins per instance are set at 20
+                collection = _( collection.rest( 20 * instance ) );
+                collection = _( collection.first( 20 ) );
+
+                return collection;
+        },
+
+        count: false,
+
+        // Handles requests for more plugins
+        // and caches results
+        //
+        // When we are missing a cache object we fire an apiCall()
+        // which triggers events of `query:success` or `query:fail`
+        query: function( request ) {
+                /**
+                 * @static
+                 * @type Array
+                 */
+                var queries = this.queries,
+                        self = this,
+                        query, isPaginated, count;
+
+                // Store current query request args
+                // for later use with the event `plugin:end`
+                this.currentQuery.request = request;
+
+                // Search the query cache for matches.
+                query = _.find( queries, function( query ) {
+                        return _.isEqual( query.request, request );
+                });
+
+                // If the request matches the stored currentQuery.request
+                // it means we have a paginated request.
+                isPaginated = _.has( request, 'page' );
+
+                // Reset the internal api page counter for non paginated queries.
+                if ( ! isPaginated ) {
+                        this.currentQuery.page = 1;
+                }
+                
+                // Otherwise, send a new API call and add it to the cache.
+                if ( ! query && ! isPaginated ) {
+                        query = this.apiCall( request ).done( function( data ) {
+
+                                // Update the collection with the queried data.
+                                if ( data.plugins ) {
+                                        self.reset( data.plugins );
+                                        count = data.info.results;
+                                        
+                                        // Store the results and the query request
+                                        queries.push( { plugins: data.plugins, request: request, total: count } );
+                                }
+
+                                // Trigger a collection refresh event
+                                // and a `query:success` event with a `count` argument.
+                                self.trigger( 'update' );
+                                self.trigger( 'query:success', count );
+
+                                if ( data.plugins && data.plugins.length === 0 ) {
+                                        self.trigger( 'query:empty' );
+                                }
+
+                        }).fail( function() {
+                                self.trigger( 'query:fail' );
+                        });
+                } else {
+                        // If it's a paginated request we need to fetch more plugins...
+                        if ( isPaginated ) {
+                                return this.apiCall( request, isPaginated ).done( function( data ) {
+                                        // Add the new plugins to the current collection
+                                        // @todo update counter
+                                        self.add( data.plugins );
+                                        self.trigger( 'query:success' );
+
+                                        // We are done loading plugins for now.
+                                        self.loadingPlugins = false;
+
+                                }).fail( function() {
+                                        self.trigger( 'query:fail' );
+                                });
+                        }
+
+                        if ( query.plugins.length === 0 ) {
+                                self.trigger( 'query:empty' );
+                        } else {
+                                $( 'body' ).removeClass( 'no-results' );
+                        }
+
+                        // Only trigger an update event since we already have the plugins
+                        // on our cached object
+                        if ( _.isNumber( query.total ) ) {
+                                this.count = query.total;
+                        }
+
+                        this.reset( query.plugins );
+                        if ( ! query.total ) {
+                                this.count = this.length;
+                        }
+
+                        this.trigger( 'update' );
+                        this.trigger( 'query:success', this.count );
+                }
+        },
+
+        // Local cache array for API queries
+        queries: [],
+
+        // Keep track of current query so we can handle pagination
+        currentQuery: {
+                page: 1,
+                request: {}
+        },
+
+        // Send request to api.wordpress.org/plugins
+        apiCall: function( request, paginated ) {
+                return wp.ajax.send( 'query-plugins', {
+                        data: {
+                        // Request data
+                                request: _.extend({
+                                        per_page: 20,
+                                        fields: {
+                                                last_updated: true,
+                                                downloaded: true,
+                                        },
+                                }, request)
+                        },
+
+                        beforeSend: function() {
+                                if ( ! paginated ) {
+                                        // Spin it
+                                        $( 'body' ).addClass( 'loading-content' ).removeClass( 'no-results' );
+                                }
+                        }
+                });
+        },
+
+        // Static status controller for when we are loading plugins.
+        loadingPlugins: false
+});
+
+// This is the view that controls each plugin item
+// that will be displayed on the screen
+plugins.view.Plugin = wp.Backbone.View.extend({
+
+        // Wrap plugin data on a div.plugin element
+        className: 'plugin',
+
+        // The HTML template for each element to be rendered
+        html: plugins.template( 'plugin' ),
+
+        render: function() {
+                var data = this.model.toJSON();
+                // Render plugins using the html template
+                this.$el.html( this.html( data ) ).attr({
+                        tabindex: 0
+                });
+        }
+});
+
+plugins.view.InstallerSearch =  wp.Backbone.View.extend({
+
+        tagName: 'input',
+        className: 'wp-filter-search',
+        id: 'wp-filter-search-input',
+        searching: false,
+
+        attributes: {
+                placeholder: l10n.searchPlaceholder,
+                type: 'search'
+        },
+        
+        events: {
+                'input':  'search',
+                'keyup':  'search',
+                'change': 'search',
+                'search': 'search',
+                'blur':   'pushState'
+        },
+
+        // Handles Ajax request for searching through plugins in public repo
+        search: function( event ) {
+                var options = {};
+
+                // Tabbing or reverse tabbing into the search input shouldn't trigger a search
+                if ( event.type === 'keyup' && ( event.which === 9 || event.which === 16 ) ) {
+                        return;
+                }
+
+                this.collection = this.options.parent.view.collection;
+                
+                // Clear on escape.
+                if ( event.type === 'keyup' && event.which === 27 ) {
+                        event.target.value = '';
+                }
+                
+                // Update the URL hash
+                if ( event.target.value ) {
+                        plugins.router.navigate( plugins.router.baseUrl( '?search=' + event.target.value ), options );
+                } else {
+                        plugins.router.navigate( plugins.router.baseUrl( '' ) );
+                }
+
+                _.debounce( _.bind( this.doSearch, this ), 300 )( event.target.value );
+        },
+
+        doSearch: _.debounce( function( value ) {
+                var request = {};
+
+                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 ) ];
+                }
+
+                $( '.wp-filter-link.current' ).removeClass( 'current' );
+                $( 'body' ).removeClass( 'show-filter-drawer filters-applied' );
+
+                // Get the plugins by sending Ajax POST request to api.wordpress.org/plugins
+                // or searching the local cache
+                this.collection.query( request );
+
+                // Set route
+                plugins.router.navigate( plugins.router.baseUrl( '?search=' + value ), { replace: true } );
+        }, 300 ),
+
+        pushState: function( event ) {
+                var url = plugins.router.baseUrl( '' );
+
+                if ( event.target.value ) {
+                        url = plugins.router.baseUrl( '?search=' + event.target.value );
+                }
+
+                this.searching = false;
+                plugins.router.navigate( url );
+        }
+});
+
+plugins.view.Appearance = wp.Backbone.View.extend({
+
+        el: '#wpbody-content .wrap .plugin-browser',
+        
+        window: $( window ),
+        // Pagination instance
+        page: 0,
+
+        // Sets up a throttler for binding to 'scroll'
+        initialize: function( options ) {
+                // Scroller checks how far the scroll position is
+                _.bindAll( this, 'scroller' );
+
+                // Bind to the scroll event and throttle
+                // the results from this.scroller
+                this.window.bind( 'scroll', _.throttle( this.scroller, 300 ) );
+        },
+
+        // Main render control
+        render: function() {
+                // Setup the main plugin view
+                // with the current plugin collection
+                this.view = new plugins.view.Plugins({
+                        collection: this.collection,
+                        parent: this
+                });
+
+                // Render and append
+                this.view.render();
+                this.$el.empty().append( this.view.el ).addClass( 'rendered' );
+                this.$el.append( '<br class="clear"/>' );
+        },
+
+        // Checks when the user gets close to the bottom
+        // of the page and triggers a plugin:scroll event
+        scroller: function() {
+                var self = this,
+                        bottom, threshold;
+
+                bottom = this.window.scrollTop() + self.window.height();
+                threshold = self.$el.offset().top + self.$el.outerHeight( false ) - self.window.height();
+                threshold = Math.round( threshold * 0.9 );
+
+                if ( bottom > threshold ) {
+                        this.trigger( 'plugin:scroll' );
+                }
+        }
+});
+
+// Controls the rendering of div.plugins,
+// a wrapper that will hold all the plugin elements
+plugins.view.Plugins = wp.Backbone.View.extend({
+
+        className: 'plugins',
+
+        // Number to keep track of scroll position
+        // while in th-overlay mode
+        index: 0,
+
+        // The plugin count element
+        count: $( '.plugin-count' ),
+
+        initialize: function( options ) {
+                var self = this;
+
+                // Set up parent
+                this.parent = options.parent;
+
+                // When the collection is updated by user input...
+                this.listenTo( self.collection, 'update', function() {
+                        self.parent.page = 0;
+                        self.render( this );
+                });
+
+                // Update plugin count to full result set when available.
+                this.listenTo( self.collection, 'query:success', function( count ) {
+                        if ( _.isNumber( count ) ) {
+                                self.count.text( count );
+                        } else {
+                                self.count.text( self.collection.length );
+                        }
+                });
+
+                this.listenTo( self.collection, 'query:empty', function() {
+                        $( 'body' ).addClass( 'no-results' );
+                });
+
+                this.listenTo( this.parent, 'plugin:scroll', function() {
+                        self.renderPlugins( self.parent.page );
+                });
+        },
+
+        // Manages rendering of plugins pages
+        // and keeping plugin count in sync
+        render: function() {
+                // Clear the DOM, please
+                this.$el.html( '' );
+
+                // Generate the themes
+                // Using page instance
+                // While checking the collection has items
+                if ( this.options.collection.size() > 0 ) {
+                        this.renderPlugins( this.parent.page );
+                }
+
+                // Display a live plugin count for the collection
+                this.count.text( this.collection.count ? this.collection.count : this.collection.length );
+        },
+
+        // Iterates through each instance of the collection
+        // and renders each plugin module
+        renderPlugins: function( page ) {
+                var self = this;
+
+                self.instance = self.collection.paginate( page );
+
+                // If we have no more plugins bail
+                if ( self.instance.size() === 0 ) {
+                        // Fire a no-more-plugins event.
+                        this.parent.trigger( 'plugin:end' );
+                        return;
+                }
+                
+                // Loop through the themes and setup each theme view
+                self.instance.each( function( plugin ) {
+                        self.plugin = new plugins.view.Plugin({
+                                model: plugin,
+                                parent: self
+                        });
+
+                        // Render the views...
+                        self.plugin.render();
+                        // and append them to div.plugins
+                        self.$el.append( self.plugin.el );
+                });
+
+                this.parent.page++;
+        },
+});
+
+plugins.view.Installer = plugins.view.Appearance.extend({
+
+        el: '#wpbody-content .wrap',
+        searchContainer: $( '.wp-filter' ),
+        activeClass: 'current',
+        
+        window: $( window ),
+        // Pagination instance
+        page: 0,
+        
+        // Register events for sorting and filters in wp-filter
+        events: {
+                'click .wp-filter-link': 'onSort',
+        },
+        
+        // Initial render method
+        render: function() {
+                var self = this;
+
+                this.search();
+                this.uploader();
+                
+                this.collection = new plugins.Collection();
+                
+                // Bump `collection.currentQuery.page` and request more plugins if we hit the end of the page.
+                this.listenTo( this, 'plugin:end', function() {
+
+                        // Set loadingPlugins to true and bump page instance of currentQuery.
+                        self.collection.loadingPlugins = true;
+                        self.collection.currentQuery.page++;
+
+                        // Use currentQuery.page to build the plugins request.
+                        _.extend( self.collection.currentQuery.request, { page: self.collection.currentQuery.page } );
+                        self.collection.query( self.collection.currentQuery.request );
+                });
+
+                this.listenTo( this.collection, 'query:success', function() {
+                        $( 'body' ).removeClass( 'loading-content' );
+                        $( '.wp-filter-content' ).find( '.error' ).remove();
+                });
+
+                this.listenTo( this.collection, 'query:fail', function() {
+                        $( 'body' ).removeClass( 'loading-content' );
+                        $( '.wp-filter-content' ).find( '.error' ).remove();
+                        $( '.wp-filter-content' ).find( '.plugins' ).before( '<div class="error"><p>' + l10n.error + '</p></div>' );
+                });
+
+                if ( this.view ) {
+                        this.view.remove();
+                }
+
+                // Set ups the view and passes the section argument
+                this.view = new plugins.view.Plugins({
+                        collection: this.collection,
+                        parent: this
+                });
+
+                // Reset pagination every time the install view handler is run
+                this.page = 0;
+
+                // Render and append
+                this.$el.find( '.plugins' ).remove();
+                this.view.render();
+                this.$el.find( '.wp-filter-content' ).append( this.view.el ).addClass( 'rendered' );
+        },
+        
+        // Handles all the rendering of the public plugin directory
+        browse: function( section ) {
+                // Create a new collection with the proper plugin data
+                // for each section
+                this.collection.query( { browse: section } );
+        },
+
+        // Sorting navigation
+        onSort: function( event ) {
+                var $el = $( event.target ),
+                        sort = $el.data( 'sort' );
+
+                event.preventDefault();
+
+                $( 'body' ).removeClass( 'filters-applied show-filter-drawer' );
+
+                // Bail if this is already active
+                if ( $el.hasClass( this.activeClass ) ) {
+                        return;
+                }
+
+                this.sort( sort );
+
+                // Trigger a router.navigate update
+                plugins.router.navigate( plugins.router.baseUrl( '?browse=' + sort ) );
+        },
+        
+        sort: function( sort ) {
+                this.clearSearch();
+
+                $( '.wp-filter-link' ).removeClass( this.activeClass );
+                $( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
+
+                this.browse( sort );
+        },
+        
+        // Search input and view
+        // for current plugin collection
+        search: function() {
+                var view,
+                        self = this
+
+                view = new plugins.view.InstallerSearch({
+                        collection: self.collection,
+                        parent: this
+                });
+
+                // Render and append search form
+                view.render();
+                this.searchContainer
+                        .append( $.parseHTML( '<label class="screen-reader-text" for="wp-filter-search-input">' + l10n.search + '</label>' ) )
+                        .append( view.el );
+        },
+        
+        uploader: function() {
+                $( '.wp-upload-show' ).on( 'click', function( event ) {
+                        event.preventDefault();
+                        $( 'body' ).addClass( 'show-upload-container' );
+                        plugins.router.navigate( plugins.router.baseUrl( '?upload' ), { replace: true } );
+                });
+                $( '.wp-upload-hide' ).on( 'click', function( event ) {
+                        event.preventDefault();
+                        $( 'body' ).removeClass( 'show-upload-container' );
+                        plugins.router.navigate( plugins.router.baseUrl( '' ), { replace: true } );
+                });
+        },
+        
+        clearSearch: function() {
+                $( '#wp-filter-search-input' ).val( '' );
+        }
+});
+
+plugins.InstallerRouter = Backbone.Router.extend({
+
+        routes: {
+                'plugin-install.php?browse=:sort': 'sort',
+                'plugin-install.php?upload': 'upload',
+                'plugin-install.php?search=:query': 'search',
+                'plugin-install.php': 'sort'
+        },
+
+        baseUrl: function( url ) {
+                return 'plugin-install.php' + url;
+        },
+
+        search: function( query ) {
+                $( '.wp-filter-search' ).val( query );
+        },
+        
+        navigate: function() {
+                if ( Backbone.history._hasPushState ) {
+                        Backbone.Router.prototype.navigate.apply( this, arguments );
+                }
+        }
+
+});
+
+plugins.RunInstaller = {
+
+        init: function() {
+                // Set up the view
+                // Passes the default 'section' as an option
+                this.view = new plugins.view.Installer({
+                        section: 'featured'
+                });
+
+                // Render results
+                this.render();
+        },
+
+        render: function() {
+
+                // Render results
+                this.view.render();
+                this.routes();
+                
+                Backbone.history.start({
+                        root: plugins.data.settings.adminUrl,
+                        pushState: true,
+                        hashChange: false
+                });
+        },
+
+        routes: function() {
+                var self = this,
+                        request = {};
+
+                // Bind to our global `wp.plugins` object
+                // so that the router is available to sub-views
+                plugins.router = new plugins.InstallerRouter();
+
+                // Handles sorting / browsing routes
+                // Also handles the root URL triggering a sort request
+                // for `featured`, the default view
+                plugins.router.on( 'route:sort', function( sort ) {
+                        if ( ! sort ) {
+                                sort = 'featured';
+                        }
+                        self.view.sort( sort );
+                        self.view.trigger( 'plugin:close' );
+                });
+                
+                // Support the `upload` route by going straight to upload section
+                plugins.router.on( 'route:upload', function() {
+                        $( '.wp-upload-show' ).trigger( 'click' );
+                });
+                
+                // The `search` route event. The router populates the input field.
+                plugins.router.on( 'route:search', function() {
+                        $( '.wp-filter-search' ).focus().trigger( 'keyup' );
+                });
+
+                this.extraRoutes();
+        },
+
+        extraRoutes: function() {
+                return false;
+        }
+
+}
+
+// Ready...
+$( document ).ready(function() {
+
+        plugins.RunInstaller.init();
+
+});
+
+// Plugin Browser Thickbox related JS
+var tb_position;
+$( document ).ready(function() {
+        tb_position = function() {
+                var tbWindow = $( '#TB_window' ),
+                        width = $( window ).width(),
+                        H = $( window ).height() - ( ( 850 < width ) ? 60 : 20 ),
+                        W = ( 850 < width ) ? 830 : width - 20;
+
+                if ( tbWindow.size() ) {
+                        tbWindow.width( W ).height( H );
+                        $( '#TB_iframeContent' ).width( W ).height( H );
+                        tbWindow.css({
+                                'margin-left': '-' + parseInt( ( W / 2 ), 10 ) + 'px'
+                        });
+                        if ( typeof document.body.style.maxWidth !== 'undefined' ) {
+                                tbWindow.css({
+                                        'top': ( ( 850 < width ) ? 30 : 10 ) + 'px',
+                                        'margin-top': '0'
+                                });
+                        }
+                }
+                
+                return $( 'a.thickbox' ).each( function() {
+                        var href = $( this ).attr( 'href' );
+                        if ( ! href ) {
+                                return;
+                        }
+                        href = href.replace( /&width=[0-9]+/g, '' );
+                        href = href.replace( /&height=[0-9]+/g, '' );
+                        $(this).attr( 'href', href + '&width=' + W + '&height=' + ( H ) );
+                });
+        };
+
+        $( window ).resize( function() {
+                tb_position();
+        });
+
+        $('.plugins').on( 'click', 'a.thickbox', function() {
+                tb_click.call(this);
+                
+                $('#TB_title').css({'background-color':'#222','color':'#cfcfcf'});
+                $('#TB_ajaxWindowTitle').html('<strong>' + l10n.pluginInformation + '</strong>&nbsp;' + $(this).attr('title') );
+                
+                tb_position();
+                
+                return false;
+        });
+
+        /* Plugin install related JS*/
+        $( '#plugin-information-tabs a' ).click( function( event ) {
+                var tab = $( this ).attr( 'name' );
+                event.preventDefault();
+                //Flip the tab
+                $( '#plugin-information-tabs a.current' ).removeClass( 'current' );
+                $( this ).addClass( 'current' );
+                //Only show the fyi box in the description section, on smaller screen, where it's otherwise always displayed at the top.
+                if ( 'description' != $( this ).attr( 'name' ) && $( 'body').width() < 830 )
+                        $( '#plugin-information-content div.fyi' ).hide();
+                else
+                        $( '#plugin-information-content div.fyi' ).show();
+                //Flip the content.
+                $( '#section-holder div.section' ).hide(); //Hide 'em all
+                $( '#section-' + tab ).show();
+        });
+
+        $( 'a.install-now' ).click( function() {
+                return confirm( l10n.ays );
+        });
+});
+
+})( jQuery );
+ No newline at end of file

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

@@ -79 +79 @@
 
                 // Render and append
                 this.view.render();
-                this.$el.empty().append( this.view.el ).addClass('rendered');
+                this.$el.empty().append( this.view.el ).addClass( 'rendered' );
                 this.$el.append( '<br class="clear"/>' );
         },
 
@@ -105 +105 @@
                 // Render and append after screen title
                 view.render();
                 this.searchContainer
-                        .append( $.parseHTML( '<label class="screen-reader-text" for="theme-search-input">' + l10n.search + '</label>' ) )
+                        .append( $.parseHTML( '<label class="screen-reader-text" for="wp-filter-search-input">' + l10n.search + '</label>' ) )
                         .append( view.el );
         },
 
         // Checks when the user gets close to the bottom
-        // of the mage and triggers a theme:scroll event
+        // of the page and triggers a theme:scroll event
         scroller: function() {
                 var self = this,
                         bottom, threshold;
@@ -342 +342 @@
                         beforeSend: function() {
                                 if ( ! paginated ) {
                                         // Spin it
-                                        $( 'body' ).addClass( 'loading-themes' ).removeClass( 'no-results' );
+                                        $( 'body' ).addClass( 'loading-content' ).removeClass( 'no-results' );
                                 }
                         }
                 });
@@ -1080 +1080 @@
 themes.view.Search = wp.Backbone.View.extend({
 
         tagName: 'input',
-        className: 'theme-search',
-        id: 'theme-search-input',
+        className: 'wp-filter-search',
+        id: 'wp-filter-search-input',
         searching: false,
 
         attributes: {
@@ -1110 +1110 @@
         // Runs a search on the theme collection.
         search: function( event ) {
                 var options = {};
-
+                
                 // Clear on escape.
                 if ( event.type === 'keyup' && event.which === 27 ) {
                         event.target.value = '';
@@ -1168 +1168 @@
         },
 
         search: function( query ) {
-                $( '.theme-search' ).val( query );
+                $( '.wp-filter-search' ).val( query );
         },
 
         themes: function() {
-                $( '.theme-search' ).val( '' );
+                $( '.wp-filter-search' ).val( '' );
         },
 
         navigate: function() {
@@ -1229 +1229 @@
 
                 // Handles search route event
                 themes.router.on( 'route:search', function() {
-                        $( '.theme-search' ).trigger( 'keyup' );
+                        $( '.wp-filter-search' ).trigger( 'keyup' );
                 });
 
                 this.extraRoutes();
@@ -1288 +1288 @@
                         request.tag = [ value.slice( 4 ) ];
                 }
 
-                $( '.theme-section.current' ).removeClass( 'current' );
-                $( 'body' ).removeClass( 'more-filters-opened filters-applied' );
+                $( '.wp-filter-link.current' ).removeClass( 'current' );
+                $( 'body' ).removeClass( 'show-filter-drawer filters-applied' );
 
                 // Get the themes by sending Ajax POST request to api.wordpress.org/themes
                 // or searching the local cache
@@ -1304 +1304 @@
 
         el: '#wpbody-content .wrap',
 
-        // Register events for sorting and filters in theme-navigation
+        // Register events for sorting and filters in wp-filter
         events: {
-                'click .theme-section': 'onSort',
+                'click .wp-filter-link': 'onSort',
                 'click .theme-filter': 'onFilter',
-                'click .more-filters': 'moreFilters',
-                'click .apply-filters': 'applyFilters',
-                'click [type="checkbox"]': 'addFilter',
-                'click .clear-filters': 'clearFilters',
-                'click .feature-name': 'filterSection',
-                'click .filtering-by a': 'backToFilters'
+                'click .wp-filter-drawer-toggle': 'moreFilters',
+                'click .wp-filter-drawer-apply': 'applyFilters',
+                'click .wp-filter-group [type="checkbox"]': 'addFilter',
+                'click .wp-filter-drawer-clear': 'clearFilters',
+                'click .wp-filter-group-title': 'filterSection',
+                'click .wp-filter-by a': 'backToFilters'
         },
 
         // Initial render method
@@ -1343 +1343 @@
                 });
 
                 this.listenTo( this.collection, 'query:success', function() {
-                        $( 'body' ).removeClass( 'loading-themes' );
+                        $( 'body' ).removeClass( 'loading-content' );
                         $( '.theme-browser' ).find( 'div.error' ).remove();
                 });
 
                 this.listenTo( this.collection, 'query:fail', function() {
-                        $( 'body' ).removeClass( 'loading-themes' );
+                        $( 'body' ).removeClass( 'loading-content' );
                         $( '.theme-browser' ).find( 'div.error' ).remove();
                         $( '.theme-browser' ).find( 'div.themes' ).before( '<div class="error"><p>' + l10n.error + '</p></div>' );
                 });
@@ -1386 +1386 @@
 
                 event.preventDefault();
 
-                $( 'body' ).removeClass( 'filters-applied more-filters-opened' );
+                $( 'body' ).removeClass( 'filters-applied show-filter-drawer' );
 
                 // Bail if this is already active
                 if ( $el.hasClass( this.activeClass ) ) {
@@ -1395 +1395 @@
 
                 this.sort( sort );
 
-                // Trigger a router.naviagte update
+                // Trigger a router.navigate update
                 themes.router.navigate( themes.router.baseUrl( '?browse=' + sort ) );
         },
 
         sort: function( sort ) {
                 this.clearSearch();
 
-                $( '.theme-section, .theme-filter' ).removeClass( this.activeClass );
+                $( '.wp-filter-link, .theme-filter' ).removeClass( this.activeClass );
                 $( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
 
                 this.browse( sort );
@@ -1419 +1419 @@
                         return;
                 }
 
-                $( '.theme-filter, .theme-section' ).removeClass( this.activeClass );
+                $( '.wp-filter-link, .theme-filter' ).removeClass( this.activeClass );
                 $el.addClass( this.activeClass );
 
                 if ( ! filter ) {
@@ -1446 +1446 @@
                 var name,
                         tags = this.filtersChecked(),
                         request = { tag: tags },
-                        filteringBy = $( '.filtering-by .tags' );
+                        filteringBy = $( '.wp-filter-by .tags' );
 
                 if ( event ) {
                         event.preventDefault();
                 }
 
                 $( 'body' ).addClass( 'filters-applied' );
-                $( '.theme-section.current' ).removeClass( 'current' );
+                $( '.wp-filter-link.current' ).removeClass( 'current' );
                 filteringBy.empty();
 
                 _.each( tags, function( tag ) {
-                        name = $( 'label[for="feature-id-' + tag + '"]' ).text();
+                        name = $( 'label[for="filter-id-' + tag + '"]' ).text();
                         filteringBy.append( '<span class="tag">' + name + '</span>' );
                 });
 
@@ -1469 +1469 @@
         // Get the checked filters
         // @return {array} of tags or false
         filtersChecked: function() {
-                var items = $( '.feature-group' ).find( ':checkbox' ),
+                var items = $( '.wp-filter-group' ).find( ':checkbox' ),
                         tags = [];
 
                 _.each( items.filter( ':checked' ), function( item ) {
@@ -1478 +1478 @@
 
                 // When no filters are checked, restore initial state and return
                 if ( tags.length === 0 ) {
-                        $( '.apply-filters' ).find( 'span' ).text( '' );
-                        $( '.clear-filters' ).hide();
+                        $( '.wp-filter-drawer-apply' ).find( 'span' ).text( '' );
+                        $( '.wp-filter-drawer-clear' ).hide();
                         $( 'body' ).removeClass( 'filters-applied' );
                         return false;
                 }
 
-                $( '.apply-filters' ).find( 'span' ).text( tags.length );
-                $( '.clear-filters' ).css( 'display', 'inline-block' );
+                $( '.wp-filter-drawer-apply' ).find( 'span' ).text( tags.length );
+                $( '.wp-filter-drawer-clear' ).css( 'display', 'inline-block' );
 
                 return tags;
         },
@@ -1494 +1494 @@
 
         // Overwrite search container class to append search
         // in new location
-        searchContainer: $( '.theme-navigation' ),
+        searchContainer: $( '.wp-filter' ),
 
         uploader: function() {
-                $( 'a.upload' ).on( 'click', function( event ) {
+                $( '.wp-upload-show' ).on( 'click', function( event ) {
                         event.preventDefault();
-                        $( 'body' ).addClass( 'show-upload-theme' );
+                        $( 'body' ).addClass( 'show-upload-container' );
                         themes.router.navigate( themes.router.baseUrl( '?upload' ), { replace: true } );
                 });
-                $( 'a.browse-themes' ).on( 'click', function( event ) {
+                $( '.wp-upload-hide' ).on( 'click', function( event ) {
                         event.preventDefault();
-                        $( 'body' ).removeClass( 'show-upload-theme' );
+                        $( 'body' ).removeClass( 'show-upload-container' );
                         themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
                 });
         },
@@ -1519 +1519 @@
 
                 // If the filters section is opened and filters are checked
                 // run the relevant query collapsing to filtered-by state
-                if ( $( 'body' ).hasClass( 'more-filters-opened' ) && this.filtersChecked() ) {
+                if ( $( 'body' ).hasClass( 'show-filter-drawer' ) && this.filtersChecked() ) {
                         return this.addFilter();
                 }
 
                 this.clearSearch();
 
                 themes.router.navigate( themes.router.baseUrl( '' ) );
-                $( 'body' ).toggleClass( 'more-filters-opened' );
+                $( 'body' ).toggleClass( 'show-filter-drawer' );
         },
 
         // Expand/collapse each individual filter section
@@ -1537 +1537 @@
         // Clears all the checked filters
         // @uses filtersChecked()
         clearFilters: function( event ) {
-                var items = $( '.feature-group' ).find( ':checkbox' ),
+                var items = $( '.wp-filter-group' ).find( ':checkbox' ),
                         self = this;
 
                 event.preventDefault();
@@ -1557 +1557 @@
         },
 
         clearSearch: function() {
-                $( '#theme-search-input').val( '' );
+                $( '#wp-filter-search-input' ).val( '' );
         }
 });
 
@@ -1575 +1575 @@
         },
 
         search: function( query ) {
-                $( '.theme-search' ).val( query );
+                $( '.wp-filter-search' ).val( query );
         },
 
         navigate: function() {
@@ -1642 +1642 @@
 
                 // Support the `upload` route by going straight to upload section
                 themes.router.on( 'route:upload', function() {
-                        $( 'a.upload' ).trigger( 'click' );
+                        $( '.wp-upload-show' ).trigger( 'click' );
                 });
 
                 // The `search` route event. The router populates the input field.
                 themes.router.on( 'route:search', function() {
-                        $( '.theme-search' ).focus().trigger( 'keyup' );
+                        $( '.wp-filter-search' ).focus().trigger( 'keyup' );
                 });
 
                 this.extraRoutes();

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

@@ -6 +6 @@
  * @subpackage Administration
  */
 // TODO route this pages via a specific iframe handler instead of the do_action below
-if ( !defined( 'IFRAME_REQUEST' ) && isset( $_GET['tab'] ) && ( 'plugin-information' == $_GET['tab'] ) )
+if ( !defined( 'IFRAME_REQUEST' ) && isset( $_GET['tab'] ) && ( 'plugin-information' == $_GET['tab'] ) ) {
         define( 'IFRAME_REQUEST', true );
+}
 
 /**
  * WordPress Administration Bootstrap.
  */
 require_once( dirname( __FILE__ ) . '/admin.php' );
+require( ABSPATH . 'wp-admin/includes/plugin-install.php' );
 
-if ( ! current_user_can('install_plugins') )
+wp_reset_vars( array( 'tab' ) );
+
+if ( ! current_user_can('install_plugins') ) {
         wp_die(__('You do not have sufficient permissions to install plugins on this site.'));
+}
 
 if ( is_multisite() && ! is_network_admin() ) {
         wp_redirect( network_admin_url( 'plugin-install.php' ) );
         exit();
 }
 
-$wp_list_table = _get_list_table('WP_Plugin_Install_List_Table');
-$pagenum = $wp_list_table->get_pagenum();
-$wp_list_table->prepare_items();
-
 $title = __('Install Plugins');
 $parent_file = 'plugins.php';
 
-wp_enqueue_script( 'plugin-install' );
-if ( 'plugin-information' != $tab )
+$tabs = array(
+        'upload'                => __( 'Upload Plugin' ),
+        'browse-plugins'        => _x( 'Browse', 'plugins' ),
+);
+
+$sections = array(
+        'featured'      => _x( 'Featured', 'plugins' ),
+        'popular'       => _x( 'Popular', 'plugins' ),
+        'new'           => _x( 'Latest', 'plugins' ),
+);
+if ( $tab === 'beta' || false !== strpos( $GLOBALS['wp_version'], '-' ) ) {
+        $sections['beta'] = _x( 'Beta Testing', 'plugins' );
+}
+
+wp_localize_script( 'plugin', '_wpPluginSettings', array(
+        'plugins' => false,
+        'settings' => array(
+                'isInstall'     => true,
+                'canInstall'    => current_user_can( 'install_plugins' ),
+                'installURI'    => current_user_can( 'install_plugins' ) ? self_admin_url( 'plugin-install.php' ) : null,
+                'adminUrl'      => parse_url( self_admin_url(), PHP_URL_PATH )
+        ),
+        'l10n' => array(
+                'search'  => __( 'Search Plugins' ),
+                'searchPlaceholder' => __( 'Search plugins...' ), // placeholder (no ellipsis)
+                'upload' => __( 'Upload Plugin' ),
+                'error'  => __( '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>.' ),
+                'pluginInformation' => __('Plugin Information:'),
+                'ays' => __('Are you sure you want to install this plugin?'),
+        ),
+        'browse' => array(
+                'sections' => $sections,
+        ),
+) );
+
+wp_enqueue_script( 'plugin' );
+
+if ( 'plugin-information' != $tab ) {
         add_thickbox();
+}
 
 $body_id = $tab;
 
@@ -43 +81 @@
  *
  * @since 2.7.0
  */
-do_action( "install_plugins_pre_$tab" );
+if ( $tab ) {
+        do_action( "install_plugins_pre_$tab" );        
+}
 
+add_screen_option( 'misc_screen_options', array( 'option' => 'manageplugin-installplugin-cardcolumnshidden', 'id' => 'plugin-card' ) );
+
+$screen_options = array(
+        'description' => 'Description',
+        'rating' => 'Rating',
+        'extra_details' => 'Extra Details'
+);
+foreach ( $screen_options as $id => $label ) {
+        add_screen_option( $id, array( 'label' => __( $label ) ) );
+}
+
 get_current_screen()->add_help_tab( array(
 'id'            => 'overview',
 'title'         => __('Overview'),
@@ -73 +124 @@
 include(ABSPATH . 'wp-admin/admin-header.php');
 ?>
 <div class="wrap">
-<h2><?php echo esc_html( $title ); ?></h2>
+        <h2>
+                <?php echo esc_html( $title ); ?>
+                <?php
+                /**
+                 * Filter the tabs shown on the Plugin Install screen.
+                 * 
+                 * @since 2.7.0
+                 * @param array $tabs The tabs shown on the Plugin Install screen. Defaults are
+                 *                    'upload' and 'browse-plugins'.
+                 */
+                $tabs = apply_filters( 'install_plugins_tabs', $tabs );
+                foreach ( $tabs as $tab_slug => $tab_name ) {
+                        $visibility = $tab_slug == 'upload' ? ' wp-upload-show' : ' wp-upload-hide';
+                        
+                        echo '<a href="#" class="' . esc_attr( $tab_slug ) . $visibility . ' add-new-h2">' . $tab_name . '</a>';
+                }
+                ?>
+        </h2>
 
-<?php $wp_list_table->views(); ?>
+        <?php install_plugins_upload(); ?>
 
-<br class="clear" />
-<?php
-/**
- * Fires after the plugins list table in each tab of the Install Plugins screen.
- *
- * The dynamic portion of the action hook, $tab, allows for targeting
- * individual tabs, for instance 'install_plugins_plugin-information'.
- *
- * @since 2.7.0
- *
- * @param int $paged The current page number of the plugins list table.
- */
-?>
-<?php do_action( "install_plugins_$tab", $paged ); ?>
+        <div class="wp-filter hide-on-upload">
+                <div class="wp-filter-count">
+                        <span class="count plugin-count"></span>
+                </div>
+                
+                <ul class="wp-filter-links"> 
+                <?php foreach( $sections as $section_sort => $section_text ) { ?> 
+                        <li> 
+                                <a href="#" class="wp-filter-link" data-sort="<?php echo $section_sort; ?>"> 
+                                        <?php echo $section_text; ?> 
+                                </a> 
+                        </li> 
+                <?php } ?> 
+                </ul>
+                
+                <a class="wp-filter-drawer-toggle dashicons-before dashicons-heart" href="#" data-drawer="favorites">
+                        <?php _e( 'Favorites' ); ?>
+                </a>
+                <a class="wp-filter-drawer-toggle dashicons-before dashicons-tag" href="#" data-drawer="tag">
+                        <?php _e( 'Tag Filter' ); ?>
+                </a>
+                
+                <div class="wp-filter-drawer" data-drawer="favorites">
+                
+                        TODO - Favorites
+                        
+                </div>
+                <div class="wp-filter-drawer" data-drawer="tag">
+                
+                        TODO - Tag Filter
+                        
+                </div>
+        
+        </div>
+        
+        <div class="hide-on-upload">
+                <div class="wp-filter-content plugin-browser"></div>
+        
+                <p class="wp-filter-notice"><?php _e( 'No plugins found. Try a different search.' ); ?></p>
+                <span class="spinner"></span>
+        </div>
+        <br class="clear" />
+        <?php
+        /**
+         * Fires after the plugins list table in each tab of the Install Plugins screen.
+         *
+         * The dynamic portion of the action hook, $tab, allows for targeting
+         * individual tabs, for instance 'install_plugins_plugin-information'.
+         *
+         * @since 2.7.0
+         *
+         * @param int $paged The current page number of the plugins list table.
+         */
+        if ( $tab ) {
+                do_action( "install_plugins_$tab", $paged );
+        }
+        ?>
 </div>
+
+<script id="tmpl-plugin" type="text/template">
+        <div class="plugin-card">
+                <?php
+                $hidden = get_user_option( 'manageplugin-installplugin-cardcolumnshidden' );
+                $columns = array();
+                
+                foreach ( $screen_options as $id => $field ) {
+                        $columns[$id] = is_array( $hidden ) && in_array( $id, $hidden ) ? "column-{$id} column-hidden" : "column-{$id} column-visible";
+                }
+                ?>
+                <div class="plugin-card-top">
+                        <div class="name data-field">
+                                <h4>
+                                        <a href="{{{ data.detail_url }}}" class="thickbox">
+                                                {{{ data.name }}}
+                                        </a>
+                                </h4>
+                        <# if ( data.action_links ) { #>
+                                <div class="action-links">
+                                        <ul class="plugin-action-buttons">
+                                        <# _.each( data.action_links, function ( action_link ) { #>
+                                                <li>{{{ action_link }}}</li>
+                                        <# }); #>
+                                        </ul>
+                                </div>
+                        <# } #>
+                        </div>
+                        <div class="desc <?php echo $columns['description']; ?>">
+                                <p>
+                                        {{{ data.short_description }}}
+                                <# if ( data.author ) { #>
+                                        <span class="authors">
+                                                <cite><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></cite>
+                                        </span>
+                                <# } #>
+                                </p>
+                        </div>
+                </div>
+                <footer class="plugin-card-bottom <?php echo $columns['extra_details']; ?>">
+                        <div class="vers <?php echo $columns['rating']; ?>">
+                                <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>
+                                </div>
+                                <span class="num-ratings">({{ data.num_ratings_formatted }})</span>
+                        </div>
+                        <div class="column-updated">
+                                <strong><?php echo __( 'Last updated:' ); ?></strong> {{ data.last_updated }}
+                        </div>
+                        <div class="column-downloaded">
+                                <?php printf( _n( '%s download', '%s downloads', '{{ data.downloaded }}' ), '{{ data.downloaded }}' ); ?>
+                        </div>
+                        <div class="column-compatibility">
+                        <# if ( data.compatibility == 'untested' ) { #>
+                                <?php echo __( '<strong>Untested</strong> with your install' ); ?>
+                        <# } else if ( data.compatibility == 'incompatible' ) { #>
+                                <?php echo __( '<strong>Incompatible</strong> with your install' ); ?>
+                        <# } else { #>
+                                <?php echo __( '<strong>Compatible</strong> with your install' ); ?>
+                        <# } #>
+                        </div>
+                </footer>
+        </div>
+</script>
+                
 <?php
 /**
  * WordPress Administration Template Footer.
  */
-include(ABSPATH . 'wp-admin/admin-footer.php');
+include(ABSPATH . 'wp-admin/admin-footer.php');
+ No newline at end of file

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

@@ -12 +12 @@
 
 wp_reset_vars( array( 'tab' ) );
 
-if ( ! current_user_can('install_themes') )
+if ( ! current_user_can('install_themes') ) {
         wp_die( __( 'You do not have sufficient permissions to install themes on this site.' ) );
+}
 
 if ( is_multisite() && ! is_network_admin() ) {
         wp_redirect( network_admin_url( 'theme-install.php' ) );
@@ -33 +34 @@
 );
 
 $sections = array(
-        'featured' => __( 'Featured Themes' ),
-        'popular'  => __( 'Popular Themes' ),
-        'new'      => __( 'Newest Themes' ),
+        'featured' => _x( 'Featured', 'themes' ),
+        'popular'  => _x( 'Popular', 'themes' ),
+        'new'      => _x( 'Latest', 'themes' ),
 );
 
 $installed_themes = search_theme_directories();
@@ -125 +126 @@
                  */
                 $tabs = apply_filters( 'install_themes_tabs', $tabs );
                 foreach ( $tabs as $tab_slug => $tab_name ) {
-                        echo '<a href="#" class="' . esc_attr( $tab_slug ) . ' add-new-h2">' . $tab_name . '</a>';
+                        $visibility = $tab_slug == 'upload' ? ' wp-upload-show' : ' wp-upload-hide';
+                        
+                        echo '<a href="#" class="' . esc_attr( $tab_slug ) . $visibility . ' add-new-h2">' . $tab_name . '</a>';
                 }
                 ?>
         </h2>
 
-        <div class="upload-theme">
         <?php install_themes_upload(); ?>
-        </div>
-
-        <div class="theme-navigation">
-                <span class="theme-count"></span>
-                <a class="theme-section" href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a>
-                <a class="theme-section" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a>
-                <a class="theme-section" href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a>
-                <div class="theme-top-filters">
-                        <!-- <span class="theme-filter" data-filter="photoblogging">Photography</span>
-                        <span class="theme-filter" data-filter="responsive-layout">Responsive</span> -->
-                        <a class="more-filters" href="#"><?php _e( 'Feature Filter' ); ?></a>
+        
+        <div class="wp-filter hide-on-upload">
+                <div class="wp-filter-count">
+                        <span class="count theme-count"></span>
                 </div>
-                <div class="more-filters-container">
-                        <a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
-                        <a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
-                        <br class="clear" />
+                
+                <ul class="wp-filter-links"> 
+                <?php foreach( $sections as $section_sort => $section_text ) { ?> 
+                        <li> 
+                                <a href="#" class="wp-filter-link" data-sort="<?php echo $section_sort; ?>"> 
+                                        <?php echo $section_text; ?> 
+                                </a> 
+                        </li> 
+                <?php } ?> 
+                </ul>
+                
+                <a class="wp-filter-drawer-toggle dashicons-before dashicons-admin-generic" href="#" data-drawer="feature">
+                        <?php _e( 'Feature Filter' ); ?>
+                </a>
+                
+                <div class="wp-filter-drawer" data-drawer="feature">
+                        <div class="wp-filter-drawer-buttons"> 
+                                <a class="wp-filter-drawer-apply button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a> 
+                                <a class="wp-filter-drawer-clear button button-secondary" href="#"><?php _e( 'Clear' ); ?></a> 
+                        </div> 
                 <?php
                 $feature_list = get_theme_feature_list();
                 foreach ( $feature_list as $feature_name => $features ) {
-                        if ( $feature_name === 'Features' || $feature_name === __( 'Features' ) ) { // hack hack hack
-                                echo '<div class="filters-group wide-filters-group">';
-                        } else {
-                                echo '<div class="filters-group">';
-                        }
-                        $feature_name = esc_html( $feature_name );
-                        echo '<h4 class="feature-name">' . $feature_name . '</h4>';
-                        echo '<ol class="feature-group">';
-                        foreach ( $features as $feature => $feature_name ) {
-                                $feature = esc_attr( $feature );
-                                echo '<li><input type="checkbox" id="feature-id-' . $feature . '" value="' . $feature . '" /> ';
-                                echo '<label for="feature-id-' . $feature . '">' . $feature_name . '</label></li>';
-                        }
-                        echo '</ol>';
-                        echo '</div>';
-                }
-                ?>
-                        <div class="filtering-by">
+                        if ( $feature_name === 'Features' || $feature_name === __( 'Features' ) ) { // hack hack hack ?>
+                                <div class="wp-filter-group wp-filter-group-wide">
+                        <?php } else { ?>
+                                <div class="wp-filter-group">
+                        <?php } ?>
+                                <h4 class="wp-filter-group-title"><?php echo $feature_name; ?></h4>
+                                <ol>
+                                <?php foreach ( $features as $feature => $feature_name ) {
+                                        $feature = esc_attr( $feature ); ?>
+                                        <li>
+                                                <input type="checkbox" id="filter-id-<?php echo $feature; ?>" value="<?php echo $feature; ?>" />
+                                                <label for="filter-id-<?php echo $feature; ?>"><?php echo $feature_name; ?></label>
+                                        </li>
+                                <?php } ?>
+                                </ol>
+                        </div>
+                <?php } ?>
+                        <div class="wp-filter-by">
                                 <span><?php _e( 'Filtering by:' ); ?></span>
                                 <div class="tags"></div>
                                 <a href="#"><?php _e( 'Edit' ); ?></a>
                         </div>
                 </div>
+        
         </div>
-        <div class="theme-browser"></div>
-        <div class="theme-install-overlay wp-full-overlay expanded"></div>
-
-        <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
-        <span class="spinner"></span>
-
+        
+        <div class="hide-on-upload">
+                <div class="wp-filter-content theme-browser"></div>
+                <div class="wp-full-overlay theme-install-overlay expanded"></div>
+        
+                <p class="wp-filter-notice"><?php _e( 'No themes found. Try a different search.' ); ?></p>
+                <span class="spinner"></span>
+        </div>
         <br class="clear" />
-<?php
-/**
- * Fires at the top of each of the tabs on the Install Themes page.
- *
- * The dynamic portion of the hook name, $tab, refers to the current
- * theme install tab. Possible values are 'dashboard', 'search', 'upload',
- * 'featured', 'new', or 'updated'.
- *
- * @since 2.8.0
- *
- * @param int $paged Number of the current page of results being viewed.
- */
-if ( $tab ) {
-        do_action( "install_themes_{$tab}", $paged );
-}
-?>
+        <?php
+        /**
+         * Fires at the top of each of the tabs on the Install Themes page.
+         *
+         * The dynamic portion of the hook name, $tab, refers to the current
+         * theme install tab. Possible values are 'dashboard', 'search', 'upload',
+         * 'featured', 'new', or 'updated'.
+         *
+         * @since 2.8.0
+         *
+         * @param int $paged Number of the current page of results being viewed.
+         */
+        if ( $tab ) {
+                do_action( "install_themes_{$tab}", $paged );
+        }
+        ?>
 </div>
 
 <script id="tmpl-theme" type="text/template">

trunk/src/wp-admin/themes.php

@@ -117 +117 @@
 
 <div class="wrap">
         <h2><?php esc_html_e( 'Themes' ); ?>
-                <span class="theme-count"><?php echo count( $themes ); ?></span>
+                <span class="wp-title-count theme-count"><?php echo count( $themes ); ?></span>
         <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
                 <a href="<?php echo admin_url( 'theme-install.php' ); ?>" class="hide-if-no-js add-new-h2"><?php echo esc_html( _x( 'Add New', 'Add new theme' ) ); ?></a>
         <?php endif; ?>

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

@@ -488 +488 @@
                         'error' => __('Error while saving the changes.')
                 ) );
 
-                $scripts->add( 'plugin-install', "/wp-admin/js/plugin-install$suffix.js", array( 'jquery', 'thickbox' ), false, 1 );
-                did_action( 'init' ) && $scripts->localize( 'plugin-install', 'plugininstallL10n', array(
-                        'plugin_information' => __('Plugin Information:'),
-                        'ays' => __('Are you sure you want to install this plugin?')
-                ) );
+                $scripts->add( 'plugin', "/wp-admin/js/plugin$suffix.js", array( 'wp-backbone' ), false, 1 );
 
                 $scripts->add( 'updates', "/wp-admin/js/updates$suffix.js", array( 'jquery' ) );