さんだすメモ

さメモ

技術ブログでは、ない・・・

Vivaldi のタイトルバーを消す

Vivaldi javascript

★★★Vivaldi 6.0 以降は設定画面で表示/非表示を設定できます。★★★

したいこと

  • タイトルバーが不要なので消す
    • Vivaldi ボタンはアドレスバーに移動させる

すること

インストール場所でファイルを追加・編集します。

  • my_style.css の作成
    • タイトルバーを最大限消す
  • my_script.js の作成
    • Vivaldi ボタンをアドレスバーに移動する
  • browser.html の編集
    • 起動時に読み込むようにする

my_style.css

#header {
  min-height: auto;
}

#header > .tabless > .window-buttongroup {
  visibility: collapse;
}

.window-buttongroup は右上のウィンドウ操作のボタンたちです。

my_script.js

(function() {
  /**
    * Move the vivaldi button to the beginning of the toolbar
    * #app > #browser > #header > #titlebar > button.vivaldi
    * #app > #browser > #main > .UrlBar > .toolbar
    * #app > #browser > #main > .mainbar > .toolbar (220618)
    */

  const app = document.getElementById('app');

  // Create observer
  const observer = new MutationObserver(observerCallback);

  // Start
  observer.observe(app, {childList: true});

  // For debug
  let observerCount = 0;

  // Callback function
  function observerCallback(records) {
    // For debug
    observerCount++;
    console.log('observer:%s start', observerCount);
    console.log('observer:%s records.length:%s', observerCount, records.length);

    const vivaldiButton = document.querySelector('#titlebar button.vivaldi');
    const toolbar = document.querySelector('#main .mainbar .toolbar');
    // const toolbar = document.querySelector('#main .UrlBar .toolbar');

    if (vivaldiButton != null && toolbar != null) {
      // Create a buttonToolbar
      const buttonToolbar = document.createElement('div');
      buttonToolbar.className = 'button-toolbar';

      // Edit the vivaldi button and append it to the buttonToolbar
      vivaldiButton.style.height = '34px';
      vivaldiButton.classList.add('ToolbarButton-Button');
      vivaldiButton.classList.remove('vivaldi');
      buttonToolbar.appendChild(vivaldiButton);

      // Prepend the buttonToolbar to the toolbar
      toolbar.prepend(buttonToolbar);

      // End processing
      observer.disconnect();

      // For debug
      console.log('observer:%s disconnect', observerCount);
    }

    // For debug
    console.log('observer:%s end', observerCount);
  }

})();

動作としては、

  • #app について子要素の追加・削除を監視する
  • vivaldiButton と toolbar が追加されたら移動する

browser.html

  • <head> に <link rel="stylesheet" href="my_style.css" /> を追加する
  • <body> に <script src="my_script.js"></script> を追加する