Commit graph

1642 commits

Author SHA1 Message Date
Volker E 5691e4c7c4 [less] Move margin and padding on body only
Both properties are needed for normalizing different browsers (`padding`
infamous on older Operas) and are only needed on `body`.

Change-Id: I661869ed43491824cbfe86dc36e39f97e29ccf8a
2020-06-15 17:05:54 -07:00
Volker E 922daba0a9 [less] Remove default, already inherited user-agent properties
Also describe #simpleSearch reasoning clearer.

Change-Id: Ief3ebe9b1f1c519d6424dd8495a3522889efbbbc
2020-06-15 16:10:25 -07:00
jenkins-bot a2864cb5ef Merge "[less] Normalize focus styles in Blink based browsers" 2020-06-15 22:44:28 +00:00
Volker E 97566a026b [less] Amend subtle color to WikimediaUI Base default
Replace former non-base variables color with one from the standard
variables files in preparation for iit's usage in core and Vector.
Color is still confirming to WCAG level AA contrast ratio.

Bug: T254474
Change-Id: I06d981f05554b6429d11f19b8f5848ba5a7441a0
2020-06-15 22:20:41 +00:00
Volker E 41b0b6c434 [less] Normalize focus styles in Blink based browsers
Normalizing focus styles in Blink based browsers and aligning to
Design Style Guide components.

Bug: T245887
Change-Id: I4d571dcbbada5edffbfee631c8b438cf7c8d273a
2020-06-15 22:20:30 +00:00
jenkins-bot 7786fd9d1f Merge "[less] Extract cross-browser normalization rules into new 'normalize.less'" 2020-06-12 22:40:20 +00:00
Volker E 35b2f65914 [less] Extract cross-browser normalization rules into new 'normalize.less'
Change-Id: I23da024b47020212173380315acd37210b924327
2020-06-12 20:33:46 +00:00
AronDemian 22a8b6c5d5 Fix dropdown menu checkbox hack's CSS selector
`ul.vector-menu-content-list` was wrapped into `div.vector-menu-content`, thus becoming the sibling of
`input.vector-menu-checkbox`:
https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/589395/39/includes/templates/Menu.mustache#15
Rename of `.vectorMenuCheckbox` to `.vector-menu-checkbox`:
https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/597849/7/includes/templates/Menu.mustache#7

Follow-up to: Id59234aa6b822a24848386bdc04d8d7ed37ca145 and I00b4d2fd795195cd9c8add650a3b3cafdced5465

Bug: T255069
Change-Id: I299f4648acf83d2abdad274851e0960fe09a70b1
2020-06-12 14:06:27 +02:00
jenkins-bot f92df81fc5 Merge "[less] Put element selectors in the right place" 2020-06-12 00:07:22 +00:00
Volker E 0b1abe7a03 [less] Put element selectors in the right place
Element selectors need to come before class selectors.

Change-Id: I278adf4c5eb19e64fd0e2afdd4416dd45077389f
2020-06-11 16:41:44 -07:00
Volker E 7e7bdb4f54 Replace deprecated classes with modern ones
Following-up I00b4d2fd795195cd9c8add650a3b3cafdced5465
it's now time to settle on `.vector-menu*` classes.

Change-Id: I8669d402b6b757cd5bf59a5e0df377b6023b0700
2020-06-11 14:05:15 -07:00
jenkins-bot 23393d3685 Merge "Fix portal heading border in Safari" 2020-06-09 20:54:26 +00:00
Stephen Niedzielski 3003724a3a [fix][Less] disable sidebar animations on page load
There's a longstanding Chrome bug that causes CSS transitions to show in
their terminal states. This patch works around the issue by limiting
transitions to JavaScript users only via the `client-js` class which is
added to the root `html` Node some time after page content loads. The
effect is a better overall experience for everyone but transitions
unfortunately no longer appear for no-JS devices.

I am unable to reproduce this issue in Vector's configuration. This
patch should only be merged as a last resort.

Bug: T246419
Bug: T234570
Change-Id: Ifcb2bf1fddb85113a4858b7a210ded3954952e6e
2020-06-09 12:18:59 -06:00
Volker E 3888b4075e Fix portal heading border in Safari
By using `rgba()` instead of `transparent` the color gradient
calculation works as expected in Safari as it does in all
other browsers.
Also using same distance 33%/66% for gradient start and end.

Bug: T254489
Change-Id: I64ec6aa51a9ea931a2351c9c7a9ffaf28c8d130b
2020-06-08 14:02:09 -07:00
bkudiess-msft 3eea85aad9 Fixes "Contributions" control gets Overlapped in 200% Zoom mode
Bug: T253599
Change-Id: I37fa8b75982a2347bced878ae83e10e1af61360c
2020-06-05 00:29:18 +00:00
Stephen Niedzielski a0d2c2497b [fix][RTL] flip menu collapse button icon
Fix the icon button directionality in right-to-left languages.
Previously, the button was hardcoded to support left-to-right only.

- Replace the skin.vector.icons' `.mw-ui-icon-wikimedia-{name}:before`
  `selector` in skin.json with a placeholder, `{name}`. I don't think
  this selector should be needed but it seems to be erroneous not have
  one. I believe this issue of wanting a null selector was encountered
  in Minerva or MobileFrontend but am unable to locate the past
  discourse.

