Ticket #28965: 28965.diff

src/wp-includes/css/media-views.css

@@ -912 +912 @@
 }
 
 .attachment.details,
-.media-grid-view .selected.attachment {
+.media-frame.mode-grid .selected.attachment {
         -webkit-box-shadow: 0 0 0 1px #fff,
                                 0 0 0 5px #1e8cbe;
         box-shadow: 0 0 0 1px #fff,
@@ -921 +921 @@
 
 .attachment.details .check,
 .attachment.selected .check:focus,
-.media-grid-view .attachment.selected .check {
+.media-frame.mode-grid .attachment.selected .check {
         background-color: #1e8cbe;
         -webkit-box-shadow: 0 0 0 1px #fff,
                                 0 0 0 2px #1e8cbe;
@@ -929 +929 @@
                                 0 0 0 2px #1e8cbe;
 }
 
-.media-grid-view .attachment .check {
+.media-frame.mode-grid .attachment .check {
         display: block;
 }
 
-.media-grid-view .attachment .check div {
+.media-frame.mode-grid .attachment .check div {
         background-position: 21px 0;
 }
 
 .attachment.details .check div,
-.media-grid-view .attachment.selected .check div {
+.media-frame.mode-grid .attachment.selected .check div {
         background-position: -21px 0;
 }
 
 .attachment.details .check:hover div,
 .attachment.selected .check:focus div,
-.media-grid-view .attachment.selected .check:hover div {
+.media-frame.mode-grid .attachment.selected .check:hover div {
         background-position: -60px 0;
 }
 
@@ -2596 +2596 @@
 /**
  * Media Grid
  */
-.media-grid-view,
-.media-grid-view .media-frame-content,
-.media-grid-view .attachments-browser .attachments,
-.media-grid-view .uploader-inline-content {
+.media-frame.mode-grid,
+.media-frame.mode-grid .media-frame-content,
+.media-frame.mode-grid .attachments-browser .attachments,
+.media-frame.mode-grid .uploader-inline-content {
         position: static;
 }
 
 /* Regions we don't use at all */
-.media-grid-view .media-frame-title,
-.media-grid-view .media-frame-toolbar,
-.media-grid-view .media-frame-menu {
+.media-frame.mode-grid .media-frame-title,
+.media-frame.mode-grid .media-frame-toolbar,
+.media-frame.mode-grid .media-frame-router,
+.media-frame.mode-grid .media-frame-menu {
         display: none;
 }
 
-.media-grid-view .media-frame-content {
+.media-frame.mode-grid .media-frame-content {
         background-color: transparent;
         border: none;
 }
 
-.media-grid-view .uploader-inline {
+.media-frame.mode-grid .uploader-inline {
         position: relative;
         top: auto;
         right: auto;
@@ -2625 +2626 @@
         margin-top: 0;
 }
 
-.media-grid-view .media-toolbar select {
+.media-frame.mode-grid .media-toolbar select {
         margin-top: 1px;
         font-size: inherit;
 }
 
-.media-grid-view .attachments-browser .bulk-select {
+.media-frame.mode-grid .attachments-browser .bulk-select {
         display: inline-block;
 }
 
@@ -2639 +2640 @@
  *
  * This should be OOCSS'd so both use a shared selector.
  */
-.media-grid-view .attachments-browser .media-toolbar {
+.media-frame.mode-grid .attachments-browser .media-toolbar {
         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);
@@ -2657 +2658 @@
         border: none;
 }
 
-.media-grid-view input[type="search"] {
+.media-frame.mode-grid input[type="search"] {
         margin: 1px;
         padding: 3px 5px;
         position: absolute;
@@ -2669 +2670 @@
         width: 280px;
 }
 
-.media-grid-view .view-switch {
+.media-frame.mode-grid .view-switch {
         display: inline-block;
         float: none;
         vertical-align: middle;
@@ -2677 +2678 @@
         margin: 0 20px 0 0;
 }
 
-.media-grid-view select {
+.media-frame.mode-grid select {
         margin: 0 10px 0 0;
 }
 
-.media-grid-view .spinner {
+.media-frame.mode-grid .spinner {
         margin-top: 15px;
 }
 
-.media-grid-view .attachments-browser {
+.media-frame.mode-grid .attachments-browser {
         padding: 0;
 }
 
-.media-grid-view .attachments-browser .no-media {
+.media-frame.mode-grid .attachments-browser .no-media {
         color: #999;
         font-size: 18px;
         font-style: normal;
@@ -2805 +2806 @@
         top: 56px;
 }
 
-/* Hiding this for the moment instead of removing it from the template. */
-.edit-attachment-frame h3 {
-        display: none;
-}
-
 .edit-attachment-frame .attachment-details {
         position: absolute;
         overflow: auto;
@@ -2950 +2946 @@
  */
 
 @media only screen and (max-width: 1120px) {
-        .media-grid-view .attachments-browser .media-toolbar-primary,
-        .media-grid-view .attachments-browser .media-toolbar-secondary {
+        .media-frame.mode-grid .attachments-browser .media-toolbar-primary,
+        .media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
                 float: none;
         }
 
-        .media-grid-view input[type="search"] {
+        .media-frame.mode-grid input[type="search"] {
                 margin: 20px 0;
                 position: static;
                 width: 100%;

src/wp-includes/js/media-grid.js

@@ -1 +1 @@
 /* global _wpMediaViewsL10n, MediaElementPlayer, _wpMediaGridSettings, confirm */
 (function($, _, Backbone, wp) {
+        // Local reference to the WordPress media namespace.
         var media = wp.media, l10n;
 
-        // Link any localized strings.
+        // Link localized strings and settings.
         if ( media.view.l10n ) {
                 l10n = media.view.l10n;
         } else {
@@ -11 +12 @@
         }
 
         /**
+         * wp.media.controller.EditAttachmentMetadata
+         *
          * A state for editing an attachment's metadata.
          *
          * @constructor
@@ -20 +23 @@
         media.controller.EditAttachmentMetadata = media.controller.State.extend({
                 defaults: {
                         id:      'edit-attachment',
+                        // Title string passed to the frame's title region view.
                         title:   l10n.attachmentDetails,
                         // Region mode defaults.
-                        menu:    false,
                         content: 'edit-metadata',
-
-                        url:     ''
-                },
-
-                _ready: function() {},
-
-                /**
-                 * Override media.controller.State._postActivate, since this state doesn't
-                 * include the regions expected there.
-                 */
-                _postActivate: function() {
-                        this.frame.on( 'title:render:default', this._renderTitle, this );
-
-                        this._title();
-                        this._content();
-                },
-
-                /**
-                 * @access private
-                 */
-                _title: function() {
-                        this.frame.title.render( this.get('titleMode') || 'default' );
-                },
-                /**
-                 * @access private
-                 */
-                _renderTitle: function( view ) {
-                        view.$el.text( this.get('title') || '' );
-                },
-
-                _content: function() {
-                        var mode = this.get( 'content' );
-                        if ( mode ) {
-                                this.frame.content.render( mode );
-                        }
+                        menu:    false,
+                        toolbar: false,
+                        router:  false
                 }
         });
 
@@ -87 +58 @@
                                 title:     '',
                                 modal:     false,
                                 selection: [],
-                                library:   {},
+                                library:   {}, // Options hash for the query to the media library.
                                 multiple:  'add',
                                 state:     'library',
                                 uploader:  true,
-                                mode:      [ 'grid', 'edit' ]
+                                mode:      [ 'grid' ]
                         });
 
                         $(document).on( 'click', '.add-new-h2', _.bind( this.addNewClickHandler, this ) );
-                        $(document).on( 'screen:options:open', _.bind( this.screenOptionsOpen, this ) );
-                        $(document).on( 'screen:options:close', _.bind( this.screenOptionsClose, this ) );
 
                         // Ensure core and media grid view UI is enabled.
-                        this.$el.addClass('wp-core-ui media-grid-view');
+                        this.$el.addClass('wp-core-ui');
 
                         // Force the uploader off if the upload limit has been exceeded or
                         // if the browser isn't supported.
@@ -123 +92 @@
                         }
 
                         /**
-                         * call 'initialize' directly on the parent class
+                         * call 'initialize' directly on the parent class.
                          */
                         media.view.MediaFrame.prototype.initialize.apply( this, arguments );
 
-                        // Since we're not using the default modal built into
-                        // a media frame, append our $element to the supplied container.
+                        // Append the frame view directly the supplied container.
                         this.$el.appendTo( this.options.container );
 
-                        this.createSelection();
                         this.createStates();
-                        this.bindHandlers();
+                        this.bindRegionModeHandlers();
                         this.render();
 
                         // Update the URL when entering search string (at most once per second)
@@ -148 +115 @@
                         _.delay( _.bind( this.createRouter, this ), 1000 );
                 },
 
-                screenOptionsOpen: function() {
-                        this.$el.addClass( 'media-grid-view-options' );
-                },
-
-                screenOptionsClose: function() {
-                        this.$el.removeClass( 'media-grid-view-options' );
-                },
-
                 createRouter: function() {
                         this.gridRouter = new media.view.MediaFrame.Manage.Router();
 
@@ -168 +127 @@
                         }
                 },
 
-                createSelection: function() {
-                        var selection = this.options.selection;
-
-                        if ( ! (selection instanceof media.model.Selection) ) {
-                                this.options.selection = new media.model.Selection( selection, {
-                                        multiple: this.options.multiple
-                                });
-                        }
-
-                        this._selection = {
-                                attachments: new media.model.Attachments(),
-                                difference: []
-                        };
-                },
-
+                /**
+                 * Create the default states for the frame.
+                 */
                 createStates: function() {
                         var options = this.options;
 
@@ -196 +143 @@
                                         library:    media.query( options.library ),
                                         multiple:   options.multiple,
                                         title:      options.title,
-                                        priority:   20,
-
-                                        router:     false,
                                         content:    'browse',
 
                                         filterable: 'mime-types'
@@ -206 +150 @@
                         ]);
                 },
 
-                bindHandlers: function() {
-                        this.on( 'content:create:browse', this.browseContent, this );
-                        this.on( 'content:render:edit-image', this.editImageContent, this );
+                /**
+                 * Bind region mode activation events to proper handlers.
+                 */
+                bindRegionModeHandlers: function() {
+                        this.on( 'content:create:browse', this.createViewForContentRegionInBrowseMode, this );
 
                         // Handle a frame-level event for editing an attachment.
-                        this.on( 'edit:attachment', this.editAttachment, this );
+                        this.on( 'edit:attachment', this.openEditAttachmentModal, this );
                 },
 
+                /**
+                 * Click handler for the `Add New` button.
+                 */
                 addNewClickHandler: function( event ) {
                         event.preventDefault();
                         this.trigger( 'toggle:upload:attachment' );
@@ -222 +171 @@
                 /**
                  * Open the Edit Attachment modal.
                  */
-                editAttachment: function( model ) {
+                openEditAttachmentModal: function( model ) {
                         // Create a new EditAttachment frame, passing along the library and the attachment model.
                         wp.media( {
                                 frame:       'edit-attachments',
@@ -233 +182 @@
                 },
 
                 /**
-                 * Content
+                 * Create an attachments browser view within the content region.
                  *
-                 * @param {Object} content
+                 * @param {Object} contentRegion Basic object with a `view` property, which
+                 *                               should be set with the proper region view.
                  * @this wp.media.controller.Region
                  */
-                browseContent: function( content ) {
+                createViewForContentRegionInBrowseMode: function( contentRegion ) {
                         var state = this.state();
 
                         // Browse our library of attachments.
-                        content.view = new media.view.AttachmentsBrowser({
+                        contentRegion.view = new media.view.AttachmentsBrowser({
                                 controller: this,
                                 collection: state.get('library'),
                                 selection:  state.get('selection'),
@@ -259 +209 @@
 
                                 AttachmentView: state.get('AttachmentView')
                         });
-                },
-
-                editImageContent: function() {
-                        var image = this.state().get('image'),
-                                view = new media.view.EditImage( { model: image, controller: this } ).render();
-
-                        this.content.set( view );
-
-                        // after creating the wrapper view, load the actual editor via an ajax call
-                        view.loadEditor();
-
                 }
         });
 
+        /**
+         * A similar view to media.view.Attachment.Details
+         * for use in the Edit Attachment modal.
+         */
         media.view.Attachment.Details.TwoColumn = media.view.Attachment.Details.extend({
-                template: wp.template( 'attachment-details-two-column' ),
-
-                events: {
-                        'change [data-setting]':          'updateSetting',
-                        'change [data-setting] input':    'updateSetting',
-                        'change [data-setting] select':   'updateSetting',
-                        'change [data-setting] textarea': 'updateSetting',
-                        'click .delete-attachment':       'deleteAttachment',
-                        'click .trash-attachment':        'trashAttachment',
-                        'click .edit-attachment':         'editAttachment',
-                        'click .refresh-attachment':      'refreshAttachment',
-                        'click .edit-image':              'handleEditImageClick'
-                },
-
-                initialize: function() {
-                        if ( ! this.model ) {
-                                return;
-                        }
-
-                        this.$el.attr('aria-label', this.model.get( 'title' ) ).attr( 'aria-checked', false );
-
-                        this.model.on( 'change:title',   this._syncTitle, this );
-                        this.model.on( 'change:caption', this._syncCaption, this );
-                        this.model.on( 'change:percent', this.progress, this );
-                        this.model.on( 'change:album',   this._syncAlbum, this );
-                        this.model.on( 'change:artist',  this._syncArtist, this );
-
-                        // Update the selection.
-                        this.model.on( 'add', this.select, this );
-                        this.model.on( 'remove', this.deselect, this );
-                        this.model.on( 'sync', this.afterDelete, this );
-                },
+                template: media.template( 'attachment-details-two-column' ),
 
                 preDestroy: function( event ) {
                         event.preventDefault();
@@ -324 +236 @@
                         media.view.Attachment.Details.prototype.deleteAttachment.apply( this, arguments );
                 },
 
-                handleEditImageClick: function() {
+                editAttachment: function( event ) {
+                        event.preventDefault();
                         this.controller.setState( 'edit-image' );
                 },
 
+                /**
+                 * Noop this from parent class, doesn't apply here.
+                 */
+                toggleSelectionHandler: function() {},
+
                 afterDelete: function( model ) {
                         if ( ! model.destroyed ) {
                                 return;
@@ -444 +362 @@
                         this.createStates();
 
                         this.on( 'content:render:edit-metadata', this.editMetadataContent, this );
-                        this.on( 'content:render:edit-image', this.editImageContentUgh, this );
+                        this.on( 'content:create:edit-image', this.createViewForContentRegionInEditImageMode, this );
+                        // this.on( 'content:render:edit-image', this.rendereditImageContentUgh, this );
                         this.on( 'close', this.detach );
 
                         // Bind default title creation.
@@ -512 +431 @@
                 },
 
                 /**
-                 * For some reason the view doesn't exist in the DOM yet, don't have the
-                 * patience to track this down right now.
-                 */
-                editImageContentUgh: function() {
-                        _.defer( _.bind( this.editImageContent, this ) );
-                },
-
-                /**
                  * Render the EditImage view into the frame's content region.
                  */
-                editImageContent: function() {
-                        var view = new media.view.EditImage( { model: this.model, controller: this } ).render();
-
-                        this.content.set( view );
-
-                        // after creating the wrapper view, load the actual editor via an ajax call
-                        view.loadEditor();
+                createViewForContentRegionInEditImageMode: function( contentRegion ) {
+                        contentRegion.view = new media.view.EditImage( { model: this.model, controller: this } );
+                        // Defer a call to load the editor, which
+                        // requires DOM elements to exist.
+                        _.defer( _.bind( contentRegion.view.loadEditor, contentRegion.view ) );
                 },
 
                 resetContent: function() {

src/wp-includes/js/media-views.js

@@ -1685 +1685 @@
          */
         media.view.Frame = media.View.extend({
                 initialize: function() {
+                        _.defaults( this.options, {
+                                mode: [ 'select' ]
+                        });
                         this._createRegions();
                         this._createStates();
+                        this._createModes();
                 },
 
                 _createRegions: function() {
@@ -1721 +1725 @@
                                 this.states.add( this.options.states );
                         }
                 },
+                _createModes: function() {
+                        // Store active "modes" that the frame is in. Unrelated to region modes.
+                        this.activeModes = new Backbone.Collection();
+                        this.activeModes.on( 'add remove reset', _.bind( this.triggerModeEvents, this ) );
+
+                        _.each( this.options.mode, function( mode ) {
+                                this.activateMode( mode );
+                        }, this );
+                },
                 /**
                  * @returns {wp.media.view.Frame} Returns itself to allow chaining
                  */
                 reset: function() {
                         this.states.invoke( 'trigger', 'reset' );
                         return this;
+                },
+                /**
+                 * Map activeMode collection events to the frame.
+                 */
+                triggerModeEvents: function( model, collection, options ) {
+                        var collectionEvent,
+                                modeEventMap = {
+                                        add: 'activate',
+                                        remove: 'deactivate'
+                                },
+                                eventToTrigger;
+                        // Probably a better way to do this.
+                        _.each( options, function( value, key ) {
+                                if ( value ) {
+                                        collectionEvent = key;
+                                }
+                        } );
+
+                        if ( ! _.has( modeEventMap, collectionEvent ) ) {
+                                return;
+                        }
+
+                        eventToTrigger = model.get('id') + ':' + modeEventMap[collectionEvent];
+                        this.trigger( eventToTrigger );
+                },
+                /**
+                 * Activate a mode on the frame.
+                 *
+                 * @param string mode Mode ID.
+                 * @returns {this} Returns itself to allow chaining.
+                 */
+                activateMode: function( mode ) {
+                        // Bail if the mode is already active.
+                        if ( this.isModeActive( mode ) ) {
+                                return;
+                        }
+                        this.activeModes.add( [ { id: mode } ] );
+                        // Add a CSS class to the frame so elements can be styled for the mode.
+                        this.$el.addClass( 'mode-' + mode );
+                        /**
+                         * Frame mode activation event.
+                         *
+                         * @event this#{mode}:activate
+                         */
+                        this.trigger( mode + ':activate' );
+
+                        return this;
+                },
+                /**
+                 * Deactivate a mode on the frame.
+                 *
+                 * @param string mode Mode ID.
+                 * @returns {this} Returns itself to allow chaining.
+                 */
+                deactivateMode: function( mode ) {
+                        // Bail if the mode isn't active.
+                        if ( ! this.isModeActive( mode ) ) {
+                                return;
+                        }
+                        this.activeModes.remove( this.activeModes.where( { id: mode } ) );
+                        this.$el.removeClass( 'mode-' + mode );
+                        /**
+                         * Frame mode deactivation event.
+                         *
+                         * @event this#{mode}:deactivate
+                         */
+                        this.trigger( mode + ':deactivate' );
+
+                        return this;
+                },
+                /**
+                 * Check if a mode is enabled on the frame.
+                 *
+                 * @param  string mode Mode ID.
+                 * @return bool
+                 */
+                isModeActive: function( mode ) {
+                        return Boolean( this.activeModes.where( { id: mode } ).length );
                 }
         });
 
@@ -1759 +1850 @@
                         _.defaults( this.options, {
                                 title:    '',
                                 modal:    true,
-                                uploader: true,
-                                mode:     [ 'select' ]
+                                uploader: true
                         });
 
                         // Ensure core UI is enabled.
@@ -1776 +1866 @@
                                 this.modal.content( this );
                         }
 
-                        // Store active "modes" that the frame is in. Unrelated to region modes.
-                        this.activeModes = new Backbone.Collection();
-                        this.activeModes.on( 'add remove reset', _.bind( this.triggerModeEvents, this ) );
-
-                        _.each( this.options.mode, function( mode ) {
-                                this.activateMode( mode );
-                        }, this );
-
                         // Force the uploader off if the upload limit has been exceeded or
                         // if the browser isn't supported.
                         if ( wp.Uploader.limitExceeded || ! wp.Uploader.browser.supported ) {
@@ -1948 +2030 @@
 
                         window.tb_remove = this._tb_remove;
                         delete this._tb_remove;
-                },
-
-                /**
-                 * Map activeMode collection events to the frame.
-                 */
-                triggerModeEvents: function( model, collection, options ) {
-                        var collectionEvent,
-                                modeEventMap = {
-                                        add: 'activate',
-                                        remove: 'deactivate'
-                                },
-                                eventToTrigger;
-                        // Probably a better way to do this.
-                        _.each( options, function( value, key ) {
-                                if ( value ) {
-                                        collectionEvent = key;
-                                }
-                        } );
-
-                        if ( ! _.has( modeEventMap, collectionEvent ) )
-                                return;
-
-                        eventToTrigger = model.get('id') + ':' + modeEventMap[collectionEvent];
-                        this.trigger( eventToTrigger );
-                },
-                /**
-                 * Activate a mode on the frame.
-                 *
-                 * @param string mode Mode ID.
-                 * @returns {this} Returns itself to allow chaining.
-                 */
-                activateMode: function( mode ) {
-                        // Bail if the mode is already active.
-                        if ( this.isModeActive( mode ) ) {
-                                return;
-                        }
-                        this.activeModes.add( [ { id: mode } ] );
-                        // Add a css class to the frame for anything that needs to be styled
-                        // for the mode.
-                        this.$el.addClass( 'mode-' + mode );
-                        /**
-                         * Frame mode activation event.
-                         *
-                         * @event this#{mode}:activate
-                         */
-                        this.trigger( mode + ':activate' );
-
-                        return this;
-                },
-                /**
-                 * Deactivate a mode on the frame.
-                 *
-                 * @param string mode Mode ID.
-                 * @returns {this} Returns itself to allow chaining.
-                 */
-                deactivateMode: function( mode ) {
-                        // Bail if the mode isn't active.
-                        if ( ! this.isModeActive( mode ) ) {
-                                return;
-                        }
-                        this.activeModes.remove( this.activeModes.where( { id: mode } ) );
-                        this.$el.removeClass( 'mode-' + mode );
-                        /**
-                         * Frame mode deactivation event.
-                         *
-                         * @event this#{mode}:deactivate
-                         */
-                        this.trigger( mode + ':deactivate' );
-
-                        return this;
-                },
-                /**
-                 * Check if a mode is enabled on the frame.
-                 *
-                 * @param  string mode Mode ID.
-                 * @return bool
-                 */
-                isModeActive: function( mode ) {
-                        return Boolean( this.activeModes.where( { id: mode } ).length );
                 }
         });
 
@@ -4631 +4634 @@
                 buttons: {},
 
                 initialize: function() {
-                        var selection = this.options.selection;
+                        var selection = this.options.selection,
+                                options = _.defaults( this.options, {
+                                        rerenderOnModelChange: true
+                                } );
+                        this.$el.attr( 'aria-label', this.model.get( 'title' ) ).attr( 'aria-checked', false );
 
-                        this.$el.attr('aria-label', this.model.attributes.title).attr('aria-checked', false);
-                        this.model.on( 'change', this.render, this );
+                        if ( options.rerenderOnModelChange ) {
+                                this.model.on( 'change', this.render, this );
+                        }
                         this.model.on( 'change:title', this._syncTitle, this );
                         this.model.on( 'change:caption', this._syncCaption, this );
                         this.model.on( 'change:artist', this._syncArtist, this );
@@ -4646 +4654 @@
                         this.model.on( 'remove', this.deselect, this );
                         if ( selection ) {
                                 selection.on( 'reset', this.updateSelect, this );
+                                // Update the model's details view.
+                                this.model.on( 'selection:single selection:unsingle', this.details, this );
+                                this.details( this.model, this.controller.state().get('selection') );
                         }
-
-                        // Update the model's details view.
-                        this.model.on( 'selection:single selection:unsingle', this.details, this );
-                        this.details( this.model, this.controller.state().get('selection') );
                 },
                 /**
                  * @returns {wp.media.view.Attachment} Returns itself to allow chaining
@@ -4752 +4759 @@
                         }
 
                         // In the grid view, bubble up an edit:attachment event to the controller.
-                        if ( this.controller.activeModes.where( { id: 'edit' } ).length ) {
+                        if ( this.controller.isModeActive( 'grid' ) ) {
                                 this.controller.trigger( 'edit:attachment', this.model );
                                 return;
                         }
@@ -6318 +6325 @@
                 },
 
                 initialize: function() {
+                        this.options = _.defaults( this.options, {
+                                rerenderOnModelChange: false
+                        });
                         /**
                          * call 'initialize' directly on the parent class
                          */
                         media.view.Attachment.prototype.initialize.apply( this, arguments );
                 },
                 /**
-                 * @returns {wp.media.view..Attachment.Details} Returns itself to allow chaining
-                 */
-                render: function() {
-                        /**
-                         * call 'render' directly on the parent class
-                         */
-                        media.view.Attachment.prototype.render.apply( this, arguments );
-                        return this;
-                },
-                /**
                  * @param {Object} event
                  */
                 deleteAttachment: function( event ) {
@@ -6379 +6379 @@
                         this.model.fetch();
                 },
                 /**
+                 * When reverse tabbing(shift+tab) out of the right details panel, deliver
+                 * the focus to the item in the list that was being edited.
+                 *
                  * @param {Object} event
                  */
                 toggleSelectionHandler: function( event ) {
-                        // Reverse tabbing out of the right details panel
-                        // should take me back to the item in the list that was being edited.
                         if ( 'keydown' === event.type && 9 === event.keyCode && event.shiftKey && event.target === $( ':tabbable', this.$el ).filter( ':first' )[0] ) {
                                 $('.attachments-browser .details').focus();
                                 return false;

src/wp-includes/media-template.php

@@ -263 +263 @@
         </script>
 
         <script type="text/html" id="tmpl-attachment-details-two-column">
-                <h3>
-                        <?php _e('Attachment Details'); ?>
-                </h3>
                 <div class="attachment-media-view">
                         <div class="thumbnail thumbnail-{{ data.type }}">
                                 <# if ( data.uploading ) { #>
@@ -294 +291 @@
 
                                 <div class="attachment-actions">
                                         <# if ( 'image' === data.type && ! data.uploading ) { #>
-                                                <a class="button edit-image" href="#"><?php _e( 'Edit Image' ); ?></a>
+                                                <a class="button edit-attachment" href="#"><?php _e( 'Edit Image' ); ?></a>
                                         <# } #>
 
                                         <# if ( ! data.uploading && data.can.remove ) { #>