Commit graph

208 commits

Author SHA1 Message Date
jdlrobson 289f1d48f5 Gadgets can change the search API
```
mw.config.set('wgVectorSearchClient', {

   fetchByTitle: function( query, domain, limit ) {
      var xhr = fetch('http://' + domain + '/w/rest.php/v1/search/title?q=banana')
      .then(function (resp) {
          return resp.json();
      }).then(function (json) {
         return {
             results: json.pages
         }
      });
      return {
         fetch: xhr,
         abort: function() {}
      }
   }
})
```

This should be the absolute minimum to allow API clients to configure
the search. This should be considered an interim solution to buy us time to work out a more
elegant way to do this e.g. do this in the API itself…

Bug: T262566
Change-Id: Iac6f2551bed911980064dcb023193f800df0934f
2020-12-23 12:16:29 +00:00
Nicholas Ray 0fdd4a99ac Sync location/other styles of #mw-searchButton with #searchButton
`#mw-searchButton` is apparently used with no-js clients or if the
js-search is broken [1]. Its position and dimensions should be kept in
sync with #searchButton.

This commit:

* Ensures that the same styles, including position, applied to #searchButton
are applied to "#mw-searchButton" so the dimensions are identical. This
should also address a critique in T270202 by removing the "invisible
button".

* Applies a `client-js` selector to ensure these buttons are
only positioned to the left of the search input if js is enabled. If js
is not enabled, having these positioned to the left is confusing as the
input has no obvious "submit" button.

* Syncs the input's end padding to match WVUI's input's end padding if
JS is enabled.

[1] 465e9492bb/includes/templates/SearchBox.mustache (L12-L21)

Bug: T270202
Change-Id: Ie1bb8c68b713b3a18f90ee11b44c78b436a6d0ba
2020-12-18 11:14:19 -07:00
Nicholas Ray 465e9492bb Remove suggestion link underline on hover and li bottom margin
Per T270202, there should be no underline on hover. The underline is
coming from a style in core.

There should also be no bottom margin on the suggestion li elements. The
bottom margin is also coming from a style in core.

Bug: T270202
Change-Id: I215a41aa328366aee2bb552d5d49c95905fd37f2
2020-12-17 10:06:29 -07:00
Nicholas Ray 720bd0e6b7 [modern][styles] Use @size-search-figure variable in padding-left calc
This variable is used in the same way in WVUI.

Change-Id: Ib7a6d7bb456b3179c3b2eae4b1b0da064fe1f79c
2020-12-14 17:04:33 -07:00
Volker E 595870baeb [modern][styles] Amend Typeahead component styles in modern
Following Design Style Guide components sizing and Alex' feedback
on task. Changing applied styles scope to non Vue.js enhanced,
modern-only style of search component as well, in order to have
clean appearance and transforming disruption free.
Also changing em static values to LESS calculations for more developer
friendliness and change background-size to be `em` as well for
user-set typographic zoom preference ability.

Bug: T269959
Change-Id: I157712721621344171a32a8887a5e20cc16cae0d
2020-12-14 11:37:14 -08:00
Volker E 816836c2ae [modern][styles] Shift search bar to the left
`@margin-horizontal-search` is used for margin of search component
and for personal tools, but they are also floated right so one only
gets a clearer picture of this change when the canvas is exactly at
one specific size.
Additionally it's used for a media query, so the min-width is slightly
reduced (by 32px equivalent) as well. That's advantageous too.
At some point we're going to change this to `rem` unit, that's why I've
taken distance from changing it to a `px` value for now although devised
differently before.

Bug: T269959
Change-Id: I21cac3f049eed64520dd229ef80d10f9be853e0e
2020-12-14 08:12:01 -08:00
Jan Drewniak 8afa6f4440 Improve visual similarities between Vector and WVUI search forms.
Modifies and annotates the CSS required to make the server-rendered
version of the new search form look like the WVUI version of the
search form.

Bug: T264355
Change-Id: I989860cfbb755ecbb706b79bd807e9d0013bc4e5
2020-12-09 16:04:45 +01:00
jenkins-bot a9b47f57fb Merge "Development: Allow us to test search with different API hosts" 2020-12-09 00:14:43 +00:00
jenkins-bot 454611f60a Merge "[search] Add Vue search performance instrumentation" 2020-12-09 00:06:32 +00:00
jenkins-bot 707862df60 Merge "[search] Instrument Vue.js-based search widget" 2020-12-09 00:06:30 +00:00
Nicholas Ray 3aaedcfe3c [search] Add Vue search performance instrumentation
This is almost identical to the instrumentation currently used in
production for mediawiki.searchSuggest -- the only differences being in
the nomenclature of variables, etc.