- Add check and unchecked menu button selectors to skin.json that set
  the appropriate background image. This shards some of the styles out
  of Less and into ResourceLoader-land but it's worthwhile.

- Revise the name of horizontal collapse icon to describe its form not
  function, "collapseHorizontal" to "chevronHorizontal". This has been
  an established convention that was missed a couple patches back.

- Add a flipped chevronHorizontal for RTL. I used Inkscape to do the
  flip and tried to match the style of the original by hand. Feel free
  to edit further.

- Drop the now unnecessary icon flipping JavaScript and initial Mustache
  class. This enables a real CSS-only solution for the icons.

Bug: T246419
Change-Id: I60f65b3c595bf18d309b667d9a0b066691b90c97
2020-06-03 17:09:38 -06:00
Volker E fd250975c4 Fix misconception on icon coloring
It's advisable to rely on default icon color and set it's color
by opacity. With that we've got a better playing field to respond
to user interaction with icon color changes, not relying on
several icons at once for different states and also being
backwards-compatible for a variety of browsers.

Change-Id: Iaff869774007ed962104d704103f0392a3516f4f
Bug: T246419
2020-06-02 23:06:49 -06:00
Volker E 4b30bceda3 [dev] Remove outdated selector now that cache has expired
Change-Id: Ia3f914c96f03e3c70c3cb4c8d7de96f34cb4b1f5
2020-06-01 21:45:08 +00:00
Stephen Niedzielski 909cbaac11 [fix][a11y][Less] use percentage for sidebar button icon size
The sidebar button's icon previously used pixel dimensions while the
button itself uses ems. This caused the button to scale with the user's
font such that the icon is distorted and unrecognizable.

This patch drops the vertical margin and sets the icon height to 100%.
The width is proportionally constrained so the effect is that the icon
may grow with the button but the margin stays consistently at 12px.

This approach deviates from other items in the header (globe,
notifications) and tab bar (watchstar, search icon), that were 
historically implemented without the user text zoom capability in mind.

Bug: T246419
Change-Id: I2ae46fd49dcb619004587b8b3560b9115c3bdaaa
2020-06-01 21:08:02 +00:00
AronDemian bdffc10fbb Fix bug: "dancing vector tabs"
Related: I0672b05bc3eb9564e1943ee8099bafb959dc474d
"Cannot rename `.emptyPortlet` to `.vector-menu-empty` yet." This is the JS part.
Given the regression, we can't make this rename just yet. Restore
the old class, we'll deal with this rename later.

Bug: T253819
Change-Id: Ia6bb33be807bfe98de09ce0b61924da232fc9941
2020-06-01 20:02:28 +00:00
Volker E 4200a8665c Naming convention using 'skin' as entrance point
Using 'skin' as entrance point files, similar to already existing
convention in MediaWiki land with 'skin.json' or 'SkinVector.php' as
example in Vector skin. Replacing Apache inspired 'index' convention.
Also renaming legacy to 'skin-legacy' to be clear on file base that it's
a modification of 'skin'.

Bug: T249073
Change-Id: Ief1c469724d4ffe238d307407c3ddb46f2e1abfa
2020-05-28 20:58:01 -07:00
jdlrobson 56f7520120 Hotfix: Cannot rename emptyPortlet to empty-portlet yet.
Given the regression, we can't make this rename just yet. Restore
the old class with the documentation block that should have been there
before. We'll deal with this rename later.

Bug: T253912
Change-Id: I0672b05bc3eb9564e1943ee8099bafb959dc474d
2020-05-28 16:01:38 -07:00
Volker E feb025d8a1 Horizontally and vertically align menu icon to design templates
Put icon on one line with sidebar contents horizontally and with
logo vertically.

Bug: T246419
Change-Id: I6876e6f39a5f804ad4459cd9721c796ae7a8e3fb
2020-05-28 11:28:59 -07:00
jenkins-bot 15a30c26f8 Merge "[feature] add menu button to toggle panel visibility" 2020-05-28 02:57:14 +00:00
Stephen Niedzielski 5195f5fd67 [feature] add menu button to toggle panel visibility
Add a menu button that toggles the panel's (also referred to as a
sidebar) collapse state. When the screen is wide enough, animate the
transition.

The menu icon from OOUI is copied into Vector to avoid two
ResourceLoaders modules (collapseHorizontal icon isn't ready for
inclusion in the OOUI icon pack and ResourceLoaderOOUIIconPackModule
doesn't support images).

Additional polish and collaboration is needed but this patch fulfills
the scope of its referenced task.

Bug: T246419
Depends-On: I8e153c0ab927f9d880a68fb9efb0bf37b91d26b2
Change-Id: Ic9d54de7e19ef8d5dfd703d95a45b78c0aaf791a
2020-05-28 02:14:13 +00:00
jenkins-bot 6a1458eada Merge "Reduce distribution of legacy classes" 2020-05-26 21:01:55 +00:00
jdlrobson cb7ca11274 Reduce distribution of legacy classes
The .menu class historically only needs to apply to dropdowns.
the .vectorMenuCheckbox is inconsistent with the other classes on the
menu so we should begin its deprecation.

Bug: T253329
Change-Id: I00b4d2fd795195cd9c8add650a3b3cafdced5465
2020-05-26 20:22:08 +00:00
jdlrobson d49eb1e0ff Merge EmphasizedSidebarAction.less into Sidebar.less
The opt in link is part of the sidebar in the current modern version
of vector. The legacy sidebar has been split out and frozen. For this
reason I think it makes sense to move the styles for the button into
the sidebar stylesheet.

The class name is renamed to reflect the hierarchy. We are not using
BEM but we are using hyphens to describe location so the newly proposed
names `mw-sidebar` and `mw-sidebar-action` seem more applicable than
the previous generic class names.

This doesn't impact caching given anonymous users cannot see the opt
in/out link.

Change-Id: I2991e941592a0678f40c73bb6daeab71ada6b7c3
2020-05-26 18:53:25 +00:00
Stephen Niedzielski 0fac9045ac [dev][Legacy] split sidebar Mustache and Less
Split out the sidebar in advance of significant Latest mode only
changes.

The Less split was made by adding a new Sidebar.less file that imports
the Legacy implementation.

The Mustache split was made by file copying the existing implementation
into a legacy/ subfolder. Both the Legacy and Latest implementations
were then stripped of templates not applicable to their modes.

These changes are aligned with the splits for JavaScript.

Bug: T246419
Change-Id: Ib82769ea16bfc09efe8a088220aab55bdde0d381
2020-05-15 18:05:30 +00:00
Volker E de788c6446 [dev] Remove white-space attribute from personal menu
Removing `white-space` on `.vector-menu` as we couldn't find any
use case of this any more and it's breaking DRY-ed up Menu in portals on
modern Vector.

Bug: T252717
Change-Id: I87a64e64c02a6690a7ecea93ce7712619457d575
2020-05-13 15:22:10 -07:00
jenkins-bot 4fb5f4e903 Merge "Show half-star when the page is temporarily watched" 2020-05-13 19:28:16 +00:00
jenkins-bot 8950f60eba Merge "[modern] Center the logo tagline beneath the wordmark" 2020-05-13 17:55:37 +00:00
AronDemian 450f7d237a [modern] Center the logo tagline beneath the wordmark
Bug: T252430
Change-Id: If16fa9e70c52a8cb51b4f297d0ed7db8e72cebcb
2020-05-13 05:33:49 +00:00
jdlrobson e048c2a729 Refactor: Simplify and standardize menu definitions
* Standardise the menu markup. This means all menus in Vector will now
be wrapped in a div and will have a heading.
* All menus now have the vector-menu class. Styles specific to personal tools
are moved to layout since these are concerned with placement.
* The ul class will always have menu class.
* emptyPortal class is generalised into vector-menu-empty for consistency
with other classes and moved from common.less into Menu.less
* Standardise hooks - BaseTemplateAfterPortlet can now be run on any
menu.

Changes to HTML:
* lang and dir attributes are moved from the h3 up to the div element
.vectorTabs, .portal(s) and #p-personal now has hidden span element inside h3
* for non portals ul.menu" is now wrapped in a div.vector-menu-content

This change does impact the following CSS selectors which will need to be updated:

I see no matches for these selectors in code search.

```
 #p-variants > ul
 #p-namespaces > ul
 #p-personal > ul
 #p-views > ul
 #p-cactions > ul

```
Using global-search.toolforge.org I see one match
for p-variants, 26 for p-namespaces, 30 for p-personal,
36 for p-views and 7 for p-cactions. I see this as acceptable
breakage provided a user notice is sent out which it has been
(T252447)

Bug: T249372
Change-Id: Id59234aa6b822a24848386bdc04d8d7ed37ca145
2020-05-12 15:17:38 -07:00
MusikAnimal ca71f762fa Show half-star when the page is temporarily watched
Bug: T248495
Depends-On: I61b24fddf6aaf5233f426602bfa1cc4fafce942b
Change-Id: I712af9a0646d22c3b7873bbf77dba363c5770181
2020-05-12 00:06:16 +00:00
Stephen Niedzielski 108393daf1 [dev][Legacy][JS] Split Legacy mode JavaScript into new ResourceLoader module
The collapsible sidebar adds a new JavaScript dependency and behavior to
Latest mode only. There are a number of ways of to make the deviation
but we think now is the time to start splitting by module.

This patch adds a new ResourceLoader module, skins.vector.legacy.js, and
moves the existing JavaScript into it. The old module, skins.vector.js,
has been given a currently matching index.js entry point that references
the collapsible tabs' files by reaching across directories. It's not
quite ideal as usually ResourceLoader modules and directory structures
strive for 1:1 correspondence but this patch makes the bold assertions
that it's better than a file copy, better than a new
"skins.vector.common.js" ResourceLoader module, more compatible than a
symlink, and the existing jQuery tabs implementation will eventually be
replaced in Latest mode.

A "Legacy" module was added instead of a "Latest" with the assumption
that active development should generally be considered "latest" and
Legacy an intentional distinction.

Bug: T246419
Change-Id: I9980403f1ee5897c27ac0331f0b51a5bcbdff778
2020-05-11 15:29:56 -06:00
AronDemian c42739a200 [legacy] Merge 'background-gradient.less' into 'layout.less'
Bug: T249073
Change-Id: Icb4ef65fbc72b5793061d97194ef4b88836c0fe2
2020-05-08 20:05:56 +00:00
AronDemian 015bfa74d9 [modern] Move up color and background-color rule from content to body
Bug: T251583
Change-Id: I93e4ef82210e0f8c559f4476480a3c3b0b6474c8
2020-05-08 20:05:46 +00:00
AronDemian b4ce8210ca [modern] Drop the background gradient
Move content border rules to layout (will be removed).

Bug: T251583
Change-Id: I28b7a3fdd3f89a0aef93e64c1ae12f39ae430e66
2020-05-08 18:25:31 +00:00
jdlrobson 9f2ca0d072 Refactor: Portal is also a Menu
To complete the refactor, the Portal is also refactored
as a Menu using the getMenu function.

An old code path supporting portals outputted by hooks with
strings is marked as deprecated to simplify this code in future.

array-portals-first -> data-portals-first (the value is not
an array)

Changes:
* $this->getLanguages and  $this->getToolbox() always returns an array (see BaseTemplate)
but we previously supported portals made using raw HTML. Let's move away from that
behaviour and deprecate it.
* Hooks are moved into buildSidebarProps and marked as deprecated where possible
(SkinTemplateToolboxEnd). SidebarBeforeOutput can be used instead.

Bug: T249372
Change-Id: I2549af3e24e5d51c09e9a88ca50a0d9b2e154c3f
2020-05-07 16:56:59 -07:00
jdlrobson e4a4050b81 Organize CSS by common, layout, typography and components
Moving styles from the existing styles to common/layout
or components stylesheets they should be associated with.

Components are identified using PascalCase. Lowercase names are used for things
that are not components. This distinction should help us reason with the code
better and make it clearer where CSS belongs, saving us lots of wasted
effort discussing conventions.

Patch isn't making actual CSS changes themselves - for testing purposes this
should be a NOOP.

In preparation for the gradient removal,
'background-gradient.less' is marked as legacy.

Merged 'externalLinks.less' into content.less, they belong to content.

Bug: T249073
Change-Id: I8dbc29b7a19f7613b57b0984a8befaeae9c08798
2020-05-07 22:57:13 +00:00
jenkins-bot 85e162caea Merge "Class names with hyphens preferred over camel case" 2020-05-07 22:12:51 +00:00
jdlrobson 4dfe4a97c9 Class names with hyphens preferred over camel case
The classes were recently changed so provided this is merged before
next branch cut no need to worry about cached HTML.

Bug: T249073
Change-Id: Ib20c7a359bda858df89ebb245e682d321dd5acd0
2020-05-07 14:43:13 -07:00
Volker E 9934783544 Remove #footer selectors now that cache has expired
Following-up Ica9f8c43617c624648fa12dc86ebb3daa10f0409.

Change-Id: I6f698ff98b9c474085bf7370ecaa78db3a3617e8
2020-05-06 18:55:50 -07:00
jdlrobson 9cd47c5339 Refactor: VectorMenu merged in to Menu
Bug: T249372
Change-Id: Ifaf78b507c12aa251228213c89751cbb4d111d9a
2020-05-06 16:09:22 -07:00
jdlrobson a43e79c1d3 Refactor: Merge VectorTabs into Menu
Bug: T249372
Change-Id: Ib6ae191b31564dc23a3b1d6aedf48cbaaad006af
2020-05-06 10:23:58 -07:00
jdlrobson a3bb097cf8 Refactor: Generalise personal menu
the PersonalMenu should be generalised. In future we will use it as
the template for all menus

Bug: T249372
Change-Id: Id1c43d2e9eefef1d7aec45f0137e27f10ad935df
2020-05-05 17:34:44 -07:00
AronDemian ffcd4b6113 refactor: Move up .portal underline gradient from .body to h3
Change-Id: I3c057e048ada0601497ee6697c19bf207c3bc821
2020-04-30 22:16:29 +00:00
jdlrobson 6a9ee465bc [modern] A new version of Vector with a new logo
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.

Changes to storybook:
* The storybook script now pulls down image assets so that the logos can
be shown in storybook. The script is adjusted to make use of a static folder to
serve these images.

Note:
* The legacy mode is not touched as part of this patchset.
* The personal menu is unaffected by this patch and is out of scope.
* The alignment issue is noted, but will be solved at a later date.
* Changes to portal are out of scope.
* Adding storybook for modern descoped, given its not possible to load
both legacy layout and modern layout inside a storybook at current time.

Sample config:

$wgLogos = [
        'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
        'tagline' => [
                'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
                'width' => 117,
                'height' => 13,
        ],
        '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
        'wordmark' => [
                'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
                'width' => 116,
                'height' => 18,
        ],
];

Coauthor: Aron Manning

Bug: T246170
Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-04-30 14:11:54 -07:00
AronDemian f6cbbbfd95 [modern] Add Header element and styles
- Removed `#mw-head-base`.
- `#mw-page-base` -> `.mw-header-placeholder`.
- `#mw-head` moved down to `@height-header` to make space for new header.
- Content moved down to `@height-header + @height-tabs`.

Added Less variables:
- @height-header: 69px;
- @height-logo-icon: 50px;
- @height-header--inner: 54px;
- @height-tabs: 2.5em;

Style splits:
- Added Header.less
- @height-header: 2.5em;

Bug: T246170
Change-Id: I07280c4c7a2054439153e76359f712281049df0b
2020-04-28 18:15:39 +02:00
jdlrobson 95c80c4efe Refactor: Revert to previous ordering
In I23f18fc5f078da3331cad540bbaf533d348f2108 layout was pulled out
into a separate file and we changed the ordering of our CSS.

This was done with the thinking that media print queries would be
mixed with media screen.

After discussions with Volker, I have been convinced this was a
mistake.

media queries of the same type can be nested so the @media screen
is removed from layout.less and the media query in index.less will
be used instead.

Change-Id: I3aab00c9bcc734ea1ba5a9cf242c6e36ac1cc076
2020-04-28 14:37:54 +00:00
jenkins-bot 54739cf1ba Merge "Replace deprecated @colorFieldBorder variable and use others" 2020-04-28 01:58:40 +00:00
Volker E f5d55bcf54 Replace deprecated @colorFieldBorder variable and use others
Replacing deprecated `@colorFieldBorder` with WikimediaUI Base equivalent
`@border-base` shorthand.
Also replace `@borderRadius` with new base and static `background-color`
values.

Depends-On: I2e2277957b79b81909b80a6c0b7b2220be6ba903
Change-Id: I90bb0eb0c2206483f71f0553dfb590d9df2c5781
2020-04-28 01:42:09 +00:00
AronDemian c2e9a7b366 Add .mw-footer CSS class & replace #footer selector with it
Does not add `.mw-footer-*` CSS classes to `ul#footer-*` and
`li#footer-*-*` to save bandwidth.

NOTE:
- The former id selectors can be removed form the styles after the varnish cache
  is updated with the new DOM.
- The modern version still uses the legacy layout at this stage.

Bug: T248137
Change-Id: Ica9f8c43617c624648fa12dc86ebb3daa10f0409
2020-04-27 14:55:28 -07:00
jdlrobson 64f1f8d069 [Refactor] Move footer layout rules to layout.less
These layout rules should not be in Footer since they relate to
arrangement of components.

Change-Id: Id18c3a3969e09ec5512969e57c8019ad39627340
2020-04-16 16:52:24 -07:00
jdlrobson 703903daac [legacy] Split sidebar code and mark layout as legacy in preparation for new layout
Going into the new version of Vector, we'll want to rewrite the layout
rules entirely and decouple the sidebar from the logo.

To prepare for this we will move the layout file into a legacy folder.
We also separate Sidebar styles needed for the legacy mode from the old mode.

This will allow us to make changes to the header in new Vector without having to touch
or test the legacy codebase via a new file layout.less and using the existing sidebar
code.

Bug: T246170
Change-Id: Ieb4f8f2b2f0e4f48d76a210ab30acd08e3e83bcb
2020-04-16 11:29:03 -07:00
jdlrobson 4d91d52dfc Add a special class to identify the first portal
In new Vector, the logo will no longer be present, so we need a more
future proof way of determining what the first portal is.

A new class `portal-first` is added (no decision about adopting BEM
has been made yet).
Cached pages will continue to use the old selector for now.

Change-Id: I6ac4493bb1f63686b48ff0c22b18d50d9fffb51d
2020-04-15 23:39:33 +00:00
Volker E 2baa9291d8 Amend Base10 color and hover derivative
Amending Base10 to slightly darker `#202122` to fulfill WCAG
requirements in connection to Accent50.
Also sligthly adapting hover derivative to `#404244` and amending
corresponding opacity hover value.

Bug: T248393
Change-Id: Id72829d837d9e8d37bbec6092e5055f7c182db7a
2020-04-15 09:30:22 -07:00
jdlrobson 835862fffc Layout is separated from "common" CSS
This unblocks work on the header which will rewrite the layout
code.

This corresponds to a 0.06kb increase in CSS size, which is zero
after gzipping.

Bug: T249073
Change-Id: I23f18fc5f078da3331cad540bbaf533d348f2108
2020-04-14 15:17:43 -07:00
Stephen Niedzielski c9d5b2e4fb [dev] [JS] Move JavaScript to package modules
Move all Vector JavaScript to ResourceLoader `packageFiles`[0] which are
much more compatible with modern development practices:

- The entrypoint is the first `packageFiles` entry (unless specified
  otherwise). All other JavaScript must be explicitly executed.

- Remove a level of indentation due to IIFEs from every JavaScript file.
  Regretfully, ESLint does not support modules except in ES6+ so the
  otherwise useful `no-implicit-globals` rule must be disable. The
  change comes with a comment so we always remember.

- IDEs and other tooling understand Node.js-like `module.exports` /
  `require()`.

This change seemed the most sensible way to start developing new
JavaScript in Vector needed by the collapsible sidebar.

[0]: https://www.mediawiki.org/wiki/ResourceLoader/Package_modules

Change-Id: I287e604d5b1055aa97b5f987c24872755757ea1a
2020-04-10 09:39:25 -06:00
jenkins-bot 63d9d37777 Merge "Revert "Move indicators underneath #firstHeading in DOM"" 2020-04-08 13:56:49 +00:00
VolkerE 087808ece6 Revert "Move indicators underneath #firstHeading in DOM"
This reverts commit f400fc57c3.

Bug: T248761
Change-Id: I3a4f1202d5e1cca9f82d1735cc498049fa25613c
2020-04-08 13:43:10 +00:00
jenkins-bot 2670c08817 Merge "Move indicators underneath #firstHeading in DOM" 2020-04-07 01:23:05 +00:00
Volker E f400fc57c3 Move indicators underneath #firstHeading in DOM
Adding `margin-top` property only with sibling selector for now
until cache is cleared.
Also removing already inherited from
`.mw-body-content` properties `position`,
`font-size` and `line-height` of same value.

Bug: T248761
Change-Id: I1ea5e08927a96ac69c1b65f248ae0420968b4d00
2020-04-06 17:06:31 -07:00
jdlrobson e326517213 Add and use LESS variable for personal menu top offset
Going into the header work, we'll need this variable available so
that we can align the header with the personal tools menu.

Per Volker's request we change the value to `px` from `em`s.
Previously it was 5.28333px. It will now be 6px.

Bug: T246170
Change-Id: Ic1514e8592db8ef168fc846b8f8e485fdd465e49
2020-04-06 22:39:03 +00:00
Timo Tijhof 87a1d25079 watchstar: Remove PNG fallback for watchstar icon
Instead, for the subset of Grade C browsers without SVG support (currently
IE8), we remove the icon and display the label text instead –
in a hacky, but acceptable way.

Bug: T248062
Change-Id: I87660b69fe65b9ec2989ea606e5f76d427c28fee
2020-04-03 20:49:39 +01:00
Stephen Niedzielski b80ad85bb1 [dev] [Less] centralize z-indices
Move all the LESS `z-index` settings to variables.less so it's easy to
conceptualize how UI will be layered. jQuery CSS rules are untouched but
documented.

Also, remove the seemingly redundant re-setting of the `mw-searchButton`
`z-index`:

  #mw-searchButton
    z-index: 1;
  }

