Steps to reproduce

1. Load https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color
2. Scroll down to the HTML Demo.
3. Click the red "Head" button.

Expected result

The color picker should appear near the red "Head" button (or at least centered in the screen or browser window).

Actual result

The color picker always opens near the upper-left corner of the browser window. See the attached screenshot. The color picker looks like it has the same Y coordinate as the browser window but its X position is indented a bit.

I have only tested Windows 10.

On macOS the system color picker appears wherever you last left it. By default it seems to be the lower left corner.

On Linux, the Gtk color picker is shown in the middle of the browser window.

On Windows, in Paint and Wordpad, the system color picker window is shown in the middle of the main app window. So it's probably reasonable to do the same for <input type=color> on Windows.

Unlike bug 1644337, this isn't a Fission regression.

BTW that position is the "default" position for a new child window on Windows, so in some sense it's reasonable to be shown there. It's also where the file picker dialog is shown (whether triggered by <input type=file> or Ctrl+O). The file picker dialog is shown in a similar position when you press Ctrl+O in Notepad and in Chrome.

If we wanted to change this, then it looks like we need to set the position of the NS_NATIVE_TMP_WINDOW window that is temporarily created to be the parent of the color picker.

I think this is low enough priority not to bother with. Eventually we'll probably have a custom color picker implementation that is tied more closely to the <input type=color> control itself.

This is quite visible with PDF.js editor (to change the color of the text/draw)