replace all selects

options_ui/css/context_menu.css

@@ -13,7 +13,7 @@
   gap: 4px;
 }
 
-.context_menu_parts {
+#context_menu_parts {
   background-color: var(--background-color);
   color: var(--color);
   height: var(--option-height);
@@ -25,7 +25,7 @@
   font-family: var(--font-family);
 }
 
-.context_menu_parts > option {
+#context_menu_parts > option {
   font-family: var(--font-family);
 }
 
@@ -35,12 +35,12 @@
   box-shadow: 0px 0px 8px 1px var(--color);
 }
 
-.context_menu:not(:has(select[data-value="inheritance_off"]))
+.context_menu:not(:has(div[data-value="inheritance_off"]))
   .option_inherit_from_off {
   display: none;
 }
 
-.context_menu:not(:has(select[data-value="own_color"]))
+.context_menu:not(:has(div[data-value="own_color"]))
   .option_source_own_color {
   display: none;
 }

options_ui/css/dropdown.css

@@ -10,13 +10,17 @@
   background-color: color-mix(in srgb, currentColor 13%, transparent);
 }
 
+.dropdown:hover {
+  background-color: color-mix(in srgb, currentColor 17%, transparent);
+}
+
 .dropdown_arrow {
-  height: 60%;
-  color: var(--color);
+  white-space: nowrap;
 }
 