This rule was added in 0c77e4f.

The sidebar work will require `z-index` properties and this refactor
eases the comprehension of those changes, as well as prevents the
accrual of more `z-index` technical debt.

Bug: T246419
Change-Id: Ic112a0ee3f701f87432838797be45c6069fdb522
2020-04-02 15:05:22 -06:00
jenkins-bot caf0fa023f Merge "Drop the Navigation component" 2020-03-30 23:20:21 +00:00
jdlrobson 872519ab94 Drop the Navigation component
It is not the most useful of components and adds an additional layer
of complexity similar to multiple inheritance chains that we find in
Object oriented programming.

I suggest we use index.mustache going forward for laying out the different
components and use components/template partials for reusable components.

Change-Id: I6fd5fe1c3d3826d737ccd8ed5a38890305664876
2020-03-30 15:26:34 -07:00
jenkins-bot a8685e3f0e Merge "Use calc in font-size to harmonize IE 9-11" 2020-03-30 21:07:26 +00:00
Nicholas Ray b9dc654a4f Add end margin to opt-out link
This adds the same end margin as the portal container making the
opt-out-link more visually pleasing if it overflows its container.

Bug: T243281
Change-Id: I42eb3ec4a18ad9e4f6bcdb451593fec7e6e4992a
2020-03-27 10:15:30 -06:00
Volker E 24749a3595 Use calc in font-size to harmonize IE 9-11
IE 9-11 cuts values 2 digits after the decimal point leading
to small miscalculations throughout the interface derived from `.mw-body-content`'s `em` value.
With `calc` it's forced to use same parent value for its
rendering calculations.

Bug: T102364
Change-Id: Id4ba39bc90174bab445ae0fb4d039c28a4f0b300
2020-03-26 20:18:49 -07:00
jenkins-bot 70c2f70262 Merge "Use .transform-origin() mixin" 2020-03-27 00:51:22 +00:00
Nicholas Ray ec382a8c86 Add opt-out link to Sidebar for Vector/Logged-in Users Without Abstractions
This commit is singularly focused on adding a link to the sidebar for
Vector, logged-in users. It does the bare minimum to fulfill the
requirements of T243281.

Additionally, it will help to answer the question "Do we need to use
abstractions (other than maybe different templates) to separate Legacy
Vector from Vector" by intentionally leaving out any abstractions in
order to make it easier to compare with a follow-up patch
(Ib2ef15180df73360cc1de25b893e49d415d23e1a) which does use abstractions.

It is a good thing to question whether or not we need addtional
abstractions in VectorTemplate and if they will help us as unnecessary
abstractions can have the opposite effect and just lead to further
frustrations down the road.

Therefore, I urge you, the reviewer, to let me know your thoughts! If
abstractions are viewed as not making our lives any easier, the
follow-up patches may be completely discarded and that's totally okay
with me. :) I think it's a good think to talk about now though.

Important changes:

* The VectorTemplate constructor was changed to allow injecting the
config, templateParser, and isLegacy boolean (only the config was
allowed before this commit). According to MediaWiki's Stable Interface
Policy, "Constructor signatures are generally considered unstable unless
explicitly declared stable for calling" [3]. Given that VecorTemplate's
constructor is not marked as stable, it is justified to do this without
warning according to the policy.

