SpecialBlock: Tweaks for OOUI HTMLForm

* Expand both the dropdown and textfield of "Reason" field to the
  usual maximum width and display them on separate lines.
* Fix autohiding of form fields where applicable (checkboxes that only
  apply when blocking a user or an IP address).
* Fix bolding of the "Confirm block" label when blocking yourself.

Follow-up to d56758e134358fdac3f8dda16417bfd30f78bab9.

Bug: T107036
Change-Id: Ia5c54e518de99a79f5319c42ccf1a9a0e31ad471

diff --git a/includes/specials/SpecialBlock.php b/includes/specials/SpecialBlock.php
index c1a1f78..42e7040 100644 (file)
--- a/includes/specials/SpecialBlock.php
+++ b/includes/specials/SpecialBlock.php
@@ -224,6 +224,7 @@ class SpecialBlock extends FormSpecialPage {
                        'type' => 'hidden',
                        'default' => '',
                        'label-message' => 'ipb-confirm',
+                       'cssclass' => 'mw-block-confirm',
                ];
 
                $this->maybeAlterFormDefaults( $a );

diff --git a/resources/Resources.php b/resources/Resources.php
index 235bb59..9f10210 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -2012,6 +2012,8 @@ return [
        'mediawiki.special.block' => [
                'scripts' => 'resources/src/mediawiki.special/mediawiki.special.block.js',
                'dependencies' => [
+                       'oojs-ui-core',
+                       'mediawiki.widgets.SelectWithInputWidget',
                        'mediawiki.util',
                        'mediawiki.htmlform',
                ],

diff --git a/resources/src/mediawiki.special/mediawiki.special.block.js b/resources/src/mediawiki.special/mediawiki.special.block.js
index 8d88410..491a1ff 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.block.js
+++ b/resources/src/mediawiki.special/mediawiki.special.block.js
@@ -2,57 +2,60 @@
  * JavaScript for Special:Block
  */
 ( function ( mw, $ ) {
+       // Like OO.ui.infuse(), but if the element doesn't exist, return null instead of throwing an exception.
+       function infuseOrNull( elem ) {
+               try {
+                       return OO.ui.infuse( elem );
+               } catch ( er ) {
+                       return null;
+               }
+       }
+
        $( function () {
-               var $blockTarget = $( '#mw-bi-target' ),
-                       $anonOnlyRow = $( '#mw-input-wpHardBlock' ).closest( 'tr' ),
-                       $enableAutoblockRow = $( '#mw-input-wpAutoBlock' ).closest( 'tr' ),
-                       $hideUser = $( '#mw-input-wpHideUser' ).closest( 'tr' ),
-                       $watchUser = $( '#mw-input-wpWatch' ).closest( 'tr' ),
-                       $expiry = $( '#mw-input-wpExpiry' ),
-                       $otherExpiry = $( '#mw-input-wpExpiry-other' );
+               // This code is also loaded on the "block succeeded" page where there is no form,
+               // so username and expiry fields might also be missing.
+               var blockTargetWidget = infuseOrNull( 'mw-bi-target' ),
+                       anonOnlyField = infuseOrNull( $( '#mw-input-wpHardBlock' ).closest( '.oo-ui-fieldLayout' ) ),
+                       enableAutoblockField = infuseOrNull( $( '#mw-input-wpAutoBlock' ).closest( '.oo-ui-fieldLayout' ) ),
+                       hideUserField = infuseOrNull( $( '#mw-input-wpHideUser' ).closest( '.oo-ui-fieldLayout' ) ),
+                       watchUserField = infuseOrNull( $( '#mw-input-wpWatch' ).closest( '.oo-ui-fieldLayout' ) ),
+                       // mw.widgets.SelectWithInputWidget
+                       expiryWidget = infuseOrNull( 'mw-input-wpExpiry' );
 
-               function updateBlockOptions( instant ) {
-                       var blocktarget = $.trim( $blockTarget.val() ),
+               function updateBlockOptions() {
+                       var blocktarget = $.trim( blockTargetWidget.getValue() ),
                                isEmpty = blocktarget === '',
                                isIp = mw.util.isIPAddress( blocktarget, true ),
                                isIpRange = isIp && blocktarget.match( /\/\d+$/ ),
                                isNonEmptyIp = isIp && !isEmpty,
-                               expiryValue = $expiry.val(),
+                               expiryValue = expiryWidget.dropdowninput.getValue(),
                                // infinityValues  are the values the SpecialBlock class accepts as infinity (sf. wfIsInfinity)
                                infinityValues = [ 'infinite', 'indefinite', 'infinity', 'never' ],
                                isIndefinite = $.inArray( expiryValue, infinityValues ) !== -1 ||
-                                       ( expiryValue === 'other' && $.inArray( $otherExpiry.val(), infinityValues ) !== -1 );
+                                       ( expiryValue === 'other' && $.inArray( expiryWidget.textinput.getValue(), infinityValues ) !== -1 );
 
-                       if ( isNonEmptyIp ) {
-                               $enableAutoblockRow.goOut( instant );
-                       } else {
-                               $enableAutoblockRow.goIn( instant );
+                       if ( enableAutoblockField ) {
+                               enableAutoblockField.toggle( !( isNonEmptyIp ) );
                        }
-                       if ( isNonEmptyIp || !isIndefinite ) {
-                               $hideUser.goOut( instant );
-                       } else {
-                               $hideUser.goIn( instant );
+                       if ( hideUserField ) {
+                               hideUserField.toggle( !( isNonEmptyIp || !isIndefinite ) );
                        }
-                       if ( !isIp && !isEmpty ) {
-                               $anonOnlyRow.goOut( instant );
-                       } else {
-                               $anonOnlyRow.goIn( instant );
+                       if ( anonOnlyField ) {
+                               anonOnlyField.toggle( !( !isIp && !isEmpty ) );
                        }
-                       if ( isIpRange && !isEmpty ) {
-                               $watchUser.goOut( instant );
-                       } else {
-                               $watchUser.goIn( instant );
+                       if ( watchUserField ) {
+                               watchUserField.toggle( !( isIpRange && !isEmpty ) );
                        }
                }
 
-               if ( $blockTarget.length ) {
+               if ( blockTargetWidget ) {
                        // Bind functions so they're checked whenever stuff changes
-                       $blockTarget.keyup( updateBlockOptions );
-                       $expiry.change( updateBlockOptions );
-                       $otherExpiry.keyup( updateBlockOptions );
+                       blockTargetWidget.on( 'change', updateBlockOptions );
+                       expiryWidget.dropdowninput.on( 'change', updateBlockOptions );
+                       expiryWidget.textinput.on( 'change', updateBlockOptions );
 
                        // Call them now to set initial state (ie. Special:Block/Foobar?wpBlockExpiry=2+hours)
-                       updateBlockOptions( /* instant= */ true );
+                       updateBlockOptions();
                }
        } );
 }( mediaWiki, jQuery ) );

diff --git a/resources/src/mediawiki.special/mediawiki.special.css b/resources/src/mediawiki.special/mediawiki.special.css
index 9ea8019..7f3b09a 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.css
+++ b/resources/src/mediawiki.special/mediawiki.special.css
@@ -35,12 +35,19 @@
        text-align: right;
 }
 
-label[for='mw-input-wpConfirm'] {
+.mw-block-hideuser,
+.mw-block-confirm {
        font-weight: bold;
 }
 
-.mw-block-hideuser {
-       font-weight: bold;
+#mw-input-wpReason .oo-ui-dropdownInputWidget,
+#mw-input-wpReason .oo-ui-textInputWidget {
+       display: block;
+       max-width: 50em;
+}
+
+#mw-input-wpReason .oo-ui-textInputWidget {
+       margin-top: 0.5em;
 }
 
 /* Special:BlockList */