WordPress.org

Make WordPress Core

Ticket #23933: 23933.3.patch

File 23933.3.patch, 20.6 KB (added by ocean90, 13 months ago)
  • wp-admin/js/revisions.js

     
    116116 
    117117                startLeftModelLoading: function() { 
    118118                        this.leftModelLoading = true; 
    119                         $('.revisiondiffcontainer').addClass('leftmodelloading'); 
     119                        $('#revision-diff-container').addClass('left-model-loading'); 
    120120                }, 
    121121 
    122122                stopLeftModelLoading: function() { 
     
    125125 
    126126                startRightModelLoading: function() { 
    127127                        this.rightModelLoading = true; 
    128                         $('.revisiondiffcontainer').addClass('rightmodelloading'); 
     128                        $('#revision-diff-container').addClass('right-model-loading'); 
    129129                }, 
    130130 
    131131                stopRightModelLoading: function() { 
     
    133133                }, 
    134134 
    135135                stopModelLoadingSpinner: function() { 
    136                         $('.revisiondiffcontainer').removeClass('rightmodelloading'); 
    137                         $('.revisiondiffcontainer').removeClass('leftmodelloading'); 
     136                        $('#revision-diff-container').removeClass('right-model-loading'); 
     137                        $('#revision-diff-container').removeClass('left-model-loading'); 
    138138                }, 
    139139 
    140140                reloadModel: function() { 
     
    279279         * The slider 
    280280         */ 
    281281        revisions.view.Slider = Backbone.View.extend({ 
    282                 el: $( '#slider' ), 
     282                el: $( '#diff-slider' ), 
    283283                singleRevision: true, 
    284284 
    285285                initialize: function( options ) { 
     
    314314                                } 
    315315 
    316316                                if ( 0 === Diff.leftDiff ) { 
    317                                         $( '.revisiondiffcontainer' ).addClass( 'currentversion' ); 
     317                                        $( '#revision-diff-container' ).addClass( 'currentversion' ); 
    318318                                } else { 
    319                                         $( '.revisiondiffcontainer' ).removeClass( 'currentversion' ); 
     319                                        $( '#revision-diff-container' ).removeClass( 'currentversion' ); 
    320320                                } 
    321321 
    322322                                Diff.revisionView.render(); 
     
    380380                }, 
    381381 
    382382                addTooltip: function( handle, message ) { 
    383  
    384383                        handle.attr( 'title', '' ).tooltip({ 
    385384                                track: false, 
    386385 
     
    406405                }, 
    407406 
    408407                width: function() { 
    409                         return $( '#slider' ).width(); 
     408                        return $( '#diff-slider' ).width(); 
    410409                }, 
    411410 
    412411                setWidth: function( width ) { 
    413                         return $( '#slider' ).width( width ); 
     412                        return $( '#diff-slider' ).width( width ); 
    414413                }, 
    415414 
    416415                refresh: function( options, slide ) { 
    417                         $( '#slider' ).slider( 'option', options ); 
     416                        $( '#diff-slider' ).slider( 'option', options ); 
    418417 
    419418                        // Triggers the slide event 
    420419                        if ( slide ) 
    421                                 $( '#slider' ).trigger( 'slide' ); 
     420                                $( '#diff-slider' ).trigger( 'slide' ); 
    422421                }, 
    423422 
    424423                option: function( key ) { 
    425                         return $( '#slider' ).slider( 'option', key ); 
     424                        return $( '#diff-slider' ).slider( 'option', key ); 
    426425                }, 
    427426 
    428427                render: function() { 
    429428                        var self = this; 
    430429                        // this.$el doesn't work, why? 
    431                         $( '#slider' ).slider( { 
     430                        $( '#diff-slider' ).slider( { 
    432431                                slide: $.proxy( self.slide, self ), 
    433432                                start: $.proxy( self.start, self ), 
    434433                                stop: $.proxy( self.stop, self ) 
     
    465464 
    466465                        Diff.slider.setWidth( sliderWidth ); 
    467466                        $( '.diff-slider-ticks-wrapper' ).width( sliderWidth ); 
    468                         $( '#diffslider' ).width( sliderWidth ); 
    469467                        $( '#diff-slider-ticks' ).width( sliderWidth ); 
    470468 
    471469                        var aTickWidth = $( '.revision-tick' ).width(); 
     
    507505         */ 
    508506        // TODO: Change Interact to something else. 
    509507        revisions.view.Interact = Backbone.View.extend({ 
    510                 el: $('#backbonerevisionsinteract'), 
    511                 template: wp.template('revision-interact'), 
     508                el: $( '#revision-interact' ), 
     509                template: wp.template( 'revision-interact' ), 
    512510 
    513511                // next and previous buttons, only available in compare one mode 
    514512                events: { 
     
    517515                }, 
    518516 
    519517                render: function() { 
    520                         var self = this; 
     518                        this.$el.html( this.template ); 
    521519 
    522                         var addHtml = this.template; 
    523                         this.$el.html( addHtml ); 
    524  
    525520                        var modelcount = Diff.revisions.length; 
    526521 
    527522                        Diff.slider.singleRevision = Diff.singleRevision; 
     
    534529                                        max: modelcount - 1 
    535530                                }); 
    536531 
    537                                 $( '.revisiondiffcontainer' ).removeClass( 'comparetwo' ); 
     532                                $( '#revision-diff-container' ).removeClass( 'comparing-two-revisions' ); 
    538533 
    539534                        } else { 
    540535                                Diff.slider.refresh({ 
     
    544539                                        range: true 
    545540                                }); 
    546541 
    547                                 $( '.revisiondiffcontainer' ).addClass( 'comparetwo' ); 
    548                                 $( '#diffslider a.ui-slider-handle' ).first().addClass( 'left-handle' ); 
    549                                 $( '#diffslider a.ui-slider-handle' ).last().addClass( 'right-handle' ); 
     542                                $( '#revision-diff-container' ).addClass( 'comparing-two-revisions' ); 
     543                                $( '#diff-slider a.ui-slider-handle' ).first().addClass( 'left-handle' ); 
     544                                $( '#diff-slider a.ui-slider-handle' ).last().addClass( 'right-handle' ); 
    550545 
    551546                        } 
    552547 
     
    584579         * Next/Prev buttons and the slider 
    585580         */ 
    586581        revisions.view.Diff = Backbone.View.extend({ 
    587                 el: $('#backbonerevisionsdiff'), 
    588                 template: wp.template('revision'), 
     582                el: $( '#revisions-diff' ), 
     583                template: wp.template( 'revisions-diff' ), 
    589584                draggingLeft: false, 
    590585 
    591586                // the compare two button is in this view, add the interaction here 
    592587                events: { 
    593                         'click #comparetwo': 'compareTwo', 
    594                         'click #restore':    'restore' 
     588                        'click #compare-two-revisions': 'compareTwo', 
     589                        'click #restore-revision':      'restore' 
    595590                }, 
    596591 
    597592                // render the revisions 
     
    613608                                        } 
    614609                                } 
    615610                        } else { // end compare two revisions mode, eg only one slider handle 
    616                                 this.comparetwochecked = ''; 
    617611                                if ( this.model.at( Diff.rightDiff - 1 ) ) { 
    618612                                        addHtml = this.template( this.model.at( Diff.rightDiff - 1 ).toJSON() ); 
    619613                                } 
     
    621615                        this.$el.html( addHtml ); 
    622616 
    623617                        if ( this.model.length < 2 ) { 
    624                                 $( '#diffslider' ).hide(); // don't allow compare two if fewer than three revisions 
     618                                $( '#diff-slider' ).hide(); // don't allow compare two if fewer than three revisions 
    625619                                $( '.diff-slider-ticks-wrapper' ).hide(); 
    626620                        } 
    627621 
     
    640634 
    641635                        // hide the restore button when on the last sport/current post data 
    642636                        if ( Diff.rightDiff === Diff.revisions.length ){ 
    643                                 $( '#restore' ).hide(); 
     637                                $( '#restore-revision' ).hide(); 
    644638                        } else { 
    645                                 $( '#restore' ).show(); 
     639                                $( '#restore-revision' ).show(); 
    646640                        } 
    647641 
    648642                        return this; 
     
    651645                toogleCompareTwoCheckbox: function() { 
    652646                        // don't allow compare two if fewer than three revisions 
    653647                        if ( this.model.length < 3 ) 
    654                                 $( '#comparetworevisions' ).hide(); 
     648                                $( '#toogle-revision-compare-mode' ).hide(); 
    655649 
    656                         $( '#comparetwo' ).prop( 'checked', ! Diff.singleRevision ); 
     650                        $( '#compare-two-revisions' ).prop( 'checked', ! Diff.singleRevision ); 
    657651                }, 
    658652 
    659653                // turn on/off the compare two mode 
    660654                compareTwo: function() { 
    661                         if ( $( 'input#comparetwo' ).is( ':checked' ) ) { // compare 2 mode 
     655                        if ( $( '#compare-two-revisions' ).is( ':checked' ) ) { // compare 2 mode 
    662656                                Diff.singleRevision = false ; 
    663657 
    664658                                if ( 1 === Diff.rightDiff ) 
  • wp-admin/css/colors-fresh.css

     
    13791379        background-color: #e9f6ea; 
    13801380} 
    13811381 
    1382 .diff-to-title { 
    1383         color: #0080AA; 
     1382#diff-title-to strong { 
     1383        color: #0080aa; 
    13841384} 
    13851385 
    1386 #diffsubheader{ 
     1386.diff-header { 
    13871387        background-color: #f7f7f7; 
    13881388} 
    13891389 
    1390 .comparetwo#diffsubheader.diff-left-hand-meta-row { 
    1391         background-color: #fcfcfc; 
    1392 } 
    1393  
    1394 .revision-tick.revision-toloadtrue { 
     1390.revision-tick.loading-true { 
    13951391        background-color: #9999cc; 
    13961392        background: url(../images/wpspin_light.gif) no-repeat; 
    13971393        background-position: middle; 
    13981394        background-size: 1px 10px; 
    13991395} 
    14001396 
    1401 .revision-tick.revision-toloadfalse { 
     1397.revision-tick.loading-false { 
    14021398        background-color: #aaa; 
    14031399} 
    14041400 
    1405 #att-info { 
    1406         background-color: #e4f2Fd; 
    1407 } 
    1408  
    14091401body .ui-tooltip { 
    14101402        border-color: #d7d7d7; 
    14111403        background-color: #fff; 
  • wp-admin/css/wp-admin.css

     
    36173617  11.2 - Post Revisions 
    36183618------------------------------------------------------------------------------*/ 
    36193619 
     3620/* Revision meta box */ 
     3621.post-revisions li img { 
     3622        vertical-align: middle; 
     3623} 
     3624 
    36203625table.diff { 
    36213626        width: 100%; 
    36223627} 
     
    36533658        text-decoration: none; 
    36543659} 
    36553660 
    3656 #revisions-meta-mostrecent, 
    3657 #revisions-meta-stored, 
    3658 #revisions-meta-oldest, 
    3659 #revisions-meta-link { 
    3660         line-height: 30px; 
    3661         height: 30px; 
    3662         vertical-align: middle; 
    3663         padding-right: 10px; 
     3661#revision-diff-container { 
     3662        position: relative; 
    36643663} 
    36653664 
    3666 #revisions-meta-mostrecent img, 
    3667 #revisions-meta-oldest img { 
    3668         vertical-align: middle; 
     3665#toogle-revision-compare-mode { 
     3666        position: absolute; 
     3667        top: 0; 
     3668        right: 0; 
     3669        padding-top: 15px; 
    36693670} 
    36703671 
    3671 .diff-from-title, 
    3672 .diff-to-title { 
    3673         font-size: 14px; 
    3674         font-weight: bold; 
    3675         width:60px; 
    3676         text-align: right; 
    3677         float: left; 
    3678         margin-right: 5px; 
     3672#loading-status { 
     3673        position: absolute; 
     3674        top: 0; 
     3675        right: 170px; 
     3676        line-height: 30px; 
     3677        display: none; 
     3678        margin: 9px 0 0; 
    36793679} 
    36803680 
    3681 .revisiondiffcontainer { 
    3682         width: 96%; 
     3681#loading-status .spinner { 
     3682        float: left; 
    36833683} 
    36843684 
    3685 .revisiondiffcontainer input.button { 
    3686         margin: 2px; 
     3685#revision-interact { 
     3686        border-bottom: 1px solid #dfdfdf; 
     3687        padding: 20px 0; 
    36873688} 
    36883689 
    3689 #diffnext { 
    3690         float: right; 
    3691         margin-right: 5px; 
     3690#diff-next-revision, 
     3691#diff-previous-revision { 
     3692        margin-top: -.4em; /* Same line as the slider (height: .8em) */ 
    36923693} 
    36933694 
    3694 #diffrestore input{ 
    3695         margin-left: 10px; 
     3695#diff-next-revision { 
     3696        float: right; 
    36963697} 
    36973698 
    3698 #diffprevious, 
    3699 #difftitle, 
    3700 #difftitlefrom, 
    3701 #diff_from_current_revision { 
     3699#diff-previous-revision { 
    37023700        float: left; 
    3703         margin-left: 5px; 
    3704         height: 35px; 
    37053701} 
    37063702 
    3707 #diffprevious, 
    3708 #diffnext { 
    3709         height: 30px; 
     3703#diff-slider{ 
     3704        width: 70%; 
     3705        margin: 0 auto; 
    37103706} 
    37113707 
    3712 #diffheader, #diffsubheader { 
    3713         clear: both; 
    3714         width: 100%; 
     3708.comparetwo #diff-slider { 
     3709        width: 95%; 
    37153710} 
    37163711 
    3717 #diffheader { 
    3718         border-bottom: 1px solid #dfdfdf; 
    3719         width: 100%; 
    3720         height: 40px; 
    3721         line-height: 40px; 
    3722         padding-top: 30px; 
    3723 } 
    3724  
    3725 #diffsubheader,.diff-left-hand-meta-row { 
    3726         width: 100%; 
    3727         height:35px; 
    3728         line-height: 35px; 
    3729         display: block; 
    3730 } 
    3731  
    3732 #diffslider{ 
    3733         width: 70%; 
    3734         margin-left: auto; 
    3735         margin-right: auto; 
    3736         text-align: center; 
    3737         height: 0.8em; 
    3738         margin-top: 20px; 
    3739 } 
    3740  
    37413712.diff-slider-ticks-wrapper { 
    3742         margin-left: auto; 
    3743         margin-right: auto; 
     3713        margin: 0 auto; 
    37443714        text-align: center; 
    37453715} 
    37463716 
    37473717#diff-slider-ticks { 
    37483718        position: absolute; 
    3749         margin-top: 50px; 
    37503719        z-index: 1; 
     3720        margin-top: 20px; 
    37513721} 
    37523722 
    3753 #revisioncount { 
    3754         width: 50%; 
    3755         margin-left: auto; 
    3756         margin-right: auto; 
    3757         margin-top: 0; 
    3758         line-height: 1em; 
    3759         height: 1em; 
    3760         text-align: center; 
    3761         clear: none; 
    3762         padding: 5px; 
     3723.diff-header { 
     3724        height: 35px; 
     3725        line-height: 35px; 
    37633726} 
    37643727 
    3765 .revisiondiffcontainer { 
    3766         margin-top: 10px; 
     3728.diff-title { 
     3729        float: left; 
    37673730} 
    37683731 
    3769 #diffsliderwrap { 
    3770         width: 80%; 
    3771         margin-left: auto; 
    3772         margin-right: auto; 
     3732.diff-title strong { 
     3733        font-size: 14px; 
     3734        width: 60px; 
     3735        text-align: right; 
     3736        float: left; 
     3737        margin-right: 5px; 
    37733738} 
    37743739 
    3775 #diffsliderwrap #sliderinner { 
    3776         position: relative; 
    3777         top: 47px; 
     3740.diff-title img { 
     3741        vertical-align: middle; 
    37783742} 
    37793743 
    3780 #removedandadded { 
     3744#restore-revision { 
     3745        margin-left: 10px; 
     3746} 
     3747 
     3748.diff-col-titles { 
     3749        font-size: 16px; 
    37813750        width: 100%; 
    3782         padding-bottom: 30px; 
    3783         padding-top: 3px; 
    3784         font-size: 16px; 
     3751        margin: 20px 0 10px; 
    37853752} 
    37863753 
    3787 #removed, 
    3788 #added { 
     3754.diff-col-title-added, 
     3755.diff-col-title-removed { 
    37893756        width: auto; 
    37903757        text-align: left; 
    3791         padding-left: 5px; 
    3792         padding-right: 5px; 
    3793         padding-top: 5px; 
    3794         padding-bottom: 5px; 
    37953758        float: left; 
     3759        width: 48%; 
    37963760} 
    37973761 
    3798 .diffsplit #added { 
    3799         float: right; 
    3800         width: 47%; 
    3801         text-align: left; 
     3762.diff-col-title-added span, 
     3763.diff-col-title-removed span { 
     3764        padding: .5em; 
    38023765} 
    38033766 
    3804 .diffsplit #removedandadded { 
    3805         width: 100%; 
    3806 } 
    3807  
    3808 #added { 
    3809         padding-left: 10px; 
     3767.diff-col-title-added { 
     3768        float: right; 
    38103769        color: #00a100; 
    38113770} 
    38123771 
    3813 #removed { 
    3814         padding-left: 0px; 
     3772.diff-col-title-removed { 
    38153773        color: #d2281f; 
    38163774} 
    38173775 
    3818 #comparetworevisions { 
    3819         float: right; 
    3820         position: absolute; 
    3821         top: 10px; 
    3822         right: 10px; 
    3823         line-height: 35px; 
    3824         padding-right: 5px; 
    3825 } 
    3826  
    3827 #comparetworevisions input { 
    3828         margin-right: 2px; 
    3829 } 
    3830  
    3831 #difftitle img, 
    3832 #difftitlefrom img, 
    3833 .post-revisions li img { 
    3834         vertical-align: middle; 
    3835         margin-left: 5px; 
    3836 } 
    3837 .post-revisions li { 
    3838         vertical-align: middle; 
    3839         height: 28px; 
    3840 } 
    3841  
    3842 #showsplitviewoption, 
    3843 #toggleshowautosavesoption { 
    3844         float: right; 
    3845         padding-left: 10px; 
    3846         padding-right: 10px; 
    3847 } 
    3848  
    3849 #revisionoptions { 
    3850         margin-top: 0px; 
    3851         line-height: 40px; 
    3852         clear: both; 
    3853         width: 100%; 
    3854 } 
    3855  
    3856 .comparetwo #diffslider { 
    3857         width: 95%; 
    3858 } 
    3859  
    3860 .comparetwo #diffprevious, 
    3861 .comparetwo #diffnext, 
    3862 span#diff_left_current_revision, 
    3863 #diff_from_current_revision, 
    3864 .currentversion span#diff_left_count, 
    3865 .currentversion span#diff_left_count_inner, 
    3866 .comparetwo.currentversion #diff_from_current_revision, 
    3867 #diffsubheader.diff-left-hand-meta-row { 
     3776.comparing-two-revisions #diff-previous-revision, 
     3777.comparing-two-revisions #diff-next-revision, 
     3778#diff-title-from-current-version, 
     3779.comparing-two-revisions.current-version #diff-title-from-current-version, 
     3780#diff-header-from { 
    38683781        display: none; 
    38693782} 
    38703783 
    3871 .currentversion span#diff_left_current_revision, 
    3872 span#diff_left_count, 
    3873 span#diff_left_count_inner, 
    3874 .comparetwo #difftitlefrom, 
    3875 .leftmodelloading #modelsloading, 
    3876 .rightmodelloading #modelsloading, 
    3877 .leftmodelloading #modelsloading .spinner, 
    3878 .rightmodelloading #modelsloading .spinner, 
    3879 .comparetwo #diffsubheader.diff-left-hand-meta-row { 
     3784.comparing-two-revisions #diff-title-from, 
     3785.left-model-loading #loading-status, 
     3786.right-model-loading #loading-status, 
     3787.left-model-loading #loading-status .spinner, 
     3788.right-model-loading #loading-status .spinner, 
     3789.comparing-two-revisions #diff-header-from { 
    38803790        display: block; 
    38813791} 
    38823792 
    38833793.revision-tick { 
    38843794        width: 1px; 
    38853795        float: left; 
    3886         margin-right: 15px; 
    3887         height: 11px; 
     3796        margin: 1px 15px 0 0; 
     3797        height: .8em; 
    38883798        padding: 0; 
    38893799        margin-left: 0px; 
    38903800} 
    38913801 
    3892 .revision-tick.revision-scopeofchanges-vsmall { 
    3893                 width: 1px; 
    3894                 background-color: #aaa; 
     3802.revision-tick.scope-of-changes-vsmall { 
     3803        width: 1px; 
     3804        background-color: #aaa; 
    38953805} 
    38963806 
    3897 .revision-tick.revision-scopeofchanges-small { 
    3898                 width: 2px; 
    3899                 background-color: #aaa; 
    3900                 margin-left: -1px; 
     3807.revision-tick.scope-of-changes-small { 
     3808        width: 2px; 
     3809        background-color: #aaa; 
     3810        margin-left: -1px; 
    39013811} 
    39023812 
    3903 .revision-tick.revision-scopeofchanges-med { 
    3904                 width: 3px; 
    3905                 margin-left: -2px; 
    3906                 background-color: #666; 
     3813.revision-tick.scope-of-changes-med { 
     3814        width: 3px; 
     3815        margin-left: -2px; 
     3816        background-color: #666; 
    39073817} 
    39083818 
    3909 .revision-tick.revision-scopeofchanges-large { 
    3910                 width: 4px; 
    3911                 margin-left: -3px; 
    3912                 background-color: #333; 
     3819.revision-tick.scope-of-changes-large { 
     3820        width: 4px; 
     3821        margin-left: -3px; 
     3822        background-color: #333; 
    39133823} 
    39143824 
    3915 .revision-tick.revision-scopeofchanges-vlarge { 
    3916                 margin-left: -3px; 
    3917                 width: 4px; 
    3918                 background-color: #111; 
    3919                 left: 1; 
     3825.revision-tick.scope-of-changes-vlarge { 
     3826        margin-left: -3px; 
     3827        width: 4px; 
     3828        background-color: #111; 
     3829        left: 1; 
    39203830} 
    39213831 
    39223832.diff-loading { 
     
    39243834        width: 100%; 
    39253835        height: 200px; 
    39263836} 
    3927 .diff-loading .spinner 
    3928 { 
     3837 
     3838.diff-loading .spinner { 
    39293839        clear: both; 
    39303840        margin-left: auto; 
    39313841        margin-right: auto; 
     
    39333843        float: none; 
    39343844} 
    39353845 
    3936 #modelsloading { 
    3937         float: right; 
    3938         position: absolute; 
    3939         line-height: 30px; 
    3940         display: none; 
    3941         clear: none; 
    3942         right: 170px; 
    3943         margin-top: -40px; 
    3944 } 
    3945  
    3946 #modelsloading .spinner { 
    3947         float: left; 
    3948 } 
    3949  
    39503846.ui-tooltip-content img { 
    39513847        float: left; 
    39523848        margin-right: 5px; 
    39533849} 
    39543850 
    39553851 
    3956  
    39573852/*  jQuery UI Tooltip 1.10.1 */ 
    39583853 
    39593854.ui-tooltip { 
     
    39853880        margin-left: -35px; 
    39863881        bottom: -16px; 
    39873882        z-index: 99999; 
    3988  
    39893883} 
    39903884 
    39913885.arrow.top { 
  • wp-admin/css/colors-classic.css

     
    14761476        background-color: #e9f6ea; 
    14771477} 
    14781478 
    1479 #diffsubheader{ 
     1479.diff-header { 
    14801480        background-color: #f7f7f7; 
    14811481} 
    14821482 
    1483 #att-info { 
    1484         background-color: #e4f2fd; 
     1483#diff-title-to strong { 
     1484        color: #0080aa; 
    14851485} 
    14861486 
     1487.revision-tick.loading-true { 
     1488        background-color: #9999cc; 
     1489        background: url(../images/wpspin_light.gif) no-repeat; 
     1490        background-position: middle; 
     1491        background-size: 1px 10px; 
     1492} 
     1493 
     1494.revision-tick.loading-false { 
     1495        background-color: #aaa; 
     1496} 
     1497 
    14871498/* jQuery UI Slider */ 
    14881499.wp-slider.ui-slider { 
    14891500        border-color: #d1e5ee; 
  • wp-admin/revision.php

     
    7575        $parent_file = $submenu_file = 'edit.php?post_type=' . $post->post_type; 
    7676else 
    7777        $parent_file = $submenu_file = 'edit.php'; 
     78 
    7879wp_enqueue_script( 'revisions' ); 
    7980 
    80 require_once( './admin-header.php' ); 
    81  
    8281$strings = array( 
    8382        'diffFromTitle' => _x( 'From: %s', 'revision from title'  ), 
    8483        'diffToTitle'   => _x( 'To: %s', 'revision to title' ) 
     
    9190); 
    9291 
    9392$strings['settings'] = $settings; 
    94  
    9593wp_localize_script( 'revisions', 'wpRevisionsL10n', $strings ); 
    9694 
    97 $comparetworevisionslink = get_edit_post_link( $revision->ID ); 
     95require_once( './admin-header.php' ); 
     96 
    9897?> 
    9998 
    100 <div id="backbonerevisionsoptions"> 
    101 </div> 
    10299<div class="wrap"> 
    103         <div class="icon32 icon32-posts-post" id="icon-edit"> 
    104                 <br> 
    105         </div> 
    106         <div class="revisiondiffcontainer diffsplit currentversion rightmodelloading"> 
    107                 <div id="modelsloading" class="updated message"> 
     100        <?php screen_icon(); ?> 
     101        <div id="revision-diff-container" class="current-version right-model-loading"> 
     102                <div id="loading-status" class="updated message"> 
    108103                        <span class="spinner" ></span> <?php _e( 'Calculating revision diffs' ); ?> 
    109104                </div> 
     105 
    110106                <h2 class="long-header"><?php echo $h2; ?></h2> 
     107 
    111108                <div class="diff-slider-ticks-wrapper"> 
    112                         <div id="diff-slider-ticks"> 
    113                         </div> 
     109                        <div id="diff-slider-ticks"></div> 
    114110                </div> 
    115                 <div id="backbonerevisionsinteract"> 
    116                 </div> 
    117                 <div id="backbonerevisionsdiff"> 
    118                 </div> 
     111 
     112                <div id="revision-interact"></div> 
     113 
     114                <div id="revisions-diff"></div> 
    119115        </div> 
    120116</div> 
    121117 
    122 <script id="tmpl-revision" type="text/html"> 
    123         <div id="comparetworevisions"> 
     118<script id="tmpl-revisions-diff" type="text/html"> 
     119        <div id="toogle-revision-compare-mode"> 
    124120                <label> 
    125                         <input type="checkbox" id="comparetwo" /> 
     121                        <input type="checkbox" id="compare-two-revisions" /> 
    126122                        <?php esc_attr_e( 'Compare two revisions' ); ?> 
    127123                </label> 
    128124        </div> 
    129125 
    130         <div id="diffsubheader" class="diff-left-hand-meta-row"> 
    131                 <div id="diff_from_current_revision"> 
    132                         <?php printf( '<b>%1$s</b> %2$s.' , __( 'From:' ), __( 'the current version' ) ); ?> 
     126        <div id="diff-header-from" class="diff-header"> 
     127                <div id="diff-title-from-current-version" class="diff-title"> 
     128                        <?php printf( '<strong>%1$s</strong> %2$s.' , __( 'From:' ), __( 'the current version' ) ); ?> 
    133129                </div> 
    134                 <div id="difftitlefrom"> 
    135                         <div class="diff-from-title"><?php _e( 'From:' ); ?></div>{{{ data.titleFrom }}} 
     130 
     131                <div id="diff-title-from" class="diff-title"> 
     132                        <strong><?php _e( 'From:' ); ?></strong> {{{ data.titleFrom }}} 
    136133                </div> 
    137134        </div> 
    138135 
    139         <div id="diffsubheader"> 
    140                 <div id="difftitle"> 
    141                         <div class="diff-to-title"><?php _e( 'To:' ); ?></div>{{{ data.titleTo }}} 
     136        <div id="diff-header-to" class="diff-header"> 
     137                <div id="diff-title-to" class="diff-title"> 
     138                        <strong><?php _e( 'To:' ); ?></strong> {{{ data.titleTo }}} 
    142139                </div> 
    143                 <div id="diffrestore"> 
    144                         <input class="button button-primary" data-restore-link="{{{ data.restoreLink }}}" type="button" id="restore" value="<?php esc_attr_e( 'Restore This Revision' )?>" /> 
    145                 </div> 
     140 
     141                <input type="button" id="restore-revision" class="button button-primary" data-restore-link="{{{ data.restoreLink }}}" value="<?php esc_attr_e( 'Restore This Revision' )?>" /> 
    146142        </div> 
    147143 
    148         <div id="removedandadded"> 
    149                 <div id="removed"><?php _e( 'Removed -' ); ?></div> 
    150                 <div id="added"><?php _e( 'Added +' ); ?></div> 
     144        <div class="diff-col-titles"> 
     145                <div class="diff-col-title-removed"><span><?php _e( 'Removed -' ); ?></span></div> 
     146                <div class="diff-col-title-added"><span><?php _e( 'Added +' ); ?></span></div> 
     147                <div class="clear"></div> 
    151148        </div 
     149 
    152150        <div>{{{ data.diff }}}</div> 
    153151</script> 
    154152 
    155153<script id="tmpl-revision-interact" type="text/html"> 
    156         <div id="diffheader"> 
    157                 <div id="diffprevious"><input class="button" type="submit" id="previous" value="<?php esc_attr_e( 'Previous' ); ?>" /> 
    158                 </div> 
    159                 <div id="diffnext"><input class="button" type="submit" id="next" value="<?php esc_attr_e( 'Next' ); ?>" /> 
    160                 </div> 
    161                 <div id="diffslider"> 
    162                         <div id="slider" class="wp-slider"> 
    163                         </div> 
    164                 </div> 
     154        <div id="diff-previous-revision"> 
     155                <input class="button" type="button" id="previous" value="<?php esc_attr_e( 'Previous' ); ?>" /> 
    165156        </div> 
     157 
     158        <div id="diff-next-revision"> 
     159                <input class="button" type="button" id="next" value="<?php esc_attr_e( 'Next' ); ?>" /> 
     160        </div> 
     161 
     162        <div id="diff-slider" class="wp-slider"></div> 
    166163</script> 
    167164 
    168165<script id="tmpl-revision-ticks" type="text/html"> 
    169         <div class="revision-tick revision-toload{{{ data.revision_toload }}} revision-scopeofchanges-{{{ data.scope_of_changes }}}"> 
    170         </div> 
     166        <div class="revision-tick loading-{{{ data.revision_toload }}} scope-of-changes-{{{ data.scope_of_changes }}}"></div> 
    171167</script> 
    172168<?php 
    173169require_once( './admin-footer.php' );