Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reduce amount of boilerplate to render enumerated preferences in the Chrome extension + improve linting #9491

Open
Rob--W opened this issue Feb 16, 2018 · 0 comments

Comments

@Rob--W
Copy link
Member

Rob--W commented Feb 16, 2018

The number of preferences that are integers representing enumerations keeps growing. Boolean preferences are automatically dealt with, but integers/enumerations are not.
Currently, to support a preference in the Chrome extension, the following needs to be done:

  1. extensions/chromium/preferences_schema.json should get a new entry. Preferences are only shown if a "title" is provided. Boolean prefs are automatically rendered, e.g.:
    "pdfBugEnabled": {
    "title": "Enable debugging tools",
    "description": "Whether to enable debugging tools.",
    "type": "boolean",
    "default": false

    The following format (enumerations) are becoming more common,:but unlike the boolean type, they need extra attention, explained below.
    "cursorToolOnLoad": {
    "title": "Cursor tool on load",
    "description": "The cursor tool that is enabled upon load.\n 0 = Text selection tool.\n 1 = Hand tool.",
    "type": "integer",
    "enum": [
    0,
    1
    ],
    "default": 0
    },
  2. extensions/chromium/options/options.html For enumerated preferences, add a new template, e.g.
    <template id="cursorToolOnLoad-template">
    <div class="settings-row">
    <label>
    <span></span>
    <select>
    <option value="0">Text selection tool</option>
    <option value="1">Hand tool</option>
    </select>
    </label>
    </div>
    </template>
  3. extensions/chromium/options/options.js Add an if-check for the new preference name, and call a function that generates the event handler:
    } else if (prefName === 'cursorToolOnLoad') {
    renderPreference = renderCursorToolOnLoad(prefSchema.title);

    function renderCursorToolOnLoad(shortDescription) {
    var wrapper = importTemplate('cursorToolOnLoad-template');
    var select = wrapper.querySelector('select');
    select.onchange = function() {
    storageArea.set({
    cursorToolOnLoad: parseInt(this.value),
    });
    };
    wrapper.querySelector('span').textContent = shortDescription;
    document.getElementById('settings-boxes').appendChild(wrapper);
    function renderPreference(value) {
    select.value = value;
    }
    return renderPreference;
    }

The problem here is that the enumeration type is common, yet it requires much boilerplate code (in options.js, a single helper function can be used). If we choose a consistent format, templates in options.html can be auto-generated too (at the expense of readability, because then the dropdown labels have to be written in preferences_schema.json).


Secondly, to avoid breaking the settings page whenever a preference is changed/added, I should add linting to enforce that it is not possible to accidentally break the settings page (which has happened twice alredy, fixed in #8653 and #9490).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants