Make editor hover less intrusive

[per1234]

Is your feature request related to a problem? Please describe.

The editor hover seems unnecessarily large. It covers up a lot of the code, which is especially annoying/distracting when it is triggered inadvertently.

---

---

Describe the solution you'd like

• Make the font size of the title the same as the editor font.
• Remove the unnecessary vertical padding from the title.

Environment

OS: Windows 10
Version: 2.0.0-beta.2-snapshot.298cc11
Date: 2021-02-15T14:16:52.603Z
CLI Version: 0.16.0 alpha [c977a238]

Additional context

I also notice there are some strange horizontal rules in the hover that don't have any alignment with the text.

Related: #51

[kittaakos]

Thanks for logging it. I have also noticed some UX issues. For example, when I want to get the context menu for a symbol, such as pinMode the overlay widget hides the symbol, and I cannot right-click on it. I did some investigation, and the change comes from the language server.

Let assume the following sketch and the <|> is the cursor position in the document:

/*
  Blink

  Turns an LED on for one second, then off for one second, repeatedly.

  Most Arduinos have an on-board LED you can control. On the UNO, MEGA and ZERO
  it is attached to digital pin 13, on MKR1000 on pin 6. LED_BUILTIN is set to
  the correct LED pin independent of which board is used.
  If you want to know what pin the on-board LED is connected to on your Arduino
  model, check the Technical Specs of your board at:
  https://www.arduino.cc/en/Main/Products

  modified 8 May 2014
  by Scott Fitzgerald
  modified 2 Sep 2016
  by Arturo Guadalupi
  modified 8 Sep 2016
  by Colby Newman

  This example code is in the public domain.

  http://www.arduino.cc/en/Tutorial/Blink
*/

// the setup function runs once when you press reset or power the board
void setup() {
  // initialize digital pin LED_BUILTI N as an output.
  pin<|>Mode(LED_BUILTIN, OUTPUT);
}

// the loop function runs over and over again forever
void loop() {
  digitalWrite(LED_BUILTIN, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);                       // wait for a second
  digitalWrite(LED_BUILTIN, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);                       // wait for a second
}

With Arduino Pro IDE 0.1.3 which uses the 9.x clangd here is the result for the textDocument/hover request:

{
  "range": {
    "startLineNumber": 28,
    "startColumn": 3,
    "endLineNumber": 28,
    "endColumn": 10
  },
  "contents": [
    {
      "value": "Declared in global namespace\n\nvoid pinMode\\(uint8\\_t pin, uint8\\_t mode\\)"
    }
  ]
}

And here is the result of the textDocument/hover request with the 0.1.4 (or new Arduino IDE) that uses clangd 12.x:

{
  "range": {
    "startLineNumber": 35,
    "startColumn": 3,
    "endLineNumber": 35,
    "endColumn": 10
  },
  "contents": [
    {
      "value": "### function `pinMode`  \n\n---\n→ `void`  \nParameters:  \n- `uint8_t pin`\n- `uint8_t mode`\n\n---\n```cpp\nvoid pinMode(uint8_t pin, uint8_t mode)\n```"
    }
  ]
}

New clangd provides a nice markdown, 9.x was just a string. We need to check how the markdown is shown in VS Code with the latest monaco. Maybe the hover issue is a generic Theia problem.

[kittaakos]

For example, when I want to get the context menu for a symbol, such as pinMode the overlay widget hides the symbol, and I cannot right-click on it.

This is an LS issue. See the returning range, it has "startLineNumber": 35, it should be 28. pinMode is in line 28 and not 35. The LS messes up the line numbers. That's why the overlay hover widget hides the symbol.

CC @cmaglie

[trlafleur]

Would be nice to be able to set the delay time prior to pop-up, it's now in my opinion way too short...

Mac 11.1
IDE 2.0.0b3

[pinnet]

the IDE is currently unusable as the pop ups just get in the way if you edit with the mouse.

[kittaakos]

the pop ups just get in the way if you edit with the mouse.

See here: arduino/arduino-language-server#68

[per1234]

Regarding these:

• Make the font size of the title the same as the editor font.
• Remove the unnecessary vertical padding from the title.

Some time back, Akos kindly helped me to understand this situation better. I forgot to post an update to the issue after that though so I will do that now:

The formatting for the hover text is provided by the clangd C++ language server used by the Arduino Language Server. For the example used here, it looks like this:

{
  "id": 11,
  "jsonrpc": "2.0",
  "result": {
    "contents": {
      "kind": "markdown",
      "value": "### function `pinMode`  \n\n---\n→ `void`  \nParameters:  \n- `uint8_t pin`\n- `uint8_t mode`\n\n---\n```cpp\nvoid pinMode(uint8_t pin, uint8_t mode)\n```"
    },
    "range": {
      "end": { "character": 9, "line": 34 },
      "start": { "character": 2, "line": 34 }
    }
  }
}

So the large font size of the first line of the hover results from the rendering of the H3 heading (as specified by the Markdown markup ###).

VS Code with the clangd extension produces an identical intrusive hover for C++ code: