Page MenuHomePhabricator

Check if js jumpiness can be decreased
Closed, ResolvedPublic

Description

Currently, when the specialPage:Search is loading, you first see the old interface, and then comes the new one. Please check if this can be easily undone by using the css class of this ticket:
[T165488]

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

The client-js has no default styles, so the problem can't be alleviated by adding the class to the appropriate elements (namely mw-search-profile-tabs), because the styles would have to be in the module CSS. That CSS already contains instructions to hide the elements but it's loaded very late, wich causes the flash of unstyled content.

As far as I can see, the only option to "hide" the search options is to rip them out of the HTML. Which is difficult. At the moment I see two options:

  • Introduce a Hook on the special search page to change the [[ https://github.com/wikimedia/mediawiki/blob/master/includes/specials/SpecialSearch.php#L276-L280 | initialization of the MediaWiki\Widget\Search\SearchFormWidget ]] to use a user-defined (sub)class that could be overwritten/modified by extensions. We could then even generate the advanced search form on the server side instead of using JavaScript.
  • Use the BeforePageDisplay hook to parse the generated HTML of the search page and remove the HTML snippet. Very ugly, hackish, error-prone and slow. But doable relatively quickly without touching MediaWiki core.

Questions for @Addshore , @thiemowmde, @WMDE-Fisch :

  1. Do you see any other option to hide the default namespace selection?
  2. What's your opinion on the options?
  3. How realistic would it be to introduce a getSearchFormWidget hook? How long would it take?
gabriel-wmde moved this task from Doing to Todo on the WMDE-Fundraising-Funban-1 board.
gabriel-wmde subscribed.

Did you considered creating a CSS file with a single instruction …

.client-js .mw-search-profile-tabs {
	display: none;
}

… and not load this with addModules but with OutputPage::addModuleStyles. These styles are loaded much earlier, via <style> tags and not via ResourceLoader.

However, you should not load all CSS like this. addModule should be used to load CSS that is only needed by JavaScript, which is the case for pretty much all CSS in this extension.

+2 to what Thiemo says. We do that in the TwoColConflict extension. Styles are loaded with addModuleStyles and then I nest the instructions accordingly. E.g. see https://gerrit.wikimedia.org/r/#/c/363028/

Change 363570 had a related patch set uploaded (by Gabriel Birke; owner: Gabriel Birke):
[mediawiki/extensions/AdvancedSearch@master] Improve CSS styling and reduce jumpyness

https://gerrit.wikimedia.org/r/363570

Change 363570 merged by jenkins-bot:
[mediawiki/extensions/AdvancedSearch@master] Improve CSS styling and reduce jumpyness

https://gerrit.wikimedia.org/r/363570