print icon



  • am i missing something is there no icon to add to the address bar or sidebar to initiate print - theres a shortcut i think but a physical icon to click is better [imo]


  • Vivaldi Translator

    You can use JavaScript to add a button with the following code in the onClick handler:

    chrome.tabs.query({
        currentWindow: true,
        active: true
      },
      tabs => { vivaldi.utilities.print(tabs[0].id) });
    

    (You might need to replace currentWindow: true with lastFocusedWindow: true to get it to work properly when you have multiple windows, but I'm not 100 % sure.)



  • @Komposten - thanks

    humour me - do i just add that as a normal js mod - in which case i cannot get it to work or do i do it differently - just assume i know very little and go from there


  • Vivaldi Translator

    @adacom
    I don't have the energy to write a script at the moment, so you'll have to do with the following brief guide. If you're not experienced enough with JS/programming to figure it out, you'll have to wait for me or someone else to get time to write the script for you.

    1. Read this: https://forum.vivaldi.net/topic/10549/modding-vivaldi (especially the "Adding functionality" part).
    2. Write vivaldi://flags into the address bar and enable "Silent Debugging" and "Debugging for packed apps". This will allow you to inspect the Vivaldi UI by right-clicking it and choosing "Inspect".
    3. Choose a button, e.g. the reload button, and inspect it.
    4. Figure out a CSS selector you can use to access that button (e.g. .toolbar-addressbar .button-toolbar button[title~=Reload] for the reload button).
    5. Write a JavaScript function in custom.js that retrieves this button.
    6. Clone the button using JavaScript.
    7. Modify the clone to do and look like you want.
    8. Insert the clone somewhere in the UI using JavaScript.


  • @Komposten thanks - i may get nowhere but am prepared to try and fail or try and learn - so will attempt to follow your guide



  • @Komposten - well this seems a few steps too far for my knowledge - i have got nowhere - if you get time to write something it would be appreciated - if not thanks for the help



  • Try this

    (function(){
        function printPage() {
            chrome.tabs.query({
                currentWindow: true,
                active: true
              },
              tabs => { vivaldi.utilities.print(tabs[0].id) });
        }
    
        function printButton() {
            var toolbar = document.querySelector('.toolbar-addressbar.toolbar > .toolbar.toolbar-droptarget.toolbar-mainbar');
            var outer_div = document.createElement('div');
            outer_div.classList.add('button-toolbar', 'mod-print-page');
            outer_div.title = 'Print page';
            var print_button = document.createElement('button');
            print_button.onclick = printPage;
            // Icon from Icons8
            print_button.innerHTML = '<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M 7 4 C 6.448 4 6 4.448 6 5 L 6 7 L 24 7 L 24 5 C 24 4.448 23.552 4 23 4 L 7 4 z M 4 9 C 2.895 9 2 9.895 2 11 L 2 20 C 2 21.105 2.895 22 4 22 L 6 22 L 6 27 L 24 27 L 24 22 L 26 22 C 27.105 22 28 21.105 28 20 L 28 11 C 28 9.895 27.105 9 26 9 L 4 9 z M 8 15 L 22 15 L 22 25 L 8 25 L 8 15 z" /></svg>';
            outer_div.appendChild(print_button);
            toolbar.appendChild(outer_div);
        }
    
        setTimeout(function wait() {
            var toolbar = document.querySelector('.toolbar-addressbar.toolbar > .toolbar.toolbar-droptarget.toolbar-mainbar');
            if (toolbar) {
                printButton();
            }
            else {
                setTimeout(wait, 300);
            }
        }, 300);
    })();
    


  • @potmeklecbohdan - thanks that works a treat - is it possible to have it to the right of the address box - i have tried css and can create space on each side but not move it to the right - i may be missing the obvious

    would that be a change to the js to position it on whatever the area to the right of the address box is rather than the toolbar which i assume is the area to the left



  • @adacom

    (function(){
        function addStyle() {
            var style = document.createElement('style');
            style.innerHTML = `
    .button-toolbar.mod-print-page {
      display: inline-flex;
      align-items: center;
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      border: 0 solid rgba(0, 0, 0, 0);
      border-radius: 0;
      min-width: 34px;
      color: inherit;
      padding: 0;
      height: 34px;
      border-style: unset;
      justify-content: center;
    }`;
            document.head.appendChild(style);
        }
    
        function printPage() {
            chrome.tabs.query({
                currentWindow: true,
                active: true
              },
              tabs => { vivaldi.utilities.print(tabs[0].id) });
        }
    
        function printButton() {
            var addressbar = document.querySelector('.toolbar-addressbar.toolbar');
            var addressfield = document.querySelector('.toolbar-addressbar.toolbar .addressfield');
            var outer_div = document.createElement('div');
            outer_div.classList.add('button-toolbar', 'mod-print-page');
            outer_div.title = 'Print page';
            var print_button = document.createElement('button');
            print_button.onclick = printPage;
            // Icon from Icons8
            print_button.innerHTML = '<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M 7 4 C 6.448 4 6 4.448 6 5 L 6 7 L 24 7 L 24 5 C 24 4.448 23.552 4 23 4 L 7 4 z M 4 9 C 2.895 9 2 9.895 2 11 L 2 20 C 2 21.105 2.895 22 4 22 L 6 22 L 6 27 L 24 27 L 24 22 L 26 22 C 27.105 22 28 21.105 28 20 L 28 11 C 28 9.895 27.105 9 26 9 L 4 9 z M 8 15 L 22 15 L 22 25 L 8 25 L 8 15 z" /></svg>';
            outer_div.appendChild(print_button);
            if (addressfield.nextSibling)
                addressbar.insertBefore(outer_div, addressfield.nextSibling);
            else
                addressbar.appendChild(outer_div);
        }
    
        setTimeout(function wait() {
            var toolbar = document.querySelector('.toolbar-addressbar.toolbar > .toolbar.toolbar-droptarget.toolbar-mainbar');
            if (toolbar) {
                addStyle();
                printButton();
            }
            else {
                setTimeout(wait, 300);
            }
        }, 300);
    })();
    


  • @potmeklecbohdan - again thanks - am learning where js is concerned - not js itself thats a step too far for my brain but i did not realise it was possible to embed css - is that normal

    i had the correct call - .button-toolbar.mod-print-page and could move the icon up and down and create space at the side but not move it - i may be missing the obvious and will compare the js - maybe theres other changes as well as the addition of the css

    but again thanks - the help here is great and appreciated



  • @adacom said in print icon:

    i did not realise it was possible to embed css - is that normal

    Yes. No different to a html file with css in it instead of being imported from a separate .css file.

    I could be wrong about this, but the way i understand it is that the JS is essentially creating html/css on the fly that gets injected into the actual html file that is being used. That's why the html tags and css selectors are in there.

    Never could understand why though, rather than just having it in the html/css files directly.



  • @7twenty said:

    Never could understand why though, rather than just having it in the html/css files directly.

    This is a nice example — because we can then edit our favorite browser that has UI in HTML.



  • @luetage Yeah, the code/posts for wiping history should be splitted as the original thread was for print icon 🙂



  • @raed I flagged your post for moderation, it's cleaner if the posts are just moved.


  • Community Manager

    Thanks everyone for your input.
    The request for "Delete private data icon" has been moved to:
    https://forum.vivaldi.net/topic/39457/delete-private-data-icon


Log in to reply
 

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