Loading Instructor Panel HTML

Developers Ruby API
1

Hi there,

I’m seeing a strange thing when loading HTML into the Instructor Panel from an Extension I’m working on.

I have a simple CSS file, and an index.html file inside “instructor” directory at the root of my extensions own folder.

I am overriding getInstructorContentDirectory in my main.rb right after I initialise its main class

def getInstructorContentDirectory
	extension_path = __dir__ 
	instructor_path = File.join(extension_path, 'instructor')
	return instructor_path
 end

All good, or so it seems. My index HTML loads as expected into the Instructor Panel when my tool is activated. :party_popper:

With one exception! it won’t scroll?

Further investigation with the dev-tools, on the Instructor Panel reveals there is a second index.html file being loaded and it is creating an inline style on my body tag (overflow: hidden).

Where is this second index.html coming from? It’s not in my extension thats for sure? See image below.

CleanShot 2025-03-08 at 5 .27.20@2x
CleanShot 2025-03-08 at 5 .27.20@2x1524×526 54.5 KB

2

I think that’s normal. It’s the DOM version. It’s showing the current state of the html after your javascript did its thing.

3

I didn’t provide the JavaScript. I have no javascript in my document. I have no idea where that JS is coming from.

I have managed to fix it by amending my css, but it does not really make any sense to me how simply adding overflow-y:scroll !important to my css on the .body class made this mysterious javascript go away :man_shrugging:

4

Oh - I know it can dynamically display javascript… so that’s what your example appeared to be showing.

Maybe part of the Instructor?

Either way, I think that’s the DOM version and that’s how DevTools shows it… it’s not some errant copy of the .html trying to run wild and free in your computer.

5

It’s a strange one, as I copied the css from the instructor panel when the default select tool is selected, to best mimic native styling, and had to make this one change to the css body class to fix the scrolling issue. Yet the select tool instructor does not display this issue with the same css.

All good now anyway with this small change, just a bit baffled. And thanks for your input.

.body {
  font: 80% Helvetica, Arial, sans-serif;
  margin-right: 2em;
  margin-left: 2em;
  line-height: 1.25em;
  color: #4d5259;
  overflow-x: hidden;
  /* ONLY CHANGE TO FIX THE SCROLLING ISSUE */
  overflow-y: scroll !important;
}

.blacksubheader {
  font-size: 1.1em;
  font-weight: bold;
  color: #4d5259;
}

.blackheader {
  font-size: 1.5em;
  font-weight: bold;
  color: black;
}

ol {
  list-style-type: decimal;
  padding: 0;
  margin: 0;
  margin-left: 1.5em;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-left: 0.25em;
}

.bulletlist {
  list-style-type: disc;
  padding-left: 10px;
}

p {
  margin-bottom: 0;
}

a {
  color: #3399ff;
  text-decoration: none;
}

a:hover {
  color: #3399ff;
  text-decoration: underline;
}
6

I believe the instructor and HtmlDialogs use CEF. It is kind of weird with CEF that the user agent stylesheet is compiled into the CEF DLL. We cannot change it like we can for standalone browsers.

I’ve had similar issue with HtmlDialog content styles needing to use !important to override the compiled user agent stylesheet.

7

I looked at the Quirks Mode warning… looks like the index.html doesn’t have:

<!DOCTYPE html>

Not sure if you are using that. Or if it matters much. I don’t run anything in the Instructor, but in Html Dialogs I also sometimes use !important.

9

Yeah, I’m using:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

I’m going to accept its user agent styling that has to be overridden with important statement.

I just don’t get seeing the js in the inspector like that. But thats to understand in another life :thinking:

10

Yeah - have fun in there!

I did notice a couple little buggy things playing around with the Instructor…

Also, there may have been some change with the CEF version in SU '25 (I don’t know). But if the Instructor needs room to scroll, the scroll bar is in Dark Mode (as on my computer). Same with SU '25 Html Dialogs. I don’t think that was the case before.

11

Looking good :flushed_face:

One more hurdle to address (Licensing), I may be back in another thread :face_with_tears_of_joy:

CleanShot 2025-03-08 at 8 .01.28@2x
CleanShot 2025-03-08 at 8 .01.28@2x790×1586 254 KB

2 Likes
12

Off topic:
I don’t have these buttons: :wink: :innocent:

image
image530×205 41.8 KB

13

Yes, I keep forgetting about the dark side :new_moon_face:

2 Likes
14

Yea, and it weirdly said it was an HTML file displaying JS outside a <script> element.