Haketilo

      #loader, #indexeddb_error {

	  margin: auto;

	  padding: 1em;

	  max-width: 800px;

      }

      #indexeddb_error p {

	  margin-bottom: 1em;

      }

    <div id="loader">

      Loading settings page...

    </div>

    <div id="indexeddb_error" class="hide">

      <p>

	Cannot display settings page.

      </p>

      <p>

	Haketilo could not access IndexedDB. IndexedDB is an in-browser

	database in which Haketilo stores all its configuration. Without it, the

	settings page is non-operational.

      <p>

#IF MOZILLA

	<div id="indexeddb_private_mode_explanation" class="hide">

	  <p>

	    This issue is the result of using Haketilo in Private Browsing mode.

	    For privacy reasons your browser blocks access to IndexedDB in

	    private windows and this unfortunately also affects Haketilo's

	    settings page.

	  </p>

	  <p>

	    You can sacrifice this single privacy feature and enable IndexedDB

	    access in private windows by navigating to "about:config" in the URL

	    bar, agreeing to accept the risk and setting the

	    "dom.indexedDB.privateBrowsing.enabled" preference to "true". Those

	    pages that have their scripts blocked will still be unable to access

	    IndexedDB.

	  </p>

	  <p>

	    Alternatively, you can open Haketilo's settings in a separate,

	    non-private window. The configuration you make there will take

	    effect on pages opened in Private Browsing mode as well.

	  </p>

#ENDIF

    </div>

    <div id="main_view" class="hide">

      <ul id="tab_heads">

	<li id="blocking_head"> Blocking </li>

	<li id="mappings_head"> Mappings </li>

	<li id="resources_head"> Resources </li>

	<li id="new_payload_head" class="active_head"> New payload </li>

	<li id="repos_head"> Repositories </li>

      </ul>

      <div id="top_menu_line" class="top_line"></div>

      <div id="blocking_tab" class="tab">

	<div id="blocking_editable_container" class="grid_2">

	  <div id="blocking_list_container">

	    <h3>Block scripts on</h3>

	  </div>

	  <div id="allowing_list_container">

	    <h3>Allow scripts on</h3>

	  </div>

	  <div id="default_policy_dialog" class="grid_col_both text_center">

	  </div>

	<div id="blocking_dialog_container" class="hide"></div>

      </div>

      <div id="mappings_tab" class="tab"></div>

      <div id="resources_tab" class="tab"></div>

      <div id="new_payload_tab" class="tab active_tab"></div>

      <div id="repos_tab" class="tab">

	<div id="repos_list_container"></div>

	<div id="repos_dialog_container" class="hide"></div>

#IMPORT common/indexeddb.js AS haketilodb

#IF MOZILLA

#FROM common/browser.js IMPORT browser

#ENDIF

function set_up_settings_view() {

    by_id("loader").remove();

    by_id("main_view").classList.remove("hide");

    set_up_blocking_tab();

    set_up_mappings_tab();

    set_up_resources_tab();

    set_up_new_payload_tab();

    set_up_repos_tab();

}

#IF MOZILLA

async function show_indexeddb_error() {

    const this_tab = await browser.tabs.getCurrent();

    if (this_tab.incognito)

	by_id("indexeddb_private_mode_explanation").classList.remove("hide");

#ELSE

function show_indexeddb_error() {

#ENDIF

    by_id("loader").remove();

    by_id("indexeddb_error").classList.remove("hide");

}

async function init_settings_page() {

    try {

	await haketilodb.get();

    } catch(e) {

	console.error(e);

	show_indexeddb_error();

	return;

    }

    set_up_settings_view();

}

#IF UNIT_TEST

window.init_settings_page = init_settings_page;

#ELSE

init_settings_page();

#ENDIF

from selenium.webdriver.support.ui import WebDriverWait

from selenium.webdriver.support import expected_conditions as EC

from selenium.webdriver.common.by import By

    WebDriverWait(driver, 10)\

        .until(EC.visibility_of_element_located((By.ID, "main_view")))

from selenium.webdriver.support.ui import WebDriverWait

from selenium.webdriver.support import expected_conditions as EC

from selenium.webdriver.common.by import By

ext_data = {

}

@pytest.mark.ext_data(ext_data)

    Test navigation through the tabs of the settings page.

    execute_in_page('init_settings_page();')

    WebDriverWait(driver, 10)\

        .until(EC.visibility_of_element_located((By.ID, "main_view")))

    assert driver.find_elements_by_id('loader') == []

    assert not driver.find_element_by_id('indexeddb_error').is_displayed()

@pytest.mark.ext_data({

    **ext_data,

    'navigate_to': 'html/settings.html'

})

@pytest.mark.usefixtures('webextension')

@pytest.mark.parametrize('incognito', [True, False])

def test_settings_page_indexeddb_error(driver, execute_in_page, incognito):

    """

    Test if failure to access IndexedDB in settings page results in the

    appropriate message being shown.

    """

    execute_in_page(

        '''{

        /*

         * Mock an unavailable IndexedDB. Calling onerror() without having set

         * "errorCode" on the request is the behavior observed under Mozilla.

         */

        indexedDB.open = function() {

            const dummy_open_request = {};

            const dummy_event = {target: dummy_open_request};

            setTimeout(() => dummy_open_request.onerror(dummy_event), 0);

            return dummy_open_request;

        }

        const dummy_tab = {incognito: arguments[0]};

        browser.tabs.getCurrent = () => Promise.resolve(dummy_tab);

        init_settings_page();

        }''',

        incognito)

    WebDriverWait(driver, 10)\

        .until(EC.visibility_of_element_located((By.ID, 'indexeddb_error')))

    assert driver.find_elements_by_id('loader') == []

    assert not driver.find_element_by_id('main_view').is_displayed()

    if incognito:

        assert driver.find_element_by_id('indexeddb_private_mode_explanation')\

                     .is_displayed()