Commit Graph

180 Commits

Author SHA1 Message Date
jdlrobson 7a16ae249e Rename template variables to mirror SkinMustache
The renames made in this patch mirror the upstream change in
I3f7b2e5f07d03ac04ecdcba585194d619abe35e0 in preparation for adopting
the SkinMustache class.

Renames:
* 'data-indicators => 'array-indicators'
* 'html-bodycontent' => 'html-body-content'
* 'html-undelete' => 'html-undelete-link'
* 'html-sitenotice' => 'html-site-notice'
* 'html-catlinks' =>  'html-categories'
* 'html-dataaftercontent' => 'html-after-content'
* 'html-userlangattributes' => 'html-user-language-attributes'

Adjustments
* 'html-debuglog' is moved into html-printtail for consistency with
SkinMustache in core
* html-printfooter is now a part of html-bodycontent for consistency with
SkinMustache in core
Note: the activity of removing html-printtail and html-headelement from
the templates will be done when we adopt SkinMustache.

Bug: T257630
Depends-On: Ibac9729eaa96a38bc730a0132b102a894f6a172d
Change-Id: Ie92bda7846767c3cc9a1937c96a7fc08415b1bae
2020-07-13 21:57:40 +00:00
jdlrobson c405ffb155 Cleanup: Template variables
- Remove unused html-prebodyhtml template variable
- Don't use html- prefixed variables as if statements - this is
not supported by Mustache. (set to '' to confirm)

Change-Id: I0c860b4b2277e1796afa3e482cf61e95ef4fb342
2020-07-13 14:10:14 -07:00
Nicholas Ray 092a2957af Implement Page, Workspace, Content, and Article Toolbar Containers
This patch closely follows the desired guidelines/desired
styles Alex Hollender has put forth in his prototype, but uses
multiple containers to achieve this look since our DOM order/structure
is different than the DOM structure in the prototype. The following
containers are used, but unlike his prototype, they are sometimes used
more than once:

* Page Container: Contains every other container and limits the overall
max-width of the white part of the page.

* Workspace Container: Contains the sidebar and content container. The
sidebar is displaced ~30 pixels to the start (left) of the workspace
container at all times.

* Content Container: Contains the content. The max-width of this changes
depending on whether you are on a special page/history page vs. other
pages.

* Article Toolbar Container: Contains the article toolbar. The max-width
of this is always the same as the max-width of the article content as we
don't want the toolbar to move when going from the article page to the
history/special page.

Changes to be aware:

* To test locally, `$wgVectorLayoutMaxWidth = true;`. This design is
temporarily feature flagged and defaults to being "off".

* Note that layout-max-width.less is a temporary file made to meet the
feature flag requirement of T246420 (intended to derisk the deployment).
After the deploy, we should merge most if not all of the rules into
layout.less where the max-width design will become the default.

* Per Jon's code review comment, I have relaxed the indenting of
skin.mustache to make the diff easier to reason about. If desired, the
correct indenting can be achieved in a (much less risky) follow-up
commit.

Bug: T246420
Bug: T153043
Change-Id: Ie49f629bc705850c6996164a516957476c034048
2020-07-07 18:34:38 -06:00
Volker E a9b35fa2e4 Use core `.mixin-clearfix()` instead of DOM element
Removing  presentational `<div class="visualClear"></div>` in process.
Only leaving in for legacy/layout.less and adding comment for future
evaluation if clearfix is continuously needed. In modern we've
got all parts of Vector in our awareness without featuring `float`s.

Bug: T254195
Depends-On: Iddf8f1dffc2d30299b89b3f4966b7fe8ee63090b
Change-Id: I673c28c2d7da4f96c31121d9aec6558e390de24e
2020-07-01 11:20:26 -07:00
jenkins-bot 9aee83fbb8 Merge "[refactor] Drop form-id template property" 2020-06-26 11:50:32 +00:00
Nicholas Ray bfc95effdb Move sidebar into header to improve tab order
* Moves the sidebar into the header so that user can tab directly from
the sidebar button into the sidebar (when open).