* Due to the above, the 'setTemplate' method is no longer needed and was
marked as deprecated.

* VectorTemplateTest was made to adapt to the new VectorTemplate
constructor. Additionally, it now extends from
MediaWikiIntegrationTestCase which my intelliphense server can pick up.
I *think* MediaWikiTestCase is just an alias to
MediaWikiIntegrationTestCase [1] and MediaWikiTestCase file was renamed
to MediaWikiIntegrationTestCase in [2], but I'm willing to change it
back if there is pushback to this.

Open questions:

* What are VectorTemplate's responsibilities? To me, it acts right now
as a controller (because it echos the full HTML string from the
template), a model (because SkinTemplate::prepareQuickTemplate sets data
on it which it later retrieves through `$this->get()`), a presenter
(because it adds data tailored for a web-centric view), and a view
(because it renders HTML strings instead of letting the view/template be
solely responsible for that). Arguably, some business logic might be
mixed in there as well (because it checks to see if a User is logged
in/has necessary permissions to show x which my changes here add to).
This might not be a problem if we keep VectorTemplate relatively small,
but will it remain this way as we progress further in Desktop
Improvements?

* How do we write tests for VectorTemplate without exposing unnecessary
public methods? For example, if I want to test the `getSkinData()`
method to see what state will be sent to the template, how should I do
this? One option might be to use `TestingAccessWrapper` to expose these
private methods which is what
`VectorTemplateTest::testbuildViewsProps()` does. Another option is to
accept this method as public. Is there a better way? Keep in mind that
even with access to this method, there might be many things to mock.