As part of comparing Vue search with legacy search, we need to track how
long it takes a keypress to load and render search results for Vue
search. This will only be used only in synthetic testing at this time
(Real user monitoring (RUM) is not in scope for this ticket).

To test locally, first enter characters in input. Then to see the
metrics recorded:

```
// View all marks
performance.getEntriesByType('mark');

// View all measures
performance.getEntriesByType('measure');
```

This commit adds the following metrics which will only be used in our
synthetic tests. We are not collecting RUM metrics at this time.

Measures:

* mwVectorVueSearchLoadStartToFirstRender: Measures the time it takes
from the start of loading the search module to the first render of results.

* mwVectorVueSearchQueryToRender: Measures the time it takes from
the start of the fetch to the render of search results.

Bug: T251544
Change-Id: I39200648a3a0a4079a132134d142ad8997c8962a
2020-12-08 23:41:28 +00:00
Sam Smith aa10668e6d [search] Instrument Vue.js-based search widget
Add event listeners and associated helpers to emit SearchSatisfaction
events via the `mediawiki.searchSuggest` protocol.

Bug: T257698
Change-Id: Ica040cd18d6c4bf8a1b1f607bb4647c7e8eb7108
2020-12-08 23:41:19 +00:00
jdlrobson dce24c9784 Development: Allow us to test search with different API hosts
By default the API uses location.host as the host, however during
development it is useful to test against production wikis

For example to test against English Wikipedia:
$wgVectorSearchHost = 'en.wikipedia.org';

Note: Links when clicked will not take the user to the target page, and
instead will take the user to the search results page with a link to
create the page.

The following config can be used to workaround that page:
$wgDisableTextSearch = true;
$wgSearchForwardUrl = "/w/index.php?title=$1";

Change-Id: I5fbac7f54844d7a9d6976007bc0d0ff9938b9f2b
2020-12-08 15:22:45 -08:00
jenkins-bot b8e8655af3 Merge "Add Wvui Config to show/hide thumbnails and descriptions" 2020-12-08 22:25:18 +00:00
jenkins-bot 3c6c8ebbba Merge "Integrate WVUI search into Vector" 2020-12-08 22:18:38 +00:00
Nicholas Ray e0c47dc462 Add Wvui Config to show/hide thumbnails and descriptions
Uses ResourceLoader's virtual config feature to get the config and pass
it down to Wvui's typeahead search component.

Disclaimer: I'm a typescript noob and am not sure if the
config.json.d.ts is correct although it seems to make tsc happy.

Bug: T260167
Change-Id: I2eced14c7df3b795b4de0e5149c2ca9fd598c7be
2020-12-08 13:28:42 -08:00
Jan Drewniak bd83398659 Integrate WVUI search into Vector
Creates a new skins.vector.search module that
replaces the searchSuggest module from MediaWiki core.

This module creates a new Vue app using the WVUI
search widget for the new search experience.

The legacy search input form is still retains on pageload,
and the new search kicks on search input focus.

In order to manage that transition, the legacy search
input is styled to resemble the new WVUI input, and the
new input is manually focused after the component mounts.

Vue is also added as a dev-dependency to help with
type-checking.

Other changes:
* the entry in skin.json is reordered alphabetically after
skins.vector.js

Bug: T264355
Change-Id: Ibb9561a77a14734297cb4d0ddcd415fc0750b45d
2020-12-08 13:27:12 -08:00
Volker E 795de73496 Amend standard 'search' icon size, position and CSS rules
Updating 'search' icon to latest WVUI/OOUI optimized, reduced path. Also
- amending size of search input and position of icon in input slightly to
  align it closer to standard text inputs
- simplify CSS by getting rid of selector which is targeting both, input and
  button and applying rules only where needed
- fixing code comments
- increasing icon size to `16px` equivalent `em` to enable user text zooming
  preference applied to search icon as well. `16px` is a compromise towards the
  old look and feel of the previous icon bringing it closer to standard icon size in
  legacy Vector.

This change affects both modern and legacy versions of Vector.

Bug: T266166
Change-Id: Ib4c0c74d3cac30e1893f4c76e56e1197652d41ba
2020-12-07 12:19:01 +00:00
Jan Drewniak 125fa03395 Update Vector search icon
Replaces vector search icon with an update version that is
copied from the OOUI icon set and used in WVUI search.

This update will help us unify the visual appearance of the
existing search input with the one in WVUI.

Bug: T264355
Change-Id: I34792ee80e711b10b441668cc4ae18cc0cc9daa6
2020-11-26 13:19:11 +01:00
Nicholas Ray 0492bc5fb8 Apply static positioning to mw-footer-container
There are popovers such as the discussion tools "Add a link" popover
that need to stack on top of the footer. This replaces the
mw-footer-container's `relative` positioning with `static` positioning
which is one possible solution to this problem.

Alternatively, the popover could be appended to the end of the body
after the footer and positioned absolutely.

Bug: T264679
Change-Id: I34168c181a1e05c33cd42f664fcccb25abd4519b
2020-11-18 18:10:20 +00:00
jenkins-bot 9ccd8e2c23 Merge "[modern][styles] Remove unnecessary margin-top" 2020-11-17 14:03:40 +00:00
Ed Sanders 1dccf67d0f Follow-up I43a6951: Remove unnecessary only-child selector
An only-child will match first- and last-child selectors
so this additional selector is not required.

Change-Id: I17d468ba2bda37edc4e54f42f42d50e4b8831b46
2020-11-16 22:39:17 +00:00
Volker E b0e54eec45 [modern][styles] Remove unnecessary margin-top
Following-up Iecb0d6c4c80cee1d1684597a6dedf7323e2ec54d.
It isn't set anywhere inherited, hence we don't need to set it here.

Change-Id: Ife24aa95e6d1830b8d50001976277dbb2535c47f
2020-11-09 07:49:56 -08:00
jdlrobson f99946236a Cleanup: Merge layout-max-width.less into default layout rules
* Drop some unused variables
* Drop global variables.less per max width FIXME

Bug: T258116
Change-Id: Iecb0d6c4c80cee1d1684597a6dedf7323e2ec54d
2020-11-06 20:21:56 +00:00
jdlrobson 717506b9c0 Cleanup: Merge layout-search-header.less into default layout rules
Dropped all usages of the no longer applicable `skin-vector-search-header-legacy`
class.

Bug: T258116
Change-Id: I16a5cf8dda2ab84ff4b505d5a368587190c409cd
2020-11-04 14:30:13 -08:00
jenkins-bot 924c751421 Merge "Unify blockquote spacing and border style with Design Style Guide" 2020-11-02 23:27:26 +00:00
Volker E 0884f55767 Unify blockquote spacing and border style with Design Style Guide
Unifying blockquote spacing and border style with Design Style Guide.
Also ensuring that blockquote children don't apply inherited whitespace.

Bug: T265947
Change-Id: I43a6951c17376fe3fdd4d24966ec4661c18ffd87
2020-10-30 13:38:01 -07:00
Jan Drewniak 4ff30a16a0 Convert personal menu to use flexbox alignment.
Uses flexbox alignment to resolve an issue where the
clickable area of the notification and alert icons were
overlapping with the links next to them.

Bug: T264339
Change-Id: I2afc12504d7184583fa8331479125474c68017dc
2020-10-29 15:53:56 +01:00
jdlrobson 0bba957a37 Reduce min-width so it doesn't include personal tools
Now the header is no longer absolutely positioned the height is not
fixed and the personal tools can safely spill onto a new line

Bug: T264206
Change-Id: Ib2a3cf1907c7d06c2c92ccbd902a98a3f8242f37
2020-10-28 20:05:55 +00:00
jdlrobson eda19bd6e4 Remove SearchInHeader requirement/feature
Styles will be cleaned up further in a follow up.

Bug: T258116
Change-Id: I878239a85ffbecb5e78d73aed5568c56dbd7d659
2020-10-28 20:05:28 +00:00
jdlrobson 61558af56f Fix logic in collapsibleTabs code
Follow up to  6d967ed4a8c
Add the missing ! to check that the portal is hidden rather
than visible to restore the correct logic.

Bug: T71729
Change-Id: I29f6f5e1e6adf3d6d9795cbdabcc152c5d5ac28f
2020-10-23 09:59:29 -07:00
jenkins-bot 99f9597109 Merge "Add client-side performance metrics for searchLoader" 2020-10-15 08:47:18 +00:00
jdlrobson 839876ba82 Use variables for padding content
On the long term we want to provide access to these variables in other
extensions. e.g. VisualEditor

Bug: T259331
Change-Id: Ibbc6f1905ea384a3d159088e3f5eca947eb6ec08
2020-10-13 21:26:08 +00:00
jdlrobson da26e09bca Vertically align personal tools
Bug: T264339
Change-Id: Ic9df8c1cea0fef82461a84190689791ce2275812
2020-10-13 19:39:12 +00:00
Nicholas Ray 8cf278d305 Add client-side performance metrics for searchLoader
As part of comparing Vue search with legacy search, we need to track how
long it takes to lazy load the wvui library. A similar metric was added
to measuring the mediawiki.searchSuggest module in
I0fa6b8904bd43c87a68e9161f00d686a0e588966.

This commit adds the following metrics which will only be used in our
synthetic tests. We are not doing RUM tests at this time.

