Universal Web Panel Mod

oudstand

Maybe it's easier if you mix your previous version with the current one? A HTML page you can add as web panel that contains this code?

aminought

@oudstand My previous version had too many limitations. Why do you want this mix? Just to make this panel work with lazy loading?

oudstand

@aminought Yeah to use lazy loading and avoid to change the numbers if you change your web panels. Maybe it would be possible to achieve the same behavior as your current version but with having a fixed panel?

aminought

@oudstand I have another idea. Try this version: https://github.com/aminought/vivaldi-universal-web-panel/blob/panel_id/universal_web_panel.js.

Instead of BUTTON_NUMBER and WEBPANEL_BUTTON you should fill PANEL_ID with the name attribute of the panel button:

Is it working as expected?

oudstand

@aminought it works but only if your start the browser and the web panel was the last one open. Otherwise I've to disable lazy loading

aminought

@oudstand Fixed it! Try again, please: https://github.com/aminought/vivaldi-universal-web-panel/blob/panel_id/universal_web_panel.js. If everything is fine, I will merge it into the main branch.

oudstand

@aminought now it's working fine. Thank you!

aminought

UPD 2/11/2024:

Changed the way the mod is configured. Instead of using BUTTON_NUMBER and WEBPANEL_NUMBER, which don't work if lazy loading of web panels is enabled, you now need to specify PANEL_ID instead.
Updated the instructions for mod configuration.

oudstand

