changedetection.io/changedetectionio/blueprint/ui/templates/_browser_config_fields.html

{# Browser config form fields for the add/edit page. Expects `form`, `applicable` (the set of
   FetcherConfig fields this base engine can honour - FetcherConfig.applicable_fields()) and
   `base_label` (read-only base engine name). The base engine is fixed by the page (chosen via
   the "Add variation" link, or the existing config's base), so it's shown read-only, not as a
   picker.

   Gating on `applicable` rather than on capability flags directly is deliberate: it is the same
   set the save path allows (FetcherConfig.from_submitted), so a field can never be rendered but
   unsaveable, or hidden but written from its widget default. #}
{% from '_helpers.html' import render_field, render_checkbox_field %}

<fieldset>
    <div class="pure-control-group">
        <label>{{ _('Based on browser') }}</label>
        <div><strong>{{ base_label }}</strong></div>
    </div>
    <div class="pure-control-group">
        {{ render_field(form.label) }}
        <span class="pure-form-message-inline">{{ _('A friendly name, e.g. “Mobile” or “German desktop”.') }}</span>
    </div>
    {% if 'browser_type' in applicable %}
    <div class="pure-control-group">
        {{ render_field(form.browser_type) }}
        <span class="pure-form-message-inline">{{ _('Which browser engine to launch locally.') }}</span>
    </div>
    {% endif %}
    {% if 'delete_created_files' in applicable %}
    <div class="pure-control-group">{{ render_checkbox_field(form.delete_created_files) }}</div>
    {% endif %}
</fieldset>

{% if 'viewport_width' in applicable %}
<fieldset>
    <legend>{{ _('Screen size') }}</legend>
    <div class="pure-control-group">
        <div class="viewport-presets">
            <button type="button" class="pure-button button-small" data-w="1920" data-h="1080">{{ _('Desktop') }}</button>
            <button type="button" class="pure-button button-small" data-w="1366" data-h="768">{{ _('Laptop') }}</button>
            <button type="button" class="pure-button button-small" data-w="768" data-h="1024">{{ _('Tablet') }}</button>
            <button type="button" class="pure-button button-small" data-w="390" data-h="844">{{ _('Mobile') }}</button>
            <button type="button" class="pure-button button-small" data-w="" data-h="">{{ _('Clear') }}</button>
        </div>
    </div>
    <div class="pure-control-group">{{ render_field(form.viewport_width) }}</div>
    <div class="pure-control-group">{{ render_field(form.viewport_height) }}</div>
</fieldset>

<fieldset>
    <legend>{{ _('Language & timezone') }}</legend>
    <div class="pure-control-group">
        {{ render_field(form.locale) }}
        <datalist id="locale-datalist">
            {% for l in locale_choices or [] %}<option value="{{ l }}"></option>{% endfor %}
        </datalist>
        <span class="pure-form-message-inline">{{ _('Start typing to search - e.g. <code>de-DE</code>, <code>en-GB</code>.')|safe }}</span>
    </div>
    <div class="pure-control-group">
        {{ render_field(form.timezone_id) }}
        <datalist id="timezone-datalist">
            {% for tz in timezone_choices or [] %}<option value="{{ tz }}"></option>{% endfor %}
        </datalist>
        <span class="pure-form-message-inline">{{ _('Start typing to search - e.g. <code>Europe/Berlin</code>.')|safe }}</span>
    </div>
</fieldset>
{% endif %}

{% if 'connection_url' in applicable %}
<fieldset>
    <legend>{{ _('Browser endpoint') }}</legend>
    <div class="pure-control-group">
        {{ render_field(form.connection_url) }}
        <span class="pure-form-message-inline">
            {{ _('Address of the external browser to connect to, e.g. a Bright Data or Oxylabs Scraping Browser.') }}
            <a href="https://changedetection.io/tutorial/using-bright-datas-scraping-browser-pass-captchas-and-other-protection-when-monitoring">{{ _('More instructions and examples here') }}</a>
        </span>
    </div>
</fieldset>
{% endif %}

{% if 'timeout' in applicable or 'user_agent' in applicable %}
<fieldset>
    <legend>{{ _('HTTP request options') }}</legend>
    {% if 'timeout' in applicable %}
    <div class="pure-control-group">
        {{ render_field(form.timeout) }}
        <span class="pure-form-message-inline">{{ _('Maximum seconds to wait for the response (plain HTTP client only).') }}</span>
    </div>
    {% endif %}
    {% if 'user_agent' in applicable %}
    <div class="pure-control-group">
        {{ render_field(form.user_agent) }}
        <span class="pure-form-message-inline">{{ _('Sent as the User-Agent header for requests using this browser.') }}</span>
    </div>
    {% endif %}
</fieldset>
{% endif %}

{% if 'block_resource_types' in applicable %}
<fieldset>
    <legend>{{ _('Skip downloads (save bandwidth)') }}</legend>
    <div class="pure-control-group">
        <label>{{ form.block_resource_types.label.text }}</label>
        <div class="browser-inline-checkboxes">
            {% for opt in form.block_resource_types %}
            <span class="checkbox">{{ opt() }} <label for="{{ opt.id }}">{{ opt.label.text }}</label></span>
            {% endfor %}
        </div>
    </div>
    <div class="pure-control-group">
        {{ render_field(form.block_url_patterns) }}
        <span class="pure-form-message-inline">{{ _('One address pattern per line, e.g. <code>*.ttf</code>.')|safe }}</span>
    </div>
</fieldset>
{% endif %}

{% if 'screenshot_format' in applicable %}
<fieldset>
    <div class="pure-control-group">{{ render_field(form.screenshot_format) }}</div>
</fieldset>
{% endif %}

<script>
(function () {
    var w = document.getElementById('{{ form.viewport_width.id }}');
    var h = document.getElementById('{{ form.viewport_height.id }}');
    document.querySelectorAll('.viewport-presets button').forEach(function (btn) {
        btn.addEventListener('click', function () {
            if (w) w.value = this.getAttribute('data-w');
            if (h) h.value = this.getAttribute('data-h');
        });
    });
})();
</script>
<style>
.viewport-presets { display:flex; flex-wrap:wrap; gap:0.4em; }
.browser-inline-checkboxes { display:flex; flex-wrap:wrap; gap:0.4em 1.2em; }
.browser-inline-checkboxes .checkbox { white-space:nowrap; }
</style>