To test locally, add the following to your LocalSettings.php and append
the query param `useskinversion=2` e.g.
(http://localhost:8181/wiki/Test?useskinversion=2):

```
$wgVectorUseCoreSearch = false;
```

Marks:

* mwVectorVueSearchLoadStart: Marks the start of loading the search
module.

* mwVectorVueSearchLoadEnd: Marks the end of loading the search
module.

Measures:

* mwVectorVueSearchLoadStartToLoadEnd: Measures the time it takes to
load the search module.

Bug: T251544
Change-Id: I14e44b45a66213821d69cd22395fedbae747da88
2020-10-09 13:26:28 -06:00
jenkins-bot 178a552ad1 Merge "[icons] Re-optimize SVGs with SVGO and manually" 2020-10-06 23:23:15 +00:00
Volker E a6288523d3 [styles]: Remove IE 8 workaround
Change-Id: I8ec8899aba282d4b232cc86f8683e53ea9c30f06
2020-10-06 16:48:09 +00:00
jenkins-bot d8750377f3 Merge "Drop unsupported skin CSS classes" 2020-10-05 19:32:55 +00:00
jenkins-bot 6516a93085 Merge "[docs] Add support note to linear-gradient fallback" 2020-10-05 19:03:34 +00:00
Volker E b23a809c44 [docs] Add support note to linear-gradient fallback
Change-Id: I9db03e4f2a0fe3eb52aeb9273f871150d2c93375
2020-10-05 18:41:26 +00:00
Jan Drewniak 5718afbc37 Adjust the left-alignment of the sidebar
Bug: T257395
Change-Id: Iae03d45b2d21be7e4635646c57480c0ced770419
2020-10-05 18:19:10 +00:00
Volker E 7bbad93bc4 [icons] Re-optimize SVGs with SVGO and manually
- Reducing precision to 1 decimal point (no visible change),
- adding `title` tags where useful,
- reducing paths,
- removing unnecessary `g` elements and
- lowercasing hex colors

Change-Id: I77ee08fbdb54d529f34576b076def985407b3bc2
2020-10-05 10:27:33 -07:00
jdlrobson 89fee04f0b Drop unsupported skin CSS classes
Drop support for vectorMenu, vectorTabs and
vectorMenuCheckbox, body, menu selectors in preference
for standard selectors.

This change will impact a large amount of user scripts/styles but should
not impact any gadgets.

These classes were kept around for user scripts and styles however are not
needed internally. As we transition to a more maintainable skin menu
system, it is time to lose these selectors even though this will cause
disruption.

Vector now will use the mw-portlet class rather than the vector-menu
class in its own CSS styling, however it keeps the other classes to
allow differentiation of the different types of menu.

Changes to test: Previously the tests assumed all portlets were empty
when checking the classes. This is very rare, so its better to check
the classes of non-empty portlets, so several tests are updated
accordingly to drop the emptyPortlet class.

Bug: T262092
Change-Id: I1824335eb47d613c2a4804ec1f1106c0f4c16101
2020-10-01 19:50:24 +00:00
jdlrobson 711a41812a Use newly available Skin::getPortletData method to get mw-portlet class
Kept as simple as possible for now. The new class is added but no classes
are removed. This will be done in a follow up.

Bug: T256897
Bug: T253938
Change-Id: Ib31a9d8f2ac14e63b63e82abd4a9aa1fcb956f45
2020-09-29 00:09:26 +00:00
jenkins-bot c9645fe691 Merge "Prevent Vector tabs from overlapping search loader" 2020-09-28 13:31:09 +00:00
Jan Drewniak 422955e160 Prevent Vector tabs from overlapping search loader
Bug: T254695
Change-Id: I8391407b8efa5b8165f8b2c33de8849de642ecb5
2020-09-28 12:15:13 +02:00
jenkins-bot 57e069ba81 Merge "[styles] Make Trident workaround value a variable" 2020-09-22 15:06:25 +00:00
Ed Sanders 21d4716612 Follow-up I673c28c2: Only apply clearfix to main content area
Bug: T254195
Bug: T263445
Change-Id: I693cd3d4d32501a2a4ab20140a662943fba22bb6
2020-09-21 13:23:48 +01:00
Timo Tijhof 7e0731de48 Implement mediawiki.skin.variables.less for Vector
For now, only define:

- @font-family-sans
- @border-radius-base

Bug: T112747
Depends-On: Icf86c930a3b5524254bb549624737d3b9dccb032
Change-Id: I47da3046678117d5214354d1efe635f32f307dad
2020-09-16 08:39:13 -07:00
jdlrobson 9b31740514 Reduce max-width and adjust margin-left
* The margin-left should only be auto at small resolutions - otherwise on large
monitors it becomes visually separated from the logo
* the margin left should be larger
* and max width should be smaller.

Bug: T261686
Change-Id: Ia1331f51764a34f113e3336735e6cfd5fde1d49d
2020-09-11 14:54:58 +00:00