Skip to content

ui/setup/setup-guide

Defined in: app/src/ui/setup/setup-guide.ts:42

The setup guide that opens on the first start of a profile: look, tab layout and search engine, step by step. Every choice applies at once, so the browser around the guide shows it; every step can be skipped, and the settings page offers the same choices.

  • LitElement

new SetupGuide(): SetupGuide

Defined in: app/src/ui/setup/setup-guide.ts:265

SetupGuide

LitElement.constructor

connectedCallback(): void

Defined in: app/src/ui/setup/setup-guide.ts:273

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
super.connectedCallback();
addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

void

LitElement.connectedCallback

disconnectedCallback(): void

Defined in: app/src/ui/setup/setup-guide.ts:284

Invoked when the component is removed from the document’s DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

void

LitElement.disconnectedCallback

bridge: PageBridge | undefined

Defined in: app/src/ui/setup/setup-guide.ts:261

customSearch: boolean

Defined in: app/src/ui/setup/setup-guide.ts:260

Whether the user chose to enter a search address of their own.

i18n: Translator | undefined

Defined in: app/src/ui/setup/setup-guide.ts:262

revision: number

Defined in: app/src/ui/setup/setup-guide.ts:257

searchError: boolean

Defined in: app/src/ui/setup/setup-guide.ts:258

step: "search" | "done" | "browser" | "import" | "welcome" | "look" | "layout"

Defined in: app/src/ui/setup/setup-guide.ts:256

static styles: CSSResult[]

Defined in: app/src/ui/setup/setup-guide.ts:51

Styles of the guide, scoped to its shadow root.

LitElement.styles

static properties: object

Defined in: app/src/ui/setup/setup-guide.ts:43

User-supplied object that maps property names to PropertyDeclaration objects containing options for configuring reactive properties. When a reactive property is set the element will update and render.

By default properties are public fields, and as such, they should be considered as primarily settable by element users, either via attribute or the property itself.

Generally, properties that are changed by the element should be private or protected fields and should use the state: true option. Properties marked as state do not reflect from the corresponding attribute

However, sometimes element code does need to set a public property. This should typically only be done in response to user interaction, and an event should be fired informing the user; for example, a checkbox sets its checked property when clicked and fires a changed event. Mutating public properties should typically not be done for non-primitive (object or array) properties. In other cases when an element needs to manage state, a private property set with the state: true option should be used. When needed, state properties can be initialized via public properties to facilitate complex interactions.

customSearch: object

state: boolean = true

revision: object

state: boolean = true

searchError: object

state: boolean = true

step: object

state: boolean = true

LitElement.properties