-.dropdown:hover {
-  background-color: color-mix(in srgb, currentColor 17%, transparent);
+.dropdown_arrow {
+  height: 60%;
+  color: var(--color);
 }
 
 .dropdown_popup {
@@ -33,6 +37,7 @@
   border-radius: var(--radius);
   box-shadow: 0px 0px 8px 1px var(--color);
   background-color: var(--background-color);
+  white-space: nowrap;
 }
 
 .dropdown_item:hover {

options_ui/js/context_menu.js

@@ -1,7 +1,9 @@
-import { addStringOptions, positionByCoords } from "./utils/html.js";
 import { ContextMenuOptionsBuilder } from "./context_menu_options_builder.js";
+import { DropdownPopup } from "./dropdown/dropdown_popup.js";
 // eslint-disable-next-line no-unused-vars
 import { Options } from "../../shared/options.js";
+import { createStringDropdown } from "./dropdown/dropdown_utils.js";
+import { positionByCoords } from "./utils/html.js";
 
 export class ContextMenu {
   /**
@@ -44,27 +46,27 @@ export class ContextMenu {
    * @returns {HTMLSelectElement}
    */
   #createPartsElement() {
-    const partsElement = document.createElement("select");
-    partsElement.className = "context_menu_parts";
-    addStringOptions(partsElement, this.parts);
-
-    [partsElement.value] = this.parts;
+    const partsDropdown = createStringDropdown(
+      "context_menu_parts",
+      this.parts,
+      DropdownPopup.POSITION.below
+    );
+    [partsDropdown.value] = this.parts;
 
-    partsElement.onchange = (event) => {
-      event.stopPropagation();
+    partsDropdown.onChange = (value) => {
       this.wrapper.removeChild(this.partOptionsElement);
       const optionsBuilder = new ContextMenuOptionsBuilder(
         this.options,
         this.parent,
-        partsElement.value,
+        value,
         () => this.reposition()
       );
       this.partOptionsElement = optionsBuilder.createPartOptionsElement();
       this.wrapper.appendChild(this.partOptionsElement);
       this.reposition();
     };
 
-    return partsElement;
+    return partsDropdown.element;
   }
 
   /**

options_ui/js/context_menu_options_builder.js

@@ -1,13 +1,14 @@
 import {
-  addNumberOptions,
-  addStringOptions,
-  setBackgroundColor,
-} from "./utils/html.js";
+  createNumberDropdown,
+  createStringDropdown,
+} from "./dropdown/dropdown_utils.js";
 import { BrowserParts } from "../../shared/browser_parts.js";
 import { ColorPicker } from "./color_picker.js";
+import { DropdownPopup } from "./dropdown/dropdown_popup.js";
 import { Localizer } from "./utils/localizer.js";
 import { Options } from "../../shared/options.js";
 import { PopupController } from "./popup_controller.js";
+import { setBackgroundColor } from "./utils/html.js";
 
 export class ContextMenuOptionsBuilder {
   /**
@@ -54,11 +55,11 @@ export class ContextMenuOptionsBuilder {
       ["option"],
       "inheritFrom",
       (inputId, value) =>
-        this.#createSelectElement(partKey, inputId, value, (inputElement) =>
-          addStringOptions(
-            inputElement,
-            BrowserParts.getInheritances(this.part)
-          )
+        this.#createStringDropdownElement(
+          partKey,
+          inputId,
+          BrowserParts.getInheritances(this.part),
+          value
         )
     );
   }
@@ -74,8 +75,11 @@ export class ContextMenuOptionsBuilder {
       ["option", "option_inherit_from_off"],
       "source",
       (inputId, value) =>
-        this.#createSelectElement(partKey, inputId, value, (inputElement) =>
-          addStringOptions(inputElement, Object.values(Options.SOURCES))
+        this.#createStringDropdownElement(
+          partKey,
+          inputId,
+          Object.values(Options.SOURCES),
+          value
         )
     );
   }
@@ -106,8 +110,13 @@ export class ContextMenuOptionsBuilder {
       ["option", "option_inherit_from_off"],
       "saturationLimit",
       (inputId, value) =>
-        this.#createSelectElement(partKey, inputId, value, (inputElement) =>
-          addNumberOptions(inputElement, 0.1, 1.0, 0.1)
+        this.#createNumberDropdownElement(
+          partKey,
+          inputId,
+          0.1,
+          1.0,
+          0.1,
+          value
         )
     );
   }
@@ -123,8 +132,13 @@ export class ContextMenuOptionsBuilder {
       ["option", "option_inherit_from_off"],
       "darkness",
       (inputId, value) =>
-        this.#createSelectElement(partKey, inputId, value, (inputElement) =>
-          addNumberOptions(inputElement, 0.0, 5.0, 0.5)
+        this.#createNumberDropdownElement(
+          partKey,
+          inputId,
+          0.0,
+          5.0,
+          0.5,
+          value
         )
     );
   }
@@ -140,8 +154,13 @@ export class ContextMenuOptionsBuilder {
       ["option", "option_inherit_from_off"],
       "brightness",
       (inputId, value) =>
-        this.#createSelectElement(partKey, inputId, value, (inputElement) =>
-          addNumberOptions(inputElement, 0.0, 5.0, 0.5)
+        this.#createNumberDropdownElement(
+          partKey,
+          inputId,
+          0.0,
+          5.0,
+          0.5,
+          value
         )
     );
   }
@@ -195,24 +214,52 @@ export class ContextMenuOptionsBuilder {
    *
    * @param {string} partKey
    * @param {string} inputId
-   * @param {any} value
-   * @param {function(HTMLSelectElement):void} fillSelect
+   * @param {string[]} values
+   * @param {string} value
    * @returns {HTMLElement}
    */
-  #createSelectElement(partKey, inputId, value, fillSelect) {
-    const select = document.createElement("select");
-    fillSelect(select);
-    select.id = inputId;
-    select.value = value;
-    select.setAttribute("data-value", value);
-
-    select.onchange = () => {
-      this.options.setPartOption(this.part, partKey, select.value);
-      select.setAttribute("data-value", select.value);
+  #createStringDropdownElement(partKey, inputId, values, value) {
+    const dropdown = createStringDropdown(
+      inputId,
+      values,
+      DropdownPopup.POSITION.below
+    );
+    dropdown.value = value;
+
+    dropdown.onChange = (newValue) => {
+      this.options.setPartOption(this.part, partKey, newValue);
+      this.repositionContextMenu();
+    };
+
+    return dropdown.element;
+  }
+
+  /**
+   *
+   * @param {string} partKey
+   * @param {string} inputId
+   * @param {number} start
+   * @param {number} end
+   * @param {number} step
+   * @param {string} value
+   * @returns {HTMLElement}
+   */
+  #createNumberDropdownElement(partKey, inputId, start, end, step, value) {
+    const dropdown = createNumberDropdown(
+      inputId,
+      start,
+      end,
+      step,
+      DropdownPopup.POSITION.below
+    );
+    dropdown.value = value;
+
+    dropdown.onChange = (newValue) => {
+      this.options.setPartOption(this.part, partKey, newValue);
       this.repositionContextMenu();
     };
 
-    return select;
+    return dropdown.element;
   }
 
   /**

options_ui/js/dropdown/dropdown.js

@@ -12,9 +12,13 @@ const ARROW = `
 `;
 
 export class Dropdown {
-  constructor() {
+  /**
+   *
+   * @param {string=} position
+   */
+  constructor(position) {
     this.values = {};
-    this.popup = new DropdownPopup();
+    this.popup = new DropdownPopup(position);
     this.#createElements();
 
     /**

options_ui/js/dropdown/dropdown_popup.js

@@ -1,9 +1,26 @@
+import {
+  positionAbove,
+  positionBelow,
+  positionInPlace,
+  positionRight,
+} from "../utils/html.js";
 // eslint-disable-next-line no-unused-vars
 import { DropdownItem } from "./dropdown_item.js";
-import { positionBelow } from "../utils/html.js";
 
 export class DropdownPopup {
-  constructor() {
+  static POSITION = {
+    above: "above",
+    below: "below",
+    right: "right",
+    inplace: "inplace",
+  };
+
+  /**
+   *
+   * @param {string=} position
+   */
+  constructor(position = DropdownPopup.POSITION.below) {
+    this.position = position;
     this.element = DropdownPopup.#createElement();
   }
 
@@ -31,7 +48,15 @@ export class DropdownPopup {
   draw(target) {
     const body = document.querySelector("body");
     body.appendChild(this.element);
-    positionBelow(this.element, body, target, 4);
+    if (this.position === DropdownPopup.POSITION.below) {
+      positionBelow(this.element, body, target, 4);
+    } else if (this.position === DropdownPopup.POSITION.above) {
+      positionAbove(this.element, body, target, 4);
+    } else if (this.position === DropdownPopup.POSITION.right) {
+      positionRight(this.element, body, target, 4);
+    } else if (this.position === DropdownPopup.POSITION.inplace) {
+      positionInPlace(this.element, body, target);
+    }
   }
 
   /**

options_ui/js/dropdown/dropdown_utils.js

@@ -6,10 +6,11 @@ import { Localizer } from "../utils/localizer.js";
  *
  * @param {string} key
  * @param {string[]} values
+ * @param {string=} position
  * @returns {Dropdown}
  */
-export const createStringDropdown = (key, values) => {
-  const dropdown = new Dropdown();
+export const createStringDropdown = (key, values, position) => {
+  const dropdown = new Dropdown(position);
   dropdown.id = key;
   for (const value of values) {
     const dropdownItem = new DropdownItem();
@@ -26,15 +27,15 @@ export const createStringDropdown = (key, values) => {
  * @param {number} start
  * @param {number} end
  * @param {number} step
- * @param {number=} fixed
+ * @param {string=} position
  * @returns {Dropdown}
  */
-export const createNumberDropdown = (key, start, end, step, fixed = 1) => {
-  const dropdown = new Dropdown();
+export const createNumberDropdown = (key, start, end, step, position) => {
+  const dropdown = new Dropdown(position);
   dropdown.id = key;
   for (let i = start; i <= end; i += step) {
     const dropdownItem = new DropdownItem();
-    dropdownItem.value = i.toFixed(fixed);
+    dropdownItem.value = i.toFixed(1);
     dropdownItem.label = dropdownItem.value;
     dropdown.appendChild(dropdownItem);
   }