[1] 0030cb525b/tests/common/TestsAutoLoader.php (L64)
[2] Ie717b0ecf4fcfd089d46248f14853c80b7ef4a76
[3] https://www.mediawiki.org/wiki/Stable_interface_policy

Bug: T243281
Change-Id: I0571b041bcd7f19bec9f103fa7bccdd093f6394d
2020-03-26 17:39:47 -06:00
Volker E d9d9fdc522 Use .transform-origin() mixin
Adding support for older Firefox and IE 9.

Change-Id: I9b9e1f4923707676a751ae58edd6b11d1182c01d
2020-03-26 15:50:05 -07:00
Stephen Niedzielski bd7bd75569 [JavaScript] Validate types
Lift the mists of confusion by checking that all JavaScript types align.
No ignores! This is the JavaScript equivalent to Phan.

This patch adds the necessary infrastructure for verifying typing and
fixes the few flaws found.

Bug: T239262
Change-Id: I2557471421196ea46cd13dfb786a52968fbfcc97
2020-03-16 09:10:08 -06:00
jenkins-bot cad658603e Merge "[fix] [LESS] Move print style variables to query" 2020-03-13 18:07:25 +00:00
jdlrobson 9a3a3d3c96 Ship different ResourceLoader module for different versions
To have a clean break for upcoming changes we will duplicate
index.less into legacy.less and create a new module to clearly
separate new styles from old.

The preferred name however does come with some caching challenges.
Cached HTML served to anons will continue to load the style module
`skins.vector.styles` for a period of 1-4 weeks

Provided we are careful with our changes during this period this
should be okay.

Change-Id: If32b59036e5cd62cbb804944ca93fa1a101c5129
2020-03-12 13:36:52 -07:00
jdlrobson aecd83e528 [Refactor] Move HD styles into separate importable LESS file
Change-Id: Ie596a7906b0e876fc00c1b821c23ceb9d13147e2
2020-03-12 12:52:44 -07:00
Stephen Niedzielski 46276cd9dd [fix] [LESS] Move print style variables to query
Move print LESS variables within the print media query. When these
styles were collapsed into an index.less import via ac069fb, they lost
their outer print media query which caused them to override screen
styles.

Bug: T247537
Change-Id: I45502facd27f4a7a6c33436da2f1870bbd91a4ff
2020-03-12 10:49:44 -06:00
jenkins-bot f1cad1b040 Merge "[dev] Consolidate ResourceLoader LESS style files" 2020-03-11 11:51:02 +00:00
AronDemian ea22d059f2 Fix iOS Safari searchbox appearance
Sets
* `-webkit-appearance: none;` for iOS and
* `-moz-appearance: textfield;` for Firefox that also applies 
  `-webkit-appearance`.

Bug: T247299
Change-Id: Iefc77bba54b85442862176e1875974f19b64193b
2020-03-10 22:16:28 +00:00
Stephen Niedzielski ac069fbec1 [dev] Consolidate ResourceLoader LESS style files
Move styles.less to index.less and import print.less from it. This keeps
the reasoning about styles constrained to LESS instead of spread out
over LESS _and_ ResourceLoader. The former is preferable since LESS is
more standardized than ResourceLoader.

The approach of moving styles.less to index.less and then referencing
print.less was chosen with the intent that it'd be easier to assume
styles are screen styles unless a media query says otherwise.

This patch also makes the variables import common among print and screen
styles.

Bug: T246419
Change-Id: I981d0937aaacb7cba082c337f98c90e90b46b340
2020-03-10 15:29:15 -06:00
Stephen Niedzielski 713d0ac2fd [dev] Favor LESS media queries to ResourceLoader
Prior to this patch, Vector used a mixture of LESS media queries and
ResourceLoader (RL) media queries[0]. So far as I can tell[1], the
latter only instructs RL to wrap the contents of a LESS file within a
query (there are no conditionals placed on style loading). Further,
according to a coauthor of RL (Roan), RL media query support was most
likely a replacement for `@media foo { @import foo.css }` to inline
print styles from a separate style sheet which Vector itself does not
use. The LESS solution is much more intuitive since it's not MediaWiki-
specific and only the LESS code needs to be considered instead of LESS
_and_ the RL configuration in skin.json.

This patch moves both screen media queries to screen.less for the
aforementioned consistency and to avoid nesting queries. It is hoped
that these changes will help make future work easier, such as those to
margin likely to take place in making the sidebar collapsible.

[0]: https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoader#Media_queries
[1]: http://localhost:8181/w/load.php?debug=true&lang=en&modules=skins.vector.styles&only=styles&skin=vector

Bug: T246419
Change-Id: Ic0adfa254f3e81dfa87a26899f3aa585645956f1
2020-03-10 13:13:42 -06:00
Nicholas Ray 892eb489e6 Move watchstar import out of VectorTabs.less and into screen.less
* VectorTabs.stories.js and Navigation.stories.js were updated to
reflect this change.

Bug: T243281
Change-Id: I96a3b9b2c9a8d799a5835de1f296bc1a779803ee
2020-03-10 10:04:46 -06:00
AronDemian 6ebd95832d Re-crush SVG files with unified SVGO rules
Bug: T178867
Change-Id: Ia8b2db651d2c8fd5fd949dcd07e45beed82f33a4
2020-03-08 04:12:50 +00:00
Nicholas Ray 9823538683 Isolate Vector Styles to their Respective Component
This will help with the encapsulation/reusability of each component.

* Stylesheets were renamed to reflect their respective component name
(e.g. search.less became SearchBox.less)

* Styles were isolated to each component:

* navigation.less now only contains classes that are relevant to
Navigation.mustache.
  * personalNavigation.less, search.less, and tabs.less
    imports were removed and made first-class styles.
  * several selectors were moved into common.less
  * #p-logo was moved into sidebar

* tabs.less was renamed to VectorTabs.less and styles specific to
VectorMenu.less were put into VectorMenu.less

* Storybook was updated to reflect changes

Bug: T243281
Change-Id: Idf90ee2a0f1c1d08a31cf50099c0bebc7b67e619
2020-03-03 18:20:19 +00:00
Volker E bedb0ea8f4 Remove Webkit search cancel button for cross-browser consistency
Use same code as in MinervaNeue. For unknown reason, Chrome
decides in 2020 to suddenly show search cancel button.

Change-Id: I5c813a2ea68929c05f5d061d46c027934853dbf8
2020-02-18 22:30:19 -08:00
Nicholas Ray a79bb8dff4 build: Replace JSDuck with JSDoc
* jsdoc.json was copied from Minerva. The markdown plugin from that
config was removed since there no usages of that in Vector.

* Added latest jsdoc dependency to package.json

* Copied 'jsdoc' task from Minerva into Vector. Revised storybook output
so that multiple docs (storybook + jsdoc) could be in /docs

* Made collapsibleTabs.js JSDoc compliant (This was really the only
thing using jsduck syntax)

* Modified Gruntfile stylelinter to ignore docs folder

Bug: T239258
Change-Id: Id07d591ffe7bf0ac021109051e89b91ffdcf4c78
2020-02-14 10:29:00 -07:00
jdlrobson 2dbe4d7af1 Drop usage of mediawiki.skinning.interface module in favor of SkinModule
Thanks to the dependent change, the print logo is now provided
in core so we can remove the custom Vector ResourceLoader module

ResourceLoaderLessModule is replaced with a ResourceLoaderSkinModule
and gains the features capability replacing the need for
'mediawiki.skinning.interface' making use of the changes added in
6845912bcf1.

Note that for cached HTML both 'mediawiki.skinning.interface'
and skins.vector.styles will be loaded. We can avoid this
by renaming skins.vector.styles if necessary (but I'm not
sure if we'd want to do that)

Bug: T232140
Depends-On: I00899c16c0325f36b671baf17e88c2b5187b3526
Change-Id: I569e0d800e147eabc7852567acd140108613f074
2020-02-05 10:02:47 +08:00
jdlrobson ea2bcd44f2 Add storybook to Vector
- Update package.json with the new dependencies.
- A script storybook.sh pulls down CSS and LESS imports from external
dependencies. This copies the approach taken in Popups and MobileFrontend.
- Icons from external repos are maintained within the repo in SVG-only form.
Using load.php modules is also possible, but will pull down other unnecessary icons
and break if any of these modules are changed. Decided that we should manually maintain
these for the time being given there are only 3 icons.
- Several LESS files now import the variables file. I think it's useful for stories
to only import the CSS they use as this encourages us to modularise our CSS. Before these
imports were not necessary as they inherit imports from index.less. This will have no impact
on the bundle size as the LESS compiler silently discards duplicate imports
- stories/utils.js provides a useful placeholder function for generalising our hook entry
points.

Bug: T242674
Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
2020-01-31 16:59:15 +08:00
jdlrobson 58457f8ae8 Dev: Vector is rearranged like other skins and extensions
A resources folder is the defacto-standard across mediawiki repos.
Vector now mirrors those by describing where files served by ResourceLoader
are located.

Change-Id: Ib7d8575112e8afaaa84221a6f30a15b34b51eb24
2020-01-28 16:57:38 +08:00