Vivaldi

  • Browser
  • Mail
  • News
  • Community
  • About

Navigation

    • Browser
    • Mail
    • News
    • Community
    • About
    • Register
    • Login
    • Search
    HomeBlogsForumHelpThemes
    • Home
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. Desktop
    3. Desktop Feature Requests
    4. Web Page preview

    Web Page preview

    Desktop Feature Requests
    web pages
    8
    30
    1779
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • AltCode
      AltCode last edited by pafflick

      Safari has this feature that allows web pages to be previewed by doing a three finger tap (or a force click) on any text that contains a link. I think it would be great if Vivaldi also supported this macOS feature.
      alt text

      When life gives you lemons, don't make lemonade. Make life take the lemons back! Get mad!

      1 Reply Last reply Reply Quote 11
      • biruktes
        biruktes last edited by biruktes

        A proposal for dialog tab Mod, shown below.
        0_1557245221044_Vivaldi Tab Dialog.png

        Buttons: (Any other design otherwise is fine, only for illustration)

        • Open in a new tab
        • Open in a new background tab

        Is such a mod possible?

        LonM 1 Reply Last reply Reply Quote 2
        • LonM
          LonM Moderator @biruktes last edited by

          @biruktes It might be possible as a mod.

          I could imagine such a feature would be very possible even as a regular chrome extension, never mind a mod.

          💻 Windows 10 64-bit Sopranos Builds • en-GB • 🗳 vote for features • 🕵️‍♀️ Code of Conduct • 🐞 Report bugs

          biruktes 1 Reply Last reply Reply Quote 0
          • tam710562
            tam710562 last edited by

            @biruktes I think it's feasible to create a mod
            It reminds me of extension ezLinkPreview

            1 Reply Last reply Reply Quote 0
            • biruktes
              biruktes @LonM last edited by biruktes

              @LonM @tam710562 Thanks. Yes, I usually use ezLinkPreview however its functionality is limited such as some sites require their own tab (youtube). So, a tab management mod (or may be in the future as a feature) would display tab that is usually displayed in a different page in the current page. In that way, the sites can enjoy their own tab, as well as the user, can stay in the context, while temporarily navigating.

              I will investigate how this can be implemented in Vivaldi. Currently, I suspect that the mod will purely deal with UI manipulations and tab management.

              If you know any directions or resources I could follow, it would be great.

              LonM tam710562 2 Replies Last reply Reply Quote 0
              • LonM
                LonM Moderator @biruktes last edited by

                @biruktes If you just want a static image, then maybe the the thumbnail generation system would work, though I haven't done very much modding with that.

                If you want a popup page you can interact with, I'd suggest using a <webview> tag - this is what's used internally instead of iframes to show tabs and panels..

                💻 Windows 10 64-bit Sopranos Builds • en-GB • 🗳 vote for features • 🕵️‍♀️ Code of Conduct • 🐞 Report bugs

                1 Reply Last reply Reply Quote 1
                • tam710562
                  tam710562 @biruktes last edited by

                  @biruktes You can create a <webview> tag located on the top of the UI. Currently Vivaldi's tabs and web panels are using it.
                  Documents provided by chrome https://developers.chrome.com/apps/tags/webview

                  1 Reply Last reply Reply Quote 2
                  • biruktes
                    biruktes last edited by

                    Here is initial working code

                    // Create a context menu item to call on link
                    createContextMenuOption();
                    
                    // Opens a link in a dialog like display in the current visible tab
                    function dialogTab(linkUrl) {
                        var webview = document.createElement("webview");
                        var divContainer = document.createElement("div");
                        webview.setAttribute("src", linkUrl);
                        webview.style.width = "80%";
                        webview.style.height = "85%";
                        webview.style.margin = "auto";
                        webview.style.overflow = "hidden";
                        webview.style.borderRadius = "10px";
                    
                        webview.addEventListener("loadstart", function () {
                             this.style.backgroundColor = "white";
                             this.style.fontSize = "10rem";
                             this.style.textAlign = "center";
                             this.style.fontStyle = "grey";
                             // May not be working
                             this.textContent = "Loading...";
                        });
                        webview.addEventListener("loadstop", function () {
                            this.textContent = "";
                        });
                    
                        divContainer.appendChild(webview);
                    
                        divContainer.setAttribute("class", "dialog-tab");
                        divContainer.style.zIndex = "1060";
                        divContainer.style.position = "fixed";
                        divContainer.style.top = "0";
                        divContainer.style.right = "0";
                        divContainer.style.bottom = "0";
                        divContainer.style.left = "0";
                        divContainer.style.backgroundColor = "rgba(0,0,0,.4)";
                    
                        const webpagecontainer = document.getElementsByClassName("active visible webpageview");
                        webpagecontainer[0].appendChild(divContainer);
                    
                        divContainer.style.transitionProperty = "background-color";
                        divContainer.style.transitionDuration = "0.1s";
                        divContainer.style.transitionTimingFunction = "ease";
                        divContainer.style.transitionDelay = "0s";
                    
                        divContainer.addEventListener("click", function () {
                            this.remove();
                        });
                    }
                    
                    // Creates context menu item for open in dialog tab
                    function createContextMenuOption() {
                        var option = {
                            "id": "dialog-tab",
                            "title": "Open Link in Dialog Tab",
                            "contexts": ["link"]
                        };
                    
                        chrome.contextMenus.create(option);
                    
                        chrome.contextMenus.onClicked.addListener(function (itemInfo) {
                            if (itemInfo.menuItemId === "dialog-tab") {
                                dialogTab(itemInfo.linkUrl);
                            }
                        });
                    }
                    

                    This code could do with lots of polishing and features such as search selection, ctrl + left or right mouse click. Anyway, I will keep the updates in this repo https://github.com/BirukTes/Dialog-Tab for now and perhaps update this post or create a new post for the official mod.

                    tam710562 LonM 2 Replies Last reply Reply Quote 4
                    • tam710562
                      tam710562 @biruktes last edited by

                      @biruktes I had problems displaying the context menu, so I deplay the function createContextMenuOption with this code

                      setTimeout(function wait() {
                        const browser = document.getElementById('browser');
                        if (browser) {    
                          // Create a context menu item to call on link
                          createContextMenuOption();
                        }
                        else {
                          setTimeout(wait, 300);
                        }
                      }, 300);
                      

                      I don't know if anyone but me has this problem

                      LonM 1 Reply Last reply Reply Quote 3
                      • LonM
                        LonM Moderator @tam710562 last edited by

                        @tam710562 It's always a good idea to delay mods like this until after vivaldi has finished fully loading.

                        💻 Windows 10 64-bit Sopranos Builds • en-GB • 🗳 vote for features • 🕵️‍♀️ Code of Conduct • 🐞 Report bugs

                        1 Reply Last reply Reply Quote 1
                        • LonM
                          LonM Moderator @biruktes last edited by

                          @biruktes This looks really neat. Good work!

                          💻 Windows 10 64-bit Sopranos Builds • en-GB • 🗳 vote for features • 🕵️‍♀️ Code of Conduct • 🐞 Report bugs

                          1 Reply Last reply Reply Quote 1
                          • barbudo2005
                            barbudo2005 last edited by

                            This post is deleted!
                            1 Reply Last reply Reply Quote 0
                            • S
                              Seasonly last edited by Seasonly

                              I think this interesting too. A light window that appears quickly and shows you what the link really is. It's a tab externalized to the window.

                              • It's a materialisation of our surprise on the moment, that's why the purpose of the window is to image and illustrate it just after reading the text of the link.
                              • Making a new tab opened in background for further reading instead, and a lot of the reason of the surprise has already disapeared.
                              • A normal new tab would disturb your tab bar, as it would disturb your current browsing plan.
                              • A large window opened all over the screen like your main one, and you loose the link with the background web page which stays the main browsering.

                              Contrary to a common window, this stays simple : no multitab, no visible user interface, keeps main window ratio but it's smaller to keep visible the main windows below whereas this one is made in foreground. I think it can be resizeable, and you can reattach it to the main window if you consider this for further reading. Elsewhere this is a normal tab where you can navigate. This tab probably would be naturally controlled by keyboard or mouse gesture interface available in Vivaldi.
                              Firefox has this kind of windows called Popup.

                              Contrary to the panel, we can see all links without predefining them, we have a desktop ratio like the main page, you can move the window on different screen to keep it on hands.

                              The call of this special previewing window could be with three taps, but I prefer using mousegesture on link, or better clicks : a long click, or a left and right ones. A bordering effect on the link could image this as for, text and image links could be clicked.

                              This could be also used through selection text instead of link click for this kind of search Quick Selection Bubble for Search Engine and Panel.

                              example:
                              1.jpg

                              1 Reply Last reply Reply Quote 0
                              • S
                                Seasonly last edited by Seasonly

                                The windows that I suggested is an active one, not only a passive image.

                                A way to call it could be to use what Vivaldi calls Rocker Gesture, that means that you click on the left button of the mouse, keep pressing it while you press the right.

                                I think a clicking solution is better that a mouse gesture call.

                                But this need that Vivaldi allows to Customize Rocker Gestures. Just now, the Rocker Gestures is only for historic managment, and more, you can't select buttons you will use and how you will use it.

                                1 Reply Last reply Reply Quote 0
                                • Catweazle
                                  Catweazle last edited by Catweazle

                                  The search engine Peekier has a page preview by default in the search result

                                  >Laptop Lenovo V145 15AST, AMD A9- 9425 Radeon R5 - 5 cores 3,1 GHz  RAM 8Gb, GPU 2+1 Gb SSD 256Gb -Win10 64 v22H2| Vivaldi last stable|

                                  👉 Vivaldi links👈 My Themes

                                  1 Reply Last reply Reply Quote 1
                                  • S
                                    Seasonly last edited by

                                    The preview is preferably for links on a page.

                                    1 Reply Last reply Reply Quote 0
                                    • S
                                      Seasonly last edited by Seasonly

                                      This is similar to what Wikipedia does to preview its links :

                                      2ef771b9-34ca-426e-8c9c-c62f5ad37c89-image.png
                                      ...But for all links and for every page. And more, you can lightly continue to browse into the active common popup window suggested.

                                      It is a question of unexpectedly cauterizing new branches of reading: either to denounce their interest, or to postpone the more in-depth reading later.
                                      As it stands, either these unexpected reads are rejected and unread, or they are rejected to a new tab in the background. The latter complicates the main navigation plan, the tab bar, and forces reading a posteriori for a subject that perhaps is not as interesting as we had thought. There is even a sense of futile going back, of bewilderment even when after having followed its main reading (and its own tree structure), it is necessary to return to this previously put aside tab.

                                      If hyperlink has made a third dimension to text and its 2D plan, I think this preview windows could be an easy way to concept an easy third dimension way of browsing.
                                      And also as a natural way. Does our mind works like this?

                                      • Link of your browsing plan => normal tab
                                      • A colateral link of you browsing plan => stacking tab
                                      • A new unexpected link for further reading => a new tab in background
                                      • A new unexpected link which is interesting => you break your browsing plan and get this link into a new tab in foreground like these two suggestions :Double-click a Link to Open a Tab in the Foreground, Any tab extensions that still work on center-click to open a tab in the foreground?
                                      • A new unexpected link which you don't know if it is interesting or not => this active preview window
                                      • A new unexpected link which you don't know if it is interesting or not but you want to quickly browse to this new thread to see what it is and to finish it (to avoid to loose your main browsing) => this active preview window
                                      • A new unexpected link to see or manage quickly something (because your curious, just a bit, because you have forgotten to do what the link suggests to do and decide to solve the forgotten thing (and get back to the main browsing) => this active preview window
                                      • A new unexpected link for tomorrow further reading => Pocket folder (you save it as a bookmark to read it tomorrow)

                                      Vivaldi has already all needs I think : the Rocker Gesture to call it, the mouse gesture to easy manage it (closing, get forward and backward into the historic of the popup windows), and I think a kind of popup window like firefox has already.
                                      This new way of browsing would need probably a new command (with mouse gesture for example) which order vivaldi to transform the preview window into a real tab attached to the main window. It would be useful to keep your secondary browsing thatyou did into this popup, if you'd have decided this page needs more attention.

                                      This preview windows, would probably reduce a lot the need of normal tab into the main windows.

                                      TheAMan006 1 Reply Last reply Reply Quote 1
                                      • barbudo2005
                                        barbudo2005 last edited by barbudo2005

                                        @Seasonly Use this extension: Iframe -Link Viewer.

                                        https://github.com/mataherry/iFrame/

                                        It works in every link. You put the cursor over a link and appears an icon. You click it and the frame appears:

                                        cf2240a9-d9cc-4dfe-a8cd-2733c16eac3e-image.png

                                        63557610-90da-4461-80b0-b056c8d14024-image.png

                                        42a21284-a331-4356-be87-f9548a32e696-image.png

                                        1 Reply Last reply Reply Quote 3
                                        • barbudo2005
                                          barbudo2005 last edited by barbudo2005

                                          @nomadic , @Ornorm

                                          When you finish reading the site you can click the X button or click outside the frame.

                                          This is my code to modify the frame:

                                          /*IFRAME LINK VIEWER*/
                                          
                                          iframe
                                          
                                          {border: 1.5px rgba(59, 129, 230, 0.75) solid !important;
                                          border-radius: 15px !important;}
                                          
                                          div#mataDiv
                                          
                                          {border: 1px  rgba(59, 129, 230, 1) solid !important;
                                          border-radius: 15px !important;
                                          margin-bottom: 1px !important;
                                          border-bottom: 1px !important;
                                          height: 666px!important;
                                          position: fixed !important;	
                                          padding-right: 0px !important;
                                          overflow-x: hidden !important;	
                                          overflow-y: hidden !important;}
                                          
                                          div#mataMover
                                          
                                          {background-color:  #17191a !important;
                                          height: 20px !important;
                                          width:200px !important;
                                          font-size: 16px !important;
                                          margin-right: 40px !important;
                                          margin-left: 20px !important; 
                                          padding-left: 0px !important;
                                          padding-right: 0px!important;}
                                          
                                          div#mataMover p
                                          
                                          {background-color:  #17191a !important;
                                          color: #d8d8d8 !important;
                                          height: 20px !important;
                                          max-width:200px !important;	
                                          font-size: 18px !important;
                                          margin-right: 0px !important;
                                          margin-left: 0px !important;}
                                          
                                          #mataMover p:hover
                                          
                                          {background-color:  #d8d8d8 !important;
                                          color: #820004 !important;
                                          height: 18px !important;
                                          max-width:200px !important;	
                                          font-weight: bold ! important;	
                                          font-size: 22px !important;
                                          margin-right: 0px !important;
                                          margin-left: 0px !important;}
                                          
                                          #mataDiv
                                          {background-color:  #17191a !important;}
                                          
                                          
                                          #mataBox, #mataSearch
                                          
                                          {background: transparent !important; 
                                          height: 26px !important ; 
                                          width: 26px !important; 
                                          border-style: solid !important;
                                          border-color: #cfcfcf !important;
                                          border-width: 1px !important ;
                                          box-sizing: content-box !important;
                                          cursor: pointer !important ;}
                                          
                                          

                                          c53fdae1-e3ef-4f57-a019-772615f7e05e-image.png

                                          1 Reply Last reply Reply Quote 2
                                          • S
                                            Seasonly last edited by

                                            Thanks. Is this not an exclusive Opera's add-on? I tried it on this browser. It's only a basic page preview using more iframe (that means a part of the web page). You can't really sub-browse the preview.

                                            From my side, on firefox, I use Foxy-gesture which is a firefox extension for mouse gestures, and its userscript part. I wrote a small and limited code (as I was able to), and I have to tell that I feel good using firefox popup (which is a real window) with left+right mouse click call on link (which is an only-mouse call) and mouse gesture for closing window/tab to destroy this popup and managing historic. It's very natural.

                                            Your example shows an "open tab in new tab" button that it is a bit the idea that you can toggle between popup-ing tab and rattaching popup to main window.

                                            I strongly believe that this should be a native feature since this is only the continuity of the click managment of link (open in this tab, open in a new tab foreground, background), and a way to manage colateral browsing pages. And also a tab managment detaching/rattaching tab.

                                            1 Reply Last reply Reply Quote 0
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            • Reply as topic
                                            Log in to reply
                                            • 1
                                            • 2
                                            • 1 / 2
                                            • First post
                                              Last post

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

                                            Copyright © Vivaldi Technologies™ — All rights reserved. Privacy Policy | Code of conduct | Terms of use | Vivaldi Status