<commit_before>import {
    el,
    mount
} from "redom";
import { EventEmitter } from "events";

import matching from "./matching";
import config from "../common/config";

import ICON_SEARCH from "../common/images/search.png";
import ICON_SAVE from "../common/images/save.png";
import ICON_KEY from "../common/images/key.png";

const BUTTON_SIZE = 30;
const BUTTON_IMAGE_SIZE = 24;
const LIST_ITEM_HEIGHT = 28;
const MIN_WIDTH = 150;

function createPopup(popup, position, width) {
    const HEIGHT = 130;
    let popupWidth = Math.max(width, MIN_WIDTH);
    let list = el(
        "div",
        {
            "data-buttercup-role": "listbox",
            style: {
                width: "100%",
                height: `${HEIGHT - BUTTON_SIZE}px`,
                position: "absolute",
                left: "0px",
                top: `${BUTTON_SIZE + 1}px`,
                overflowX: "hidden",
                overflowY: "scroll"
            }
        }
    );
    let searchButton = el(
        "div",
        {
            title: "Search entries",
            "data-buttercup-role": "button",
            style: {
                width: `${BUTTON_SIZE}px`,
                height: `${BUTTON_SIZE}px`,
                position: "relative",
                display: "inline-block",
                cursor: "pointer",
                backgroundImage: `url(${ICON_SEARCH})`,
                backgroundSize: `${BUTTON_IMAGE_SIZE}px`,
                backgroundPosition: "center",
                backgroundRepeat: "no-repeat"
            }
        }
    );
    let saveButton = el(
        "div",
        {
            title: "Save next login",
            "data-buttercup-role": "button",
            style: {
                width: `${BUTTON_SIZE}px`,
                height: `${BUTTON_SIZE}px`,
                position: "relative",
                display: "inline-block",
                cursor: "pointer",
                backgroundImage: `url(${ICON_SAVE})`,
                backgroundSize: `${BUTTON_IMAGE_SIZE}px`,
                backgroundPosition: "center",
                backgroundRepeat: "no-repeat"
            }
        }
    );
    let container = el(
        "div",
        {
            "data-buttercup-role": "container",
            style: {
                border: "1px solid #000",
                borderRadius: "2px",
                left: `${position.x}px`,
                top: `${position.y}px`,
                position: "absolute",
                width: `${popupWidth}px`,
                height: `${HEIGHT}px`,
                backgroundColor: config.BACKGROUND_DARK_TRANSPARENT,
                overflow: "hidden",
                zIndex: 9999999
            }
        },
        el(
            "div",
            {
                "data-buttercup-role": "header",
                style: {
                    width: "100%",
                    height: `${BUTTON_SIZE}px`,
                    position: "absolute",
                    left: "0px",
                    top: "0px",
                    borderBottom: "1px solid rgba(0, 0, 0, 0.2)",
                    textAlign: "left"
                }
            },
            searchButton,
            saveButton
        ),
        list
    );
    // events
    popup.attachHoverEvents(searchButton);
    popup.attachHoverEvents(saveButton);
    return {
        root: container,
        list
    };
}

class Popup extends EventEmitter {

    constructor(loginForm) {
        super();
        this._form = loginForm;
        this._elements = null;
        this._removeListeners = null;
    }

    get elements() {
        return this._elements;
    }

    get open() {
        return this._elements !== null;
    }

    attachHoverEvents(element) {
        element.addEventListener("mouseenter", (event) => this.onButtonHover(event, true), false);
        element.addEventListener("mouseleave", (event) => this.onButtonHover(event, false), false);
    }

    close() {
        if (this._elements) {
            document.body.removeChild(this._elements.root);
        }
        if (this._removeListeners) {
            this._removeListeners();
        }
        this._elements = null;
        this._removeListeners = null;
    }

    getItemsForPage() {
        // return Promise.resolve([
        //     { title: "My login" },
        //     { title: "My login 2" },
        //     { title: "My login 3" },
        //     { title: "My login 4" },
        //     { title: "My login 5" },
        //     { title: "My login 6" },
        //     { title: "My login 7" }
        // ]);
        return matching.getItemsForCurrentURL();
    }

    onButtonHover(event, inside) {
        event.preventDefault();
        event.stopPropagation();
        let { target } = event;
        if (inside) {
            target.style.backgroundColor = `${config.BACKGROUND_BUTTERCUP_GREEN}`;
        } else {
            target.style.backgroundColor = "rgba(0, 0, 0, 0.0)";
        }
    }

    popup(position, width) {
        if (this._elements) {
            this.close();
        }
        setTimeout(() => {
            this._elements = createPopup(this, position, width);
            mount(document.body, this._elements.root);
            this.getItemsForPage().then(items => this.updatePageItems(items));
            let onClick = (e) => {
                if (this._elements && this._elements.root.contains(e.target)) {
                    e.stopPropagation();
                    return;
                }
                this.close();
            };
            document.body.addEventListener("click", onClick, false);
            this._removeListeners = () => document.body.removeEventListener("click", onClick, false);
        }, 50);
    }

