Skip to content

Commit

Permalink
twinkle: new hidden CSS peer gadget to prevent jumpiness in Vector skin
Browse files Browse the repository at this point in the history 
Update sync instructions in README
  • Loading branch information
@MusikAnimal
MusikAnimal committed Sep 9, 2017
1 parent be0904d commit 3783550
Show file tree
Hide file tree
Showing 5 changed files with 78 additions and 18 deletions.
79 changes: 61 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,23 +23,44 @@ Other files not mentioned here are probably obsolete.
Updating scripts on Wikipedia
-----------------------------

There are two ways to upload Twinkle scripts to Wikipedia or another destination.

### Manual concatenation

**These instructions are outdated! Don't do what it says here or you'll probably blow things up.**

To generate a concatenated Twinkle script, use the following `bash` command:

awk 'FNR==1{print ""}{print}' twinkle.js modules/*.js > alltwinkle.js

Then you will be able to upload `alltwinkle.js` to [MediaWiki:Gadget-Twinkle.js][]. The concatenation does not include `morebits.js` and `morebits.css`; these have to be uploaded separately.

If `morebits.js` and/or `morebits.css` need to be updated, they should be synched to [MediaWiki:Gadget-morebits.js][] and [MediaWiki:Gadget-morebits.css][].

[MediaWiki:Gadgets-definition][] would then contain the following line:

* Twinkle[ResourceLoader|dependencies=mediawiki.user,mediawiki.util,mediawiki.RegExp,jquery.ui.dialog,jquery.tipsy,moment|rights=autoconfirmed|type=general]|morebits.js|morebits.css|Twinkle.js|twinkleprod.js|twinkleimage.js|twinklebatchundelete.js|twinklewarn.js|twinklespeedy.js|friendlyshared.js|twinklediff.js|twinkleunlink.js|friendlytag.js|twinkledeprod.js|friendlywelcome.js|twinklexfd.js|twinklebatchdelete.js|twinklebatchprotect.js|twinkleconfig.js|twinklefluff.js|twinkleprotect.js|twinklearv.js|twinkleblock.js|friendlytalkback.js
There are two ways to upload Twinkle scripts to Wikipedia or another destination. You can do it [manually](#manual-synchronization) or with a [Python script](synchronization-using-syncpl).

After the files are synced, [MediaWiki:Gadgets-definition][] should contain the following lines:

* Twinkle[ResourceLoader|dependencies=mediawiki.user,mediawiki.util,mediawiki.RegExp,jquery.ui.dialog,jquery.tipsy,moment|rights=autoconfirmed|type=general|peers=Twinkle-pagestyles]|morebits.js|morebits.css|Twinkle.js|twinkleprod.js|twinkleimage.js|twinklebatchundelete.js|twinklewarn.js|twinklespeedy.js|friendlyshared.js|twinklediff.js|twinkleunlink.js|friendlytag.js|twinkledeprod.js|friendlywelcome.js|twinklexfd.js|twinklebatchdelete.js|twinklebatchprotect.js|twinkleconfig.js|twinklefluff.js|twinkleprotect.js|twinklearv.js|twinkleblock.js|friendlytalkback.js|Twinkle.css
* Twinkle-pagestyles[hidden|skins=vector]|Twinkle-pagestyles.css

`Twinkle-pagestyles` is a hidden [peer gadget](https://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_(users)#Gadget_peers) of Twinkle. Before Twinkle has loaded, it adds space where the TW menu would go in the Vector skin, so that the top bar does not "jump".

### Manual synchronization

Each Twinkle module and dependency lives on the wiki as a separate file. The list of modules and what pages they should be on are as follows:

* `twinkle.js` → [MediaWiki:Gadget-Twinkle.js][]
* `twinkle.css` → [MediaWiki:Gadget-Twinkle.css][]
* `twinkle-pagestyles.css` → [MediaWiki:Gadget-Twinkle-pagestyles.css][]
* `morebits.js` → [MediaWiki:Gadget-morebits.js][]
* `morebits.css` → [MediaWiki:Gadget-morebits.css][]
* `modules/twinkleprod.js` → [MediaWiki:Gadget-twinkleprod.js][]
* `modules/twinkleimage.js` → [MediaWiki:Gadget-twinkleimage.js][]
* `modules/twinklebatchundelete.js` → [MediaWiki:Gadget-twinklebatchundelete.js][]
* `modules/twinklewarn.js` → [MediaWiki:Gadget-twinklewarn.js][]
* `modules/twinklespeedy.js` → [MediaWiki:Gadget-twinklespeedy.js][]
* `modules/friendlyshared.js` → [MediaWiki:Gadget-friendlyshared.js][]
* `modules/twinklediff.js` → [MediaWiki:Gadget-twinklediff.js][]
* `modules/twinkleunlink.js` → [MediaWiki:Gadget-twinkleunlink.js][]
* `modules/friendlytag.js` → [MediaWiki:Gadget-friendlytag.js][]
* `modules/twinkledeprod.js` → [MediaWiki:Gadget-twinkledeprod.js][]
* `modules/friendlywelcome.js` → [MediaWiki:Gadget-friendlywelcome.js][]
* `modules/twinklexfd.js` → [MediaWiki:Gadget-twinklexfd.js][]
* `modules/twinklebatchdelete.js` → [MediaWiki:Gadget-twinklebatchdelete.js][]
* `modules/twinklebatchprotect.js` → [MediaWiki:Gadget-twinklebatchprotect.js][]
* `modules/twinkleconfig.js` → [MediaWiki:Gadget-twinkleconfig.js][]
* `modules/twinklefluff.js` → [MediaWiki:Gadget-twinklefluff.js][]
* `modules/twinkleprotect.js` → [MediaWiki:Gadget-twinkleprotect.js][]
* `modules/twinklearv.js` → [MediaWiki:Gadget-twinklearv.js][]
* `modules/friendlytalkback.js` → [MediaWiki:Gadget-friendlytalkback.js][]
* `modules/twinkleblock.js` → [MediaWiki:Gadget-twinkleblock.js][]

### Synchronization using `sync.pl`

Expand Down Expand Up @@ -94,9 +115,31 @@ Needless to say, there are exceptions. The main sticking point is spacing around
[Twinkle documentation]: https://en.wikipedia.org/wiki/Wikipedia:Twinkle/doc
[WP:TWPREFS]: https://en.wikipedia.org/wiki/WP:TWPREFS
[MediaWiki:Gadget-Twinkle.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-Twinkle.js
[User:AzaToth/twinkle.js]: https://en.wikipedia.org/wiki/User:AzaToth/twinkle.js
[MediaWiki:Gadget-Twinkle.css]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-Twinkle.css
[MediaWiki:Gadget-Twinkle-pagestyles.css]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-Twinkle-pagestyles.css
[MediaWiki:Gadget-morebits.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-morebits.js
[MediaWiki:Gadget-morebits.css]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-morebits.css
[MediaWiki:Gadget-twinkleprod.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-twinkleprod.js
[MediaWiki:Gadget-twinkleimage.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-twinkleimage.js
[MediaWiki:Gadget-twinklebatchundelete.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-twinklebatchundelete.js
[MediaWiki:Gadget-twinklewarn.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-twinklewarn.js
[MediaWiki:Gadget-twinklespeedy.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-twinklespeedy.js
[MediaWiki:Gadget-friendlyshared.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-friendlyshared.js
[MediaWiki:Gadget-twinklediff.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-twinklediff.js
[MediaWiki:Gadget-twinkleunlink.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-twinkleunlink.js
[MediaWiki:Gadget-friendlytag.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-friendlytag.js
[MediaWiki:Gadget-twinkledeprod.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-twinkledeprod.js
[MediaWiki:Gadget-friendlywelcome.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-friendlywelcome.js
[MediaWiki:Gadget-twinklexfd.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-twinklexfd.js
[MediaWiki:Gadget-twinklebatchdelete.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-twinklebatchdelete.js
[MediaWiki:Gadget-twinklebatchprotect.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-twinklebatchprotect.js
[MediaWiki:Gadget-twinkleconfig.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-twinkleconfig.js
[MediaWiki:Gadget-twinklefluff.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-twinklefluff.js
[MediaWiki:Gadget-twinkleprotect.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-twinkleprotect.js
[MediaWiki:Gadget-twinklearv.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-twinklearv.js
[MediaWiki:Gadget-friendlytalkback.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-friendlytalkback.js
[MediaWiki:Gadget-twinkleblock.js]: https://en.wikipedia.org/wiki/MediaWiki:Gadget-twinkleblock.js
[User:AzaToth/twinkle.js]: https://en.wikipedia.org/wiki/User:AzaToth/twinkle.js
[MediaWiki:Gadgets-definition]: https://en.wikipedia.org/wiki/MediaWiki:Gadgets-definition
[Git::Repository]: http://search.cpan.org/perldoc?Git%3A%3ARepository
[MediaWiki::Bot]: http://search.cpan.org/perldoc?MediaWiki%3A%3ABot
Expand Down
2 changes: 2 additions & 0 deletions sync.pl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@
my %pages = map +("$opt->{base}/$_" => $_), @ARGV;
my %deploys = (
'twinkle.js' => 'MediaWiki:Gadget-Twinkle.js',
'twinkle.css' => 'MediaWiki:Gadget-Twinkle.css',
'twinkle-pagestyles.css' => 'MediaWiki:Gadget-Twinkle-pagestyles.css',
'morebits.js' => 'MediaWiki:Gadget-morebits.js',
'morebits.css' => 'MediaWiki:Gadget-morebits.css',
'modules/twinkleprod.js' => 'MediaWiki:Gadget-twinkleprod.js',
Expand Down
9 changes: 9 additions & 0 deletions twinkle-pagestyles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
// This is loaded as a hidden peer gadget of Twinkle.
// Before core Twinkle has loaded, it adds space where the TW would go in the
// Vector skin, so that the top bar does not "jump".
.client-js > body.skin-vector:not(.ns-special) #p-cactions,
.client-js > body.skin-vector.mw-special-Contributions #p-cactions,
.client-js > body.skin-vector.mw-special-DeletedContributions #p-cactions,
.client-js > body.skin-vector.mw-special-Prefixindex #p-cactions {
margin-right: 3em;
}
5 changes: 5 additions & 0 deletions twinkle.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// Explicitly set width of TW menu so that we can use a hidden peer gadget
// to add space where the TW menu would go before it loads.
.skin-vector #p-twinkle {
width: 3em;
}
1 change: 1 addition & 0 deletions twinkle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -323,6 +323,7 @@ Twinkle.addPortletLink = function( task, text, id, tooltip )
Twinkle.addPortlet( Twinkle.getPref( "portletArea" ), Twinkle.getPref( "portletId" ), Twinkle.getPref( "portletName" ), Twinkle.getPref( "portletType" ), Twinkle.getPref( "portletNext" ));
}
var link = mw.util.addPortletLink( Twinkle.getPref( "portletId" ), typeof task === "string" ? task : "#", text, id, tooltip );
$('.client-js .skin-vector #p-cactions').css('margin-right', 'initial');
if ( $.isFunction( task ) ) {
$( link ).click(function ( ev ) {
task();
Expand Down

0 comments on commit 3783550

Please sign in to comment.