Building buttons that move



  • Vivaldi is already WAAAYYY ahead of the competition. Can you imagine what this browser will evolve into 2 or 3 years from now?



  • @helmers
    I did not consider multiple instances of the buttons. That's why I wrote IDs.

    Does this performance issue occurs only on window creation, or all the time while the browser is running? If the former, a slightly longer loading time may not be even noticeable for the human eye.



  • I love reading Vivaldi's Tech Blogs...


  • Vivaldi Ambassador

    Great blog, thanks for sharing



  • @helmers said in Building buttons that move:

    @pauloaguia said in Building buttons that move:

    if I remove a button from the toolbar... is there any way to get it back other than resetting the toolbar and destroying all other customisations?

    Currently that is your only option. Given the limited number of buttons currently available, it is hopefully not too bad. In the future we will add more robust controls.

    And just in case this is not yet noticed: when removing all movable buttons from one of the corners you can not move any button back to this now button-empty corner.



  • Tried to move stop/reload to the right. Did not happen.



  • @AnrDaemon said in Building buttons that move:

    Tried to move stop/reload to the right. Did not happen.

    Unfortunately we are unable to do that just yet. Currently you can only move the buttons within the containers they are nestled in. So buttons on the left of the address bar as well as the left and right of the status bar can be reordered and interchanged in those areas only


  • Vivaldi Translator

    I love your work, and as always, I am eager to see the next step ! 🙂

    (and personally, what I'm waiting for, is to have custom button, and in particular, custom status fields. To add a clock here, the IP of the site there, etc.)



  • I've cloned the bookmarks and history buttons from the panel sidebar and placed them in the address bar, next to the home button. I'd like to be able to trigger the panel toggle button in the status bar when the bookmarks or history button is clicked to close the respective panel. I've tried doing it via the following function:

    function clickBookmarksButton() {
       var bmarksbutton = document.querySelector("#panels>#switch>button[title='Bookmarks']");
       var paneltoggle = document.querySelector("#browser>div.toolbar.toolbar-droptarget.toolbar-statusbar.toolbar-medium>div.panel-clickoutside-ignore.button-toolbar>button");
       if (paneltoggle.title.includes("Hide Panel") && bmarksbutton.classList.contains("active")) {
          paneltoggle.click();
       }
       else {
          bmarksbutton.click();
       }
    }
    

    I don't know why this doesn't work. I had successfully implemented the modification with virtually identical code in an older version of the browser, before you made the changes to enable movable buttons. I'm fairly new to JS, so I'm undoubtedly making a boneheaded rookie mistake.

    UPDATE: Before commenting, I probably should have read luetage's post above and helmers' response. At least I'm not going nuts -- there have been changes that render my previous function obsolete. Still, being a neophyte, I find the suggested approach at least a little over my head.


  • Vivaldi Team

    @goedl said in Building buttons that move:

    And just in case this is not yet noticed: when removing all movable buttons from one of the corners you can not move any button back to this now button-empty corner.

    That is a limitation of the implementation. Only buttons can be dragged, and only other buttons accept dropped buttons. Once the other components also understands drag-and-drop it will feel more natural.


  • Vivaldi Team

    @Nekomajin said in Building buttons that move:

    @helmers
    I did not consider multiple instances of the buttons. That's why I wrote IDs.

    Does this performance issue occurs only on window creation, or all the time while the browser is running? If the former, a slightly longer loading time may not be even noticeable for the human eye.

    Writing about performance is always risky, as many view performance as "that one thing that slows it down". There are sometimes such things. But most of the time performance is about doing as little work as possible. This is one of those things. The cost of an extra class name or attribute is tiny. But multiply that by 200 or more and there might be an impact.

    Our underlying React framework achieves its performance by re-using DOM components. When we make them more complex they are harder to reuse. Precisely where how the impact would be distributed in this case is hard to say. Probably it would be unnoticeable. The only thing I know for sure is that adding something has a higher performance cost than adding nothing.


  • Vivaldi Team

    @pauloaguia said in Building buttons that move:

    @helmers said in Building buttons that move:

    We could add .toolbar-button-navigation-reload. But internally we have no need for this. Adding things to the DOM is bad for performance.

    I can see how adding a bunch of new classes might impact performance due to a lookup to see if there was any definition for that class (or however CSS works)...
    But what about a custom attribute like data-btn-type="navigation-reload", or something like that? It would be ignored by the browser, but could still be used for modding, I think... There would still be some impact from parsing that attribute, when parsing the rest of the DOM, but that's probably negligible, no?
    (But I'm no browser developer, I'm just making wild guesses as to how things work on the inside)

    I'm sorry to say that cheating is not allowed! The engine is already very clever, so any attribute we add come with some overhead. But I may have overstated the cost of adding a class. They are not that bad. It is just that we have a lot of buttons, so there is quite a bit of volume.



  • @helmers
    I know what you mean, and personally I understand if you decide not to add class names. I am not a big modder, so for me, it's not a problem. I just wanted to know whether it would worth to experiment with it, or the overhead would be too much.



  • Another vote for button classes 😇 , it still makes up for current UI customization deficiencies, and is much more consistent overall, imho. One can currently work around (for example placing the mentioned reload button) using the order of elements in dom tree, but that's bound to break frequently on updates.



  • @luetage: How did you get the pointerdown and pointerup to work?





  • @luetage , thanks, that did the trick. To add a copy of the History button to the toolbar:

    // 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() {
       var historybutton = document.querySelector("button[title='History']");
       var paneltoggle = document.querySelector("#browser>div.toolbar.toolbar-droptarget.toolbar-statusbar.toolbar-medium>div.panel-clickoutside-ignore.button-toolbar>button");
       var down = new PointerEvent('pointerdown', {
           bubbles: true,
           cancelable: true,
           pointerType: "mouse",
           altKey: false
       });
       var up = new PointerEvent('pointerup', {
           bubbles: true,
           cancelable: true,
           pointerType: "mouse",
           altKey: false
       });
       if (paneltoggle.title.includes("Hide Panel") && historybutton.classList.contains("active")) {
          paneltoggle.dispatchEvent(down);
          paneltoggle.dispatchEvent(up);
       }
       else {
          historybutton.click();
       }
    } 
    

    Despite shameless plagiarism of your code, for the longest time I couldn't get it to work until I realized that I might try setting altKey to false.



  • @Tzedekh altKey false is the default, you might as well delete it.



  • I would like to move the icons of status bar to the left side web panel. Can you include this feature in the next version?


  • Moderator

    @zimmer If you think your problem can be solved by a missing feature, please add a request at Feature Requests forum.



 

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