edit terminal.js to full height of view port

[Yoda-Canada]

issue #2519:
The terminal port can't auto fit the height because the Browser can't get the size of the container. So I edit the terminal.js file and get the window's width and height, then calculate the row height and column width based on these data.
If the user has more than one screen, just refresh the screen, the terminal window will fit the new screen.
Before:

After:

Issue This PR Addresses

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[gitpod-io]

[humphd]

This will work, but it duplicates what we already have with https://www.npmjs.com/package/xterm-addon-fit. The right way to do this is to have the parent element that holds the terminal fill the available width and height, and then it will automatically use that. Can you fix our CSS for the page so that it does this?

[Yoda-Canada]

Okay, I will try to fix CSS. Actually I have checked some information about why the xterm-addon-fit command invalid. One explanation is that the container does not open until the browser has checked the size, so the xterm-addon-fit command is invalid. That is why I check windows' size first.

[Yoda-Canada]

@humphd I have edited the CSS ,and the terminal full height of view port. Please review it, thx.

[Andrewnt219]

This is not working. Reproduce

// terminal.js
terminal.write(`
  lorem
  ipsum
`);

The terminal should display the text on two lines, but it has glitchy text instead.

Maybe we can use vh instead of percentage?

[Yoda-Canada]

@Andrewnt219 You are right. I have changed it and please review.

[Andrewnt219]

I think vh is the correct way, but seem like we need to apply it on a different class or in combination with other class/classes.

In the picture, the text should go all the way to the bottom, but it turns to scroll at half the height.

[Yoda-Canada]

I deleted the position and width properties. I know why the text turns to scroll at half the height. I think you have two screen and you changed the screen from one to another. When we change the screen, we need to refresh it.

[Andrewnt219]

Yeah you're right.

[Andrewnt219]

These two doesn't seem to be necessary. vh should not be used for width as well.