Clicking on any talk page section should now open it regardless of the
characters in it. This includes ascii and non-ascii characters.
There are two changes done here:
1) When a user clicks on a section, `window.location.hash` is set to the
percent encoded version of the associated id attribute of the section.
This is important because, unfortunately, different browsers can encode
characters that do not conform to RFC 3986 (illegal URI characters) [1]
differently when calling `window.location.hash` again [2] (e.g. chrome
encodes `>` as '%3E' while safari leaves it as '>').
2) Register the encoded version with OverlayManager. OverlayManager will
simply do a strict string equality check when checking if the current
path matches. Because the browser will navigate to the percent encoded
version in step one and this version does not contain any illegal URI
characters, `window.location.hash` should give back the same percent
encoded string and the paths will match across browsers.
**Why not put this logic in OverlayManager?**
Alternatively, we could make OverlayManager decode the current route's
hash fragment and make it compare that with the unencoded version of the
id similar to the work in
I9cdaf3b01c2e5fe25512b6c18dcf6787c4422abd. However, ids with the '%'
character would then pose problems (e.g. `decodeURIComponent('100%')`
throws an error). This would require extra logic in OverlayManager to
differentiate client supplied '%' characters from browser encoded ones.
Making OverlayManager responsible for normalizing hash fragments will
make it more complicated than it already is. However, making the client
only register routes in OverlayManager that conform to RFC3986 from the
start avoids all of this logic at the expense of making the client make
one call to encodeURIComponent (if necessary).
If this patch is agreed upon, then the next step would be to change the
jsdoc `add` method in OverlayManager to be explicit that it will only
work with URIs that conform to RFC3986 and the client should percent
encode if necessary before registering.
[1] https://tools.ietf.org/html/rfc3986
[2] https://bugs.webkit.org/show_bug.cgi?id=180396 (Thanks to TheDJ for
pointing this out)
Bug: T238364
Change-Id: Idc2cfac51c40f585c5d43713d8edf848b10424fd
MobileFrontend's Drawer component already adds a mask that covers
the whole screen intercepting any clicks to the `body` tag and as a
result handles hiding the drawer when clicked.
Therefore, this code is redundant.
Change-Id: I7cb9ee240400e5bb0f7ca8480cd5321210ed1d7d
The Drawer API was changed in Ib123efe6af1b167706a73c71c860c85e7f439cc5
to have clients in charge of appending drawers to the DOM.
To reflect and make AMC outreach drawer work with these changes, the
amcOutreach.js code in MF was refactored in
I8aa3f2c1fe1f638810a20a5e77eb5f2e2f6addd1 to make the showIfEligible
method return the drawer instead of calling show on it.
This work refactors Minerva to make use of both of these changes.
Additional changes:
* Removes amcOutreach click handler for talk button. Talk button is a
tab everywhere except main page (I think) now so this code is just
confusing.
Bug: T242491
Depends-On: I8aa3f2c1fe1f638810a20a5e77eb5f2e2f6addd1
Change-Id: I01afe765cbcb5e79e419a3e42b3125f513e1f87e
This class is used for the main menu exclusively. Applying it
will reveal 2 transparent shields on top of each other when is
not desired
Bug: T214049
Change-Id: I8ddcc7082c3c602a78084157c2d613366a8016c7
Per T234570, browser support for animations is solid now so we no longer
need to check for browser support.
However, due to some browsers firing css transitions on page load (see
https://bugs.chromium.org/p/chromium/issues/detail?id=332189), we still
need JS to add this wrapping class after CSS transitions are loaded to
prevent the transitions firing on page load for some components
(DropDownList and MainMenu). See MainMenu.less or DropDownList.less for
an example of how this is used.
MobileFrontend adds an animations class too rn, but that will be removed
in in I58f754740f7146f09c38220a7614285e57684924.
Bug: T234570
Change-Id: If0cf7113b40f7217a22b66a8669138466af2cf5d
These styles are unnecessary because the visited/active color
is inherited from the styles on the `a` element.
Also causes an issue when clicking on the logout link.
Bug: T240644
Change-Id: I908121043487bb01c55e76b3e366aa3d4c624ce7
Now that ToggleList is loaded in skins.minerva.mainMenu.styles
which is loaded for all users, we should not load it again in
skins.minerva.amc.styles
Change-Id: I6d33a83f20a20956427f261f1900f3cfd8e0153b
This CSS became dead when openNavigationDrawer was removed
in If4831fc700c7df3a2a389b5f95b6fbaea4b7d954
Bug: T225213
Change-Id: I67b5d9bc596be3cff93f3da96fa04c417f741a66
minerva.variables.less: added gray color variable
MainMenu.less: added shadow to navigation
NotificationOverlay.less: changed alpha color of shadow
drawers.less: replaced rgba color with the same color variable
Bug: T231205
Change-Id: Ib1e16804b941a8f3b0cc639673baf73dc749a60a
The div tag was replaced with section tag in
Id032df3a420d577e42572ab128ca89a006b67ffe. This commit updates the css
to reflect that on simplified talk pages.
Change-Id: I94641eac33d30133d69fff561fe20de606076024
Now the main menu is not using JavaScript we can simplify
the menu code to apply only to the Echo navigation drawer.
Bug: T225213
Change-Id: If4831fc700c7df3a2a389b5f95b6fbaea4b7d954
A new controller is added - drawers.js with methods for controlling
display and removal of drawers. The existing code in references is
moved there and extended to support scroll to hide behaviour
Console warnings will disappear with this change.
Additional changes:
* Standardise the page issues element selector - should be the container
not a link inside it (was a red link so triggering wrong behaviour)
Bug: T214045
Change-Id: Id4719b5209dd7647775e2959e46dbae0c3dde3ac
Converts the main menu button to work without JS using the CSS-only
"checkbox" hack, using the ToggleList module from the dropdown menus.
Bug: T225213
Change-Id: I0eff0439f7284ec74f6304324fab409e8a1b6245
Following Vector and OOUI in `@font-size-root` and put it in central
file. Removing duplicated code in `html` and `body` achieving the
same thing.
Also renaming `@font-size-body-mobile` to a distinct
`@font-size-body--feature-phone` ending the confusion that it's a
variable only used at `@width-breakpoint-mobile - 1`.
Change-Id: Ie355d015d882f61c813991c3244bfcb67f161791
The mw-ui-icon class sets a transparent color on icons, however
that rule is loosing a specificity battle with the rules that
color the main menu links.
Given this is the only known instance where this happens,
a transparent color is added to the logout button itself
instead of a more general solution (likely involving
adding multiple "!important"s).
Bug: T240644
Change-Id: I4675e14fa34770361bc8b30f3562b5cb72b3e42d
It's also set in content.styles/main.less and is preceding there.
This has already been merged in reset removal branch and is now
re-deleted on master after first branch attempt failed.
Bug: T222877
Change-Id: I1e9eb28360acd57e574d37e118058abbf5bc6b3e
It dates back before MinervaNeue was its own skin in Iff1f7e63e796cc
and was probably an idea to provide a simple one-stop solution for
a typography change of font size.
It isn't very well setup for this and also provides no value as of now,
for code simplicity's sake, let's remove it.
From a design perspective, we would approach this problem differently
nowadays.
Change-Id: If43ea2590468832e135b3f654022e8b2064b06c1
Enabling 'selector-max-id' rule, and changing in rare exceptions like
`#bodyContent` to `.mw-body > .content` where there's only one less
specific option.
Bug: T239183
Change-Id: I9d929eaae09475b2e20d96cb19081aba3aec5877
Replacing id CSS selector by lower specific class selector, if needed
with `.client-js` prefix.
We have already been there once in Ib1a874b644, we need to enable
`selector-max-id` stylelint rule in a follow-up in order to make
devs not introduce without clear need.
Change-Id: Id16d89280d2ef080907fca5871dca701554087fd
Currently the Special:Logout page will ask "do you want to logout"
even if we pass the logout token. To avoid that first let's log out
user via API Ajax call.
Bug: T232734
Change-Id: Ia4cc4253b99254d7a893a55d9e05918c5d8c87e5
Talk overlays are only needed on talk pages, so we can now
unconditionally load them on talk pages and drop usage of
the ResourceLoader loading module.
When binding the section click handlers, the ids of the
associated headings are now removed to avoid ambiguity in
their behaviour.
Bug: T230695
Change-Id: I9b0ef7c5bc389209ed79761582e2f8aa3058c39d
Loading Special:Homepage on mobile betalabs currently results in an error,
`TypeError: currentPage.titleObj.getTalkPage(...) is null`. The call to
canHaveTalkPage results in false because Special:Homepage is in a lower
namespace number than what canHaveTalkPage() checks for.
Before setting talkTitle, check to see if getTalkPage doesn't fail.
Theoretically we might want to wrap other usages of talkTitle to check if it's
undefined but it seems safe to leave them as is.
Bug: T239101
Change-Id: I913fc309458e014b84da054e25e636492e3ed12a
Removing obsolete code, now that cache has definitely expired from
I720e62a578f0c7a14f4b5a698004471c85e54bc8.
Change-Id: I4f8dc279ed7eeb185e0591b64b91e68c135cf235
Setting `overflow-y: scroll` to prevent reflow as soon as content
comes in. Adding it to `body` as there might be side-effects when
it's set on both, `html` and `body` and latter seems to be the
place where volunteers or third parties would have set it already.
Bug: T204084
Change-Id: I08e8ceeaea4d8488bc9aee23d26f7791ceaa7ee0
