Fix styling of deletion page when $wgUseMediaWikiUIEverywhere enabled

* Stop using tables use divs instead. It's the future!
* Update MediaWiki UI so that inline inputs have a minimum width (as pointed
  out by Bartosz, the summary field would've gotten smaller than it was
  before to the point of being near unusable).
* Change submit button to be mw-ui-destructive (it deletes a page after all).
* Switch to using Html rather than Xml where possible.

Bug: 70134
Change-Id: Ic308a43cb0ec26ea9fdb8c9c8aa0de481a922435

diff --git a/includes/page/Article.php b/includes/page/Article.php
index e562d43..96e315f 100644 (file)
--- a/includes/page/Article.php
+++ b/includes/page/Article.php
@@ -1676,7 +1676,9 @@ class Article implements Page {
                wfDebug( "Article::confirmDelete\n" );
 
                $title = $this->getTitle();
-               $outputPage = $this->getContext()->getOutput();
+               $ctx = $this->getContext();
+               $outputPage = $ctx->getOutput();
+               $useMediaWikiUIEverywhere = $ctx->getConfig()->get( 'UseMediaWikiUIEverywhere' );
                $outputPage->setPageTitle( wfMessage( 'delete-confirm', $title->getPrefixedText() ) );
                $outputPage->addBacklinkSubtitle( $title );
                $outputPage->setRobotPolicy( 'noindex,nofollow' );
@@ -1692,75 +1694,67 @@ class Article implements Page {
                $user = $this->getContext()->getUser();
 
                if ( $user->isAllowed( 'suppressrevision' ) ) {
-                       $suppress = "<tr id=\"wpDeleteSuppressRow\">
-                                       <td></td>
-                                       <td class='mw-input'><strong>" .
+                       $suppress = Html::openElement( 'div', array( 'id' => 'wpDeleteSuppressRow' ) ) .
+                               "<strong>" .
                                                Xml::checkLabel( wfMessage( 'revdelete-suppress' )->text(),
                                                        'wpSuppress', 'wpSuppress', false, array( 'tabindex' => '4' ) ) .
-                                       "</strong></td>
-                               </tr>";
+                                       "</strong>" .
+                               Html::closeElement( 'div' );
                } else {
                        $suppress = '';
                }
                $checkWatch = $user->getBoolOption( 'watchdeletion' ) || $user->isWatched( $title );
 
-               $form = Xml::openElement( 'form', array( 'method' => 'post',
+               $form = Html::openElement( 'form', array( 'method' => 'post',
                        'action' => $title->getLocalURL( 'action=delete' ), 'id' => 'deleteconfirm' ) ) .
-                       Xml::openElement( 'fieldset', array( 'id' => 'mw-delete-table' ) ) .
-                       Xml::tags( 'legend', null, wfMessage( 'delete-legend' )->escaped() ) .
-                       Xml::openElement( 'table', array( 'id' => 'mw-deleteconfirm-table' ) ) .
-                       "<tr id=\"wpDeleteReasonListRow\">
-                               <td class='mw-label'>" .
-                                       Xml::label( wfMessage( 'deletecomment' )->text(), 'wpDeleteReasonList' ) .
-                               "</td>
-                               <td class='mw-input'>" .
-                                       Xml::listDropDown(
-                                               'wpDeleteReasonList',
-                                               wfMessage( 'deletereason-dropdown' )->inContentLanguage()->text(),
-                                               wfMessage( 'deletereasonotherlist' )->inContentLanguage()->text(),
-                                               '',
-                                               'wpReasonDropDown',
-                                               1
-                                       ) .
-                               "</td>
-                       </tr>
-                       <tr id=\"wpDeleteReasonRow\">
-                               <td class='mw-label'>" .
-                                       Xml::label( wfMessage( 'deleteotherreason' )->text(), 'wpReason' ) .
-                               "</td>
-                               <td class='mw-input'>" .
-                               Html::input( 'wpReason', $reason, 'text', array(
-                                       'size' => '60',
-                                       'maxlength' => '255',
-                                       'tabindex' => '2',
-                                       'id' => 'wpReason',
-                                       'autofocus'
-                               ) ) .
-                               "</td>
-                       </tr>";
+                       Html::openElement( 'fieldset', array( 'id' => 'mw-delete-table' ) ) .
+                       Html::element( 'legend', null, wfMessage( 'delete-legend' )->text() ) .
+                       Html::openElement( 'div', array( 'id' => 'mw-deleteconfirm-table' ) ) .
+                       Html::openElement( 'div', array( 'id' => 'wpDeleteReasonListRow' ) ) .
+                       Html::label( wfMessage( 'deletecomment' )->text(), 'wpDeleteReasonList' ) .
+                       '&nbsp;' .
+                       Xml::listDropDown(
+                               'wpDeleteReasonList',
+                               wfMessage( 'deletereason-dropdown' )->inContentLanguage()->text(),
+                               wfMessage( 'deletereasonotherlist' )->inContentLanguage()->text(),
+                               '',
+                               'wpReasonDropDown',
+                               1
+                       ) .
+                       Html::closeElement( 'div' ) .
+                       Html::openElement( 'div', array( 'id' => 'wpDeleteReasonRow' ) ) .
+                       Html::label( wfMessage( 'deleteotherreason' )->text(), 'wpReason' ) .
+                       '&nbsp;' .
+                       Html::input( 'wpReason', $reason, 'text', array(
+                               'size' => '60',
+                               'maxlength' => '255',
+                               'tabindex' => '2',
+                               'id' => 'wpReason',
+                               'class' => 'mw-ui-input-inline',
+                               'autofocus'
+                       ) ) .
+                       Html::closeElement( 'div' );
 
                # Disallow watching if user is not logged in
                if ( $user->isLoggedIn() ) {
-                       $form .= "
-                       <tr>
-                               <td></td>
-                               <td class='mw-input'>" .
+                       $form .=
                                        Xml::checkLabel( wfMessage( 'watchthis' )->text(),
-                                               'wpWatch', 'wpWatch', $checkWatch, array( 'tabindex' => '3' ) ) .
-                               "</td>
-                       </tr>";
+                                               'wpWatch', 'wpWatch', $checkWatch, array( 'tabindex' => '3' ) );
                }
 
-               $form .= "
-                       $suppress
-                       <tr>
-                               <td></td>
-                               <td class='mw-submit'>" .
+               $form .=
+                               Html::openElement( 'div' ) .
+                               $suppress .
                                        Xml::submitButton( wfMessage( 'deletepage' )->text(),
-                                               array( 'name' => 'wpConfirmB', 'id' => 'wpConfirmB', 'tabindex' => '5' ) ) .
-                               "</td>
-                       </tr>" .
-                       Xml::closeElement( 'table' ) .
+                                               array(
+                                                       'name' => 'wpConfirmB',
+                                                       'id' => 'wpConfirmB',
+                                                       'tabindex' => '5',
+                                                       'class' => $useMediaWikiUIEverywhere ? 'mw-ui-button mw-ui-destructive' : '',
+                                               )
+                                       ) .
+                               Html::closeElement( 'div' ) .
+                       Html::closeElement( 'div' ) .
                        Xml::closeElement( 'fieldset' ) .
                        Html::hidden(
                                'wpEditToken',

diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less
index 06a4ccd..685ca4d 100644 (file)
--- a/resources/src/mediawiki.ui/components/inputs.less
+++ b/resources/src/mediawiki.ui/components/inputs.less
@@ -129,3 +129,11 @@ input.mw-ui-input-large {
        font-weight: bold;
        line-height: 1.25em;
 }
+
+// Tablet and desktop specific styling tweaks.
+@media all and (min-width: 768px) {
+       // Make inline elements take up a sensible amount of the screen on wider devices.
+       .mw-ui-input-inline {
+               min-width: 320px;
+       }
+}