@aminought I've tested the mod on a different device and there the function get #panel() isn't working. The problem is that it queries webview[tab_id^="${PANEL_ID}"], but on this device the PANEL_ID isn't stored at tab_id but in vivaldi_view_type. I've updated the selector to this to support both verseions: webview[tab_id^="${PANEL_ID}"], webview[vivaldi_view_type^="${PANEL_ID}".

Also I've added a property USE_DEFAULT_ICON to always use the default icon, because I don't like the icon to be updated.

Maybe it's useful for you too.

(function universal_web_panel() {
  "use strict";

  const PANEL_ID = "WEBPANEL_7386ba5c-36af-495f-a850-8a7acbb242ac";

  const DEFAULT_TITLE = "Universal Web Panel";
  const DEFAULT_ICON = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgY2xhc3M9Imljb24iIHZpZXdCb3g9IjAgMCAyMC40OCAyMC40OCI+PGcgc3R5bGU9InN0cm9rZS13aWR0aDoxLjAwMDg2O3N0cm9rZS1kYXNoYXJyYXk6bm9uZSI+PHBhdGggZmlsbD0iI2Y5YzBjMCIgZD0iTTI0OS41IDcwMC42YzE0LjUgMTM1LjUgMTMyLjYgMjQxLjEgMjc2IDI0MS4xczI2MS41LTEwNS42IDI3Ni0yNDEuMXoiIHN0eWxlPSJzdHJva2Utd2lkdGg6MS4wMDA4NjtzdHJva2UtZGFzaGFycmF5Om5vbmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uODk0IC0uOTI0KSBzY2FsZSguMDIxNzQpIi8+PHBhdGggZmlsbD0iIzk5OSIgZD0iTTUxMiA5NTcuM2MtNzkuNiAwLTE1NC41LTI4LjctMjEwLjgtODAuOC01Ni41LTUyLjItODcuNi0xMjEuNy04Ny42LTE5NS43IDAtNTkuNyAyMC4yLTExNi41IDU4LjQtMTY0LjMgMzYuMi00NS4zIDg1LjQtNzguOCAxNDIuNi05Ny4xVjIwNi4xaC00Ni4xYy0xMS4yIDAtMjAuNC05LjEtMjAuNC0yMC40di0xNy4xYzAtMTEuMiA5LjEtMjAuNCAyMC40LTIwLjRoMjg3LjJjMTEuMiAwIDIwLjQgOS4xIDIwLjQgMjAuNHYxNy4xYzAgMTEuMi05LjEgMjAuNC0yMC40IDIwLjRoLTQ2LjF2MjEzLjRjNTcuMSAxOC4zIDEwNi4zIDUxLjggMTQyLjYgOTcuMSAzOC4yIDQ3LjggNTguNCAxMDQuNiA1OC40IDE2NC4zIDAgNzQtMzEuMSAxNDMuNS04Ny42IDE5NS43LTU2LjUgNTItMTMxLjQgODAuNy0yMTEgODAuN3pNMzY4LjQgMTYzLjJjLTMgMC01LjQgMi40LTUuNCA1LjR2MTcuMWMwIDMgMi40IDUuNCA1LjQgNS40aDYxLjF2MjM5LjVsLTUuMyAxLjZjLTU2LjUgMTctMTA1LjEgNDkuNC0xNDAuNSA5My43LTM2IDQ1LjEtNTUuMSA5OC43LTU1LjEgMTU0LjkgMCA2OS43IDI5LjQgMTM1LjMgODIuOCAxODQuN0MzNjUgOTE1IDQzNi4yIDk0Mi4zIDUxMiA5NDIuM3MxNDcuMS0yNy4zIDIwMC42LTc2LjhjNTMuNC00OS40IDgyLjgtMTE1IDgyLjgtMTg0LjcgMC01Ni4yLTE5LTEwOS44LTU1LjEtMTU0LjktMzUuNC00NC40LTg0LTc2LjgtMTQwLjUtOTMuN2wtNS4zLTEuNlYxOTEuMWg2MS4xYzMgMCA1LjQtMi40IDUuNC01LjR2LTE3LjFjMC0zLTIuNC01LjQtNS40LTUuNHoiIHN0eWxlPSJzdHJva2Utd2lkdGg6MS4wMDA4NjtzdHJva2UtZGFzaGFycmF5Om5vbmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uODk0IC0uOTI0KSBzY2FsZSguMDIxNzQpIi8+PHBhdGggZmlsbD0iIzk5OSIgZD0iTTIyMC43IDY3Ni44aDU4MS45djhIMjIwLjdabTE5Mi4zLTQ4NmgzOS42djhINDEzWm04Mi41IDBoMTA2LjF2OEg0OTUuNVoiIHN0eWxlPSJzdHJva2Utd2lkdGg6MS4wMDA4NjtzdHJva2UtZGFzaGFycmF5Om5vbmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uODk0IC0uOTI0KSBzY2FsZSguMDIxNzQpIi8+PHBhdGggZmlsbD0iI2NlMDIwMiIgZD0iTTQ1Mi43IDY0NS43Yy0xNCAwLTI1LjQtMTEuNC0yNS40LTI1LjQgMC0xNCAxMS40LTI1LjQgMjUuNC0yNS40IDE0IDAgMjUuNCAxMS40IDI1LjQgMjUuNCAwIDE0LTExLjQgMjUuNC0yNS40IDI1LjR6bTAtNDIuOWMtOS42IDAtMTcuNCA3LjgtMTcuNCAxNy40IDAgOS42IDcuOCAxNy40IDE3LjQgMTcuNCA5LjYgMCAxNy40LTcuOCAxNy40LTE3LjQgMC05LjYtNy44LTE3LjQtMTcuNC0xNy40em0xMTguOS00NmMtMjcuNiAwLTUwLjEtMjIuNS01MC4xLTUwLjFzMjIuNS01MC4xIDUwLjEtNTAuMSA1MC4xIDIyLjUgNTAuMSA1MC4xLTIyLjUgNTAuMS01MC4xIDUwLjF6bTAtOTIuMmMtMjMuMiAwLTQyLjEgMTguOS00Mi4xIDQyLjEgMCAyMy4yIDE4LjkgNDIuMSA0Mi4xIDQyLjEgMjMuMiAwIDQyLjEtMTguOSA0Mi4xLTQyLjEgMC0yMy4yLTE4LjktNDIuMS00Mi4xLTQyLjF6bS04MC40LTE0Ny45Yy0xNyAwLTMwLjgtMTMuOC0zMC44LTMwLjhzMTMuOC0zMC44IDMwLjgtMzAuOCAzMC44IDEzLjggMzAuOCAzMC44LTEzLjggMzAuOC0zMC44IDMwLjh6bTAtNTMuNmMtMTIuNiAwLTIyLjggMTAuMi0yMi44IDIyLjggMCAxMi42IDEwLjIgMjIuOCAyMi44IDIyLjggMTIuNiAwIDIyLjgtMTAuMiAyMi44LTIyLjggMC0xMi42LTEwLjItMjIuOC0yMi44LTIyLjh6bTUyLTE1MGMtMTIgMC0yMS43LTkuNy0yMS43LTIxLjdzOS43LTIxLjcgMjEuNy0yMS43IDIxLjcgOS43IDIxLjcgMjEuNy05LjcgMjEuNy0yMS43IDIxLjd6bTAtMzUuNGMtNy41IDAtMTMuNyA2LjEtMTMuNyAxMy43czYuMSAxMy43IDEzLjcgMTMuNyAxMy43LTYuMSAxMy43LTEzLjctNi4xLTEzLjctMTMuNy0xMy43eiIgc3R5bGU9InN0cm9rZS13aWR0aDoxLjAwMDg2O3N0cm9rZS1kYXNoYXJyYXk6bm9uZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLS44OTQgLS45MjQpIHNjYWxlKC4wMjE3NCkiLz48L2c+PC9zdmc+";
  const USE_DEFAULT_ICON = false;

  class UWP {
    #panelStackChangeObserver;
    #panelChangeObserver;

    constructor() {
      if (this.#panel) {
        this.#panelChangeObserver = this.#createPanelChangeObserver();
        this.#register();
      } else {
        this.#panelStackChangeObserver = this.#createPanelStackChangeObserver();
      }
    }

    #register() {
      this.#isVisible ? this.#registerVisible() : this.#registerInvisible();
    }

    #registerVisible() {
      if (!this.#input) {
        this.#createInputToolbarAndInput();
        this.#addInputEvents();
        this.#addWebviewEvents();
      }
      this.#focusInput();
      if (this.#isBlank) {
        this.#title = DEFAULT_TITLE;
        this.#buttonImg = DEFAULT_ICON;
      }
    }

    #registerInvisible() {
      console.log(this.#isBlank || USE_DEFAULT_ICON ? DEFAULT_ICON : this.#webview.src);
      this.#buttonImg = this.#isBlank || USE_DEFAULT_ICON ? DEFAULT_ICON : this.#webview.src;
    }

    // listeners

    #createPanelStackChangeObserver() {
      const panelStackChangeObserver = new MutationObserver((records) => {
        records.forEach(() => this.#handlePanelStackChange());
      });
      panelStackChangeObserver.observe(this.#panelStack, { childList: true });
      return panelStackChangeObserver;
    }

    #createPanelChangeObserver() {
      const panelChangeObserver = new MutationObserver((records) => {
        records.forEach(() => this.#handlePanelChange());
      });
      panelChangeObserver.observe(this.#panel, {
        attributes: true,
        attributeFilter: ["class"],
      });
      return panelChangeObserver;
    }

    #addInputEvents() {
      this.#input.addEventListener("input", () => this.#handleInput());
    }

    #addWebviewEvents() {
      this.#webview.addEventListener("contentload", () => {
        this.#showWebview();
        if (this.#isBlank) {
          this.#title = DEFAULT_TITLE;
          this.#buttonImg = DEFAULT_ICON;
        } else if (!USE_DEFAULT_ICON) {
          console.log('not use DEFAULT_ICON')
          this.#buttonImg = this.#webview.src;
        }
      });
    }

    // builders

    #createInputToolbarAndInput() {
      const input = this.#createInput();
      const inputToolbar = this.#createInputToolbar();
      inputToolbar.appendChild(input);
      this.#panel.appendChild(inputToolbar);
    }

    #createInputToolbar() {
      const inputToolbar = document.createElement("div");
      inputToolbar.className =
        "panel-universal-input toolbar-default full-width";
      inputToolbar.width = "100%";
      inputToolbar.style.height = "24px";
      inputToolbar.style.width = "100%";
      inputToolbar.style.height = "24px";
      inputToolbar.style.paddingRight = "1px";
      inputToolbar.style.marginTop = "2px";
      return inputToolbar;
    }

    #createInput() {
      const input = document.createElement("input");
      input.className = "universal-input";
      input.type = "text";
      input.placeholder = "Paste your link, html or javascript";
      input.style.width = "100%";
      input.style.height = "24px";
      input.style.padding = "10px";
      return input;
    }

    #createHtmlview() {
      const htmlview = document.createElement("div");
      htmlview.id = "htmlview";
      htmlview.style.height = "100%";
      htmlview.style.overflow = "auto";
      return htmlview;
    }

    // getters

    get #panelStack() {
      return document.querySelector(".webpanel-stack");
    }

    get #panel() {
      return document.querySelector(`webview[tab_id^="${PANEL_ID}"], webview[vivaldi_view_type^="${PANEL_ID}"`)
        ?.parentElement?.parentElement;
    }

    get #button() {
      return document.querySelector(`button[name="${PANEL_ID}"]`);
    }

    get #content() {
      return this.#panel.querySelector(".webpanel-content");
    }

    get #title() {
      return this.#panel.querySelector(".webpanel-title").querySelector("span");
    }

    get #htmlview() {
      return this.#panel.querySelector("#htmlview");
    }

    get #webview() {
      return this.#panel.querySelector("webview");
    }

    get #input() {
      return this.#panel.querySelector(".universal-input");
    }

    get #buttonImg() {
      return this.#button.querySelector("img");
    }

    get #isVisible() {
      return this.#panel.classList.contains("visible");
    }

    get #isBlank() {
      return this.#webview.src === "about:blank";
    }

    // setters

    set #title(title) {
      setTimeout(() => (this.#title.innerText = title), 100);
    }

    set #buttonImg(url) {
      this.#buttonImg.removeAttribute("srcset");
      const src =
        url && (url.startsWith("http://") || url.startsWith("https://"))
          ? `chrome://favicon/size/16@1x/${url}`
          : url;
      this.#buttonImg.setAttribute("src", src);
    }

    // handlers

    #handleInput() {
      const value = this.#input.value.trim();
      if (
        value.startsWith("http://") ||
        value.startsWith("https://") ||
        value.startsWith("file://") ||
        value.startsWith("vivaldi://") ||
        value === "about:blank"
      ) {
        this.#openUrl(value);
      } else if (value.startsWith("(()") && value.endsWith(")()")) {
        this.#executeScript(value);
      } else {
        this.#showHtml(value);
      }
      this.#clearInput();
    }

    #openUrl(url) {
      this.#showWebview();
      this.#webview.src = url;
    }

    #executeScript(script) {
      this.#showWebview();
      this.#webview.executeScript({ code: script });
    }

    #showHtml(html) {
      this.#hideWebview();
      if (!this.#htmlview) {
        const htmlview = this.#createHtmlview();
        this.#content.appendChild(htmlview);
      }
      this.#htmlview.innerHTML = html;
      this.#title = DEFAULT_TITLE;
      this.#buttonImg = DEFAULT_ICON;
    }

    #handlePanelStackChange() {
      if (this.#panel) {
        this.#panelChangeObserver = this.#createPanelChangeObserver();
        this.#register();
      }
    }

    #handlePanelChange() {
      if (this.#isVisible) {
        this.#registerVisible();
      }
    }

    // actions

    #showWebview() {
      if (this.#webview.style.display === "none") {
        this.#htmlview.remove();
        this.#webview.style.display = "";
      }
    }

    #hideWebview() {
      this.#webview.style.display = "none";
    }

    #clearInput() {
      this.#input.value = "";
    }

    #focusInput() {
      setTimeout(() => this.#input.focus(), 100);
    }
  }

  function getPanels() {
    return document.querySelector(".webpanel-stack");
  }

  function initMod() {
    const panels = getPanels();
    if (panels) {
      window.uwp = new UWP();
    } else {
      setTimeout(initMod, 500);
    }
  }

  setTimeout(initMod, 500);
})();

oudstand

@aminought said in Universal Web Panel Mod:

@oudstand Sure.

Open Page in Universal Web Panel

Open Link in Current Tab:
javascript:(() => {
    url = location.href;
    history.replaceState({}, "", location.href);
    html = document.documentElement.innerHTML;
    json = JSON.stringify({'url': url, 'html': html});
    setTimeout(() => {
        navigator.clipboard.writeText(json);
    }, 200);
})()
Focus Page

Delay: 300

Web Panel <n>

Delay: 100

Paste as Plain Text

Your Open Page in Universal Web Panel also works if you just call this in step 1 (at least for websites).

javascript: (() => {
  let url = window.location.href;
  history.replaceState({}, "", );
  setTimeout(() => {
    navigator.clipboard.writeText(url);
  }, 100);
})();

aminought

@oudstand I can't check this selector, but I've added it to the main branch along with the option to use the default icon. Thanks!

"Open Page in UWP" from my comment refers to the old version of UWP, which was shipped as an html page. Now I'm using the same script as yours.

aminought

UPD 2/12/2024:

Added an option to use only the default icon. @oudstand, thank you!
Also merged @oudstand's changes for cross-platform compatibility.
Added an item about the default icon to the instructions for mod configuration.

oudstand

@aminought glad you like the changes

