Bookmarks - Start - Speed Dial Page - move History and Bookmarks Button/s
-
@potmeklecbohdan - that is absolutely brilliant - many thanks - just walked though adding the newtab button to the right of the address box - i might not understand js - but your help with this has given me all sorts of opportunities for customisation
@potmeklecbohdan said in Bookmarks - Start - Speed Dial Page - move History and Bookmarks Button/s:
@adacom said:
the print icon is to the right of the address bar and everytime i changed something and re loaded the browser i looked to the right of the address bar ans saw nothing
Ah, correct, I forgot about this.
with the changes from @tam710562 and the comment above i went back to the question i always ask or [nearly] always - what am i doing wrong - and the answer is the icon is on the left of the address bar - so sackcloth for me as i missed that and a couple of questions for you -
1 - is it possible to get it on the right as the print icon - or is it all about function and what goes where
Replace first line in
historyButton
function with these two:var addressbar = document.querySelector('.toolbar-addressbar.toolbar'); var addressfield = document.querySelector('.toolbar-addressbar.toolbar .addressfield');
and the last line (still in
historyButton
) with these four:if (addressfield.nextSibling) addressbar.insertBefore(outer_div, addressfield.nextSibling); else addressbar.appendChild(outer_div);
2 - what do the dots do - make it have an icon obviously - with them its there but no icon
It adds the classes with the dots (you can look at the HTML).
-
@potmeklecbohdan @tam710562 - maybe i expect too much and theres other things to consider - i just build a script for startpage following the above and it worked perfectly - so tried one for downloads and that does not work - it does not show the icon - think what i have done is right but theres something else i guess - something case sensitive on the word 'download' - have tried a few combinations to no avail - any thoughts
(function(){ function addStyle() { var style = document.createElement('style'); style.innerHTML = ` .button-toolbar.mod-downloads { display: inline-flex; align-items: center; background-color: white; background-repeat: no-repeat; background-position: 20% 80%; border: 0 solid rgba(0, 0, 0, 0); border-radius: 0; width: 34px !important; min-width: 34px; margin-bottom: 2px!important; margin-right: -10px !important; color: inherit; height: 20px; border-style: unset; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; border-left: 1px #ccc solid; border-right: 1px #ccc solid; justify-content: center; fill: #999; }`; document.head.appendChild(style); } function opendownloads() { chrome.tabs.create({url: "vivaldi://downloads/"}); } function downloadsButton () { 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-downloads'); outer_div.title = 'Downloaded Files'; var button = document.createElement('Button'); button.onclick = downloads; button.innerHTML = '<svg viewBox="-475 -275 1900 1900" xmlns="http://www.w3.org/2000/svg"><path d="M990,500c0,66.4-13,129.7-38.9,190.1c-25.9,60.4-60.8,112.5-104.6,156.3c-43.8,43.8-95.9,78.7-156.3,104.6C629.7,977,566.4,990,500,990c-73.2,0-142.7-15.4-208.6-46.3s-122.1-74.3-168.4-130.5c-3-4.3-4.4-9-4.1-14.4c0.2-5.3,2-9.7,5.4-13.1l87.4-88c4.3-3.8,9.6-5.7,16-5.7c6.8,0.9,11.7,3.4,14.7,7.7c31.1,40.4,69.1,71.7,114.2,93.8c45.1,22.1,92.9,33.2,143.6,33.2c44.2,0,86.5-8.6,126.6-25.8c40.2-17.2,75-40.5,104.3-69.9c29.3-29.3,52.6-64.1,69.9-104.3c17.2-40.2,25.8-82.4,25.8-126.6c0-44.2-8.6-86.5-25.8-126.6c-17.2-40.2-40.5-75-69.9-104.3c-29.3-29.3-64.1-52.6-104.3-69.9c-40.2-17.2-82.4-25.8-126.6-25.8c-41.7,0-81.7,7.6-119.9,22.6c-38.3,15.1-72.3,36.7-102.1,64.8l87.4,88c13.2,12.8,16.2,27.4,8.9,44c-7.2,17-19.8,25.5-37.6,25.5H50.8c-11.1,0-20.6-4-28.7-12.1S10,388.6,10,377.5V91.7c0-17.9,8.5-30.4,25.5-37.6c16.6-7.2,31.3-4.3,44,8.9l82.9,82.3c45.5-43,97.5-76.2,156-99.9C377,21.8,437.5,10,500,10c66.4,0,129.7,13,190.1,38.9c60.4,25.9,112.5,60.8,156.3,104.6c43.8,43.8,78.7,95.9,104.6,156.3S990,433.6,990,500L990,500z M581.7,316.3v285.8c0,6-1.9,10.8-5.7,14.7c-3.8,3.8-8.7,5.7-14.7,5.7H357.1c-6,0-10.8-1.9-14.7-5.7c-3.8-3.8-5.7-8.7-5.7-14.7v-40.8c0-6,1.9-10.8,5.7-14.7c3.8-3.8,8.7-5.7,14.7-5.7H500V316.3c0-6,1.9-10.8,5.7-14.7c3.8-3.8,8.7-5.7,14.7-5.7h40.8c6,0,10.8,1.9,14.7,5.7C579.8,305.4,581.7,310.3,581.7,316.3L581.7,316.3z" /></svg>'; outer_div.appendChild(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(); downloadsButton(); } else { setTimeout(wait, 300); } }, 300); })();
-
@adacom You try to assign
downloads
, but the function is calledopendownloads
… I'm also not sure ifdocument.createElement('**B**utton')
is correct.Edit: btw., if you want the “new tab” match your settings, try this as content of the “open new tab” function (maybe if it's controlled by extension it won't work, I didn't try it)
vivaldi.prefs.get("vivaldi.tabs.new_page.link", function(link) { switch (link) { case "startpage": case 0: chrome.tabs.create({url: "vivaldi://startpage"}); break; case "homepage": case 1: vivaldi.prefs.get("vivaldi.homepage", function(home) { chrome.tabs.create({url: home}); }); break; case "blankpage": case 2: chrome.tabs.create({url: "about:blank"}); break; case "extension": case 3: chrome.tabs.create({url: "chrome://newtab"}); break; case "custom": case 4: vivaldi.prefs.get("vivaldi.tabs.new_page.custom_url", function(url) { chrome.tabs.create({url: url}); }); break; } });
-
@potmeklecbohdan said in Bookmarks - Start - Speed Dial Page - move History and Bookmarks Button/s:
@adacom You try to assign
downloads
, but the function is calledopendownloads
… I'm also not sure ifdocument.createElement('**B**utton')
is correct.brilliant - thanks - i assumed downloads was correct as thats whats in the addressbar when downloads are shown - the fact that you knew that was wrong is that knowledge or is there a way of checking such things
tell me enough if you are fed up of my questions - certainly wont be offended
-
@adacom You named the function
opendownloads
so you need to callopendownloads
, and not onlydownloads
, no matter what's in the address field.Usually when I want/need/whatever to test a mod but don't want to mess with files I paste it into the devtools console (https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools (I have the falgs enabled permanently), console tab). Then you can also see all errors in it (though sometimes they come from Vivaldi and are just perfectly timed ).
-
@potmeklecbohdan said in Bookmarks - Start - Speed Dial Page - move History and Bookmarks Button/s:
@adacom You named the function
opendownloads
so you need to callopendownloads
, and not onlydownloads
, no matter what's in the address field.Usually when I want/need/whatever to test a mod but don't want to mess with files I paste it into the devtools console (https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools (I have the falgs enabled permanently), console tab). Then you can also see all errors in it (though sometimes they come from Vivaldi and are just perfectly timed ).
ahhhh i see - you had said earlier be careful with naming and make sure all are the same - so that was a mistake on my part - i completely missed that
-
more problems with snapshots - i create a history button on the address bar - in 'normal' builds when i click on the button it opens a tab and shows the history as a page
in the latest snapshots the same code opens a tab but the web page is blank - it shows vivaldi://history in the address bar and if i highlight that and press enter the history then shows
again my knowledge of js gets me nowhere - i wondered if it was timeout setting but playing with the numbers has not helped
any thoughts from the experts
(function(){ function addStyle() { var style = document.createElement('style'); style.innerHTML = ` .button-toolbar.mod-history { display: inline-flex; align-items: center; background-color: white; background-repeat: no-repeat; /* background-position: 50% 50%; */ /* border: 0 solid rgba(0, 0, 0, 0); */ /* border-radius: 0; */ width: 24px !important; min-width: 20px; margin-bottom: 2px!important; margin-right: -4px !important; /* color: inherit; */ height: 21px; /* border-style: unset; */ /* border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; border-left: 1px #ccc solid; */ border-right: 1px #ccc solid; justify-content: center; fill: #999; }`; document.head.appendChild(style); } function history() { chrome.tabs.create({url: "vivaldi://history/"}); } function historyButton () { 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-history'); outer_div.title = 'View History'; var button = document.createElement('Button'); button.onclick = history; button.innerHTML = '<svg viewBox="-700 -650 2150 2150" xmlns="http://www.w3.org/2000/svg"><path d="M990,500c0,66.4-13,129.7-38.9,190.1c-25.9,60.4-60.8,112.5-104.6,156.3c-43.8,43.8-95.9,78.7-156.3,104.6C629.7,977,566.4,990,500,990c-73.2,0-142.7-15.4-208.6-46.3s-122.1-74.3-168.4-130.5c-3-4.3-4.4-9-4.1-14.4c0.2-5.3,2-9.7,5.4-13.1l87.4-88c4.3-3.8,9.6-5.7,16-5.7c6.8,0.9,11.7,3.4,14.7,7.7c31.1,40.4,69.1,71.7,114.2,93.8c45.1,22.1,92.9,33.2,143.6,33.2c44.2,0,86.5-8.6,126.6-25.8c40.2-17.2,75-40.5,104.3-69.9c29.3-29.3,52.6-64.1,69.9-104.3c17.2-40.2,25.8-82.4,25.8-126.6c0-44.2-8.6-86.5-25.8-126.6c-17.2-40.2-40.5-75-69.9-104.3c-29.3-29.3-64.1-52.6-104.3-69.9c-40.2-17.2-82.4-25.8-126.6-25.8c-41.7,0-81.7,7.6-119.9,22.6c-38.3,15.1-72.3,36.7-102.1,64.8l87.4,88c13.2,12.8,16.2,27.4,8.9,44c-7.2,17-19.8,25.5-37.6,25.5H50.8c-11.1,0-20.6-4-28.7-12.1S10,388.6,10,377.5V9c0-17.9,8.5-30.4,25.5-37.6c16.6-7.2,31.3-4.3,44,8.9l82.9,82.3c45.5-43,97.5-76.2,156-99.9C377,21.8,437.5,10,500,10c66.4,0,129.7,13,190.1,38.9c60.4,25.9,112.5,60.8,156.3,104.6c43.8,43.8,78.7,95.9,104.6,156.3S990,433.6,990,500L990,500z M581.7,316.3v285.8c0,6-1.9,10.8-5.7,14.7c-3.8,3.8-8.7,5.7-14.7,5.7H357.1c-6,0-10.8-1.9-14.7-5.7c-3.8-3.8-5.7-8.7-5.7-14.7v-40.8c0-6,1.9-10.8,5.7-14.7c3.8-3.8,8.7-5.7,14.7-5.7H500V316.3c0-6,1.9-10.8,5.7-14.7c3.8-3.8,8.7-5.7,14.7-5.7h40.8c6,0,10.8,1.9,14.7,5.7C579.8,305.4,581.7,310.3,581.7,316.3L581.7,316.3z" /></svg>'; outer_div.appendChild(button); toolbar.appendChild(outer_div); } setTimeout(function wait() { var toolbar = document.querySelector('.toolbar-addressbar.toolbar > .toolbar.toolbar-droptarget.toolbar-mainbar'); if (toolbar) { addStyle(); historyButton(); } else { setTimeout(wait, 300); } }, 300); })();
-
@adacom Try
chrome://
in the URL. -
@potmeklecbohdan
thanks - that sort of works in that it displays the history rather than a white page but its different to the vivaldi display - i guess its the native chrome display??
the url in the address bar shows as vivaldi://history though
all over my head really
-
@adacom OK, I think I finally got it: change the URL to
chrome://vivaldi-webui/startpage?section=history
-
@potmeklecbohdan said in Bookmarks - Start - Speed Dial Page - move History and Bookmarks Button/s:
@adacom OK, I think I finally got it: change the URL to
chrome://vivaldi-webui/startpage?section=history
excellent thats perfect - for my knowledge - not that i will understand - well i might - where does the info come from to work that out
-
@adacom I just asked Vivaldi's Chromium what's the real URL (it surely isn't the best way, but it worked:
setTimeout(() => chrome.tabs.getAllInWindow(console.log), 1000)
(setTimeout because it returns tabs from focused window and I had to switch from devtools)) -
@Pesala thanks !
just did it -
<offtopic>
@raed said in Bookmarks - Start - Speed Dial Page - move History and Bookmarks Button/s:
A possible history icon:
Quick question @raed - is there a website you use for browsing & finding the svg code for various icons? It just dawned on me there has to be some useful galleries out there of svg code for icons, tiles, etc. I'm about to do a web search, but if you already have a site or few sites that you like I want to check them out as well.
Thanks,
BoneTone</offtopic>
-
@bonetone I've just searched my bookmarks (though I'm not raed ) and found these links
-
@potmeklecbohdan Thanks, I'll definitely be checking them out
@raed No worries, we all live in different places and live different lifestyles, forums are an asynchronous communication platform.
-