"focus" class on terminal creates an empty rectangle

[ghokun]

Bug Description:

Terminal has an empty rectangle when focused.

Steps to Reproduce:

1. Run with: docker run -it --init -p 3000:3000 -v "$(pwd):/home/project:cached" theiaide/theia:latest
2. Open a browser and browse to :3000
3. Press Terminal -> New Terminal
4. Press anywhere on Terminal to focus

Additional Information

• Operating System:
  Running with docker image theiaide/theia:latest and theiaide/theia:next
  Browsing with Windows 10 Firefox Developer Edition, Edge
  Browsing with Mac OS Catalina Safari
• Theia Version: next, latest

[akosyakov]

I wonder whether it is the shell issue somehow or xtermjs. Usually it is a good idea to try to reproduce such issues outside of Theia with the system terminal or maybe in VS Code.

[ghokun]

Let me know how i can help.

[perrinjerome]

I could narrow down that this happens with xterm 4.8.1 and that it did not happen with 4.6.0 ( I have not tried versions in between )

It's really annoying because the rectangle moves as you type :

[ghokun]

Looks like 4.7.0 does not have this problem.

[perrinjerome]

isn't xtermjs/xterm.js#2996 (comment) the same thing ?

[akosyakov]

@perrinjerome it seems that xtermjs/xterm.js#2996 (comment) is a part of 4.8.1?

[ghokun]

I fixed my build with a resolutions block in package.json
https://github.com/ghokun/theia-cv/blob/master/package.json

[perrinjerome]

@akosyakov this problem started with 4.8.0

if I understood correctly, xtermjs uses a textarea for input methods and this textarea is the empty rectangle we can see here. With xterm's css, this textarea is supposed to be invisible with this opacity: 0 rule and also out of the screen with this left: -9999em; rule.

There's this rule in theia's css, which sets opacity: 1 for all :focus elements:

theia/packages/core/src/browser/style/index.css

Lines 145 to 151 in 9afc819

	:focus {
	outline-width: 1px;
	outline-style: solid;
	outline-offset: -1px;
	opacity: 1 !important;
	outline-color: var(--theia-focusBorder);
	}

That rule applies on xterm textarea, but with <= 4.7.0, it's was OK because the textarea was anyway outside of the screen with the left: -9999em rule.

The changes from xtermjs/xterm.js#2996 were about making the textarea appear next to the cursor, by setting the position with style attributes of the element, so it's now visible, because of theia's opacity rule.

xterm 4.7.0:

xterm 4.8.0:

Maybe theia does not need such a global rule as this :focus { opacity: 1!important } ?

theia/packages/core/src/browser/style/index.css

Line 149 in 9afc819

opacity: 1 !important;

at least if I disable this rule, everything seems OK with xterm 4.8.0.

[ghokun]

A similar rectangle occurs under mouse pointer, when right click is pressed in terminal area with xterm 4.7.0. (Could not capture the mouse pointer)

[vince-fugnitto]

A similar rectangle occurs under mouse pointer, when right click is pressed in terminal area with xterm 4.7.0. (Could not capture the mouse pointer)

The bug occurs for xterm context-menus in electron, it should be fixed once the following issue is implemented (a proper context-menu for terminals with the following menu items). In the meantime, perhaps we can prevent the display of the empty "context-menu" as shown in the screenshot.

• terminal: add context-menu #7632