Plan (YMMV)
- Remove all module definitions from the codebase.
- The code for ext.popups.renderer.mobileRenderer and ext.popups.targets.mobileTarget (defined in PopupsHooks#onResourceLoaderRegisterModules) should be removed from the codebase.
- Add the ext.popups.lib module, which contains Redux@3.6.0.
- Define and document the set of events that Hovercards should respond to.
- Create actions for those events.
- Move all DOM event handlers into a single file and add unit tests.
- Each handler should dispatch an action against the store.
- Run QUnit tests in Node.js by repurposing I00045bb9: Add isolated unit testing with npm run test:unit.
- Create the controller module, which contains the code responsible for maintaining the entire state of the system (which link is being interacted with, whether the link's title attribute should be scrubbed, timers, the render cache, the popup element and if it's visible or is being animated, etc.) by consuming ext.popups.event events and triggering actions when certain state transitions occur, i.e.
var controller = createController( /* initialState = */ {} ); mw.trackSubscribe( 'ext.popups.event', event => controller.onEvent( event ) );
- Extract the API-related code from ext.popups.renderer.article to the api module.
- api subscribes to updates from the controller and makes an API request if the state has the correct shape. An event is dispatched when the API request is made, completes, or encounters an error.
- Ensure that anchor title attribute manipulation and hook firing code is removed.
- Extract the rendering code from the ext.popups.renderer.article module to the renderer module.
- renderer subscribes to updates from the controller and renders a Hovercard if the state has the correct shape.
- mw.popups.render( data ) returns a DOM element ready to be inserted into the DOM.
- The results of mw.popups.render may be cached in order to improve rendering performance but the caching behaviour should be distinct from the rendering behaviour.
Considerations
- Hovercards is event driven. We should consider using RxJS to simplify a lot of the logic around subscribing to streams of DOM events and timers.
- We should strongly consider using Redux to implement controller.
- It has a well-defined language that we can use to talk about modelling applications.
- It's battle tested.
- It's 2kB.
- It's incredibly well documented. Indeed, I wish I could write documentation like that…
Etherpad
I'm keeping a diary/my notes in an Etherpad.
Acceptance criteria
Full requirements at: https://www.mediawiki.org/wiki/Beta_Features/Hovercards/Functionality (draft: https://docs.google.com/document/d/1A53OEJpjzjSgGKWTCwUPSqNopTNskr_i8oElwzOX9Uc/edit?ts=58123738#heading=h.p7d3kocgqxg8 )
Summary of the article:
- Article summary will contain the first 525 characters from the lead paragraph of each article
- After the first 525 characters, a horizontal gradient will be displayed to indicate continuation (as in related pages). More info here: https://phabricator.wikimedia.org/T67845
- The first instance of bolded text within the article will appear bolded within a hovercard. Any other instance of bolded text will not appear bolded
- More info here: https://phabricator.wikimedia.org/T141651
- If an article has no lead paragraph, a generic hovercard will be used (more info below)
Visual Design Criteria
Page previews need visual design improvement in three areas
- depth of shadow
- no border
- transition time
New Properties
.mwe-popups {
box-shadow: 0 45px 70px -20px rgba(0,0,0,0.3), 0px 0px 1px rgba(0,0,0,0.5);
border:none;
}Before:
After:
transition time
There are two time constants for Pagepreview to appear
- delay
- transition time after the delay
We need to reduce the second value from 0.3s to 0.2s and keep the delay constant.
