Nikerabbit has uploaded a new change for review.
https://gerrit.wikimedia.org/r/229201
Change subject: Reduce flash of unstyled content appearance
......................................................................
Reduce flash of unstyled content appearance
FOUT is made more obvious by the recent async loading change.
Shuffled some CSS around so that it can be loaded with addModuleStyles.
Load jquery.uls.grid with addModuleStyles and remove from explicit
dependencies.
Tweaked group selector CSS to retain display with different style
loading order.
Moved some non-TUX CSS to separate file to not load it on most requests.
In message table hide part of the output until JS is loaded.
Load tabgroup with addModuleStyles as it only contains CSS which needs
to be applied immediately to avoid FOUT.
Tested by loading Special:Translate and Special:SearchTranslations without
JS support and verifying the output looks (almost) similar to that of fully
loaded page with JS enabled.
Change-Id: Ib5d4d97a3c9e56019b9b36b31d5b1fb4611f4ca2
---
M Resources.php
M resources/css/ext.translate.groupselector.css
A resources/css/ext.translate.legacy.css
M resources/css/ext.translate.messagetable.css
M resources/css/ext.translate.special.translate.css
M resources/js/ext.translate.messagetable.js
M specials/SpecialManageGroups.php
M specials/SpecialSearchTranslations.php
M specials/SpecialTranslate.php
M utils/TuxMessageTable.php
10 files changed, 168 insertions(+), 170 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Translate
refs/changes/01/229201/1
diff --git a/Resources.php b/Resources.php
index 93246b4..66c8f7c 100644
--- a/Resources.php
+++ b/Resources.php
@@ -55,7 +55,6 @@
'ext.translate.hooks',
'ext.translate.dropdownmenu',
'ext.uls.buttons',
- 'jquery.uls.grid',
'mediawiki.util',
'mediawiki.Uri',
'mediawiki.api',
@@ -121,7 +120,6 @@
'position' => 'top',
'dependencies' => array(
'ext.translate.base',
- 'jquery.uls.grid',
'ext.translate.statsbar',
'mediawiki.jqueryMsg',
'ext.translate.loader',
@@ -146,6 +144,10 @@
'position' => 'top',
) + $resourcePaths;
+$wgResourceModules['ext.translate.legacy'] = array(
+ 'styles' => 'resources/css/ext.translate.legacy.css',
+) + $resourcePaths;
+
$wgResourceModules['ext.translate.loader'] = array(
'styles' => 'resources/css/ext.translate.loader.css',
'position' => 'top',
@@ -154,7 +156,6 @@
$wgResourceModules['ext.translate.messagetable'] = array(
'scripts' => 'resources/js/ext.translate.messagetable.js',
'styles' => 'resources/css/ext.translate.messagetable.css',
- 'position' => 'top',
'dependencies' => array(
'ext.translate.base',
'ext.translate.hooks',
@@ -397,7 +398,6 @@
$wgResourceModules['ext.translate.special.searchtranslations'] = array(
'scripts' => 'resources/js/ext.translate.special.searchtranslations.js',
- 'styles' =>
'resources/css/ext.translate.special.searchtranslations.css',
'dependencies' => array(
'ext.translate.editor',
'ext.uls.mediawiki',
@@ -413,15 +413,17 @@
'position' => 'top',
) + $resourcePaths;
+$wgResourceModules['ext.translate.special.searchtranslations.styles'] = array(
+ 'styles' =>
'resources/css/ext.translate.special.searchtranslations.css',
+) + $resourcePaths;
+
$wgResourceModules['ext.translate.special.supportedlanguages'] = array(
'styles' =>
'resources/css/ext.translate.special.supportedlanguages.css',
'position' => 'top',
) + $resourcePaths;
$wgResourceModules['ext.translate.special.translate'] = array(
- 'styles' => 'resources/css/ext.translate.special.translate.css',
'scripts' => 'resources/js/ext.translate.special.translate.js',
- 'position' => 'top',
'dependencies' => array(
'mediawiki.jqueryMsg',
'mediawiki.Uri',
@@ -445,6 +447,10 @@
),
) + $resourcePaths;
+$wgResourceModules['ext.translate.special.translate.styles'] = array(
+ 'styles' => 'resources/css/ext.translate.special.translate.css',
+) + $resourcePaths;
+
$wgResourceModules['ext.translate.special.translationstash'] = array(
'scripts' => 'resources/js/ext.translate.special.translationstash.js',
'styles' => 'resources/css/ext.translate.special.translationstash.css',
diff --git a/resources/css/ext.translate.groupselector.css
b/resources/css/ext.translate.groupselector.css
index d3fdca5..3b764a1 100644
--- a/resources/css/ext.translate.groupselector.css
+++ b/resources/css/ext.translate.groupselector.css
@@ -1,46 +1,3 @@
-/*
- * Breadcrumb
- */
-.tux-breadcrumb {
- margin-bottom: 10px;
-}
-
-.tux-breadcrumb .grouplink + .grouplink:before {
- border-left: 4px solid #777;
- border-top: 4px solid transparent;
- border-bottom: 4px solid transparent;
- content: "";
- display: inline-block;
- vertical-align: middle;
- position: relative;
- left: -5px;
-}
-
-.tux-breadcrumb span {
- border: medium none;
- color: #555555;
- font-size: 14pt;
- font-weight: normal;
- line-height: 1.25em;
- padding-bottom: 3px;
- padding-left: 15px;
- padding-top: 1.25em;
-}
-
-.tux-breadcrumb span.grouptitle {
- float: left;
- padding: 0 6px 0 0;
-}
-
-.tux-breadcrumb span.grouplink {
- color: #0645AD;
- cursor: pointer;
- float: left;
- min-height: 1px;
- padding: 0 6px;
- position: relative;
-}
-
/**
* Group selector
*/
@@ -96,7 +53,7 @@
content: none;
}
-.grid .tux-groupselector__title {
+.grid .row .tux-groupselector__title {
border: none;
color: #555555;
font-size: 14pt;
@@ -107,21 +64,8 @@
}
.tux-groupselector__filter {
- position: relative;
- height: 36px;
+ height: 30px;
border-bottom: solid 1px #c9c9c9;
-}
-
-.grid .tux-groupselector__filter__tabs {
- position: absolute; /* grid override */
- bottom: 0;
-}
-
-.grid .tux-groupselector__filter__search {
- position: absolute; /* grid override */
- padding-right: 0; /* grid override */
- right: 0;
- bottom: 2px;
}
.tux-groupselector__filter__search__input {
@@ -129,18 +73,16 @@
width: 100%;
height: 28px;
border: 1px solid #C9C9C9;
- padding: 0 5px;
}
.tux-groupselector__filter__search__icon {
- background: url('../images/search.png') no-repeat scroll right center
transparent;
+ background: url(../images/search.png) no-repeat scroll right center
transparent;
background-image: -webkit-linear-gradient(transparent, transparent),
url(../images/search.svg);
/* @embed */
background-image: linear-gradient(transparent, transparent),
url(../images/search.svg);
background-size: 25px;
height: 28px;
width: 28px;
- float: right;
}
.tux-groupselector button {
@@ -153,6 +95,9 @@
* Group tab
*/
.tux-grouptab {
+ box-sizing: border-box;
+ line-height: 30px;
+ height: 30px;
color: #252525;
cursor: pointer;
padding: 2px 5px;
@@ -209,7 +154,7 @@
width: 50px;
}
-.grid .tux-grouplist__item__subgroups {
+.grid .row .tux-grouplist__item__subgroups {
position: absolute; /* grid override */
padding: 0 15px 2px 0; /* grid override */
font-weight: normal;
diff --git a/resources/css/ext.translate.legacy.css
b/resources/css/ext.translate.legacy.css
new file mode 100644
index 0000000..153f676
--- /dev/null
+++ b/resources/css/ext.translate.legacy.css
@@ -0,0 +1,65 @@
+/* Form at Special:Translate */
+.mw-sp-translate-error {
+ font-style: italic;
+ background-color: yellow;
+}
+
+/* This gets pretty far on wide screens... */
+.mw-sp-translate-settings input[type=submit] {
+ float: right;
+}
+
+/* For some reason a non-breaking space is not enough to keep the label
+ * with the dropdown. */
+.mw-sp-translate-settings label {
+ white-space: nowrap;
+}
+
+.mw-sp-translate-table {
+ width: 100%;
+ border-width: 1px;
+ border-collapse: collapse;
+}
+
+.mw-sp-translate-table th {
+ background-color: #b2b2ff;
+ border: 1px solid;
+}
+
+.mw-sp-translate-table tr.orig {
+ background-color: #ffe2e2;
+}
+
+.mw-sp-translate-table tr.new {
+ background-color: #e2ffe2;
+}
+
+.mw-sp-translate-table tr.def {
+ background-color: #f0f0ff;
+}
+
+.mw-sp-translate-table tr.ign {
+ background-color: #202020;
+}
+
+.mw-sp-translate-table tr.opt {
+ background-color: #F2F200;
+}
+
+.mw-sp-translate-table .untranslated {
+ background-color: #a2f290;
+}
+
+.mw-sp-translate-table > tbody > tr > * {
+ vertical-align: top;
+ border: 1px solid #909090;
+}
+
+.mw-translate-messagereviewbutton {
+ float: right;
+}
+
+.mw-translate-messagereviewstatus {
+ clear: right;
+ text-align: right;
+}
diff --git a/resources/css/ext.translate.messagetable.css
b/resources/css/ext.translate.messagetable.css
index 5da964d..44769a4 100644
--- a/resources/css/ext.translate.messagetable.css
+++ b/resources/css/ext.translate.messagetable.css
@@ -1,55 +1,3 @@
-.mw-sp-translate-table {
- width: 100%;
- border-width: 1px;
- border-collapse: collapse;
-}
-
-.mw-sp-translate-table th {
- background-color: #b2b2ff;
- border: 1px solid;
-}
-
-.mw-sp-translate-table tr.orig {
- background-color: #ffe2e2;
-}
-
-.mw-sp-translate-table tr.new {
- background-color: #e2ffe2;
-}
-
-.mw-sp-translate-table tr.def {
- background-color: #f0f0ff;
-}
-
-.mw-sp-translate-table tr.ign {
- background-color: #202020;
-}
-
-.mw-sp-translate-table tr.opt {
- background-color: #F2F200;
-}
-
-.mw-sp-translate-table .untranslated {
- background-color: #a2f290;
-}
-
-.mw-sp-translate-table > tbody > tr > * {
- vertical-align: top;
- border: 1px solid #909090;
-}
-
-.mw-translate-messagereviewbutton {
- float: right;
-}
-
-.mw-translate-messagereviewstatus {
- clear: right;
- text-align: right;
-}
-
-/*
- * Tux MessageTable
- */
/* Default colors */
.tux-messagelist {
@@ -342,41 +290,4 @@
.tux-empty-list-actions a {
cursor: pointer;
margin: 0 10px;
-}
-
-
-.ext-translate-language-selector-label {
- color: #555555;
-}
-
-.ext-translate-language-selector {
- float: right;
- text-align: right;
- border: medium none;
- font-size: 14pt;
- font-weight: normal;
- line-height: 1.25em;
- padding-bottom: 3px;
- padding-left: 15px;
- padding-top: 1.25em;
-}
-
-/* The triangle shaped down-pointing callout after the language name
- * in the target language selector
- */
-.ext-translate-language-selector:after {
- margin-left: 4px;
- border-left: 4px solid transparent;
- border-right: 4px solid transparent;
- border-top: 4px solid #0645AD;
- content: "";
- display: inline-block;
- vertical-align: middle;
-}
-
-.ext-translate-language-selector .uls {
- color: #0645AD;
- cursor: pointer;
- min-height: 1px;
- position: relative;
}
diff --git a/resources/css/ext.translate.special.translate.css
b/resources/css/ext.translate.special.translate.css
index 3947da6..f0b53ad 100644
--- a/resources/css/ext.translate.special.translate.css
+++ b/resources/css/ext.translate.special.translate.css
@@ -1,22 +1,85 @@
/*
- * Form at Special:Translate
+ * Breadcrumb for message group selector
*/
-.mw-sp-translate-error {
- font-style: italic;
- background-color: yellow;
+.tux-breadcrumb {
+ margin-bottom: 10px;
}
-/* This gets pretty far on wide screens... */
-.mw-sp-translate-settings input[type=submit] {
+.tux-breadcrumb .grouplink + .grouplink:before {
+ border-left: 4px solid #777;
+ border-top: 4px solid transparent;
+ border-bottom: 4px solid transparent;
+ content: "";
+ display: inline-block;
+ vertical-align: middle;
+ position: relative;
+ left: -5px;
+}
+
+.tux-breadcrumb span {
+ border: medium none;
+ color: #555555;
+ font-size: 14pt;
+ font-weight: normal;
+ line-height: 1.25em;
+ padding-bottom: 3px;
+ padding-left: 15px;
+ padding-top: 1.25em;
+}
+
+.tux-breadcrumb span.grouptitle {
+ float: left;
+ padding: 0 6px 0 0;
+}
+
+.tux-breadcrumb span.grouplink {
+ color: #0645AD;
+ cursor: pointer;
+ float: left;
+ min-height: 1px;
+ padding: 0 6px;
+ position: relative;
+}
+
+/* Language selector */
+.ext-translate-language-selector-label {
+ color: #555555;
+}
+
+.ext-translate-language-selector {
float: right;
+ text-align: right;
+ border: medium none;
+ font-size: 14pt;
+ font-weight: normal;
+ line-height: 1.25em;
+ padding-bottom: 3px;
+ padding-left: 15px;
+ padding-top: 1.25em;
}
-/* For some reason a non-breaking space is not enough to keep the label
- * with the dropdown. */
-.mw-sp-translate-settings label {
- white-space: nowrap;
+/* The triangle shaped down-pointing callout after the language name
+ * in the target language selector
+ */
+.ext-translate-language-selector:after {
+ margin-left: 4px;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 4px solid #0645AD;
+ content: "";
+ display: inline-block;
+ vertical-align: middle;
}
+.ext-translate-language-selector .uls {
+ color: #0645AD;
+ cursor: pointer;
+ min-height: 1px;
+ position: relative;
+}
+
+
+/* */
.tux-message-selector {
font-size: 14px;
margin: 0;
diff --git a/resources/js/ext.translate.messagetable.js
b/resources/js/ext.translate.messagetable.js
index 7b2eb40..ecbfbb2 100644
--- a/resources/js/ext.translate.messagetable.js
+++ b/resources/js/ext.translate.messagetable.js
@@ -101,6 +101,7 @@
init: function () {
this.switchMode( this.mode );
this.initialized = true;
+ this.$actionBar.removeClass( 'hide' );
},
listen: function () {
diff --git a/specials/SpecialManageGroups.php b/specials/SpecialManageGroups.php
index bce34eb..2a59d79 100644
--- a/specials/SpecialManageGroups.php
+++ b/specials/SpecialManageGroups.php
@@ -340,7 +340,7 @@
return true;
}
- $skin->getOutput()->addModules( 'ext.translate.tabgroup' );
+ $skin->getOutput()->addModuleStyles( 'ext.translate.tabgroup' );
$tabs['namespaces'] = array();
foreach ( $pagesInGroup as $spName => $section ) {
diff --git a/specials/SpecialSearchTranslations.php
b/specials/SpecialSearchTranslations.php
index 527ca40..8421c28 100644
--- a/specials/SpecialSearchTranslations.php
+++ b/specials/SpecialSearchTranslations.php
@@ -60,6 +60,8 @@
}
$out = $this->getOutput();
+ $out->addModuleStyles( 'jquery.uls.grid' );
+ $out->addModuleStyles(
'ext.translate.special.searchtranslations.styles' );
$out->addModules( 'ext.translate.special.searchtranslations' );
$this->opts = $opts = new FormOptions();
diff --git a/specials/SpecialTranslate.php b/specials/SpecialTranslate.php
index 9e00fbc..ed1ad4c 100644
--- a/specials/SpecialTranslate.php
+++ b/specials/SpecialTranslate.php
@@ -40,6 +40,10 @@
global $wgTranslateBlacklist, $wgContLang;
$out = $this->getOutput();
+ $out->addModuleStyles( array(
+ 'ext.translate.special.translate.styles',
+ 'jquery.uls.grid',
+ ) );
$out->addModules( 'ext.translate.special.translate' );
$this->setHeaders();
@@ -82,6 +86,7 @@
$out->addHTML( $this->tuxSettingsForm( $errors ) );
$out->addHTML( $this->messageSelector() );
} else {
+ $out->addModuleStyles( 'ext.translate.legacy' );
TranslateUtils::addSpecialHelpLink( $out,
'Help:Extension:Translate/Translation_example' );
// Show errors nicely.
$out->addHTML( $this->settingsForm( $errors ) );
@@ -799,7 +804,7 @@
return true;
}
- $skin->getOutput()->addModules( 'ext.translate.tabgroup' );
+ $skin->getOutput()->addModuleStyles( 'ext.translate.tabgroup' );
// Extract subpage syntax, otherwise the values are not passed
forward
$params = array();
diff --git a/utils/TuxMessageTable.php b/utils/TuxMessageTable.php
index bc77fa6..cfc473d 100644
--- a/utils/TuxMessageTable.php
+++ b/utils/TuxMessageTable.php
@@ -48,7 +48,7 @@
$modeProofread = $this->msg( 'tux-editor-proofreading-mode'
)->escaped();
$actionbar = <<<HTML
-<div class="tux-action-bar row">
+<div class="tux-action-bar hide row">
<div class="three columns tux-message-list-statsbar"
data-messagegroup="$groupId"></div>
<div class="three columns text-center">
<button class="toggle button
tux-proofread-own-translations-button hide-own hide">
--
To view, visit https://gerrit.wikimedia.org/r/229201
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib5d4d97a3c9e56019b9b36b31d5b1fb4611f4ca2
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Translate
Gerrit-Branch: master
Gerrit-Owner: Nikerabbit <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