    updatePageItems(items) {
        console.log("Items", items);
        this.elements.list.innerHTML = "";
        let listEl = el(
            "ul",
            {<commit_msg>Move popup icons and add title<commit_after>import {
    el,
    mount
} from "redom";
import { EventEmitter } from "events";

import matching from "./matching";
import config from "../common/config";

import ICON_SEARCH from "../common/images/search.png";
import ICON_SAVE from "../common/images/save.png";
import ICON_KEY from "../common/images/key.png";

const BUTTON_SIZE = 30;
const BUTTON_IMAGE_SIZE = 24;
const LIST_ITEM_HEIGHT = 28;
const MIN_WIDTH = 150;

function createPopup(popup, position, width, enableButtons = true) {
    const HEIGHT = 130;
    let popupWidth = Math.max(width, MIN_WIDTH),
        buttonStyle = enableButtons ? {} : {
            "-webkit-filter": "grayscale(1)",
            filter: "grayscale(1)"
        };
    let list = el(
        "div",
        {
            "data-buttercup-role": "listbox",
            style: {
                width: "100%",
                height: `${HEIGHT - BUTTON_SIZE}px`,
                position: "absolute",
                left: "0px",
                top: `${BUTTON_SIZE + 1}px`,
                overflowX: "hidden",
                overflowY: "scroll"
            }
        }
    );
    let searchButton = el(
        "div",
        {
            title: "Search entries",
            "data-buttercup-role": "button",
            style: {
                width: `${BUTTON_SIZE}px`,
                height: `${BUTTON_SIZE}px`,
                position: "relative",
                display: "inline-block",
                cursor: "pointer",
                backgroundImage: `url(${ICON_SEARCH})`,
                backgroundSize: `${BUTTON_IMAGE_SIZE}px`,
                backgroundPosition: "center",
                backgroundRepeat: "no-repeat",
                ...buttonStyle
            }
        }
    );
    let saveButton = el(
        "div",
        {
            title: "Save next login",
            "data-buttercup-role": "button",
            style: {
                width: `${BUTTON_SIZE}px`,
                height: `${BUTTON_SIZE}px`,
                position: "relative",
                display: "inline-block",
                cursor: "pointer",
                backgroundImage: `url(${ICON_SAVE})`,
                backgroundSize: `${BUTTON_IMAGE_SIZE}px`,
                backgroundPosition: "center",
                backgroundRepeat: "no-repeat",
                ...buttonStyle
            }
        }
    );
    let header = el(
        "div",
        {
            "data-buttercup-role": "header",
            style: {
                width: "100%",
                height: `${BUTTON_SIZE}px`,
                position: "absolute",
                left: "0px",
                top: "0px",
                borderBottom: "1px solid rgba(0, 0, 0, 0.2)",
                textAlign: "right"
            }
        },
        searchButton,
        saveButton
    );
    let title = el(
        "div",
        {
            "data-buttercup-role": "title",
            style: {
                fontFamily: "Buttercup-OpenSans",
                color: config.BUTTERCUP_GREEN,
                fontSize: "19px",
                position: "absolute",
                left: "5px",
                top: "2px"
            }
        },
        "Buttercup"
    );
    let container = el(
        "div",
        {
            "data-buttercup-role": "container",
            style: {
                border: "1px solid #000",
                borderRadius: "2px",
                left: `${position.x}px`,
                top: `${position.y}px`,
                position: "absolute",
                width: `${popupWidth}px`,
                height: `${HEIGHT}px`,
                backgroundColor: config.BACKGROUND_DARK_TRANSPARENT,
                overflow: "hidden",
                zIndex: 9999999
            }
        },
        title,
        header,
        list
    );
    // events
    popup.attachHoverEvents(searchButton);
    popup.attachHoverEvents(saveButton);
    return {
        root: container,
        list,
        header
    };
}

class Popup extends EventEmitter {

    constructor(loginForm) {
        super();
        this._form = loginForm;
        this._elements = null;
        this._removeListeners = null;
        this._archiveReady = false;
    }

    get elements() {
        return this._elements;
    }

    get hasArchiveReady() {
        return this._archiveReady;
    }

    get open() {
        return this._elements !== null;
    }

    attachHoverEvents(element) {
        element.addEventListener("mouseenter", (event) => this.onButtonHover(event, true), false);
        element.addEventListener("mouseleave", (event) => this.onButtonHover(event, false), false);
    }

    close() {
        if (this._elements) {
            document.body.removeChild(this._elements.root);
        }
        if (this._removeListeners) {
            this._removeListeners();
        }
        this._elements = null;
        this._removeListeners = null;
    }

    getItemsForPage() {
        // return Promise.resolve([
        //     { title: "My login" },
        //     { title: "My login 2" },
        //     { title: "My login 3" },
        //     { title: "My login 4" },
        //     { title: "My login 5" },
        //     { title: "My login 6" },
        //     { title: "My login 7" }
        // ]);
        return matching.getItemsForCurrentURL();
    }

    onButtonHover(event, inside) {
        event.preventDefault();
        event.stopPropagation();
        let { target } = event;
        if (inside) {
            target.style.backgroundColor = `${config.BACKGROUND_BUTTERCUP_GREEN}`;
        } else {
            target.style.backgroundColor = "rgba(0, 0, 0, 0.0)";
        }
    }

    popup(position, width) {
        if (this._elements) {
            this.close();
        }
        setTimeout(() => {
            this._elements = createPopup(this, position, width, this.hasArchiveReady);
            mount(document.body, this._elements.root);
            this.getItemsForPage().then(items => this.updatePageItems(items));
            let onClick = (e) => {
                if (this._elements && this._elements.root.contains(e.target)) {
                    e.stopPropagation();
                    return;
                }
                this.close();
            };
            document.body.addEventListener("click", onClick, false);
            this._removeListeners = () => document.body.removeEventListener("click", onClick, false);
        }, 50);
    }

    updatePageItems(items) {
        console.log("Items", items);
        this.elements.list.innerHTML = "";
        let listEl = el(
            "ul",
            {
{'fraction_non_alphanumeric': 0.13015771865540862, 'fraction_numerical': 0.008921459295841963, 'mean_word_length': 1.4440334825773797, 'pattern_counts': {'":': 12, '<': 3, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 2, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5730956', 'n_tokens_mistral': 3593, 'n_tokens_neox': 3438, 'n_words': 699}