* Because the sidebar is absolutely positioned inside the header and the
header applies a top-margin, we need to adjust the top position
calculation for the sidebar.

* Removes the checkbox from the accessibility tree through CSS `display:
none;` instead of HTML attributes.

* Given that the checkbox is not able to receive focus, the
`#mw-sidebar-checkbox:focus ~ .mw-header .mw-checkbox-hack-button` CSS
rule is obsolete and moved instead to the label button. An additional
outline: 0 rule was added to remove the dotted outline that Firefox
applies.

* Makes the "Skip to navigation" jump link point to the sidebar now.
After the sidebar has been tabbed through, the rest of the navigation
can be tabbed to.

Bug: T246420
Change-Id: I981da3650854568bb9cfbf3c6c59e7625e7d094c
2020-06-25 16:55:34 -06:00
jenkins-bot 7c6d6372c7 Merge "Put ARIA roles and attributes into context" 2020-06-25 19:20:34 +00:00
jdlrobson 87f08dcf5b [refactor] Drop form-id template property
In preparation for using the SkinMustache class and
core buildSearchProps method [1],
and to reduce the risk of that change,
move the ID from the template
data to the template itself:

[1] https://github.com/wikimedia/mediawiki/blob/master/includes/skins/SkinMustache.php#L93

Change-Id: I8d62ea6b1adf6ef0cbfa20e1876806eba70b169f
2020-06-25 18:21:38 +00:00
Volker E e9a48021c2 Put ARIA roles and attributes into context
Hide checkbox from AT by adding `aria-hidden="true" to checkbox
and disable tabbing in via tabindex="-1". Both attributes are temporarily
added and might be removed when the checkbox receives `display: none` in
upcoming patch.

Add
- `role="button"`,
- `aria-controls` and
- `tabindex="0"
to button turned label for ATs via `role` definition, make it focusable
and use `aria-controls` for connection to sidebar id.

Bug: T254851
Change-Id: Ife287fc8c6e0d2aee5facf42d5d4308dea918ee3
2020-06-25 11:13:58 -07:00
Volker E 16abb4ff84 Remove unused `mw-checkbox-hack-target` class
Even if we were to use it, we might sign up for side-effects when
more than one checkbox hack is used per view.

Change-Id: Ic31e48a4bf3e39e903300acd522b7af0391fafa9
2020-06-24 17:31:11 -07:00
AronDemian 0e5cd53163 Make search jumplink's target the search input instead of the container
The exact search input element as target focus the searchbox. It saves 
AT users a user action, while still remaining read out due to connected 
label in screen readers.

Change-Id: I83003fbbb5b6903038d1ca8b323302cb8f52e841
2020-06-24 20:45:25 +00:00
AronDemian 2ccc975f0a [modern] Move sidebar checkbox above content, sidebar button into header
- Sidebar's checkbox hack CSS selectors adjusted.

Bug: T246420
Change-Id: I1cc1ad4eb1938c4931b1ae881b3878fbd6bb7a39
2020-06-23 07:09:38 +02:00
jdlrobson 823c3f0bb9 Separate languages portal from other portals in sidebar
In preparation for moving the languages out of the sidebar (T256023)
and to facilitate experimentation in the Universal Language Selector
extension, we should separate the data from the languages portal
from other portals.

Note the languages portal has traditionally appeared at the bottom
of the sidebar, so this can be done safely in the same way we
introduced data-portals-first

Change-Id: I4be06278ec256cc55aee36c2946339fb49d21b46
2020-06-22 15:28:02 -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
jdlrobson a6dd9b25c5 Model indicators as their own template rather than a block of HTML
This reverts commit be3843e2a3 and
makes a few corrections.

Bug: T251212
Change-Id: Icb17f94e7fa4a70b0a0ea0b9cb9a12f2e727946f
2020-06-09 14:30:08 -07:00
Volker E 4466eb3a2f Use semantic HTML5 elements where applicable
`[role]`s are retained for now as they are harmless although
redundant when added to HTML5 elements.
`role="contentinfo"` on `footer` is a special case to address
a known VoiceOver bug.