oudstand

I've added an option to display a combobox to select your favorite websites for quick access. You can fill the FAVORITES array on top like this:
const FAVORITES = [{caption: "YouTube", url: "https://www.youtube.com"}, {caption: "Google", url: "https://www.google.com"}];
If FAVORITES is filled there will be a combobox next to the input:

/**
 * Inspired by @aminought
 * Forum link: https://forum.vivaldi.net/topic/94754/universal-web-panel-mod
 */
(function universal_web_panel() {
  "use strict";

  const PANEL_ID = "WEBPANEL_7386ba5c-36af-495f-a850-8a7acbb242ac";

  const DEFAULT_TITLE = "Universal Web Panel";
  const DEFAULT_ICON = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cdc8c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg>";
  const USE_DEFAULT_ICON = true;
  const FAVORITES = []; // [{caption: "YouTube", url: "https://www.youtube.com"}, {caption: "Google", url: "https://www.google.com"}]

  class UWP {
    #panelStackChangeObserver;
    #panelChangeObserver;

    constructor() {
      if (this.#panel) {
        this.#panelChangeObserver = this.#createPanelChangeObserver();
        this.#register();
      } else {
        this.#panelStackChangeObserver = this.#createPanelStackChangeObserver();
      }
    }

    #register() {
      this.#isVisible ? this.#registerVisible() : this.#registerInvisible();
    }

    #registerVisible() {
      if (!this.#input) {
        this.#createInputToolbarAndInput();
        this.#addInputEvents();
        FAVORITES && FAVORITES.length && this.#addComboboxEvents();
        this.#addWebviewEvents();
      }
      this.#focusInput();
      if (this.#isBlank) {
        this.#title = DEFAULT_TITLE;
        this.#buttonImg = DEFAULT_ICON;
      } else if (USE_DEFAULT_ICON) {
        this.#buttonImg = DEFAULT_ICON;
      }
    }

    #registerInvisible() {
      this.#buttonImg = this.#isBlank || USE_DEFAULT_ICON ? DEFAULT_ICON : this.#webview.src;
    }

    // listeners

    #createPanelStackChangeObserver() {
      const panelStackChangeObserver = new MutationObserver((records) => {
        records.forEach(() => this.#handlePanelStackChange());
      });
      panelStackChangeObserver.observe(this.#panelStack, { childList: true });
      return panelStackChangeObserver;
    }

    #createPanelChangeObserver() {
      const panelChangeObserver = new MutationObserver((records) => {
        records.forEach(() => this.#handlePanelChange());
      });
      panelChangeObserver.observe(this.#panel, {
        attributes: true,
        attributeFilter: ["class"],
      });
      return panelChangeObserver;
    }

    #addInputEvents() {
      this.#input.addEventListener("input", () => this.#handleInput(this.#input.value.trim()));
    }

    #addComboboxEvents() {
      this.#combobox.addEventListener("input", () => this.#handleInput(this.#combobox.value.trim()));
    }

    #addWebviewEvents() {
      this.#webview.addEventListener("contentload", () => {
        this.#showWebview();
        if (this.#isBlank) {
          this.#title = DEFAULT_TITLE;
          this.#buttonImg = DEFAULT_ICON;
        } else if (USE_DEFAULT_ICON) {
          this.#buttonImg = DEFAULT_ICON;
        } else {
          this.#buttonImg = this.#webview.src;
        }
      });
    }

    // builders

    #createInputToolbarAndInput() {
      const input = this.#createInput();
      const inputToolbar = this.#createInputToolbar();
      inputToolbar.appendChild(input);

      if(FAVORITES && FAVORITES.length) {
        const combobox = this.#createCombobox();
        inputToolbar.appendChild(combobox);
      }

      this.#panel.appendChild(inputToolbar);
    }

    #createInputToolbar() {
      const inputToolbar = document.createElement("div");
      inputToolbar.className =
        "panel-universal-input toolbar-default full-width";
      inputToolbar.width = "100%";
      inputToolbar.style.height = "24px";
      inputToolbar.style.width = "100%";
      inputToolbar.style.height = "28px";
      inputToolbar.style.padding = "0 2px";
      inputToolbar.style.marginTop = "2px";
      inputToolbar.style.display = "flex";
      inputToolbar.style.gap = "10px";
      return inputToolbar;
    }

    #createInput() {
      const input = document.createElement("input");
      input.className = "universal-input";
      input.type = "text";
      input.placeholder = "Paste your link, html or javascript";
      input.style.flex = 3;
      input.style.height = "28px";
      input.style.padding = "10px";
      return input;
    }

    #createCombobox() {
      const comboboxDropdown = document.createElement('select');
      comboboxDropdown.id = "combobox-dropdown";
      comboboxDropdown.className = "universal-combobox";
      comboboxDropdown.style.flex = 1;
    
      // Create a default option
      const defaultOption = document.createElement('option');
      defaultOption.textContent = "Favorites";
      defaultOption.selected = true;
      defaultOption.disabled = true;
      comboboxDropdown.appendChild(defaultOption);
    
      FAVORITES.forEach(favorite => {
        const option = document.createElement('option');
        option.value = favorite.url;
        option.textContent = favorite.caption;
        comboboxDropdown.appendChild(option);
      });
      
      return comboboxDropdown;
    }   

    #createHtmlview() {
      const htmlview = document.createElement("div");
      htmlview.id = "htmlview";
      htmlview.style.height = "100%";
      htmlview.style.overflow = "auto";
      return htmlview;
    }

    // getters

    get #panelStack() {
      return document.querySelector(".webpanel-stack");
    }

    get #panel() {
      return document.querySelector(`webview[tab_id^="${PANEL_ID}"], webview[vivaldi_view_type^="${PANEL_ID}`)
        ?.parentElement?.parentElement;
    }

    get #button() {
      return document.querySelector(`button[name="${PANEL_ID}"]`);
    }

    get #content() {
      return this.#panel.querySelector(".webpanel-content");
    }

    get #title() {
      return this.#panel.querySelector(".webpanel-title").querySelector("span");
    }

    get #htmlview() {
      return this.#panel.querySelector("#htmlview");
    }

    get #webview() {
      return this.#panel.querySelector("webview");
    }

    get #input() {
      return this.#panel.querySelector(".universal-input");
    }

    get #combobox() {
      return this.#panel.querySelector(".universal-combobox");
    }

    get #buttonImg() {
      return this.#button.querySelector("img");
    }

    get #isVisible() {
      return this.#panel.classList.contains("visible");
    }

    get #isBlank() {
      return this.#webview.src === "about:blank";
    }

    // setters

    set #title(title) {
      setTimeout(() => (this.#title.innerText = title), 100);
    }

    set #buttonImg(url) {
      this.#buttonImg.removeAttribute("srcset");
      const src =
        url && (url.startsWith("http://") || url.startsWith("https://"))
          ? `chrome://favicon/size/16@1x/${url}`
          : url;
      this.#buttonImg.setAttribute("src", src);
    }

    // handlers

    #handleInput(value) {
      if (
        value.startsWith("http://") ||
        value.startsWith("https://") ||
        value.startsWith("file://") ||
        value.startsWith("vivaldi://") ||
        value === "about:blank"
      ) {
        this.#openUrl(value);
      } else if (value.startsWith("(()") && value.endsWith(")()")) {
        this.#executeScript(value);
      } else {
        this.#showHtml(value);
      }
      this.#clearInput();
    }

    #openUrl(url) {
      this.#showWebview();
      this.#webview.src = url;
    }

    #executeScript(script) {
      this.#showWebview();
      this.#webview.executeScript({ code: script });
    }

    #showHtml(html) {
      this.#hideWebview();
      if (!this.#htmlview) {
        const htmlview = this.#createHtmlview();
        this.#content.appendChild(htmlview);
      }
      this.#htmlview.innerHTML = html;
      this.#title = DEFAULT_TITLE;
      this.#buttonImg = DEFAULT_ICON;
    }

    #handlePanelStackChange() {
      if (this.#panel) {
        this.#panelChangeObserver = this.#createPanelChangeObserver();
        this.#register();
      }
    }

    #handlePanelChange() {
      if (this.#isVisible) {
        this.#registerVisible();
      }
    }

    // actions

    #showWebview() {
      if (this.#webview.style.display === "none") {
        this.#htmlview.remove();
        this.#webview.style.display = "";
      }
    }

    #hideWebview() {
      this.#webview.style.display = "none";
    }

    #clearInput() {
      this.#input.value = "";
    }

    #focusInput() {
      setTimeout(() => this.#input.focus(), 100);
    }
  }

  function getPanels() {
    return document.querySelector(".webpanel-stack");
  }

  function initMod() {
    const panels = getPanels();
    if (panels) {
      window.uwp = new UWP();
    } else {
      setTimeout(initMod, 500);
    }
  }

  setTimeout(initMod, 500);
})();

