inspecting the vivaldi ui with devtools

[luetage]

the guide

Resolves #9.

[code3z]

Thank you!

For the folder structure: we are using making-mods not basics (though I would be willing to change that) The assets folder goes at the project root directory (that was not very clear in CONTRIBUTING, though) Since there is only one assets folder, we should probably divide it up: I would say assets/screenshots but not sure what other people think.

README: you can add your file to the table of contents

[luetage]

Ok, gonna take a look at the issues.

[luetage]

Updated.

[ghost]

Thanks, I’ll hopefully have a look at it soon.

Since I’ve seen how you understand PRs (‘here you’ve got something; if you need it different, change it yourself’), I gotta ask you how much additional work you expect to do.

[luetage]

Well, what do you need? I cannot change something I don’t know about.

[ghost]

Oh, and could you point to the installation guide in element inspector, point 6?

[ghost]

Resolves #9, #13 and #14

Why oh why doesn’t GH detect all of them as being fixed? 🤷

[code3z]

@tiosgz This does not resolve First CSS mod and First JS mod! These two guides must be more than copy-and-pasting someone else’s code. Devtools guide is just to learn how to open devtools and execute a script - not to learn how to write your first mod.

I will start on First CSS mod after #15 is approved and merged. I can also do First JS mod if no one else wants to.

[luetage]

I don’t think you should write any guides about coding, you should rather start writing modifications to learn more about it yourself by doing. Heck, even I shouldn’t write guides about coding.

[code3z]

@luetage Yeah, someone else is welcome to do it.

But the good thing about having an amateur do it is, I know exactly what another beginner needs to know.

Before I start writing I will plan and make a simple mod (I’m thinking a start page button, but feel free to share any ideas).

Then I’ll teach the person how to make the mod, step by step, in such a way that they will be able to make simple mods on their own after completing the tutorial (and knowing JS/CSS of course).

[code3z]

Heck, even I shouldn’t write guides about coding.

I think you know what you’re doing 😉

[luetage]

By this logic I should write a guide about quantum physics. That’s bogus.

[code3z]

By this logic I should write a guide about quantum physics. That’s bogus.

What do you know about quantum physics?

Sorry if I wasn’t clear, I meant you need more knowledge than the person you’re teaching, but you shouldn’t be an expert.

[luetage]

You should be as knowledgeable as possible, or else you will spread half‐truths, your own bad habits and prejudice and cause confusion. I don’t know where you are getting this from, but it’s simply untrue. In most cases people will be far better off looking for coding advice elsewhere. This is also why I will do my best to prevent any guides not related to the intricacies of Vivaldi specifically. It doesn’t make sense.

[code3z]

I don’t agree but whatever.

[luetage]

Update, I’m done.

[luetage]

I saw that, it was 4 spaces originally like on the forum, when I reduced it to 2 spaces the images left the flow and were not aligned with the numbered lists. I reduced it to 3 spaces so it lines up with the numbered lists visually in a text editor.

On Saturday 05 June 2021 09:09:55 (+02:00), tiosgz wrote:

@tiosgz commented on this pull request.

In basics/inspecting-the-vivaldi-ui-with-devtools.md:

+

• ![Edit style][edit style screenshot]

• +5. Click on var(--colorAccentFg) (this is an example, the color could be

• different in your theme), press backspace, input red and press enter.
• This changes the font color, but only temporary (until reload). +6. Should you have the experiment for using CSS modifications enabled in
• vivaldi://experiments/, you can both access and edit your modification
• files in the developer tools. Click on the “Sources” tab and in the sidebar
• expand vivaldi-data and then css-mods. Click on your mod file, the
• contents will be shown right next to it. Since we know how Vivaldi changes
• the color of the active tab, we can use the same code in our file to
• overwrite Vivaldi’s instructions. Change the color to green this time and
• notice how the change is immediately visible.
• ![Edit file][edit file screenshot]

I said ‘2 spaces’, but let it be.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[ghost]

Aha, sorry for not being clear. I meant in the code in the screenshot.

[luetage]

Oh come on, that’s what the DevTools do when you hit TAB in the window. Now you’re being pedantic, it’s just an image. I’m not gonna change that.

[ghost]

Oh come on, that’s what the DevTools do when you hit TAB in the window. Now you’re being pedantic, it’s just an image. I’m not gonna change that.

Yeah, let it be. But FYI, you can change the indentation in the settings.

---

I guess you can redo the restructure again (sorry for the back&forth, for some reason I thought you would open #35 after this being merged). You may have to merge/rebase on master due to conflicts.

[ghost]

$ grep -nE '^.{81,}$' inspect.md
18:- Open **`vivaldi://settings/`** (in a **tab**), or **`vivaldi://experiments/`**,
21:- Enable “Show Introduction” for private windows in `vivaldi://settings/privacy/`.
46:1. Open DevTools and click the element picker button (mouse pointer) on top left.
68:   the “Sources” tab and in the sidebar expand `vivaldi-data` and then `css-mods`.

(took out 145, since that’s okay)

[ghost]

This does not resolve First CSS mod and First JS mod! These two guides must be more than copy-and-pasting someone else’s code. Devtools guide is just to learn how to open devtools and execute a script - not to learn how to write your first mod.

I will start on First CSS mod after #15 is approved and merged. I can also do First JS mod if no one else wants to.

I think that first mod/piece of code/whatever should be simple. Since you want those two guides to be something a bit different, I’ll fix the titles accordingly & unlink them from here.

[luetage]

Oh come on, that’s what the DevTools do when you hit TAB in the window. Now you’re being pedantic, it’s just an image. I’m not gonna change that.

Yeah, let it be. But FYI, you can change the indentation in the settings.

I guess you can redo the restructure again (sorry for the back&forth, for some reason I thought you would open #35 after this being merged). You may have to merge/rebase on master due to conflicts.

That’s merging hell, can I just do a fresh pull request?

[ghost]

If it helps you, I have no problem with that.

[ghost]

Replaced with #36.