Web Page preview

AltCode

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

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

@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.

tam710562

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

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

@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..

tam710562

@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

biruktes

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

@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

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

LonM

@biruktes This looks really neat. Good work!

barbudo2005

This post is deleted!

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:

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.

Catweazle

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

Seasonly

The preview is preferably for links on a page.

Seasonly

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

...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.

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:

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 ;}

Seasonly

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.