Bug: T66477
Change-Id: I540d9a41fc7fd580c5d61b90480e8745ae145850
2020-06-09 17:43:45 +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
jdlrobson e84809c44b Cleanup: Standardise msg keys
Keys prefixed with msg- should relate to i18n keys. Fix the existing
template variables where that's not the case.

Change-Id: I33587a09a9803a3667eaeea95ce3e1753439f413
2020-06-01 21:05:56 +00:00
jdlrobson df2895f610 Cleanup: Use consistent naming in SearchBox
We have conventions about template variable naming.

* Drop camel case
* Prefix message keys with `msg-` followed by message key name
* Prefix HTML with `html-`

Change-Id: I34f04f3d217dc8caa4dcc29e60058951a6555b1e
2020-06-01 20:11:14 +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
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
Volker E eabfe6d16e Make class attribute optional when empty
Change-Id: I5a9d81f650dfa4178e7b1e4e835ef5efb5acacf0
2020-05-17 17:37:57 -07: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
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
Volker E 9581bdaa09 Revert "Use semantic HTML5 elements where applicable"
This reverts commit 125af06692.

Change-Id: I21fa5460017235c43f6ccf0ce815364d50bf1e34
2020-05-12 00:05:30 +00:00
jdlrobson ace1ffaba1 Minor: Remove unused Portal.mustache
Should have been removed in
I2549af3e24e5d51c09e9a88ca50a0d9b2e154c3f

Presumably got readded while addressing a rebase conflict

Bug: T249372
Change-Id: Iaff98d8b4770e82277463f39800dd7571e1ed50b
2020-05-08 10:05:18 -07: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
Volker E 125af06692 Use semantic HTML5 elements where applicable
Also remove superflous `role` attributes in modern Vector. Only leaving
`role="contentinfo"` on `footer` to address a known VoiceOver bug.
And leaving `role="main"` in legacy Vector due to possible old
Internet Explorer and screenreader combinations, which we can
test specifically for with this separation.

Bug: T66477
Bug: T252090
Change-Id: I422ef2a4cf7aa94e5cac4d95efb4b2d2c8c6617d
2020-05-07 14:45:35 -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
Nicholas Ray 91c25bc253 Add title attribute to opt-out link
The opt-out link was missing a tooltip which is important for
accessibility and to help people gain more context as to what it does.

Bug: T250093
Change-Id: Ie6cbaf5c941615d1662700415b8f1823987a563d
2020-05-05 09:52:20 -06: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
jenkins-bot 1a62d2d264 Merge "[cleanup] Drop empty `class` attribute from `#footer > ul` elements" 2020-04-28 18:41:40 +00: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
AronDemian 487eda02f4 [cleanup] Drop empty `class` attribute from `#footer > ul` elements
Change-Id: Ice0241b054cbc296e9f0adf1d2920023316c8ca0
2020-04-28 02:05:30 +00:00
jenkins-bot b2dee16b63 Merge "Add `.mw-footer` CSS class & replace `#footer` selector with it" 2020-04-27 22:49:47 +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 0b8693ccec Refactor: Make VectorTabs template data conform with MenuDefinition
menu-id -> id
menu-label-id -> label-id
msg-label -> label
empty-portlet -> class

Bug: T249372
Change-Id: I15fd88269b3d111ff47e64f3669575afaeea9f97
2020-04-22 05:18:44 +00:00
jdlrobson 286b07b20a Refactor: Make VectorMenu template data conform with MenuDefinition
menu-id -> id
menu-label-id -> label-id
msg-label -> label
empty-portlet -> class

Bug: T249372
Change-Id: I50bf2424f9077ac987e03a1e552577bf7c48b3bb
2020-04-22 05:18:29 +00: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
jdlrobson 63ee9450b7 Refactor: Standardize menu data (DRY!)
VectorTemplate has various functions that repeat themselves, only
differing in their choice of names.

