WordPress.org
Get WordPress

Make WordPress Core

Ticket #23933: 23933.2.patch

File 23933.2.patch, 20.5 KB (added by ocean90, 12 years 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( 'compare-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( 'compare-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 #comparetwo':       '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
    656650                        $( '#comparetwo' ).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 ( $( '#comparetwo' ).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.compare-two-revisions #diff-previous-revision,
     3777.compare-two-revisions #diff-next-revision,
     3778#diff-title-from-current-version,
     3779.compare-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.compare-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.compare-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="currentversion rightmodelloading">
     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>
    125121                        <input type="checkbox" id="comparetwo" />
    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' );