Code view shows white screen in Firefox

[JoveToo]

The problem

Everywhere in the UI where there is a code view, I get a white screen. It does not seem to matter what the content is or where it appears. If I open the same link in Chrome, I get the actual code view (YAML, JS, ...). I cannot interact with the white screen.

Firefox 96.0 running on Fedora 35. All browser extensions disabled on the site.

Expected behavior

I expect to see a Code view.

Steps to reproduce

Browse to Thing, select a thing, click the "Code" tab.

Your environment

runtimeInfo:
  version: 3.1.1
  buildString: Release Build
locale: en-BE
systemInfo:
  configFolder: /etc/openhab
  userdataFolder: /var/lib/openhab
  logFolder: /var/log/openhab
  javaVersion: 11.0.14
  javaVendor: Red Hat, Inc.
  javaVendorVersion: "18.9"
  osName: Linux
  osVersion: 4.18.0-348.2.1.el8_5.x86_64
  osArchitecture: amd64
  availableProcessors: 2
  freeMemory: 91574376
  totalMemory: 254803968
bindings:
  - amazonechocontrol
  - astro
  - avmfritz
  - buienradar
  - knx
  - modbus
  - mqtt
  - ntp
  - samsungtv
  - snmp
  - systeminfo
  - zwave
clientInfo:
  device:
    ios: false
    android: false
    androidChrome: false
    desktop: true
    iphone: false
    ipod: false
    ipad: false
    edge: false
    ie: false
    firefox: true
    macos: false
    windows: false
    cordova: false
    phonegap: false
    electron: false
    nwjs: false
    webView: false
    webview: false
    standalone: false
    pixelRatio: 1.8181818181818181
    prefersColorScheme: dark
  isSecureContext: true
  locationbarVisible: true
  menubarVisible: true
  navigator:
    cookieEnabled: true
    deviceMemory: N/A
    hardwareConcurrency: 8
    language: en-US
    languages:
      - en-US
      - en
    onLine: true
    platform: Linux x86_64
  screen:
    width: 2112
    height: 1188
    colorDepth: 24
  support:
    touch: false
    pointerEvents: true
    observer: true
    passiveListener: true
    gestures: false
    intersectionObserver: true
  themeOptions:
    dark: dark
    filled: true
    pageTransitionAnimation: default
    bars: light
    homeNavbar: default
    homeBackground: default
    expandableCardAnimation: default
  userAgent: Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:96.0) Gecko/20100101 Firefox/96.0
timestamp: 2022-01-27T18:43:00.668Z

Browser console

new SSE connection: https://xxxx:8443/rest/events?topics=openhab/thin…hab/things/*/updated,openhab/things/*/status,openhab/inbox/*, 1 open app.js:32:454101
Array [ EventSource ]
app.js:32:454184
SSE connection closed: https://xxxx:8443/rest/events?topics=openhab/thin…hab/things/*/updated,openhab/things/*/status,openhab/inbox/*, 0 open app.js:32:454388
Array []
app.js:32:454474
Start tracking states app.js:37:2597
new SSE connection: https://xxxx:8443/rest/events/states, 1 open app.js:32:454101
Array [ EventSource ]
app.js:32:454184
Setting initial tracking list: [] app.js:37:3057
new SSE connection: https://xxxx:8443/rest/events?topics=openhab/things/*/*,openhab/links/*/*, 2 open app.js:32:454101
Array [ EventSource, EventSource ]
app.js:32:454184
Empty string passed to getElementById(). app.js:1:3784
Adding knx:device:e130d123:FF_BedroomFront_TemperatureAQS to code because it is extensible app.js:32:280134
Adding knx:device:e130d123:FF_BedroomFront_Humidity to code because it is extensible app.js:32:280134
Adding knx:device:e130d123:FF_BedroomFront_CO2 to code because it is extensible app.js:32:280134
Empty string passed to getElementById(). 34.app.js:77:4559

Browser network traffic

Additional information

[ghys]

Could you try with e.g. https://demo.openhab.org/settings/pages/layout/overview to see if it's a general problem or something with your particular configuration? I get no issues here (Debian). userAgent: Mozilla/5.0 (X11; Linux x86_64; rv:91.0) Gecko/20100101 Firefox/91.0. I'll note that you have a rather peculiar pixelRatio: 1.8181818181818181.

[JoveToo]

The demo website works fine. So it is particular to my installation? How do I diagnose what the problem is?

I have no idea what is the cause of the pixel ratio or what it is :).

[ghys]

You don't have anything in the environment or logs suggesting something's wrong. I don't think there was anything changed in the UI department from your 3.1.1 to the demo's 3.3.0 that is relevant to your issue. Sorry but you'll have to inspect the source of the page and figure out why that happens.

Inspect the HTML elements and see if they cover the entire page or if there's a problem. Clear your cache.

[JoveToo]

Perhaps I was unclear. Only the element is white, the rest of the screen is fine.

This is what I can export with the developer tools

Clearing the cache had no effect.

[ghys]

Do you see any difference at all when inspecting the page in the demo site that works and your instance?

[JoveToo]

The code editor fields has the "Overflow" label. Not sure what that is. This is the element that work:

This the element that doesn't.

The main difference I can see is that if I hover over the element that has class "CodeMirror-lines", it shows me the code area in the working one but only a line in the not working one. the element "CodeMirror-sizer" seems to be correct though.

Another difference is that in the non-working one, there is a label "Overflow" behind the "vue-codemirror code-editor-fit thing-code-editor" div (see my screenshot in the previous post).

[JoveToo]

In any case, if I keep opening divs, I can see the actual code lines in there. So the data is there, it is just not rendered correctly for some reason.

[ghys]

Maybe it's only the thing code editor that has an issue? Do you also have the issue on your instance with the page editor? (go to Settings > Pages, open e.g. Overview and switch to Code).

[JoveToo]

Yes, that is also blank.

[ghys]

Look for the "computed" CSS attributes of the element with the vue-codemirror class in both working & non-working and compare:

Another difference is that in the non-working one, there is a label "Overflow" behind the "vue-codemirror code-editor-fit thing-code-editor" div (see my screenshot in the previous post).

Not sure why that is. Anyways, if your 3.1.1 instance has the issue and demo.openhab.org 3.3.0 doesn't, it means either that:

• there's something fishy in your instance
• there was something in later versions that fixed it after all.

Can you try downloading and running the latest stable version (on the side) and see if the problem occurs? If everything's fine then it could be a good idea to upgrade. In any case even if we end up pinpointing the root cause you're not going to get a fix for 3.1.1.

[JoveToo]

It seems more likely to me there is something fishy with my instance. Since everything seems to work except the things where the editor is being used, perhaps we can look a bit deeper into that?

I have compared the calculated values and the only difference except the size of the elements is that the color for the chrome one is set to (0.0.0) and the firefox one (255.255.255) but I think that is because the firefox one has been set to the dark theme.

[JoveToo]

I am installing openhab through the dnf repository, not sure how I can easily upgrade that to 3.3.0...