From: Stephane Bisson Date: Mon, 28 Aug 2017 20:45:21 +0000 (-0400) Subject: WLFilters: convert 'edit watchlist' button to new UX X-Git-Tag: 1.31.0-rc.0~2257^2 X-Git-Url: http://git.cyclocoop.org/%24self?a=commitdiff_plain;h=2b7fec67cc65b5230faccea65a60ddcff180f74a;p=lhc%2Fweb%2Fwiklou.git WLFilters: convert 'edit watchlist' button to new UX Bug: T172030 Change-Id: Ifcde40c66fbb6543d4f2aebfc8499c03533b8b91 --- diff --git a/includes/specials/SpecialWatchlist.php b/includes/specials/SpecialWatchlist.php index 0dd66b023d..dcd2ffa993 100644 --- a/includes/specials/SpecialWatchlist.php +++ b/includes/specials/SpecialWatchlist.php @@ -104,6 +104,10 @@ class SpecialWatchlist extends ChangesListSpecialPage { 'wgStructuredChangeFiltersSavedQueriesPreferenceName', 'rcfilters-wl-saved-queries' ); + $output->addJsConfigVars( + 'wgStructuredChangeFiltersEditWatchlistUrl', + SpecialPage::getTitleFor( 'EditWatchlist' )->getLocalURL() + ); } } @@ -815,21 +819,25 @@ class SpecialWatchlist extends ChangesListSpecialPage { $showUpdatedMarker = $this->getConfig()->get( 'ShowUpdatedMarker' ); // Show watchlist header - $form .= "

"; + $watchlistHeader = ''; if ( $numItems == 0 ) { - $form .= $this->msg( 'nowatchlist' )->parse() . "\n"; + $watchlistHeader = $this->msg( 'nowatchlist' )->parse(); } else { - $form .= $this->msg( 'watchlist-details' )->numParams( $numItems )->parse() . "\n"; + $watchlistHeader .= $this->msg( 'watchlist-details' )->numParams( $numItems )->parse() . "\n"; if ( $this->getConfig()->get( 'EnotifWatchlist' ) && $user->getOption( 'enotifwatchlistpages' ) ) { - $form .= $this->msg( 'wlheader-enotif' )->parse() . "\n"; + $watchlistHeader .= $this->msg( 'wlheader-enotif' )->parse() . "\n"; } if ( $showUpdatedMarker ) { - $form .= $this->msg( 'wlheader-showupdated' )->parse() . "\n"; + $watchlistHeader .= $this->msg( 'wlheader-showupdated' )->parse() . "\n"; } } - $form .= "

"; + $form .= Html::rawElement( + 'p', + [ 'class' => 'watchlistDetails' ], + $watchlistHeader + ); if ( $numItems > 0 && $showUpdatedMarker ) { $form .= Xml::openElement( 'form', [ 'method' => 'post', diff --git a/languages/i18n/en.json b/languages/i18n/en.json index a44b3cfd6a..dae2c40404 100644 --- a/languages/i18n/en.json +++ b/languages/i18n/en.json @@ -1469,6 +1469,7 @@ "rcfilters-liveupdates-button-title-on": "Turn off live updates", "rcfilters-liveupdates-button-title-off": "Display new changes as they happen", "rcfilters-watchlist-markSeen-button": "Mark all changes as seen", + "rcfilters-watchlist-editWatchlist-button": "Edit your list of watched pages", "rcnotefrom": "Below {{PLURAL:$5|is the change|are the changes}} since $3, $4 (up to $1 shown).", "rclistfromreset": "Reset date selection", "rclistfrom": "Show new changes starting from $2, $3", diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json index fb05de87c2..dfe69a9746 100644 --- a/languages/i18n/qqq.json +++ b/languages/i18n/qqq.json @@ -1659,6 +1659,7 @@ "rcfilters-liveupdates-button-title-on": "Title for the button to enable or disable live updates on [[Special:RecentChanges]] when the feature is ON.", "rcfilters-liveupdates-button-title-off": "Title for the button to enable or disable live updates on [[Special:RecentChanges]] when the feature is OFF.", "rcfilters-watchlist-markSeen-button": "Label for the button to mark all changes as seen on [[Special:Watchlist]] when using the structured filters interface.", + "rcfilters-watchlist-editWatchlist-button": "Label for the button to edit the watched pages on [[Special:Watchlist]] when using the structured filters interface.", "rcnotefrom": "This message is displayed at [[Special:RecentChanges]] when viewing recentchanges from some specific time.\n\nThe corresponding message is {{msg-mw|Rclistfrom}}.\n\nParameters:\n* $1 - the maximum number of changes that are displayed\n* $2 - (Optional) a date and time\n* $3 - a date\n* $4 - a time\n* $5 - Number of changes are displayed, for use with PLURAL", "rclistfromreset": "Used on [[Special:RecentChanges]] to reset a selection of a certain date range.", "rclistfrom": "Used on [[Special:RecentChanges]]. Parameters:\n* $1 - (Currently not use) date and time. The date and the time adds to the rclistfrom description.\n* $2 - time. The time adds to the rclistfrom link description (with split of date and time).\n* $3 - date. The date adds to the rclistfrom link description (with split of date and time).\n\nThe corresponding message is {{msg-mw|Rcnotefrom}}.", diff --git a/resources/Resources.php b/resources/Resources.php index 1ebe2103b8..7a95da81f1 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1803,6 +1803,8 @@ return [ 'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.HighlightColorPickerWidget.js', 'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.LiveUpdateButtonWidget.js', 'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MarkSeenButtonWidget.js', + 'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js', + 'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js', 'resources/src/mediawiki.rcfilters/mw.rcfilters.HighlightColors.js', 'resources/src/mediawiki.rcfilters/mw.rcfilters.init.js', ], @@ -1830,6 +1832,8 @@ return [ 'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less', 'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.less', 'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less', + 'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less', + 'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less', ], 'skinStyles' => [ 'monobook' => [ @@ -1896,6 +1900,7 @@ return [ 'rcfilters-liveupdates-button-title-on', 'rcfilters-liveupdates-button-title-off', 'rcfilters-watchlist-markSeen-button', + 'rcfilters-watchlist-editWatchlist-button', 'rcfilters-other-review-tools', 'blanknamespace', 'namespaces', diff --git a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js index a6bce1434e..0819351fd3 100644 --- a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js +++ b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js @@ -8,10 +8,10 @@ * @private */ init: function () { - var toplinksTitle, - topLinksCookieName = 'rcfilters-toplinks-collapsed-state', - topLinksCookie = mw.cookie.get( topLinksCookieName ), - topLinksCookieValue = topLinksCookie || 'collapsed', + var $topLinks, + rcTopSection, + $watchlistDetails, + wlTopSection, savedQueriesPreferenceName = mw.config.get( 'wgStructuredChangeFiltersSavedQueriesPreferenceName' ), filtersModel = new mw.rcfilters.dm.FiltersViewModel(), changesListModel = new mw.rcfilters.dm.ChangesListViewModel(), @@ -26,7 +26,9 @@ .addClass( 'mw-rcfilters-ui-overlay' ), filtersWidget = new mw.rcfilters.ui.FilterWrapperWidget( controller, filtersModel, savedQueriesModel, changesListModel, { $overlay: $overlay } ), - markSeenButton, + savedLinksListWidget = new mw.rcfilters.ui.SavedLinksListWidget( + controller, savedQueriesModel, { $overlay: $overlay } + ), currentPage = mw.config.get( 'wgCanonicalNamespace' ) + ':' + mw.config.get( 'wgCanonicalSpecialPageName' ); @@ -59,36 +61,22 @@ controller.replaceUrl(); if ( currentPage === 'Special:Recentchanges' ) { - toplinksTitle = new OO.ui.ButtonWidget( { - framed: false, - indicator: topLinksCookieValue === 'collapsed' ? 'down' : 'up', - flags: [ 'progressive' ], - label: $( '' ).append( mw.message( 'rcfilters-other-review-tools' ).parse() ).contents() - } ); - $( '.mw-recentchanges-toplinks-title' ).replaceWith( toplinksTitle.$element ); - // Move the top links to a designated area so it's near the - // 'saved filters' button and make it collapsible - $( '.mw-recentchanges-toplinks' ) - .addClass( 'mw-rcfilters-ui-ready' ) - .makeCollapsible( { - collapsed: topLinksCookieValue === 'collapsed', - $customTogglers: toplinksTitle.$element - } ) - .on( 'beforeExpand.mw-collapsible', function () { - mw.cookie.set( topLinksCookieName, 'expanded' ); - toplinksTitle.setIndicator( 'up' ); - } ) - .on( 'beforeCollapse.mw-collapsible', function () { - mw.cookie.set( topLinksCookieName, 'collapsed' ); - toplinksTitle.setIndicator( 'down' ); - } ) - .appendTo( '.mw-rcfilters-ui-filterWrapperWidget-top-placeholder' ); + $topLinks = $( '.mw-recentchanges-toplinks' ).detach(); + + rcTopSection = new mw.rcfilters.ui.RcTopSectionWidget( + savedLinksListWidget, $topLinks + ); + filtersWidget.setTopSection( rcTopSection.$element ); } // end Special:RC if ( currentPage === 'Special:Watchlist' ) { - markSeenButton = new mw.rcfilters.ui.MarkSeenButtonWidget( controller, changesListModel ); - $( 'form#mw-watchlist-resetbutton' ).detach(); - filtersWidget.prependToTopRow( markSeenButton ); + $( '#contentSub, form#mw-watchlist-resetbutton' ).detach(); + $watchlistDetails = $( '.watchlistDetails' ).detach().contents(); + + wlTopSection = new mw.rcfilters.ui.WatchlistTopSectionWidget( + controller, changesListModel, savedLinksListWidget, $watchlistDetails + ); + filtersWidget.setTopSection( wlTopSection.$element ); } // end Special:WL } }; diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less index c667bac912..e0315522d3 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less @@ -7,29 +7,6 @@ border: 0; } - .mw-recentchanges-toplinks { - padding: 0 0.5em; - - .oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button { - padding: 0 2.5em 0 0.5em; - } - - &-title, - .mw-collapsible-text { - // Same as the legend - font-size: 0.85em; - } - - &:not( .mw-collapsed ) { - // Same as the legend - border: 1px solid #ddd; - } - - &:not( .mw-rcfilters-ui-ready ) { - display: none; - } - } - .rcfilters-head { min-height: 200px; @@ -92,6 +69,12 @@ .animation-delay( 0s ); } } + + #contentSub, + p.watchlistDetails, + form#mw-watchlist-resetbutton { + display: none; + } } .mw-rcfilters-staticfilters-selected { diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less index a89b69c522..bbd2c74024 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less @@ -7,17 +7,6 @@ margin-top: 1em; } - &-top { - &-placeholder { - width: 100%; - } - - &-savedLinks { - padding-left: 1em; - vertical-align: bottom; - } - } - &-bottom { margin-top: 1em; diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less new file mode 100644 index 0000000000..38f6f28d11 --- /dev/null +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less @@ -0,0 +1,33 @@ +.mw-rcfilters-ui-rcTopSectionWidget { + &-topLinks { + width: 100%; + } + + &-savedLinks { + vertical-align: bottom; + padding-left: 1em; + } + + .mw-recentchanges-toplinks { + padding: 0 0.5em; + + .oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button { + padding: 0 2.5em 0 0.5em; + } + + &-title, + .mw-collapsible-text { + // Same as the legend + font-size: 0.85em; + } + + &:not( .mw-collapsed ) { + // Same as the legend + border: 1px solid #ddd; + } + + &:not( .mw-rcfilters-ui-ready ) { + display: none; + } + } +} diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less index 716ed034ec..2b713e1a47 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less @@ -1,6 +1,4 @@ .mw-rcfilters-ui-savedLinksListWidget { - float: right; - &-menu { width: 100%; } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less new file mode 100644 index 0000000000..bbe4528d7d --- /dev/null +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less @@ -0,0 +1,19 @@ +.mw-rcfilters-ui-watchlistTopSectionWidget { + &-editWatchlistButton { + float: right; + margin-left: 3em; + } + + &-savedLinks { + float: right; + } + + .mw-rcfilters-ui-table { + margin-top: 1em; + } + + &-separator { + margin-top: 1em; + border-top: 2px solid #eaecf0; // Base80 AAA + } +} diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js index b57f5d73ac..db7acaa0de 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js @@ -17,7 +17,7 @@ mw.rcfilters.ui.FilterWrapperWidget = function MwRcfiltersUiFilterWrapperWidget( controller, model, savedQueriesModel, changesListModel, config ) { - var $top, $bottom; + var $bottom; config = config || {}; // Parent @@ -59,17 +59,8 @@ ); // Initialize - this.$topRow = $( '
' ) - .addClass( 'mw-rcfilters-ui-row' ) - .append( - $( '
' ) - .addClass( 'mw-rcfilters-ui-cell' ) - .addClass( 'mw-rcfilters-ui-filterWrapperWidget-top-placeholder' ) - ); - $top = $( '
' ) - .addClass( 'mw-rcfilters-ui-filterWrapperWidget-top' ) - .addClass( 'mw-rcfilters-ui-table' ) - .append( this.$topRow ); + this.$top = $( '
' ) + .addClass( 'mw-rcfilters-ui-filterWrapperWidget-top' ); $bottom = $( '
' ) .addClass( 'mw-rcfilters-ui-filterWrapperWidget-bottom' ) @@ -78,21 +69,6 @@ this.dateWidget.$element ); - if ( !mw.user.isAnon() ) { - this.savedLinksListWidget = new mw.rcfilters.ui.SavedLinksListWidget( - this.controller, - this.queriesModel, - { $overlay: this.$overlay } - ); - - this.$topRow.append( - $( '
' ) - .addClass( 'mw-rcfilters-ui-cell' ) - .addClass( 'mw-rcfilters-ui-filterWrapperWidget-top-savedLinks' ) - .append( this.savedLinksListWidget.$element ) - ); - } - if ( mw.rcfilters.featureFlags.liveUpdate ) { $bottom.append( this.liveUpdateButton.$element ); } @@ -100,7 +76,7 @@ this.$element .addClass( 'mw-rcfilters-ui-filterWrapperWidget' ) .append( - $top, + this.$top, this.filterTagWidget.$element, $bottom ); @@ -114,15 +90,11 @@ /* Methods */ /** - * Add a widget at the beginning of the top row + * Set the content of the top section * - * @param {OO.ui.Widget} widget Any widget + * @param {jQuery} $topSectionElement */ - mw.rcfilters.ui.FilterWrapperWidget.prototype.prependToTopRow = function ( widget ) { - this.$topRow.prepend( - widget.$element - .addClass( 'mw-rcfilters-ui-cell' ) - ); + mw.rcfilters.ui.FilterWrapperWidget.prototype.setTopSection = function ( $topSectionElement ) { + this.$top.append( $topSectionElement ); }; - }( mediaWiki ) ); diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js new file mode 100644 index 0000000000..706c888eab --- /dev/null +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js @@ -0,0 +1,74 @@ +( function ( mw ) { + /** + * Top section (between page title and filters) on Special:Recentchanges + * + * @extends OO.ui.Widget + * + * @constructor + * @param {mw.rcfilters.ui.SavedLinksListWidget} savedLinksListWidget + * @param {jQuery} $topLinks Content of the community-defined links + * @param {Object} [config] Configuration object + */ + mw.rcfilters.ui.RcTopSectionWidget = function MwRcfiltersUiRcTopSectionWidget( + savedLinksListWidget, $topLinks, config + ) { + var topLinksCookieName = 'rcfilters-toplinks-collapsed-state', + topLinksCookie = mw.cookie.get( topLinksCookieName ), + topLinksCookieValue = topLinksCookie || 'collapsed', + toplinksTitle; + config = config || {}; + + // Parent + mw.rcfilters.ui.RcTopSectionWidget.parent.call( this, config ); + + toplinksTitle = new OO.ui.ButtonWidget( { + framed: false, + indicator: topLinksCookieValue === 'collapsed' ? 'down' : 'up', + flags: [ 'progressive' ], + label: $( '' ).append( mw.message( 'rcfilters-other-review-tools' ).parse() ).contents() + } ); + + $topLinks + .addClass( 'mw-rcfilters-ui-ready' ) + .makeCollapsible( { + collapsed: topLinksCookieValue === 'collapsed', + $customTogglers: toplinksTitle.$element + } ) + .on( 'beforeExpand.mw-collapsible', function () { + mw.cookie.set( topLinksCookieName, 'expanded' ); + toplinksTitle.setIndicator( 'up' ); + } ) + .on( 'beforeCollapse.mw-collapsible', function () { + mw.cookie.set( topLinksCookieName, 'collapsed' ); + toplinksTitle.setIndicator( 'down' ); + } ); + + $topLinks.find( '.mw-recentchanges-toplinks-title' ).replaceWith( toplinksTitle.$element ); + + this.$element + .addClass( 'mw-rcfilters-ui-rcTopSectionWidget' ) + .addClass( 'mw-rcfilters-ui-table' ) + .append( + $( '
' ) + .addClass( 'mw-rcfilters-ui-row' ) + .append( + $( '
' ) + .addClass( 'mw-rcfilters-ui-cell' ) + .addClass( 'mw-rcfilters-ui-rcTopSectionWidget-topLinks' ) + .append( $topLinks ) + ) + .append( + !mw.user.isAnon() ? + $( '
' ) + .addClass( 'mw-rcfilters-ui-cell' ) + .addClass( 'mw-rcfilters-ui-rcTopSectionWidget-savedLinks' ) + .append( savedLinksListWidget.$element ) : + null + ) + ); + }; + + /* Initialization */ + + OO.inheritClass( mw.rcfilters.ui.RcTopSectionWidget, OO.ui.Widget ); +}( mediaWiki ) ); diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js new file mode 100644 index 0000000000..86c206ba1d --- /dev/null +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js @@ -0,0 +1,82 @@ +( function ( mw ) { + /** + * Top section (between page title and filters) on Special:Watchlist + * + * @extends OO.ui.Widget + * + * @constructor + * @param {mw.rcfilters.Controller} controller + * @param {mw.rcfilters.dm.ChangesListViewModel} changesListModel + * @param {mw.rcfilters.ui.SavedLinksListWidget} savedLinksListWidget + * @param {jQuery} $watchlistDetails Content of the 'details' section that includes watched pages count + * @param {Object} [config] Configuration object + */ + mw.rcfilters.ui.WatchlistTopSectionWidget = function MwRcfiltersUiWatchlistTopSectionWidget( + controller, changesListModel, savedLinksListWidget, $watchlistDetails, config + ) { + var editWatchlistButton, + markSeenButton, + $topTable, + $bottomTable, + $separator; + config = config || {}; + + // Parent + mw.rcfilters.ui.WatchlistTopSectionWidget.parent.call( this, config ); + + editWatchlistButton = new OO.ui.ButtonWidget( { + label: mw.msg( 'rcfilters-watchlist-editWatchlist-button' ), + icon: 'edit', + href: mw.config.get( 'wgStructuredChangeFiltersEditWatchlistUrl' ) + } ); + markSeenButton = new mw.rcfilters.ui.MarkSeenButtonWidget( controller, changesListModel ); + + $topTable = $( '
' ) + .addClass( 'mw-rcfilters-ui-table' ) + .append( + $( '
' ) + .addClass( 'mw-rcfilters-ui-row' ) + .append( + $( '
' ) + .addClass( 'mw-rcfilters-ui-cell' ) + .addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget-watchlistDetails' ) + .append( $watchlistDetails ) + ) + .append( + $( '
' ) + .addClass( 'mw-rcfilters-ui-cell' ) + .addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget-editWatchlistButton' ) + .append( editWatchlistButton.$element ) + ) + ); + + $bottomTable = $( '
' ) + .addClass( 'mw-rcfilters-ui-table' ) + .append( + $( '
' ) + .addClass( 'mw-rcfilters-ui-row' ) + .append( + $( '
' ) + .addClass( 'mw-rcfilters-ui-cell' ) + .append( markSeenButton.$element ) + ) + .append( + $( '
' ) + .addClass( 'mw-rcfilters-ui-cell' ) + .addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget-savedLinks' ) + .append( savedLinksListWidget.$element ) + ) + ); + + $separator = $( '
' ) + .addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget-separator' ); + + this.$element + .addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget' ) + .append( $topTable, $separator, $bottomTable ); + }; + + /* Initialization */ + + OO.inheritClass( mw.rcfilters.ui.WatchlistTopSectionWidget, OO.ui.Widget ); +}( mediaWiki ) );