This refactor begins by focusing on the personal menu and introducing
a generic getMenuData function. Hardcoded `p-personal` is replaced with
an `id` template key and `msg-label` is renamed `label`.

Future patches will simplify VectorTemplate by using this new
function.

You'll note the resulting PersonalMenu.mustache file is identical
to VectorTabs. These will be merged in I098e6921e8f7ef65dacacf09b9c25f70c945e58e

Bug: T249372
Change-Id: I5ae44a1008b065381eeff93f9fa625be5c5a9de9
2020-04-13 16:11:40 -07:00
Stephen Niedzielski 16670834d7 [dev] [Mustache] replace spaces with tabs
The Mustache templates were a bit of a mix of tabs and spaces. I like
spaces personally but dislike inconsistency within the project more. Use
tabs.

Change-Id: I22b777489d7281b42d1ab1981b47b2a71d3b639a
2020-04-08 15:40:56 -06: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
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 c8001f91b1 Split legacy and modern experience on template level
The new template 'index.mustache' drops the Navigation
template partial (component) - instead embedding it in
the master template given its lack of usability.

Note to reviewer: Please ensure index.mustache and
legacy.mustache are identical.

Change-Id: I580fe55ca6aeb35dae8afee41e87172a5a729c7b
2020-03-31 14:35:00 -07: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
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
Nicholas Ray 9964e56156 Mustache Documentation: Cleanup/Clarify Mustache template params
* Content.mustache doc param order was modified to follow the html structure
order (with html-dataAfterContent at bottom ). `html-userlangattributes`
was added to param documention since it was absent.

* Footer.mustache doc param order was modified to follow the html structure
order (with `html-userlangattributes` placed after `html-vector-before-footer`)

* Navigation.mustache was modified to remove `html-sidebar`,
`html-navigation-left-tabs` and `html-navigation-right-tabs` params from
doc since those are absent from Navigation.mustache.

* `data-namespace-tabs`, `data-variants`, `data-page-actions`,
`data-page-actions-more`, `data-search-box`, `data-sidebar` params were
added in Navigation.mustache documentation since those are present.

Bug: T243281
Change-Id: I321f8d61ad0305f508521e8d4d805e846103b357
2020-03-18 14:47:31 -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
jdlrobson 59747a58c8 Separate first portal in sidebar from rest
This allows us to insert HTML underneath the first portal or wrap
the portal in a containing element in future if we want to target
additional CSS to it

Change-Id: Ied28d95407b8d59fc819bb07a2cce3242bd93088
2020-03-11 23:34:11 +00:00
jdlrobson cdd5ebd74d Use template partials rather than HTML strings
CHANGES to  index.mustache:
Changes can be understood by looking at the diff of
the file stories/skin.stories.js

The additional changes in stories folder export the data passed to
those templates. A new file is used as exporting any variable in a
file suffixed stories.js will be assumed to be a story entry.

The changes to index.mustache are as follows:
* html-footer is replaced with data-footer and Footer
component is rendered via template partial
* html-navigation is replaced with data-navigation and
Navigation component is rendered via template partial

CHANGES to Navigation.mustache:
Changes are best explained by looking at the diff to
stories/navigation.stories.js
and navigation.stories.data.js
* html-personal-menu is replaced with data-personal-menu

Bug: T245456
Change-Id: Ie96e92447a932b8a7f3844df277a1d31a2af423c
2020-03-03 09:28:52 -08:00
jdlrobson 698752e38a [Dev] processTemplate used in one place
Moving all the templateParser calls to one function
so its easier to see how the template is composed.

The diff of changes to the stories folder highlight
the internal changes which are:

* html-portals replaced with html-sidebar in main template
* new Sidebar template added which outputs to html-sidebar
* Mention of "MainMenu" replaced with better understood "Sidebar"

This is precursory work to adopt templatePartials

