Moving a panel button to the toolbar



  • I cobbled some JS together to move the History panel button to the toolbar next to the addressbar:

    // Move History button to toolbar 
    setTimeout(function wait() {
       var toolbar = document.querySelector("div.toolbar-addressbar.toolbar>div.toolbar");
       var historybutton = document.querySelector("button[title='History']");
          if (toolbar != null) {
             toolbar.appendChild(historybutton);
             historybutton.classList.add("button-toolbar");
             historybutton.firstElementChild.firstElementChild.setAttribute("d", "M13.8 9.4h-2.1v5l3.7 2.1 1.1-1.9-2.6-1.5V9.4");
             historybutton.firstElementChild.setAttribute("viewBox", "0 0 26 26");
             historybutton.firstElementChild.setAttribute("height", "26");
             historybutton.firstElementChild.setAttribute("width", "26");
          }
          else {
             setTimeout(wait, 300);
          }
    }, 300);
    

    The History button shows up OK:

    0_1538774519426_history-on.jpg

    When I click it, the History panel opens but, unfortunately, the button also disappears:

    0_1538775213081_history-hidden-highlight.jpg

    Clicking the gray "hole" toggles the panel closed (the desired behavior).

    Obviously, I goofed somewhere. Maybe I need to add new CSS. Also, if possible, I'd like the close toggle to close the panel toolbar as well as the panel.

    Anyone have any ideas?



  • If you want the panels container to toggle, you could just use the panel toggle script. Of course it will only show history, if you first select it in the panels container, but then the button will toggle history panel + panels container together.
    https://forum.vivaldi.net/topic/22835/panel-toggle-to-address-bar



  • I've cobbled together another bit of JS. This creates a new history button and thereby avoids the button's disappearing when clicked. It also closes the panel and the panel toolbar.

    // Add History button to toolbar
    
    setTimeout(function wait() {
        const toolbar = document.querySelector("div.toolbar-addressbar.toolbar>div.toolbar");
        const histbutton = document.createElement("button");
        histbutton.setAttribute("class", "history");
        histbutton.setAttribute("tabindex", "-1");
        histbutton.setAttribute("title", "View history");
        histbutton.classList.add("button-toolbar");
        histbutton.innerHTML = '<span><svg 
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M13 5c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 13.9c-3.2 0-5.9-2.6-5.9-5.9S9.8 7.1 13 7.1s5.9 2.6 5.9 5.9c0 3.2-2.7 5.9-5.9 5.9z"></path><path d="M13.8 9.4h-2.1v5l3.7 2.1 1.1-1.9-2.6-1.5V9.4"></path></svg></span>';
        histbutton.addEventListener("click", clickButton);
        if (toolbar != null) {
            toolbar.appendChild(histbutton);
        }
        else {
            setTimeout(wait, 300);
        }
    }, 300);
    
    function clickButton() {
        var historybutton = document.querySelector("button[title='History']");
        var paneltog = document.querySelector("button.paneltogglefooter.button-toolbar-small"); 
        if (paneltog.title.includes("Hide Panel")) {
            paneltog.click();
        }
        else {
           historybutton.click();
        }
    }


  • @luetage - anybody got this to work - nothing happens when i try it



  • @adacom The mod is somewhat superfluous now, since you can move the native paneltoggle up into the address bar. It still lacks 2 features compared to the the mod – moving parts and the ability to place it on right side.



  • @luetage - not understanding you - are you saying i can move the history button from the side panel to the address bar - if so i cannot see how - am i being slow?



  • @adacom The post you were replying to linked to the panel toggle mod. It has nothing to do with moving the history button.



  • @adacom, unfortunately, it will no longer work as written. I forget which release broke the script. Try this instead:

    // Add History button to toolbar
    
    setTimeout(function wait() {
        const toolbar = document.querySelector("div.toolbar-addressbar.toolbar>div.toolbar");
        const histdiv = document.createElement("div");
        const histbutton = document.createElement("button");
        histdiv.setAttribute("class", "button-toolbar");
        histbutton.setAttribute("class", "history");
        histbutton.setAttribute("tabindex", "-1");
        histbutton.setAttribute("draggable", "true");
        histbutton.setAttribute("title", "View history");
        histbutton.innerHTML = '<svg viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><rect x="12" y="8.5" width="2" height="5" rx="1" ry="1" style="transform-origin: center; transform: var(--timeHourRotation, rotate(130deg))"></rect><rect x="12" y="8" width="2" height="6" rx="1" ry="1" style="transform-origin: center; transform: var(--timeMinuteRotation, rotate(0deg))"></rect><path fill-rule="evenodd" d="M5 13C5 11.1401 5 10.2101 5.20445 9.44709C5.75925 7.37653 7.37653 5.75925 9.44709 5.20445C10.2101 5 11.1401 5 13 5C14.8599 5 15.7899 5 16.5529 5.20445C18.6235 5.75925 20.2408 7.37653 20.7956 9.44709C21 10.2101 21 11.1401 21 13C21 14.8599 21 15.7899 20.7956 16.5529C20.2408 18.6235 18.6235 20.2408 16.5529 20.7956C15.7899 21 14.8599 21 13 21C11.1401 21 10.2101 21 9.44709 20.7956C7.37653 20.2408 5.75925 18.6235 5.20445 16.5529C5 15.7899 5 14.8599 5 13ZM13 19C11.0113 19 10.4093 18.9828 9.96472 18.8637C8.58436 18.4938 7.50617 17.4156 7.1363 16.0353C7.01718 15.5907 7 14.9887 7 13C7 11.0113 7.01718 10.4093 7.1363 9.96472C7.50617 8.58436 8.58436 7.50617 9.96472 7.1363C10.4093 7.01718 11.0113 7 13 7C14.9887 7 15.5907 7.01718 16.0353 7.1363C17.4156 7.50617 18.4938 8.58436 18.8637 9.96472C18.9828 10.4093 19 11.0113 19 13C19 14.9887 18.9828 15.5907 18.8637 16.0353C18.4938 17.4156 17.4156 18.4938 16.0353 18.8637C15.5907 18.9828 14.9887 19 13 19Z"></path></svg>';
        histbutton.addEventListener("click", clickHistoryButton);
        if (toolbar != null) {
           toolbar.appendChild(histdiv);
           histdiv.appendChild(histbutton);
        }
        else {
            setTimeout(wait, 300);
        }
    }, 300);
    
    
    function clickHistoryButton() {
       const historybutton = document.querySelector("button[title='History']");
       const paneltoggle = document.querySelector("#browser > div.toolbar.toolbar-droptarget.toolbar-statusbar.toolbar-medium > div:nth-child(1) > button");
       var down = new PointerEvent('pointerdown', {
           bubbles: true,
           cancelable: true,
           pointerType: "mouse"
       });
       var up = new PointerEvent('pointerup', {
           bubbles: true,
           cancelable: true,
           pointerType: "mouse"
       });
       if (paneltoggle.title.includes("Hide Panel") && historybutton.classList.contains("active")) {
          paneltoggle.dispatchEvent(down);
          paneltoggle.dispatchEvent(up);
       }
       else {
          historybutton.click();
       }
    } 
    


  • @Tzedekh thanks - that certainly puts the button on the address bar but nothing happens when i click it - have tried it with the sidebar button on and off - is there something else i need to do



  • @adacom, I'm at a loss as to why it's not working. Are you using the latest release, 2.6.1566.49?



  • @Tzedekh It doesn't work with me because I don't use English.
    You should change the selector from document.querySelector("button[title='History']") to document.querySelector("#switch > button.history")



  • @tam710562 said in Moving a panel button to the toolbar:

    @Tzedekh It doesn't work with me because I don't use English.
    You should change the selector from document.querySelector("button[title='History']") to document.querySelector("#switch > button.history")

    Did that work for you? I tried your change, and it worked fine. Thanks. My way of doing it was a shorthand attempt to distinguish between the original History button on the panel strip and the newly created one next to the address bar. In retrospect, it was a careless approach. Sorry.



  • @Tzedekh I think it will work in all languages. In my case, if I use your selector it must be document.querySelector("button[title='Lịch sử truy cập']")



  • @tam710562 said in Moving a panel button to the toolbar:

    @Tzedekh It doesn't work with me because I don't use English.
    You should change the selector from document.querySelector("button[title='History']") to document.querySelector("#switch > button.history")

    hmmmm still nor working for me



  • @adacom, I'm afraid more ethnocentrism is at fault. In the clickHistoryButton() function is the bit "paneltoggle.title.includes("Hide Panel")." I was trying to ascertain which state the panel was in: open ("Hide Panel") or closed ("Show Panel"). There must be a better, language-neutral approach.



  • @adacom said in Moving a panel button to the toolbar:

    @tam710562 said in Moving a panel button to the toolbar:

    @Tzedekh It doesn't work with me because I don't use English.
    You should change the selector from document.querySelector("button[title='History']") to document.querySelector("#switch > button.history")

    hmmmm still nor working for me

    Try this:

    // Add History button to toolbar
    
    setTimeout(function wait() {
        const toolbar = document.querySelector("div.toolbar-addressbar.toolbar>div.toolbar");
        const histdiv = document.createElement("div");
        const histbutton = document.createElement("button");
        histdiv.setAttribute("class", "button-toolbar");
        histbutton.setAttribute("class", "history");
        histbutton.setAttribute("tabindex", "-1");
        histbutton.setAttribute("draggable", "true");
        histbutton.setAttribute("title", "View history");
        histbutton.innerHTML = '<svg viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><rect x="12" y="8.5" width="2" height="5" rx="1" ry="1" style="transform-origin: center; transform: var(--timeHourRotation, rotate(130deg))"></rect><rect x="12" y="8" width="2" height="6" rx="1" ry="1" style="transform-origin: center; transform: var(--timeMinuteRotation, rotate(0deg))"></rect><path fill-rule="evenodd" d="M5 13C5 11.1401 5 10.2101 5.20445 9.44709C5.75925 7.37653 7.37653 5.75925 9.44709 5.20445C10.2101 5 11.1401 5 13 5C14.8599 5 15.7899 5 16.5529 5.20445C18.6235 5.75925 20.2408 7.37653 20.7956 9.44709C21 10.2101 21 11.1401 21 13C21 14.8599 21 15.7899 20.7956 16.5529C20.2408 18.6235 18.6235 20.2408 16.5529 20.7956C15.7899 21 14.8599 21 13 21C11.1401 21 10.2101 21 9.44709 20.7956C7.37653 20.2408 5.75925 18.6235 5.20445 16.5529C5 15.7899 5 14.8599 5 13ZM13 19C11.0113 19 10.4093 18.9828 9.96472 18.8637C8.58436 18.4938 7.50617 17.4156 7.1363 16.0353C7.01718 15.5907 7 14.9887 7 13C7 11.0113 7.01718 10.4093 7.1363 9.96472C7.50617 8.58436 8.58436 7.50617 9.96472 7.1363C10.4093 7.01718 11.0113 7 13 7C14.9887 7 15.5907 7.01718 16.0353 7.1363C17.4156 7.50617 18.4938 8.58436 18.8637 9.96472C18.9828 10.4093 19 11.0113 19 13C19 14.9887 18.9828 15.5907 18.8637 16.0353C18.4938 17.4156 17.4156 18.4938 16.0353 18.8637C15.5907 18.9828 14.9887 19 13 19Z"></path></svg>';
        histbutton.addEventListener("click", clickHistoryButton);
        if (toolbar != null) {
           toolbar.appendChild(histdiv);
           histdiv.appendChild(histbutton);
        }
        else {
            setTimeout(wait, 300);
        }
    }, 300);
    
    
    
    
    function clickHistoryButton() {
       const historybutton = document.querySelector("#switch > button.history");
       const paneltoggle = document.querySelector("#browser > div.toolbar.toolbar-droptarget.toolbar-statusbar.toolbar-medium > div:nth-child(1) > button");
       const buttonpanel = document.querySelector("#panels");
       const panelstyle = getComputedStyle(buttonpanel);
       var down = new PointerEvent('pointerdown', {
           bubbles: true,
           cancelable: true,
           pointerType: "mouse"
       });
       var up = new PointerEvent('pointerup', {
           bubbles: true,
           cancelable: true,
           pointerType: "mouse"
       });
       if ((panelstyle.visibility == "visible") && historybutton.classList.contains("active")) {
          paneltoggle.dispatchEvent(down);
          paneltoggle.dispatchEvent(up);
       }
       else {
          historybutton.click();
       }
    } 
    
    


  • @Tzedekh said in Moving a panel button to the toolbar:

    @adacom said in Moving a panel button to the toolbar:

    @tam710562 said in Moving a panel button to the toolbar:

    @Tzedekh It doesn't work with me because I don't use English.
    You should change the selector from document.querySelector("button[title='History']") to document.querySelector("#switch > button.history")

    hmmmm still nor working for me

    Try this:

    // Add History button to toolbar
    
    setTimeout(function wait() {
        const toolbar = document.querySelector("div.toolbar-addressbar.toolbar>div.toolbar");
        const histdiv = document.createElement("div");
        const histbutton = document.createElement("button");
        histdiv.setAttribute("class", "button-toolbar");
        histbutton.setAttribute("class", "history");
        histbutton.setAttribute("tabindex", "-1");
        histbutton.setAttribute("draggable", "true");
        histbutton.setAttribute("title", "View history");
        histbutton.innerHTML = '<svg viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><rect x="12" y="8.5" width="2" height="5" rx="1" ry="1" style="transform-origin: center; transform: var(--timeHourRotation, rotate(130deg))"></rect><rect x="12" y="8" width="2" height="6" rx="1" ry="1" style="transform-origin: center; transform: var(--timeMinuteRotation, rotate(0deg))"></rect><path fill-rule="evenodd" d="M5 13C5 11.1401 5 10.2101 5.20445 9.44709C5.75925 7.37653 7.37653 5.75925 9.44709 5.20445C10.2101 5 11.1401 5 13 5C14.8599 5 15.7899 5 16.5529 5.20445C18.6235 5.75925 20.2408 7.37653 20.7956 9.44709C21 10.2101 21 11.1401 21 13C21 14.8599 21 15.7899 20.7956 16.5529C20.2408 18.6235 18.6235 20.2408 16.5529 20.7956C15.7899 21 14.8599 21 13 21C11.1401 21 10.2101 21 9.44709 20.7956C7.37653 20.2408 5.75925 18.6235 5.20445 16.5529C5 15.7899 5 14.8599 5 13ZM13 19C11.0113 19 10.4093 18.9828 9.96472 18.8637C8.58436 18.4938 7.50617 17.4156 7.1363 16.0353C7.01718 15.5907 7 14.9887 7 13C7 11.0113 7.01718 10.4093 7.1363 9.96472C7.50617 8.58436 8.58436 7.50617 9.96472 7.1363C10.4093 7.01718 11.0113 7 13 7C14.9887 7 15.5907 7.01718 16.0353 7.1363C17.4156 7.50617 18.4938 8.58436 18.8637 9.96472C18.9828 10.4093 19 11.0113 19 13C19 14.9887 18.9828 15.5907 18.8637 16.0353C18.4938 17.4156 17.4156 18.4938 16.0353 18.8637C15.5907 18.9828 14.9887 19 13 19Z"></path></svg>';
        histbutton.addEventListener("click", clickHistoryButton);
        if (toolbar != null) {
           toolbar.appendChild(histdiv);
           histdiv.appendChild(histbutton);
        }
        else {
            setTimeout(wait, 300);
        }
    }, 300);
    
    
    
    
    function clickHistoryButton() {
       const historybutton = document.querySelector("#switch > button.history");
       const paneltoggle = document.querySelector("#browser > div.toolbar.toolbar-droptarget.toolbar-statusbar.toolbar-medium > div:nth-child(1) > button");
       const buttonpanel = document.querySelector("#panels");
       const panelstyle = getComputedStyle(buttonpanel);
       var down = new PointerEvent('pointerdown', {
           bubbles: true,
           cancelable: true,
           pointerType: "mouse"
       });
       var up = new PointerEvent('pointerup', {
           bubbles: true,
           cancelable: true,
           pointerType: "mouse"
       });
       if ((panelstyle.visibility == "visible") && historybutton.classList.contains("active")) {
          paneltoggle.dispatchEvent(down);
          paneltoggle.dispatchEvent(up);
       }
       else {
          historybutton.click();
       }
    } 
    
    

    yes and no - it opens the history but unlike the sidebar one it does not close it when you click on it again - thats picky and no big deal - if its easy to fix then great if not then not a problem

    at a tangent would the same code work - modified obviously to move the download button - if i knew it was possible i would try to alter it


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.