Change Details

> Note: If this task is starting to feel "medium" sized, stop what you are doing immediately and document the troubles you've hit. You've likely hit unknown unknowns and we should re-evaluate and re-estimate this work based on your discoveries. `mfExtend()` is a prevalent utility in MobileFrontend and MinervaNeue. In the former, ES6 is now available and canonical class `extends` are preferable to a custom utility. `extends` is compatible with both classes and functions so it's not a requirement that the parent be a real ES6 class. See the example below. This gives some flexibility in choosing which code to convert to classes because the change can be isolated from the parent. ```lang=js, name=Example: extending a function // Parent "class" function Foo() { console.log('constructor'); } Foo.prototype.hello = () => console.log('hello') // Actual class extending a function class Bar extends Foo { goodbye() { console.log('goodbye') } } // Prints "constructor". const bar = new Bar() // Prints "hello" and "goodbye". bar.hello() bar.goodbye() ``` Since there may be unknown unknowns, the initial effort will focus on BetaOptInPanel. == Acceptance criteria [] BetaOptInPanel is a `class` that `extends View`. [] BetaOptInPanel invokes `View` with the correct arguments via `super`. [] `mfExtend` is removed and its overrides are moved to class properties and methods. [] If successful, a new task for new further `mfExtend` refactors is made. == QA Steps Prerequisites: - All of the following steps assume you are on the mobile site (ensure you have toggled that mode on) and your settings initially have devwiki βeta turned off. It's best to do these steps in Chrome's incognito mode so that you have a clean slate. 1) Visit https://readers-web-staging.wmflabs.org/wiki/Timed_test . It may take 60 seconds to load. That is perfect normal! 👌Repeat this to yourself as many times as needed to convince yourself that it is true. 2) You should see the BetaOptin panel on this page. It is the grey box with text "Do you want to try some new features?". Click the "okay". 3) The settings page should load with "devwiki βeta" turned on. 4) Turn off "devwiki βeta" 5) Visit https://readers-web-staging.wmflabs.org/wiki/Timed_test again. 6) Click the "No thanks" button. The BetaOptin panel should disappear. 7) Refresh the page. The BetaOptin panel should not be there anymore.

> Note: If this task is starting to feel "medium" sized, stop what you are doing immediately and document the troubles you've hit. You've likely hit unknown unknowns and we should re-evaluate and re-estimate this work based on your discoveries. `mfExtend()` is a prevalent utility in MobileFrontend and MinervaNeue. In the former, ES6 is now available and canonical class `extends` are preferable to a custom utility. `extends` is compatible with both classes and functions so it's not a requirement that the parent be a real ES6 class. See the example below. This gives some flexibility in choosing which code to convert to classes because the change can be isolated from the parent. ```lang=js, name=Example: extending a function // Parent "class" function Foo() { console.log('constructor'); } Foo.prototype.hello = () => console.log('hello') // Actual class extending a function class Bar extends Foo { goodbye() { console.log('goodbye') } } // Prints "constructor". const bar = new Bar() // Prints "hello" and "goodbye". bar.hello() bar.goodbye() ``` Since there may be unknown unknowns, the initial effort will focus on BetaOptInPanel. == Acceptance criteria [] BetaOptInPanel is a `class` that `extends View`. [] BetaOptInPanel invokes `View` with the correct arguments via `super`. [] `mfExtend` is removed and its overrides are moved to class properties and methods. [] If successful, a new task for new further `mfExtend` refactors is made. == QA Steps Prerequisites: - All of the following steps assume you are on the mobile site (ensure you have toggled that mode on) and your settings initially have devwiki βeta turned off. It's best to do these steps in Chrome's incognito mode so that you have a clean slate. 1) Visit https://readers-web-staging.wmflabs.org/wiki/Timed_test . It may take 60 seconds to load. That is perfect normal! 👌Repeat this to yourself as many times as needed to convince yourself that it is true. 2) You should see the BetaOptin panel on this page. It is the grey box with text "Do you want to try some new features?". Click the "okay" button. 3) The settings page should load with "devwiki βeta" turned on. 4) Turn off "devwiki βeta" 5) Visit https://readers-web-staging.wmflabs.org/wiki/Timed_test again. 6) Click the "No thanks" button. The BetaOptin panel should disappear. 7) Refresh the page. The BetaOptin panel should not be there anymore.

> Note: If this task is starting to feel "medium" sized, stop what you are doing immediately and document the troubles you've hit. You've likely hit unknown unknowns and we should re-evaluate and re-estimate this work based on your discoveries. `mfExtend()` is a prevalent utility in MobileFrontend and MinervaNeue. In the former, ES6 is now available and canonical class `extends` are preferable to a custom utility. `extends` is compatible with both classes and functions so it's not a requirement that the parent be a real ES6 class. See the example below. This gives some flexibility in choosing which code to convert to classes because the change can be isolated from the parent. ```lang=js, name=Example: extending a function // Parent "class" function Foo() { console.log('constructor'); } Foo.prototype.hello = () => console.log('hello') // Actual class extending a function class Bar extends Foo { goodbye() { console.log('goodbye') } } // Prints "constructor". const bar = new Bar() // Prints "hello" and "goodbye". bar.hello() bar.goodbye() ``` Since there may be unknown unknowns, the initial effort will focus on BetaOptInPanel. == Acceptance criteria [] BetaOptInPanel is a `class` that `extends View`. [] BetaOptInPanel invokes `View` with the correct arguments via `super`. [] `mfExtend` is removed and its overrides are moved to class properties and methods. [] If successful, a new task for new further `mfExtend` refactors is made. == QA Steps Prerequisites: - All of the following steps assume you are on the mobile site (ensure you have toggled that mode on) and your settings initially have devwiki βeta turned off. It's best to do these steps in Chrome's incognito mode so that you have a clean slate. 1) Visit https://readers-web-staging.wmflabs.org/wiki/Timed_test . It may take 60 seconds to load. That is perfect normal! 👌Repeat this to yourself as many times as needed to convince yourself that it is true. 2) You should see the BetaOptin panel on this page. It is the grey box with text "Do you want to try some new features?". Click the "okay" button. 3) The settings page should load with "devwiki βeta" turned on. 4) Turn off "devwiki βeta" 5) Visit https://readers-web-staging.wmflabs.org/wiki/Timed_test again. 6) Click the "No thanks" button. The BetaOptin panel should disappear. 7) Refresh the page. The BetaOptin panel should not be there anymore.