Change-Id: I6b2196e39087f818e774d04b2d1b9ab8cb8816a1
2020-02-26 12:28:40 -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 12e2287894 Simplify logo generation
Use a template variable only for html attributes of the logo
Move static HTML into Navigation.mustache

Change-Id: If37015b9ce4f37e264b6f25956e4d0ca35e8cdff
2020-01-30 02:11:05 +00:00
jdlrobson 0cdf0c238a Dev: Complete initial porting of Vector to Mustache
Bug: T240062
Change-Id: I18cb1fda6850646a38314a7d2dd356103f04ec28
2020-01-29 13:21:34 +00:00
jdlrobson 80b5ccc634 Dev: Break Footer out into template
Add a new Footer template for modelling the footer of
Vector.

Bug: T240062
Change-Id: I60a243abeb5650542ca6f6fac8401a622faaabac
2020-01-17 13:10:37 -08:00
jdlrobson 9f82f58ea9 Dev: Include closed body and html tags in getTrail
This will allow us to render in Storybook without having issues
with unclosed tags. it also mirrors how html-headelement works
(obscuring the opening of the body and html tags)

Bug: T240062
Bug: T242674
Change-Id: I216a920c68bf3da9de55a75fc53451c68c9cc753
2020-01-17 19:16:32 +00:00
Jan Drewniak 361e0d6f71 Extract Portal mustache component from VectorTemplate.php
A Portal (or portlet) in the Vector context is a section of the
sidebar menu (e.g. Tools, Languges etc.).

The hook that places content between the portals (or portlets?)
such as `SkinTemplateToolboxEnd` and `otherlanguages` has been
enclosed inside of an output buffer so that any content it
produces can be passed to a template.

Bug: T239248, T240062
Change-Id: I882db161e5462cf88aa48c9cfd91448eb97a4a77
2020-01-14 22:44:58 +01:00
Jan Drewniak 093cc20ee0 Extract VectorMenu.mustache component from VectorTemplate
Extracts a new VectorMenu mustache component from VectorTemplate.
VectorMenu is the "more" menu that appears at small widths instead of the
Read/Edit/View History menu near the top of the Vector skin.

Bug: T239248, T240062
Change-Id: I41b1ec949d81303abddadb981741445572c939e3
2020-01-14 10:38:46 -08:00
Jan Drewniak 4f471bfa5e Extract PersonalMenu,mustache component from VectorTemplate
PersonalMenu is the login/logout notifications etc. menu at the very
top of the Vector skin.

Bug: T239248, T240062
Change-Id: Iae224cbd838e44669a9f27e6dd303c6c3b402d41
2020-01-09 16:01:46 +01:00
Stephen Niedzielski 9d427dcb30 [Hygiene] [Mustache] rename SearchComponent to SearchBox
For consistency with VectorTabs, rename SearchComponent to only imply
component. At least two word names seems like a good target (instead of
just "Search") for grepability and standard component style conventions.

Bug: T239248
Change-Id: I1e4f7270ba29c2f35f08e92f8a28cd8a2ec8fe87
2019-12-06 17:00:42 -07:00
Stephen Niedzielski 60148a1a92 [Hygiene] [Mustache] improve template parameters and docs
Add typing expectations to search box template parameters. Add context
expectations to search box and tabs templates.

Bug: T239248
Change-Id: I4ff1920f5489b68ef73a219ceeceb1f5511fc9e8
2019-12-06 17:00:42 -07:00
jenkins-bot 11ad91633f Merge "Move namespace & view tabs into a VectorTabs.mustache component" 2019-12-04 15:44:38 +00:00
Jan Drewniak c12c5f06db Move namespace & view tabs into a VectorTabs.mustache component
Creates a new VectorTabs.mustache component and uses it to render
the namespace & view tabs.

Bug: T239248
Change-Id: I859e4e95a2a12470f66564db547679c9f0a16727
2019-12-04 15:51:02 +01:00
Stephen Niedzielski 71672d60b3 Fix: search header attribute escaping
Broken in my previous commit, d6f4aaa. This causes attributes to be
doubly escaped. For example,
http://localhost:8181/wiki/Main_Page?uselang=he.

