help with modifications please (bookmarks panel)
-
@adacom The errors shown when you open the console are normal… The last one is strange. Try writing (slowly to see return values of
chrome
etc.)chrome.storage.local.get(console.log)
and look at the return value below. If there's no error, press enter. Do you see a “tree” when you expand the top item (if there's any)? -
@potmeklecbohdan said in help with modifications please (bookmarks panel):
@adacom The errors shown when you open the console are normal… The last one is strange. Try writing (slowly to see return values of
chrome
etc.)chrome.storage.local.get(console.log)
and look at the return value below. If there's no error, press enter. Do you see a “tree” when you expand the top item (if there's any)?way out of my knowledge base - all i can do is post what i see
if i post the code above i get the initial error as stated
if i run it i get
VM433:1 Uncaught TypeError: Cannot read property 'local' of undefined at <anonymous>:1:16 (anonymous) @ VM433:1
if i click on VM433.1 that opens up sources and part of the 1st line is underlined in red - theres a red X at the end of that line - so i read that as the code is wrong in some way
chrome.storage .local.get('REG_PANEL_LIST', function (pl) {
the bold italic is the code underlined in a wavy red line
-
@adacom The storage is not available only for pages AFAIK. Just to make sure that you use the correct console:
- Go to
vivaldi://inspect/#apps
- Click the first “inspect”
- Go to Console tab
- Paste the code
- Go to
-
@potmeklecbohdan said in help with modifications please (bookmarks panel):
@adacom The storage is not available only for pages AFAIK. Just to make sure that you use the correct console:
- Go to
vivaldi://inspect/#apps
- Click the first “inspect”
- Go to Console tab
- Paste the code
Failed to load resource: net::ERR_FILE_NOT_FOUND urlbar-bundle.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND components-bundle.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND vendor-bundle.js:355 Promise from PrefsCache resolved in 62 ms vendor-bundle.js:355 Promise from WindowActions resolved in 21 ms vendor-bundle.js:355 Promise from vivaldiSettings resolved in 3 ms vendor-bundle.js:355 Promise from VivaldiFeatureFlags resolved in 1 ms vendor-bundle.js:355 Promise from SearchEngineActions resolved in 3 ms vendor-bundle.js:355 Promise from PanelActions resolved in 6 ms vendor-bundle.js:355 Promise from CommandActions resolved in 27 ms vendor-bundle.js:355 Promise from VivaldiAccountActions resolved in 241 ms vendor-bundle.js:355 Promise from SyncActions resolved in 243 ms vendor-bundle.js:355 Promise from NoteActions resolved in 217 ms vendor-bundle.js:355 Promise from PageActions resolved in 401 ms vendor-bundle.js:355 Promise from TrashActions resolved in 406 ms browser.html:1 Unchecked runtime.lastError: The message port closed before a response was received. vendor-bundle.js:355 Promise from BookmarkActions resolved in 537 ms vendor-bundle.js:355 Promise from HistoryActions resolved in 156 ms vendor-bundle.js:355 Promise from DownloadActions resolved in 0 ms bundle.js:1 JS init startup: 1110.468994140625ms
thanks for the help - i am [sort of] lost - hopefully thats correct
- Go to
-
@adacom That all (or something similar) shows every time you (or anyone) open the console, you can ignore it.
-
@potmeklecbohdan said in help with modifications please (bookmarks panel):
@adacom That all (or something similar) shows every time you (or anyone) open the console, you can ignore it.
you will have to humour me or is that hold my hand as i am lost
how does that help me get this to work
chrome.storage.local.get('REG_PANEL_LIST', function (pl) {
let lst = pl.REG_PANEL_LIST;
lst.forEach(function(panel) {
if (panel.id === "bookmarks")
panel.width = 34 + 50;
});
chrome.storage.local.set({REG_PANEL_LIST: lst});
})i am not really sure what i am expecting - if i get that to run then has that altered the code so tha bookmarks bar will be set to whatever width i choose and will it be that each time i open the browser or would it need to be run each boot up
i have no idea if what i am asking is even possible
-
@adacom The code @potmeklecbohdan wrote works. What you have to do is selecting "separate width" for bookmarks panel before pasting and running the code in console. And yeah, as long as you don't change the width of the panel manually it should survive restarts.
-
And just to showcase… this is what 84px looks like:
Spoiler
There's a reason why we have a minimum width – it assures that controls are still accessible.
-
@luetage said in help with modifications please (bookmarks panel):
@adacom The code @potmeklecbohdan wrote works. What you have to do is selecting "separate width" for bookmarks panel before pasting and running the code in console. And yeah, as long as you don't change the width of the panel manually it should survive restarts.
ok - i have no doubt it works - its just that i cannot get it working so i am either being stupid or missing the blindingly obvious
my step by step - tell me what i am doing wrong
1 - open vivaldy
2 - press F12 for dev console
3 - paste code as posted above - from your comment should i be modding the 34 + 50as soon as i post the code i get an error but i have tried ignoring it
4 - press enter - i get a new error message
so tell me what i cannot get my head round
-
@adacom Step 2 is wrong. You are not inspecting the UI…
https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools
Read carefully and follow directions to inspect UI.
edit: F12 doesn't work for inspecting UI, you have to right-click a clickable element in the UI (not webpage) and select "inspect".
-
@luetage thanks - see that on F12 and had tried it your way but all to no avail
if i click inspect in the bookmarks area i can see the panel is 220px wide in the elements and if i change that the width changes but i still cannot get the code to run so again
1 - open vivaldi with the dev switches [or whatever its called]
2- right click on the bookmarks area
3 - enter code into console - i get no errors
4 - press enter - nothing happens - i get the comment - undefined under the codei am being extremely stupid i think but i just dont see it
-
@adacom
undefined
is the expected outcome, we all get that. But the size does change, if you select "separate width" on the bookmarks panel icon with right click. -
@luetage said in help with modifications please (bookmarks panel):
@adacom
undefined
is the expected outcome, we all get that. But the size does change, if you select "separate width" on the bookmarks panel icon with right click.thanks for your [infinate] patience - so simple when you know how - i got there in the end - i knew of the separate width button but in was not obvious to press it - sometimes the blindingly obvious is not easy for someone new to a project
-
The help here is great so can i go back to my original list - i have tried but as yet got nowhere
how do i reduce the vertical spacing of items on the bookmarks bar
-
Screen No.1
Screen No.2
I noticed that if I use
.panel .vivaldi-tree .tree-row label img { margin-left: 0px !important
the margin-left value from both bookmarks (main level and sub level) change to the same value. Is there a way to decrease both values by a certain amount rather than giving both an absolute value. In this case for example I would like to decrease both by 32px so that Screen No.1 shows 16px and Screen No.2 shows 0px.
-
@Slim08 This example is to make the margin ½ of original (works only until 9th level — if you have more, you have to expand that) (in this case it'd be shorter when only one selector used for both (by removing
.expand-icon
and all first blocks of the pair)).I don't know why there's no way to decrease sizes (width, height, padding, margin, border etc.) easier with CSS…
/* The system should be: - top level: 0px/16px - nested bookmarks and non-expandable folders: +32px - nested expandable folders: +16px */ /* Top level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 16px"] { margin-left: 8px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 0px"] { margin-left: 0px !important; } /* Second level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 32px"] { margin-left: 16px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 16px"] { margin-left: 8px !important; } /* Third level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 48px"] { margin-left: 24px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 32px"] { margin-left: 16px !important; } /* Fourth level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 64px"] { margin-left: 32px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 48px"] { margin-left: 24px !important; } /* Fifth level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 80px"] { margin-left: 40px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 64px"] { margin-left: 32px !important; } /* Sixth level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 96px"] { margin-left: 48px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 80px"] { margin-left: 40px !important; } /* Seventh level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 112px"] { margin-left: 56px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 96px"] { margin-left: 48px !important; } /* Eighth level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 128px"] { margin-left: 64px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 112px"] { margin-left: 56px !important; } /* Ninth level */ .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > :not(.expand-icon):first-child[style*="margin-left: 144px"] { margin-left: 72px !important; } .panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 128px"] { margin-left: 64px !important; }
Edited
-
@potmeklecbohdan I appreciate your fast and comprehensive answer. I'm sorry for asking prematurely but I totally glanced over the fact that even sub folders are not shown correctly. Your code does exactly what I was asking for. By removing the expand icons to reduce the overall space on the left side it just messes too much other spacings up. I guess it is the same story as with tabs and their sizes and spacings. I solved it for me with this primitive workaround
.panel .tree-row { padding-left: 0px !important } .panel-group .panel.panel-bookmarks span.expand-icon { opacity: 0 !important }
that way all the tree spacings stay intact and I gain almost the amount of space that I wanted.
-
@Slim08 I think that could also be solved by adding
+ svg
at the end of every second (expandable folder) selector like this:.panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 0px"] { margin-left: 0px !important; }
will be
.panel-bookmarks .vivaldi-tree .tree-item .tree-row label > .expand-icon:first-child[style*="margin-left: 0px"] + svg { margin-left: 0px !important; }
-
@potmeklecbohdan To be honest I don't understand it fully but for some reason and with some tinkering I got it to work for me exactly how I like it - much better than what I ever could do.
Thx potmeklecbohdan.
-
if i understand this correctly the principal is redefining a setting that cannot be changed by 'normal' css - margin or padding etc - could this principal be used for the vertical spacing of items in the bookmarks panel which is said to be hard coded
.panel-bookmarks .vivaldi-tree .tree-item
.tree-row label > .expand-icon:first-child[style*="margin-left: 48px"] {
margin-left: 0px !important;
}is there a value in the bookmarks panel that controls the height as the one used here i.e.
.tree-row label > .expand-icon:first-child[style*="margin-left: 48px"]