/* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ /** * Test that the reader mode button appears and works properly on * reader-able content. */ const TEST_PREFS = [["reader.parse-on-load.enabled", true]]; const TEST_PATH = getRootDirectory(gTestPath).replace( "chrome://mochitests/content", "https://example.com" ); var readerButton = document.getElementById("reader-mode-button"); ChromeUtils.defineESModuleGetters(this, { PlacesTestUtils: "resource://testing-common/PlacesTestUtils.sys.mjs", }); add_task(async function test_reader_button() { registerCleanupFunction(function() { // Reset test prefs. TEST_PREFS.forEach(([name, value]) => { Services.prefs.clearUserPref(name); }); while (gBrowser.tabs.length > 1) { gBrowser.removeCurrentTab(); } }); // Set required test prefs. TEST_PREFS.forEach(([name, value]) => { Services.prefs.setBoolPref(name, value); }); let tab = (gBrowser.selectedTab = BrowserTestUtils.addTab(gBrowser)); is_element_hidden( readerButton, "Reader mode button is not present on a new tab" ); ok( !UITour.isInfoOnTarget(window, "readerMode-urlBar"), "Info panel shouldn't appear without the reader mode button" ); // Point tab to a test page that is reader-able. let url = TEST_PATH + "readerModeArticle.html"; // Set up favicon for testing. let favicon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAA" + "AAAA6fptVAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg=="; info("Adding visit so we can add favicon"); await PlacesTestUtils.addVisits(new URL(url)); info("Adding favicon"); await PlacesTestUtils.addFavicons(new Map([[url, favicon]])); info("Opening tab and waiting for reader mode button to show up"); await promiseTabLoadEvent(tab, url); await TestUtils.waitForCondition(() => !readerButton.hidden); is_element_visible( readerButton, "Reader mode button is present on a reader-able page" ); // Switch page into reader mode. let promiseTabLoad = promiseTabLoadEvent(tab); readerButton.click(); await promiseTabLoad; let readerUrl = gBrowser.selectedBrowser.currentURI.spec; ok( readerUrl.startsWith("about:reader"), "about:reader loaded after clicking reader mode button" ); is_element_visible( readerButton, "Reader mode button is present on about:reader" ); let iconEl = tab.iconImage; await TestUtils.waitForCondition( () => iconEl.getBoundingClientRect().width != 0 ); is_element_visible(iconEl, "Favicon should be visible"); is(iconEl.src, favicon, "Correct favicon should be loaded"); is(gURLBar.untrimmedValue, url, "gURLBar value is about:reader URL"); is(gURLBar.value, url, "gURLBar is displaying original article URL"); // Check selected value for URL bar await new Promise((resolve, reject) => { waitForClipboard( url, function() { gURLBar.focus(); gURLBar.select(); goDoCommand("cmd_copy"); }, resolve, reject ); }); info("Got correct URL when copying"); // Switch page back out of reader mode. let promisePageShow = BrowserTestUtils.waitForContentEvent( tab.linkedBrowser, "pageshow", false, e => e.target.location.href != "about:blank" ); readerButton.click(); await promisePageShow; is( gBrowser.selectedBrowser.currentURI.spec, url, "Back to the original page after clicking active reader mode button" ); ok( gBrowser.selectedBrowser.canGoForward, "Moved one step back in the session history." ); let nonReadableUrl = TEST_PATH + "readerModeNonArticle.html"; // Load a new tab that is NOT reader-able. let newTab = (gBrowser.selectedTab = BrowserTestUtils.addTab(gBrowser)); await promiseTabLoadEvent(newTab, nonReadableUrl); await TestUtils.waitForCondition(() => readerButton.hidden); is_element_hidden( readerButton, "Reader mode button is not present on a non-reader-able page" ); // Switch back to the original tab to make sure reader mode button is still visible. gBrowser.removeCurrentTab(); await TestUtils.waitForCondition(() => !readerButton.hidden); is_element_visible( readerButton, "Reader mode button is present on a reader-able page" ); // Load a new tab in reader mode that is NOT reader-able in the reader mode. newTab = gBrowser.selectedTab = BrowserTestUtils.addTab(gBrowser); let promiseAboutReaderError = BrowserTestUtils.waitForContentEvent( newTab.linkedBrowser, "AboutReaderContentError" ); await promiseTabLoadEvent(newTab, "about:reader?url=" + nonReadableUrl); await promiseAboutReaderError; await TestUtils.waitForCondition(() => !readerButton.hidden); is_element_visible( readerButton, "Reader mode button is present on about:reader even in error state" ); // Switch page back out of reader mode. promisePageShow = BrowserTestUtils.waitForContentEvent( newTab.linkedBrowser, "pageshow", false, e => e.target.location.href != "about:blank" ); readerButton.click(); await promisePageShow; is( gBrowser.selectedBrowser.currentURI.spec, nonReadableUrl, "Back to the original non-reader-able page after clicking active reader mode button" ); await TestUtils.waitForCondition(() => readerButton.hidden); is_element_hidden( readerButton, "Reader mode button is not present on a non-reader-able page" ); }); add_task(async function test_getOriginalUrl() { let { ReaderMode } = ChromeUtils.import( "resource://gre/modules/ReaderMode.jsm" ); let url = "https://foo.com/article.html"; is( ReaderMode.getOriginalUrl("about:reader?url=" + encodeURIComponent(url)), url, "Found original URL from encoded URL" ); is( ReaderMode.getOriginalUrl("about:reader?foobar"), null, "Did not find original URL from malformed reader URL" ); is( ReaderMode.getOriginalUrl(url), null, "Did not find original URL from non-reader URL" ); let badUrl = "https://foo.com/?;$%^^"; is( ReaderMode.getOriginalUrl("about:reader?url=" + encodeURIComponent(badUrl)), badUrl, "Found original URL from encoded malformed URL" ); is( ReaderMode.getOriginalUrl("about:reader?url=" + badUrl), badUrl, "Found original URL from non-encoded malformed URL" ); }); add_task(async function test_reader_view_element_attribute_transform() { registerCleanupFunction(function() { while (gBrowser.tabs.length > 1) { gBrowser.removeCurrentTab(); } }); function observeAttribute(element, attributes, triggerFn, checkFn) { return new Promise(resolve => { let observer = new MutationObserver(mutations => { for (let mu of mutations) { if (element.getAttribute(mu.attributeName) !== mu.oldValue) { if (checkFn()) { resolve(); observer.disconnect(); return; } } } }); observer.observe(element, { attributes: true, attributeOldValue: true, attributeFilter: Array.isArray(attributes) ? attributes : [attributes], }); triggerFn(); }); } let menuitem = document.getElementById("menu_readerModeItem"); let tab = await BrowserTestUtils.openNewForegroundTab(gBrowser); is( menuitem.hidden, true, "menuitem element should have the hidden attribute" ); info("Navigate a reader-able page"); function waitForNonBlankPage() { return BrowserTestUtils.waitForContentEvent( tab.linkedBrowser, "pageshow", false, e => e.target.location.href != "about:blank" ); } let waitForPageshow = waitForNonBlankPage(); await observeAttribute( menuitem, "hidden", () => { let url = TEST_PATH + "readerModeArticle.html"; BrowserTestUtils.loadURI(tab.linkedBrowser, url); }, () => !menuitem.hidden ); is( menuitem.hidden, false, "menuitem's hidden attribute should be false on a reader-able page" ); await waitForPageshow; info("Navigate a non-reader-able page"); waitForPageshow = waitForNonBlankPage(); await observeAttribute( menuitem, "hidden", () => { let url = TEST_PATH + "readerModeArticleHiddenNodes.html"; BrowserTestUtils.loadURI(tab.linkedBrowser, url); }, () => menuitem.hidden ); is( menuitem.hidden, true, "menuitem's hidden attribute should be true on a non-reader-able page" ); await waitForPageshow; info("Navigate a reader-able page"); waitForPageshow = waitForNonBlankPage(); await observeAttribute( menuitem, "hidden", () => { let url = TEST_PATH + "readerModeArticle.html"; BrowserTestUtils.loadURI(tab.linkedBrowser, url); }, () => !menuitem.hidden ); is( menuitem.hidden, false, "menuitem's hidden attribute should be false on a reader-able page" ); await waitForPageshow; info("Enter Reader Mode"); waitForPageshow = waitForNonBlankPage(); await observeAttribute( readerButton, "readeractive", () => { readerButton.click(); }, () => readerButton.getAttribute("readeractive") == "true" ); is( readerButton.getAttribute("readeractive"), "true", "readerButton's readeractive attribute should be true when entering reader mode" ); await waitForPageshow; info("Exit Reader Mode"); waitForPageshow = waitForNonBlankPage(); await observeAttribute( readerButton, ["readeractive", "hidden"], () => { readerButton.click(); }, () => { info( `active: ${readerButton.getAttribute("readeractive")}; hidden: ${ menuitem.hidden }` ); return !readerButton.getAttribute("readeractive") && !menuitem.hidden; } ); ok( !readerButton.getAttribute("readeractive"), "readerButton's readeractive attribute should be empty when reader mode is exited" ); ok(!menuitem.hidden, "menuitem should not be hidden."); await waitForPageshow; info("Navigate a non-reader-able page"); waitForPageshow = waitForNonBlankPage(); await observeAttribute( menuitem, "hidden", () => { let url = TEST_PATH + "readerModeArticleHiddenNodes.html"; BrowserTestUtils.loadURI(tab.linkedBrowser, url); }, () => menuitem.hidden ); is( menuitem.hidden, true, "menuitem's hidden attribute should be true on a non-reader-able page" ); await waitForPageshow; }); add_task(async function test_reader_mode_lang() { let url = TEST_PATH + "readerModeArticle.html"; let tab = await BrowserTestUtils.openNewForegroundTab(gBrowser); BrowserTestUtils.loadURI(tab.linkedBrowser, url); await promiseTabLoadEvent(tab, url); await TestUtils.waitForCondition(() => !readerButton.hidden); // Switch page into reader mode. let promiseTabLoad = promiseTabLoadEvent(tab); readerButton.click(); await promiseTabLoad; await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { let container = content.document.querySelector(".container"); is(container.lang, "en"); }); });