aminought

UPD 2/13/2024

Added an option to display a combobox to select your favorite websites for quick access (adapted @oudstand's solution):
Added an option to set toolbar height: TOOLBAR_HEIGHT.
Added an option to set radius of the input field border: INPUT_BORDER_RADIUS.
Updated the description.

xef

i can't seem to get the panel to work, it just stays blank. i've followed the steps outlined i believe.

aminought

@xef Hi! Need more info:

OS.
Vivaldi version.
PANEL_ID.
Your <button> element. For example: <button name="WEBPANEL_f95dedab-84b7-4f35-b624-89740ba89ca2" ...></button>.
Your <webview> element. For example: <webview tab_id="WEBPANEL_f95dedab-84b7-4f35-b624-89740ba89ca2_328037443" name="vivaldi-webpanel" src="about:blank" style=""></webview>.

xef

<button name="WEBPANEL_e1c8dcb3-0549-4c58-a0b0-1280223c394b" draggable="false" tabindex="-1" title="about:blank" type="button" class="ToolbarButton-Button uifocusstop" style="--activeButton: 1;"><img class="button-icon favicon" width="16" height="16" srcset="chrome://favicon/size/16@1x/about:blank 1x,chrome://favicon/size/16@2x/about:blank 2x"></button>

<webview name="vivaldi-webpanel" src="about:blank"></webview>

aminought

@xef OS, Vivaldi version? It should work with the latest snapshot. I cannot guarantee it will work with previous versions.

xef

6.5.3206.63 (Stable channel) stable (64-bit) Linux