EditPage: Restore the old 'id' attributes in OOUI mode

For compatibility with old scripts and extensions, we want the legacy
'id' on the `<input>` elements. There is really no good justification
for breaking all of them when we can easily support it.

The actual `<input>` elements have their ids back: 'wpSummary',
'wpSave', 'wpPreview', 'wpDiff', 'wpMinoredit', 'wpWatchthis'.

The widgets (wrapped `<div>`s) now use ids with 'Widget' appended.

Bug: T165854
Change-Id: I4d23f57fd0cda4b8539ffb17a2a19ecd822e077a

diff --git a/includes/EditPage.php b/includes/EditPage.php
index 3e8473d..20250d5 100644 (file)
--- a/includes/EditPage.php
+++ b/includes/EditPage.php
@@ -3119,6 +3119,10 @@ class EditPage {
                        $this->getSummaryInputAttributes( $inputAttrs )
                );
 
+               // For compatibility with old scripts and extensions, we want the legacy 'id' on the `<input>`
+               $inputAttrs['inputId'] = $inputAttrs['id'];
+               $inputAttrs['id'] = 'wpSummaryWidget';
+
                return new OOUI\FieldLayout(
                        new OOUI\TextInputWidget( [
                                'value' => $summary,
@@ -4268,7 +4272,8 @@ HTML
                                new OOUI\CheckboxInputWidget( [
                                        'tabIndex' => ++$tabindex,
                                        'accessKey' => $accesskey,
-                                       'id' => $options['id'],
+                                       'id' => $options['id'] . 'Widget',
+                                       'inputId' => $options['id'],
                                        'name' => $name,
                                        'selected' => $options['default'],
                                        'infusable' => true,
@@ -4330,7 +4335,8 @@ HTML
                $buttonLabel = $this->context->msg( $this->getSaveButtonLabel() )->text();
 
                $attribs = [
-                       'id' => 'wpSave',
+                       'id' => 'wpSaveWidget',
+                       'inputId' => 'wpSave',
                        'name' => 'wpSave',
                        'tabindex' => ++$tabindex,
                ] + Linker::tooltipAndAccesskeyAttribs( 'save' );
@@ -4354,7 +4360,8 @@ HTML
                }
 
                $attribs = [
-                       'id' => 'wpPreview',
+                       'id' => 'wpPreviewWidget',
+                       'inputId' => 'wpPreview',
                        'name' => 'wpPreview',
                        'tabindex' => ++$tabindex,
                ] + Linker::tooltipAndAccesskeyAttribs( 'preview' );
@@ -4374,7 +4381,8 @@ HTML
                        );
                }
                $attribs = [
-                       'id' => 'wpDiff',
+                       'id' => 'wpDiffWidget',
+                       'inputId' => 'wpDiff',
                        'name' => 'wpDiff',
                        'tabindex' => ++$tabindex,
                ] + Linker::tooltipAndAccesskeyAttribs( 'diff' );

diff --git a/resources/src/mediawiki.action/mediawiki.action.edit.js b/resources/src/mediawiki.action/mediawiki.action.edit.js
index f6a9c54..4911fb9 100644 (file)
--- a/resources/src/mediawiki.action/mediawiki.action.edit.js
+++ b/resources/src/mediawiki.action/mediawiki.action.edit.js
@@ -22,7 +22,7 @@
                // Make sure edit summary does not exceed byte limit
                // TODO: Replace with this when $wgOOUIEditPage is removed:
                // OO.ui.infuse( 'wpSummary' ).$input.byteLimit( 255 );
-               $( 'input#wpSummary, #wpSummary > input' ).byteLimit( 255 );
+               $( '#wpSummary' ).byteLimit( 255 );
 
                // Restore the edit box scroll state following a preview operation,
                // and set up a form submission handler to remember this state.

diff --git a/resources/src/mediawiki.action/mediawiki.action.edit.styles.css b/resources/src/mediawiki.action/mediawiki.action.edit.styles.css
index 8287264..093a26d 100644 (file)
--- a/resources/src/mediawiki.action/mediawiki.action.edit.styles.css
+++ b/resources/src/mediawiki.action/mediawiki.action.edit.styles.css
@@ -25,7 +25,8 @@
        font-size: 0.9em;
 }
 
-#wpSummary {
+.mw-editform-ooui #wpSummaryWidget,
+.mw-editform-legacy #wpSummary {
        display: block;
        width: 80%;
        margin-bottom: 1em;
@@ -75,7 +76,7 @@
        line-height: 1.26;
 }
 
-.mw-editform-ooui #wpSummary {
+.mw-editform-ooui #wpSummaryWidget {
        max-width: none;
 }