Source code
Revision control
Copy as Markdown
Other Tools
/* 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
"use strict";
// This is loaded into chrome windows with the subscript loader. Wrap in
// a block to prevent accidentally leaking globals onto `window`.
{
const { TabNotes } = ChromeUtils.importESModule(
"moz-src:///browser/components/tabnotes/TabNotes.sys.mjs"
);
class MozTabbrowserTabNoteMenu extends MozXULElement {
static markup = /*html*/ `
<panel
id="tabNotePanel"
type="arrow"
titlebar="normal"
class="tab-note-editor-panel"
orient="vertical"
role="dialog"
ignorekeys="true"
norolluponanchor="true"
aria-labelledby="tab-note-editor-title"
consumeoutsideclicks="false">
<html:div class="panel-header" >
<html:h1
id="tab-note-editor-title">
</html:h1>
</html:div>
<toolbarseparator />
<html:div
class="panel-body
tab-note-editor-name">
<html:textarea
id="tab-note-text"
name="tab-note-text"
rows="3"
value=""
data-l10n-id="tab-note-editor-text-field"
></html:textarea>
</html:div>
<html:moz-button-group
class="tab-note-create-actions tab-note-create-mode-only"
id="tab-note-default-actions">
<html:moz-button
id="tab-note-editor-button-cancel"
data-l10n-id="tab-note-editor-button-cancel">
</html:moz-button>
<html:moz-button
type="primary"
id="tab-note-editor-button-save"
data-l10n-id="tab-note-editor-button-save">
</html:moz-button>
</html:moz-button-group>
</panel>
`;
#initialized = false;
#panel;
#noteField;
#titleNode;
/** @type {MozTabbrowserTab} */
#currentTab = null;
/** @type {boolean} */
#createMode;
connectedCallback() {
if (this.#initialized) {
return;
}
this.textContent = "";
this.appendChild(this.constructor.fragment);
this.initializeAttributeInheritance();
this.#panel = this.querySelector("panel");
this.#noteField = document.getElementById("tab-note-text");
this.#titleNode = document.getElementById("tab-note-editor-title");
this.querySelector("#tab-note-editor-button-cancel").addEventListener(
"click",
() => {
this.#panel.hidePopup();
}
);
this.querySelector("#tab-note-editor-button-save").addEventListener(
"click",
() => {
this.saveNote();
}
);
this.#panel.addEventListener("keypress", this);
this.#panel.addEventListener("popuphidden", this);
this.#initialized = true;
}
on_keypress(event) {
if (event.defaultPrevented) {
// The event has already been consumed inside of the panel.
return;
}
switch (event.keyCode) {
case KeyEvent.DOM_VK_ESCAPE:
this.#panel.hidePopup();
break;
case KeyEvent.DOM_VK_RETURN:
this.saveNote();
break;
}
}
on_popuphidden() {
this.#currentTab = null;
this.#noteField.value = "";
}
get createMode() {
return this.#createMode;
}
set createMode(createModeEnabled) {
if (this.#createMode == createModeEnabled) {
return;
}
let headerL10nId = createModeEnabled
? "tab-note-editor-title-create"
: "tab-note-editor-title-edit";
this.#titleNode.innerText =
gBrowser.tabLocalization.formatValueSync(headerL10nId);
this.#createMode = createModeEnabled;
}
get #panelPosition() {
if (gBrowser.tabContainer.verticalMode) {
return SidebarController._positionStart
? "topleft topright"
: "topright topleft";
}
return "bottomleft topleft";
}
/**
* @param {MozTabbrowserTab} tab
*/
openPanel(tab) {
if (!TabNotes.isEligible(tab)) {
return;
}
this.#currentTab = tab;
TabNotes.get(tab).then(note => {
if (note) {
this.createMode = false;
this.#noteField.value = note.text;
} else {
this.createMode = true;
}
this.#panel.addEventListener(
"popupshown",
() => {
this.#noteField.focus();
},
{
once: true,
}
);
this.#panel.openPopup(tab, {
position: this.#panelPosition,
});
});
}
saveNote() {
let note = this.#noteField.value;
if (TabNotes.isEligible(this.#currentTab) && note.length) {
TabNotes.set(this.#currentTab, note);
}
this.#panel.hidePopup();
}
}
customElements.define("tabnote-menu", MozTabbrowserTabNoteMenu);
}