Change-Id: I9776a3c355081dc5fec7753edf256f55dfe6045b
2019-12-03 16:05:56 -07:00
Stephen Niedzielski d6f4aaa88e Hygiene: extract VectorTemplate inline HTML to SearchComponent Mustache file
Extract SearchComponent.mustache from VectorTemplate. The "search"
message is now escaped by the template parser. As is, htmlspecialchars()
for "wgScript".

A later patch will change each component renderer function as well as
renderNavigation() to return a string.

Change-Id: I3084b7e0ef73d320c85ee780c9eff13ecea92906
2019-11-20 16:41:05 -05:00
Isarra 411a015ec5 Move DataAfterContent outside of main content block
Bug: T226199
Change-Id: Ie04d8d2bb1d44ec8a1c03fcc6f807668bab0377c
2019-06-20 17:55:55 +00:00
Timo Tijhof d56792addb Fix <h1> to be present even if title is "0"
Regression from 74b9803d9a, caused by a bug in LightNCandy which
caused {{foo}} to render "0", and {{#foo}} to pass as true with "0", but then
in {{#foo}}<b>{{foo}}</b>{{/foo} render as empty string producing "<b></b>".
In other words, the conditional is passing and the inner block is executed,
but the placeholder is mistakenly converting "0" => null => "" (empty string),
causing the <h1> to render but without any text in it.

Work around this bug by simply removing the conditional. Several other skins
already don't have this conditional and it's unclear why or in what
situation MediaWiki would send OutputPage to SkinTemplate without a title.

I think it would make sense in such rare case to still have a consistent
layout for extensions and gadgets to interact with and not omit the H1
element, but render it with the value that OutputPage gave it, even if it
is the empty string.

Bug: T219864
Change-Id: I6e04b512d2fe2e949ff5385cb38ceebe392fb255
2019-04-02 19:47:38 +01:00
Michael Große 3669843c9f Fix invalid lang attribute on first heading
Bug: T219359
Change-Id: I0d6e036b65da024278fb492c6dfe44c79efb1e98
2019-03-28 11:54:40 +01:00
Jdlrobson 74b9803d9a Start extracting rendering from PHP into Mustache
This reverts commit 8d0377d926
now a conversation has happened.

Bug: T217172
Change-Id: Id51bbd4358bdcc1131c11e13d5548e9c0474e711
2019-03-05 13:22:24 +00:00
Isarra 8d0377d926 Revert "Start extracting rendering from PHP into Mustache"
This reverts commit a3ca2c3e16.

Reason for revert: This requires wider discussion before moving
forward, and a more complete implementation even once we do have
consensus.

No associated task exists on which to view or continue this
discussion: linked task briefly mentions Mustache in general as an
option as part of a much wider topic, but doesn't concern this
specifically.

Issues that should be discussed include:
* What the intent even is here: is this for one skin only? Is this
  the intended path forward for all of them? Depending on which, we
  have other issues: for the former case, that it is quite
  unhelpful in terms of maintenance and further development having
  more random code diversity out there, especially in this
  half-completed state; or if it is indeed intended for all of them,
  that an RfC is needed before anything is merged, as that is a very
  significant change.
* That using Mustache in MediaWiki does add (usually minor)
  performance overhead; we need to clearly establish in the task that
  this is indeed worth it here.

Change-Id: I0bafa55b554aa8a38553e20c75859ec5eec2c062
2019-01-28 16:49:48 +00:00
Timo Tijhof d306e07824 template: Avoid raw HTML parameter for jump link labels
Change-Id: I6c638118988b6fbea95697817edf8c59c0ef6a6b
2019-01-22 21:13:05 -08:00
Timo Tijhof a3ca2c3e16 Start extracting rendering from PHP into Mustache
Bug: T140664
Change-Id: I249fead8e1c7bc5dc295457bd46b05e7ed389414
2019-01-22 21:13:05 -08:00