mirror of
https://github.com/servo/servo.git
synced 2025-06-06 16:45:39 +00:00
Support single-value <select> elements (#35684)
https://github.com/user-attachments/assets/9aba75ff-4190-4a85-89ed-d3f3aa53d3b0 Among other things this adds a new `EmbedderMsg::ShowSelectElementMenu` to tell the embedder to display a select popup at the given location. This is a draft because some small style adjustments need to be made: * the select element should always have the width of the largest option * the border should be part of the shadow tree Apart from that, it's mostly ready for review. <details><summary>HTML for demo video</summary> ```html <html> <body> <select id="c" name="choice"> <option value="first">First Value</option> <option value="second">Second Value</option> <option value="third">Third Value</option> </select> </body> </html> ``` </details> --- <!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: --> - [X] `./mach build -d` does not report any errors - [X] `./mach test-tidy` does not report any errors - [X] Part of https://github.com/servo/servo/issues/3551 - [ ] There are tests for these changes OR - [ ] These changes do not require tests because ___ <!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.--> <!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. --> --------- Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
This commit is contained in:
Simon Wülker
GitHub
parent
6e9d01b908
commit
0e99539dab
32 changed files with 633 additions and 151 deletions
|
|
@ -236,6 +236,7 @@ mod from_script {
|
|||
Self::StopGamepadHapticEffect(..) => target_variant!("StopGamepadHapticEffect"),
|
||||
Self::ShutdownComplete => target_variant!("ShutdownComplete"),
|
||||
Self::ShowNotification(..) => target_variant!("ShowNotification"),
|
||||
Self::ShowSelectElementMenu(..) => target_variant!("ShowSelectElementMenu"),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,10 +75,6 @@ use uuid::Uuid;
|
|||
use webgpu::swapchain::WebGPUContextId;
|
||||
use webrender_api::units::DeviceIntRect;
|
||||
|
||||
use super::bindings::codegen::Bindings::XPathEvaluatorBinding::XPathEvaluatorMethods;
|
||||
use super::canvasrenderingcontext2d::CanvasRenderingContext2D;
|
||||
use super::clipboardevent::ClipboardEventType;
|
||||
use super::performancepainttiming::PerformancePaintTiming;
|
||||
use crate::animation_timeline::AnimationTimeline;
|
||||
use crate::animations::Animations;
|
||||
use crate::canvas_context::CanvasContext as _;
|
||||
|
|
@ -105,6 +101,7 @@ use crate::dom::bindings::codegen::Bindings::TouchBinding::TouchMethods;
|
|||
use crate::dom::bindings::codegen::Bindings::WindowBinding::{
|
||||
FrameRequestCallback, ScrollBehavior, WindowMethods,
|
||||
};
|
||||
use crate::dom::bindings::codegen::Bindings::XPathEvaluatorBinding::XPathEvaluatorMethods;
|
||||
use crate::dom::bindings::codegen::Bindings::XPathNSResolverBinding::XPathNSResolver;
|
||||
use crate::dom::bindings::codegen::UnionTypes::{NodeOrString, StringOrElementCreationOptions};
|
||||
use crate::dom::bindings::error::{Error, ErrorInfo, ErrorResult, Fallible};
|
||||
|
|
@ -120,8 +117,9 @@ use crate::dom::bindings::weakref::WeakRef;
|
|||
use crate::dom::bindings::xmlname::{
|
||||
matches_name_production, namespace_from_domstring, validate_and_extract,
|
||||
};
|
||||
use crate::dom::canvasrenderingcontext2d::CanvasRenderingContext2D;
|
||||
use crate::dom::cdatasection::CDATASection;
|
||||
use crate::dom::clipboardevent::ClipboardEvent;
|
||||
use crate::dom::clipboardevent::{ClipboardEvent, ClipboardEventType};
|
||||
use crate::dom::comment::Comment;
|
||||
use crate::dom::compositionevent::CompositionEvent;
|
||||
use crate::dom::cssstylesheet::CSSStyleSheet;
|
||||
|
|
@ -171,6 +169,7 @@ use crate::dom::nodeiterator::NodeIterator;
|
|||
use crate::dom::nodelist::NodeList;
|
||||
use crate::dom::pagetransitionevent::PageTransitionEvent;
|
||||
use crate::dom::performanceentry::PerformanceEntry;
|
||||
use crate::dom::performancepainttiming::PerformancePaintTiming;
|
||||
use crate::dom::pointerevent::{PointerEvent, PointerId};
|
||||
use crate::dom::processinginstruction::ProcessingInstruction;
|
||||
use crate::dom::promise::Promise;
|
||||
|
|
@ -1274,7 +1273,7 @@ impl Document {
|
|||
}
|
||||
}
|
||||
|
||||
fn send_to_embedder(&self, msg: EmbedderMsg) {
|
||||
pub(crate) fn send_to_embedder(&self, msg: EmbedderMsg) {
|
||||
let window = self.window();
|
||||
window.send_to_embedder(msg);
|
||||
}
|
||||
|
|
@ -1312,7 +1311,7 @@ impl Document {
|
|||
|
||||
let node = unsafe { node::from_untrusted_compositor_node_address(hit_test_result.node) };
|
||||
let Some(el) = node
|
||||
.inclusive_ancestors(ShadowIncluding::No)
|
||||
.inclusive_ancestors(ShadowIncluding::Yes)
|
||||
.filter_map(DomRoot::downcast::<Element>)
|
||||
.next()
|
||||
else {
|
||||
|
|
|
|||
|
|
@ -514,7 +514,6 @@ impl Element {
|
|||
#[allow(clippy::too_many_arguments)]
|
||||
pub(crate) fn attach_shadow(
|
||||
&self,
|
||||
// TODO: remove is_ua_widget argument
|
||||
is_ua_widget: IsUserAgentWidget,
|
||||
mode: ShadowRootMode,
|
||||
clonable: bool,
|
||||
|
|
@ -4379,6 +4378,12 @@ impl Element {
|
|||
let element = self.downcast::<HTMLLabelElement>().unwrap();
|
||||
Some(element as &dyn Activatable)
|
||||
},
|
||||
NodeTypeId::Element(ElementTypeId::HTMLElement(
|
||||
HTMLElementTypeId::HTMLSelectElement,
|
||||
)) => {
|
||||
let element = self.downcast::<HTMLSelectElement>().unwrap();
|
||||
Some(element as &dyn Activatable)
|
||||
},
|
||||
NodeTypeId::Element(ElementTypeId::HTMLElement(HTMLElementTypeId::HTMLElement)) => {
|
||||
let element = self.downcast::<HTMLElement>().unwrap();
|
||||
Some(element as &dyn Activatable)
|
||||
|
|
|
|||
|
|
@ -93,12 +93,7 @@ impl HTMLOptionElement {
|
|||
}
|
||||
|
||||
fn pick_if_selected_and_reset(&self) {
|
||||
if let Some(select) = self
|
||||
.upcast::<Node>()
|
||||
.ancestors()
|
||||
.filter_map(DomRoot::downcast::<HTMLSelectElement>)
|
||||
.next()
|
||||
{
|
||||
if let Some(select) = self.owner_select_element() {
|
||||
if self.Selected() {
|
||||
select.pick_option(self);
|
||||
}
|
||||
|
|
@ -108,51 +103,53 @@ impl HTMLOptionElement {
|
|||
|
||||
// https://html.spec.whatwg.org/multipage/#concept-option-index
|
||||
fn index(&self) -> i32 {
|
||||
if let Some(parent) = self.upcast::<Node>().GetParentNode() {
|
||||
if let Some(select_parent) = parent.downcast::<HTMLSelectElement>() {
|
||||
// return index in parent select's list of options
|
||||
return self.index_in_select(select_parent);
|
||||
} else if parent.is::<HTMLOptGroupElement>() {
|
||||
if let Some(grandparent) = parent.GetParentNode() {
|
||||
if let Some(select_grandparent) = grandparent.downcast::<HTMLSelectElement>() {
|
||||
// return index in grandparent select's list of options
|
||||
return self.index_in_select(select_grandparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// "If the option element is not in a list of options,
|
||||
// then the option element's index is zero."
|
||||
// self is neither a child of a select, nor a grandchild of a select
|
||||
// via an optgroup, so it is not in a list of options
|
||||
0
|
||||
let Some(owner_select) = self.owner_select_element() else {
|
||||
return 0;
|
||||
};
|
||||
|
||||
let Some(position) = owner_select.list_of_options().position(|n| &*n == self) else {
|
||||
// An option should always be in it's owner's list of options, but it's not worth a browser panic
|
||||
warn!("HTMLOptionElement called index_in_select at a select that did not contain it");
|
||||
return 0;
|
||||
};
|
||||
|
||||
position.try_into().unwrap_or(0)
|
||||
}
|
||||
|
||||
fn index_in_select(&self, select: &HTMLSelectElement) -> i32 {
|
||||
match select.list_of_options().position(|n| &*n == self) {
|
||||
Some(index) => index.try_into().unwrap_or(0),
|
||||
None => {
|
||||
// shouldn't happen but not worth a browser panic
|
||||
warn!(
|
||||
"HTMLOptionElement called index_in_select at a select that did not contain it"
|
||||
);
|
||||
0
|
||||
},
|
||||
fn owner_select_element(&self) -> Option<DomRoot<HTMLSelectElement>> {
|
||||
let parent = self.upcast::<Node>().GetParentNode()?;
|
||||
|
||||
if parent.is::<HTMLOptGroupElement>() {
|
||||
DomRoot::downcast::<HTMLSelectElement>(parent.GetParentNode()?)
|
||||
} else {
|
||||
DomRoot::downcast::<HTMLSelectElement>(parent)
|
||||
}
|
||||
}
|
||||
|
||||
fn update_select_validity(&self, can_gc: CanGc) {
|
||||
if let Some(select) = self
|
||||
.upcast::<Node>()
|
||||
.ancestors()
|
||||
.filter_map(DomRoot::downcast::<HTMLSelectElement>)
|
||||
.next()
|
||||
{
|
||||
if let Some(select) = self.owner_select_element() {
|
||||
select
|
||||
.validity_state()
|
||||
.perform_validation_and_update(ValidationFlags::all(), can_gc);
|
||||
}
|
||||
}
|
||||
|
||||
/// <https://html.spec.whatwg.org/multipage/#concept-option-label>
|
||||
///
|
||||
/// Note that this is not equivalent to <https://html.spec.whatwg.org/multipage/#dom-option-label>.
|
||||
pub(crate) fn displayed_label(&self) -> DOMString {
|
||||
// > The label of an option element is the value of the label content attribute, if there is one
|
||||
// > and its value is not the empty string, or, otherwise, the value of the element's text IDL attribute.
|
||||
let label = self
|
||||
.upcast::<Element>()
|
||||
.get_string_attribute(&local_name!("label"));
|
||||
|
||||
if label.is_empty() {
|
||||
return self.Text();
|
||||
}
|
||||
|
||||
label
|
||||
}
|
||||
}
|
||||
|
||||
// FIXME(ajeffrey): Provide a way of buffering DOMStrings other than using Strings
|
||||
|
|
@ -175,7 +172,7 @@ fn collect_text(element: &Element, value: &mut String) {
|
|||
}
|
||||
|
||||
impl HTMLOptionElementMethods<crate::DomTypeHolder> for HTMLOptionElement {
|
||||
// https://html.spec.whatwg.org/multipage/#dom-option
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-option>
|
||||
fn Option(
|
||||
window: &Window,
|
||||
proto: Option<HandleObject>,
|
||||
|
|
@ -217,19 +214,19 @@ impl HTMLOptionElementMethods<crate::DomTypeHolder> for HTMLOptionElement {
|
|||
// https://html.spec.whatwg.org/multipage/#dom-option-disabled
|
||||
make_bool_setter!(SetDisabled, "disabled");
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-option-text
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-option-text>
|
||||
fn Text(&self) -> DOMString {
|
||||
let mut content = String::new();
|
||||
collect_text(self.upcast(), &mut content);
|
||||
DOMString::from(str_join(split_html_space_chars(&content), " "))
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-option-text
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-option-text>
|
||||
fn SetText(&self, value: DOMString, can_gc: CanGc) {
|
||||
self.upcast::<Node>().SetTextContent(Some(value), can_gc)
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-option-form
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-option-form>
|
||||
fn GetForm(&self) -> Option<DomRoot<HTMLFormElement>> {
|
||||
let parent = self.upcast::<Node>().GetParentNode().and_then(|p| {
|
||||
if p.is::<HTMLOptGroupElement>() {
|
||||
|
|
@ -242,7 +239,7 @@ impl HTMLOptionElementMethods<crate::DomTypeHolder> for HTMLOptionElement {
|
|||
parent.and_then(|p| p.downcast::<HTMLSelectElement>().and_then(|s| s.GetForm()))
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#attr-option-value
|
||||
/// <https://html.spec.whatwg.org/multipage/#attr-option-value>
|
||||
fn Value(&self) -> DOMString {
|
||||
let element = self.upcast::<Element>();
|
||||
let attr = &local_name!("value");
|
||||
|
|
@ -256,7 +253,7 @@ impl HTMLOptionElementMethods<crate::DomTypeHolder> for HTMLOptionElement {
|
|||
// https://html.spec.whatwg.org/multipage/#attr-option-value
|
||||
make_setter!(SetValue, "value");
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#attr-option-label
|
||||
/// <https://html.spec.whatwg.org/multipage/#attr-option-label>
|
||||
fn Label(&self) -> DOMString {
|
||||
let element = self.upcast::<Element>();
|
||||
let attr = &local_name!("label");
|
||||
|
|
@ -276,12 +273,12 @@ impl HTMLOptionElementMethods<crate::DomTypeHolder> for HTMLOptionElement {
|
|||
// https://html.spec.whatwg.org/multipage/#dom-option-defaultselected
|
||||
make_bool_setter!(SetDefaultSelected, "selected");
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-option-selected
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-option-selected>
|
||||
fn Selected(&self) -> bool {
|
||||
self.selectedness.get()
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-option-selected
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-option-selected>
|
||||
fn SetSelected(&self, selected: bool) {
|
||||
self.dirtiness.set(true);
|
||||
self.selectedness.set(selected);
|
||||
|
|
@ -289,7 +286,7 @@ impl HTMLOptionElementMethods<crate::DomTypeHolder> for HTMLOptionElement {
|
|||
self.update_select_validity(CanGc::note());
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-option-index
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-option-index>
|
||||
fn Index(&self) -> i32 {
|
||||
self.index()
|
||||
}
|
||||
|
|
@ -337,6 +334,13 @@ impl VirtualMethods for HTMLOptionElement {
|
|||
}
|
||||
self.update_select_validity(can_gc);
|
||||
},
|
||||
local_name!("label") => {
|
||||
// The label of the selected option is displayed inside the select element, so we need to repaint
|
||||
// when it changes
|
||||
if let Some(select_element) = self.owner_select_element() {
|
||||
select_element.update_shadow_tree(CanGc::note());
|
||||
}
|
||||
},
|
||||
_ => {},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -240,11 +240,11 @@ impl HTMLOptionsCollectionMethods<crate::DomTypeHolder> for HTMLOptionsCollectio
|
|||
}
|
||||
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-htmloptionscollection-selectedindex>
|
||||
fn SetSelectedIndex(&self, index: i32) {
|
||||
fn SetSelectedIndex(&self, index: i32, can_gc: CanGc) {
|
||||
self.upcast()
|
||||
.root_node()
|
||||
.downcast::<HTMLSelectElement>()
|
||||
.expect("HTMLOptionsCollection not rooted on a HTMLSelectElement")
|
||||
.SetSelectedIndex(index)
|
||||
.SetSelectedIndex(index, can_gc)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,42 +5,75 @@
|
|||
use std::default::Default;
|
||||
use std::iter;
|
||||
|
||||
use webrender_api::units::DeviceIntRect;
|
||||
use ipc_channel::ipc;
|
||||
use dom_struct::dom_struct;
|
||||
use html5ever::{LocalName, Prefix, local_name};
|
||||
use js::rust::HandleObject;
|
||||
use style::attr::AttrValue;
|
||||
use stylo_dom::ElementState;
|
||||
use embedder_traits::{SelectElementOptionOrOptgroup, SelectElementOption};
|
||||
use euclid::{Size2D, Point2D, Rect};
|
||||
use embedder_traits::EmbedderMsg;
|
||||
|
||||
use crate::dom::bindings::codegen::GenericBindings::HTMLOptGroupElementBinding::HTMLOptGroupElement_Binding::HTMLOptGroupElementMethods;
|
||||
use crate::dom::activation::Activatable;
|
||||
use crate::dom::attr::Attr;
|
||||
use crate::dom::bindings::cell::{DomRefCell, Ref};
|
||||
use crate::dom::bindings::codegen::Bindings::ElementBinding::ElementMethods;
|
||||
use crate::dom::bindings::codegen::Bindings::HTMLCollectionBinding::HTMLCollectionMethods;
|
||||
use crate::dom::bindings::codegen::Bindings::HTMLOptionElementBinding::HTMLOptionElementMethods;
|
||||
use crate::dom::bindings::codegen::Bindings::HTMLOptionsCollectionBinding::HTMLOptionsCollectionMethods;
|
||||
use crate::dom::bindings::codegen::Bindings::HTMLSelectElementBinding::HTMLSelectElementMethods;
|
||||
use crate::dom::bindings::codegen::Bindings::NodeBinding::NodeMethods;
|
||||
use crate::dom::bindings::codegen::Bindings::ShadowRootBinding::{
|
||||
ShadowRootMode, SlotAssignmentMode,
|
||||
};
|
||||
use crate::dom::bindings::codegen::GenericBindings::CharacterDataBinding::CharacterData_Binding::CharacterDataMethods;
|
||||
use crate::dom::bindings::codegen::UnionTypes::{
|
||||
HTMLElementOrLong, HTMLOptionElementOrHTMLOptGroupElement,
|
||||
};
|
||||
use crate::dom::bindings::error::ErrorResult;
|
||||
use crate::dom::bindings::inheritance::Castable;
|
||||
use crate::dom::bindings::root::{DomRoot, MutNullableDom};
|
||||
use crate::dom::bindings::root::{Dom, DomRoot, MutNullableDom};
|
||||
use crate::dom::bindings::str::DOMString;
|
||||
use crate::dom::characterdata::CharacterData;
|
||||
use crate::dom::document::Document;
|
||||
use crate::dom::element::{AttributeMutation, Element};
|
||||
use crate::dom::event::Event;
|
||||
use crate::dom::eventtarget::EventTarget;
|
||||
use crate::dom::htmlcollection::CollectionFilter;
|
||||
use crate::dom::htmldivelement::HTMLDivElement;
|
||||
use crate::dom::htmlelement::HTMLElement;
|
||||
use crate::dom::htmlfieldsetelement::HTMLFieldSetElement;
|
||||
use crate::dom::htmlformelement::{FormControl, FormDatum, FormDatumValue, HTMLFormElement};
|
||||
use crate::dom::htmloptgroupelement::HTMLOptGroupElement;
|
||||
use crate::dom::htmloptionelement::HTMLOptionElement;
|
||||
use crate::dom::htmloptionscollection::HTMLOptionsCollection;
|
||||
use crate::dom::node::{BindContext, Node, NodeTraits, UnbindContext};
|
||||
use crate::dom::node::{BindContext, ChildrenMutation, Node, NodeTraits, UnbindContext};
|
||||
use crate::dom::nodelist::NodeList;
|
||||
use crate::dom::shadowroot::IsUserAgentWidget;
|
||||
use crate::dom::text::Text;
|
||||
use crate::dom::validation::{Validatable, is_barred_by_datalist_ancestor};
|
||||
use crate::dom::validitystate::{ValidationFlags, ValidityState};
|
||||
use crate::dom::virtualmethods::VirtualMethods;
|
||||
use crate::script_runtime::CanGc;
|
||||
|
||||
const DEFAULT_SELECT_SIZE: u32 = 0;
|
||||
|
||||
const SELECT_BOX_STYLE: &str = "
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
";
|
||||
|
||||
const TEXT_CONTAINER_STYLE: &str = "flex: 1;";
|
||||
|
||||
const CHEVRON_CONTAINER_STYLE: &str = "
|
||||
font-size: 16px;
|
||||
margin: 4px;
|
||||
";
|
||||
|
||||
#[derive(JSTraceable, MallocSizeOf)]
|
||||
struct OptionsFilter;
|
||||
impl CollectionFilter for OptionsFilter {
|
||||
|
|
@ -68,9 +101,15 @@ pub(crate) struct HTMLSelectElement {
|
|||
form_owner: MutNullableDom<HTMLFormElement>,
|
||||
labels_node_list: MutNullableDom<NodeList>,
|
||||
validity_state: MutNullableDom<ValidityState>,
|
||||
shadow_tree: DomRefCell<Option<ShadowTree>>,
|
||||
}
|
||||
|
||||
static DEFAULT_SELECT_SIZE: u32 = 0;
|
||||
/// Holds handles to all elements in the UA shadow tree
|
||||
#[derive(Clone, JSTraceable, MallocSizeOf)]
|
||||
#[cfg_attr(crown, crown::unrooted_must_root_lint::must_root)]
|
||||
struct ShadowTree {
|
||||
selected_option: Dom<Text>,
|
||||
}
|
||||
|
||||
impl HTMLSelectElement {
|
||||
fn new_inherited(
|
||||
|
|
@ -89,6 +128,7 @@ impl HTMLSelectElement {
|
|||
form_owner: Default::default(),
|
||||
labels_node_list: Default::default(),
|
||||
validity_state: Default::default(),
|
||||
shadow_tree: Default::default(),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -215,10 +255,178 @@ impl HTMLSelectElement {
|
|||
self.Size()
|
||||
}
|
||||
}
|
||||
|
||||
fn create_shadow_tree(&self, can_gc: CanGc) {
|
||||
let document = self.owner_document();
|
||||
let root = self
|
||||
.upcast::<Element>()
|
||||
.attach_shadow(
|
||||
IsUserAgentWidget::Yes,
|
||||
ShadowRootMode::Closed,
|
||||
false,
|
||||
false,
|
||||
false,
|
||||
SlotAssignmentMode::Manual,
|
||||
can_gc,
|
||||
)
|
||||
.expect("Attaching UA shadow root failed");
|
||||
|
||||
let select_box = HTMLDivElement::new(local_name!("div"), None, &document, None, can_gc);
|
||||
select_box.upcast::<Element>().set_string_attribute(
|
||||
&local_name!("style"),
|
||||
SELECT_BOX_STYLE.into(),
|
||||
can_gc,
|
||||
);
|
||||
|
||||
let text_container = HTMLDivElement::new(local_name!("div"), None, &document, None, can_gc);
|
||||
text_container.upcast::<Element>().set_string_attribute(
|
||||
&local_name!("style"),
|
||||
TEXT_CONTAINER_STYLE.into(),
|
||||
can_gc,
|
||||
);
|
||||
select_box
|
||||
.upcast::<Node>()
|
||||
.AppendChild(text_container.upcast::<Node>())
|
||||
.unwrap();
|
||||
|
||||
let text = Text::new(DOMString::new(), &document, can_gc);
|
||||
let _ = self.shadow_tree.borrow_mut().insert(ShadowTree {
|
||||
selected_option: text.as_traced(),
|
||||
});
|
||||
text_container
|
||||
.upcast::<Node>()
|
||||
.AppendChild(text.upcast::<Node>())
|
||||
.unwrap();
|
||||
|
||||
let chevron_container =
|
||||
HTMLDivElement::new(local_name!("div"), None, &document, None, can_gc);
|
||||
chevron_container.upcast::<Element>().set_string_attribute(
|
||||
&local_name!("style"),
|
||||
CHEVRON_CONTAINER_STYLE.into(),
|
||||
can_gc,
|
||||
);
|
||||
chevron_container
|
||||
.upcast::<Node>()
|
||||
.SetTextContent(Some("▾".into()), can_gc);
|
||||
select_box
|
||||
.upcast::<Node>()
|
||||
.AppendChild(chevron_container.upcast::<Node>())
|
||||
.unwrap();
|
||||
|
||||
root.upcast::<Node>()
|
||||
.AppendChild(select_box.upcast::<Node>())
|
||||
.unwrap();
|
||||
}
|
||||
|
||||
fn shadow_tree(&self, can_gc: CanGc) -> Ref<'_, ShadowTree> {
|
||||
if !self.upcast::<Element>().is_shadow_host() {
|
||||
self.create_shadow_tree(can_gc);
|
||||
}
|
||||
|
||||
Ref::filter_map(self.shadow_tree.borrow(), Option::as_ref)
|
||||
.ok()
|
||||
.expect("UA shadow tree was not created")
|
||||
}
|
||||
|
||||
pub(crate) fn update_shadow_tree(&self, can_gc: CanGc) {
|
||||
let shadow_tree = self.shadow_tree(can_gc);
|
||||
|
||||
let selected_option_text = self
|
||||
.selected_option()
|
||||
.or_else(|| self.list_of_options().next())
|
||||
.map(|option| option.displayed_label())
|
||||
.unwrap_or_default();
|
||||
|
||||
// Replace newlines with whitespace, then collapse and trim whitespace
|
||||
let displayed_text = itertools::join(selected_option_text.split_whitespace(), " ");
|
||||
|
||||
shadow_tree
|
||||
.selected_option
|
||||
.upcast::<CharacterData>()
|
||||
.SetData(displayed_text.trim().into());
|
||||
}
|
||||
|
||||
pub(crate) fn selection_changed(&self, can_gc: CanGc) {
|
||||
self.update_shadow_tree(can_gc);
|
||||
|
||||
self.upcast::<EventTarget>()
|
||||
.fire_bubbling_event(atom!("change"), can_gc);
|
||||
}
|
||||
|
||||
fn selected_option(&self) -> Option<DomRoot<HTMLOptionElement>> {
|
||||
self.list_of_options().find(|opt_elem| opt_elem.Selected())
|
||||
}
|
||||
|
||||
pub(crate) fn show_menu(&self, can_gc: CanGc) -> Option<usize> {
|
||||
let (ipc_sender, ipc_receiver) = ipc::channel().expect("Failed to create IPC channel!");
|
||||
|
||||
// Collect list of optgroups and options
|
||||
let mut index = 0;
|
||||
let mut embedder_option_from_option = |option: &HTMLOptionElement| {
|
||||
let embedder_option = SelectElementOption {
|
||||
id: index,
|
||||
label: option.displayed_label().into(),
|
||||
is_disabled: option.Disabled(),
|
||||
};
|
||||
index += 1;
|
||||
embedder_option
|
||||
};
|
||||
let options = self
|
||||
.upcast::<Node>()
|
||||
.children()
|
||||
.flat_map(|child| {
|
||||
if let Some(option) = child.downcast::<HTMLOptionElement>() {
|
||||
return Some(embedder_option_from_option(option).into());
|
||||
}
|
||||
|
||||
if let Some(optgroup) = child.downcast::<HTMLOptGroupElement>() {
|
||||
let options = optgroup
|
||||
.upcast::<Node>()
|
||||
.children()
|
||||
.flat_map(DomRoot::downcast::<HTMLOptionElement>)
|
||||
.map(|option| embedder_option_from_option(&option))
|
||||
.collect();
|
||||
let label = optgroup.Label().into();
|
||||
|
||||
return Some(SelectElementOptionOrOptgroup::Optgroup { label, options });
|
||||
}
|
||||
|
||||
None
|
||||
})
|
||||
.collect();
|
||||
|
||||
let rect = self.upcast::<Node>().bounding_content_box_or_zero(can_gc);
|
||||
let rect = Rect::new(
|
||||
Point2D::new(rect.origin.x.to_px(), rect.origin.y.to_px()),
|
||||
Size2D::new(rect.size.width.to_px(), rect.size.height.to_px()),
|
||||
);
|
||||
|
||||
let selected_index = self.list_of_options().position(|option| option.Selected());
|
||||
|
||||
let document = self.owner_document();
|
||||
document.send_to_embedder(EmbedderMsg::ShowSelectElementMenu(
|
||||
document.webview_id(),
|
||||
options,
|
||||
selected_index,
|
||||
DeviceIntRect::from_untyped(&rect.to_box2d()),
|
||||
ipc_sender,
|
||||
));
|
||||
|
||||
let Ok(response) = ipc_receiver.recv() else {
|
||||
log::error!("Failed to receive response");
|
||||
return None;
|
||||
};
|
||||
|
||||
if response.is_some() && response != selected_index {
|
||||
self.selection_changed(can_gc);
|
||||
}
|
||||
|
||||
response
|
||||
}
|
||||
}
|
||||
|
||||
impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
|
||||
// https://html.spec.whatwg.org/multipage/#dom-select-add
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-select-add>
|
||||
fn Add(
|
||||
&self,
|
||||
element: HTMLOptionElementOrHTMLOptGroupElement,
|
||||
|
|
@ -233,7 +441,7 @@ impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
|
|||
// https://html.spec.whatwg.org/multipage/#dom-fe-disabled
|
||||
make_bool_setter!(SetDisabled, "disabled");
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-fae-form
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-fae-form>
|
||||
fn GetForm(&self) -> Option<DomRoot<HTMLFormElement>> {
|
||||
self.form_owner()
|
||||
}
|
||||
|
|
@ -262,7 +470,7 @@ impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
|
|||
// https://html.spec.whatwg.org/multipage/#dom-select-size
|
||||
make_uint_setter!(SetSize, "size", DEFAULT_SELECT_SIZE);
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-select-type
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-select-type>
|
||||
fn Type(&self) -> DOMString {
|
||||
DOMString::from(if self.Multiple() {
|
||||
"select-multiple"
|
||||
|
|
@ -274,7 +482,7 @@ impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
|
|||
// https://html.spec.whatwg.org/multipage/#dom-lfe-labels
|
||||
make_labels_getter!(Labels, labels_node_list);
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-select-options
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-select-options>
|
||||
fn Options(&self) -> DomRoot<HTMLOptionsCollection> {
|
||||
self.options.or_init(|| {
|
||||
let window = self.owner_window();
|
||||
|
|
@ -282,27 +490,27 @@ impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
|
|||
})
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-select-length
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-select-length>
|
||||
fn Length(&self) -> u32 {
|
||||
self.Options().Length()
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-select-length
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-select-length>
|
||||
fn SetLength(&self, length: u32, can_gc: CanGc) {
|
||||
self.Options().SetLength(length, can_gc)
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-select-item
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-select-item>
|
||||
fn Item(&self, index: u32) -> Option<DomRoot<Element>> {
|
||||
self.Options().upcast().Item(index)
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-select-item
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-select-item>
|
||||
fn IndexedGetter(&self, index: u32) -> Option<DomRoot<Element>> {
|
||||
self.Options().IndexedGetter(index)
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-select-setter
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-select-setter>
|
||||
fn IndexedSetter(
|
||||
&self,
|
||||
index: u32,
|
||||
|
|
@ -312,33 +520,31 @@ impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
|
|||
self.Options().IndexedSetter(index, value, can_gc)
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-select-nameditem
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-select-nameditem>
|
||||
fn NamedItem(&self, name: DOMString) -> Option<DomRoot<HTMLOptionElement>> {
|
||||
self.Options()
|
||||
.NamedGetter(name)
|
||||
.and_then(DomRoot::downcast::<HTMLOptionElement>)
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-select-remove
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-select-remove>
|
||||
fn Remove_(&self, index: i32) {
|
||||
self.Options().Remove(index)
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-select-remove
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-select-remove>
|
||||
fn Remove(&self) {
|
||||
self.upcast::<Element>().Remove()
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-select-value
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-select-value>
|
||||
fn Value(&self) -> DOMString {
|
||||
self.list_of_options()
|
||||
.filter(|opt_elem| opt_elem.Selected())
|
||||
self.selected_option()
|
||||
.map(|opt_elem| opt_elem.Value())
|
||||
.next()
|
||||
.unwrap_or_default()
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-select-value
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-select-value>
|
||||
fn SetValue(&self, value: DOMString) {
|
||||
let mut opt_iter = self.list_of_options();
|
||||
// Reset until we find an <option> with a matching value
|
||||
|
|
@ -359,7 +565,7 @@ impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
|
|||
.perform_validation_and_update(ValidationFlags::VALUE_MISSING, CanGc::note());
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-select-selectedindex
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-select-selectedindex>
|
||||
fn SelectedIndex(&self) -> i32 {
|
||||
self.list_of_options()
|
||||
.enumerate()
|
||||
|
|
@ -369,8 +575,8 @@ impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
|
|||
.unwrap_or(-1)
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-select-selectedindex
|
||||
fn SetSelectedIndex(&self, index: i32) {
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-select-selectedindex>
|
||||
fn SetSelectedIndex(&self, index: i32, can_gc: CanGc) {
|
||||
let mut opt_iter = self.list_of_options();
|
||||
for opt in opt_iter.by_ref().take(index as usize) {
|
||||
opt.set_selectedness(false);
|
||||
|
|
@ -383,34 +589,37 @@ impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
|
|||
opt.set_selectedness(false);
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Track whether the selected element actually changed
|
||||
self.update_shadow_tree(can_gc);
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-cva-willvalidate
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-cva-willvalidate>
|
||||
fn WillValidate(&self) -> bool {
|
||||
self.is_instance_validatable()
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-cva-validity
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-cva-validity>
|
||||
fn Validity(&self) -> DomRoot<ValidityState> {
|
||||
self.validity_state()
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-cva-checkvalidity
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-cva-checkvalidity>
|
||||
fn CheckValidity(&self, can_gc: CanGc) -> bool {
|
||||
self.check_validity(can_gc)
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-cva-reportvalidity
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-cva-reportvalidity>
|
||||
fn ReportValidity(&self, can_gc: CanGc) -> bool {
|
||||
self.report_validity(can_gc)
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-cva-validationmessage
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-cva-validationmessage>
|
||||
fn ValidationMessage(&self) -> DOMString {
|
||||
self.validation_message()
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-cva-setcustomvalidity
|
||||
/// <https://html.spec.whatwg.org/multipage/#dom-cva-setcustomvalidity>
|
||||
fn SetCustomValidity(&self, error: DOMString) {
|
||||
self.validity_state().set_custom_error_message(error);
|
||||
}
|
||||
|
|
@ -478,6 +687,14 @@ impl VirtualMethods for HTMLSelectElement {
|
|||
}
|
||||
}
|
||||
|
||||
fn children_changed(&self, mutation: &ChildrenMutation) {
|
||||
if let Some(s) = self.super_type() {
|
||||
s.children_changed(mutation);
|
||||
}
|
||||
|
||||
self.update_shadow_tree(CanGc::note());
|
||||
}
|
||||
|
||||
fn parse_plain_attribute(&self, local_name: &LocalName, value: DOMString) -> AttrValue {
|
||||
match *local_name {
|
||||
local_name!("size") => AttrValue::from_u32(value.into(), DEFAULT_SELECT_SIZE),
|
||||
|
|
@ -540,6 +757,26 @@ impl Validatable for HTMLSelectElement {
|
|||
}
|
||||
}
|
||||
|
||||
impl Activatable for HTMLSelectElement {
|
||||
fn as_element(&self) -> &Element {
|
||||
self.upcast()
|
||||
}
|
||||
|
||||
fn is_instance_activatable(&self) -> bool {
|
||||
true
|
||||
}
|
||||
|
||||
/// <https://html.spec.whatwg.org/multipage/#input-activation-behavior>
|
||||
fn activation_behavior(&self, _event: &Event, _target: &EventTarget, can_gc: CanGc) {
|
||||
let Some(selected_value) = self.show_menu(can_gc) else {
|
||||
// The user did not select a value
|
||||
return;
|
||||
};
|
||||
|
||||
self.SetSelectedIndex(selected_value as i32, can_gc);
|
||||
}
|
||||
}
|
||||
|
||||
enum Choice3<I, J, K> {
|
||||
First(I),
|
||||
Second(J),
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ use crate::dom::node::Node;
|
|||
use crate::dom::window::Window;
|
||||
use crate::script_runtime::CanGc;
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#validity-states
|
||||
/// <https://html.spec.whatwg.org/multipage/#validity-states>
|
||||
#[derive(Clone, Copy, JSTraceable, MallocSizeOf)]
|
||||
pub(crate) struct ValidationFlags(u32);
|
||||
|
||||
|
|
|
|||
|
|
@ -360,7 +360,7 @@ DOMInterfaces = {
|
|||
},
|
||||
|
||||
'HTMLOptionsCollection': {
|
||||
'canGc': ['IndexedSetter', 'SetLength']
|
||||
'canGc': ['IndexedSetter', 'SetLength', 'SetSelectedIndex']
|
||||
},
|
||||
|
||||
'HTMLOutputElement': {
|
||||
|
|
@ -376,7 +376,7 @@ DOMInterfaces = {
|
|||
},
|
||||
|
||||
'HTMLSelectElement': {
|
||||
'canGc': ['ReportValidity', 'SetLength', 'IndexedSetter', 'CheckValidity'],
|
||||
'canGc': ['ReportValidity', 'SetLength', 'IndexedSetter', 'CheckValidity', 'SetSelectedIndex'],
|
||||
},
|
||||
|
||||
'HTMLTableElement': {
|
||||
|
|
|
|||
|
|
@ -124,8 +124,8 @@ use crate::responders::ServoErrorChannel;
|
|||
pub use crate::servo_delegate::{ServoDelegate, ServoError};
|
||||
pub use crate::webview::WebView;
|
||||
pub use crate::webview_delegate::{
|
||||
AllowOrDenyRequest, AuthenticationRequest, NavigationRequest, PermissionRequest,
|
||||
WebResourceLoad, WebViewDelegate,
|
||||
AllowOrDenyRequest, AuthenticationRequest, FormControl, NavigationRequest, PermissionRequest,
|
||||
SelectElement, WebResourceLoad, WebViewDelegate,
|
||||
};
|
||||
|
||||
#[cfg(feature = "webdriver")]
|
||||
|
|
@ -971,6 +971,20 @@ impl Servo {
|
|||
None => self.delegate().show_notification(notification),
|
||||
}
|
||||
},
|
||||
EmbedderMsg::ShowSelectElementMenu(
|
||||
webview_id,
|
||||
options,
|
||||
selected_option,
|
||||
position,
|
||||
ipc_sender,
|
||||
) => {
|
||||
if let Some(webview) = self.get_webview_handle(webview_id) {
|
||||
let prompt = SelectElement::new(options, selected_option, position, ipc_sender);
|
||||
webview
|
||||
.delegate()
|
||||
.show_form_control(webview, FormControl::SelectElement(prompt));
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ use constellation_traits::ConstellationMsg;
|
|||
use embedder_traits::{
|
||||
AllowOrDeny, AuthenticationResponse, ContextMenuResult, Cursor, FilterPattern,
|
||||
GamepadHapticEffectType, InputMethodType, LoadStatus, MediaSessionEvent, Notification,
|
||||
PermissionFeature, ScreenGeometry, SimpleDialog, WebResourceRequest, WebResourceResponse,
|
||||
WebResourceResponseMsg,
|
||||
PermissionFeature, ScreenGeometry, SelectElementOptionOrOptgroup, SimpleDialog,
|
||||
WebResourceRequest, WebResourceResponse, WebResourceResponseMsg,
|
||||
};
|
||||
use ipc_channel::ipc::IpcSender;
|
||||
use keyboard_types::KeyboardEvent;
|
||||
|
|
@ -296,6 +296,66 @@ impl Drop for InterceptedWebResourceLoad {
|
|||
}
|
||||
}
|
||||
|
||||
/// The controls of an interactive form element.
|
||||
pub enum FormControl {
|
||||
/// The picker of a `<select>` element.
|
||||
SelectElement(SelectElement),
|
||||
}
|
||||
|
||||
/// Represents a dialog triggered by clicking a `<select>` element.
|
||||
pub struct SelectElement {
|
||||
pub(crate) options: Vec<SelectElementOptionOrOptgroup>,
|
||||
pub(crate) selected_option: Option<usize>,
|
||||
pub(crate) position: DeviceIntRect,
|
||||
pub(crate) responder: IpcResponder<Option<usize>>,
|
||||
}
|
||||
|
||||
impl SelectElement {
|
||||
pub(crate) fn new(
|
||||
options: Vec<SelectElementOptionOrOptgroup>,
|
||||
selected_option: Option<usize>,
|
||||
position: DeviceIntRect,
|
||||
ipc_sender: IpcSender<Option<usize>>,
|
||||
) -> Self {
|
||||
Self {
|
||||
options,
|
||||
selected_option,
|
||||
position,
|
||||
responder: IpcResponder::new(ipc_sender, None),
|
||||
}
|
||||
}
|
||||
|
||||
/// Return the area occupied by the `<select>` element that triggered the prompt.
|
||||
///
|
||||
/// The embedder should use this value to position the prompt that is shown to the user.
|
||||
pub fn position(&self) -> DeviceIntRect {
|
||||
self.position
|
||||
}
|
||||
|
||||
/// Consecutive `<option>` elements outside of an `<optgroup>` will be combined
|
||||
/// into a single anonymous group, whose [`label`](SelectElementGroup::label) is `None`.
|
||||
pub fn options(&self) -> &[SelectElementOptionOrOptgroup] {
|
||||
&self.options
|
||||
}
|
||||
|
||||
/// Mark a single option as selected.
|
||||
///
|
||||
/// If there is already a selected option and the `<select>` element does not
|
||||
/// support selecting multiple options, then the previous option will be unselected.
|
||||
pub fn select(&mut self, id: Option<usize>) {
|
||||
self.selected_option = id;
|
||||
}
|
||||
|
||||
pub fn selected_option(&self) -> Option<usize> {
|
||||
self.selected_option
|
||||
}
|
||||
|
||||
/// Resolve the prompt with the options that have been selected by calling [select] previously.
|
||||
pub fn submit(mut self) {
|
||||
let _ = self.responder.send(self.selected_option);
|
||||
}
|
||||
}
|
||||
|
||||
pub trait WebViewDelegate {
|
||||
/// Get the [`ScreenGeometry`] for this [`WebView`]. If this is unimplemented or returns `None`
|
||||
/// the screen will have the size of the [`WebView`]'s `RenderingContext` and `WebView` will be
|
||||
|
|
@ -449,6 +509,10 @@ pub trait WebViewDelegate {
|
|||
/// Request to hide the IME when the editable element is blurred.
|
||||
fn hide_ime(&self, _webview: WebView) {}
|
||||
|
||||
/// Request that the embedder show UI elements for form controls that are not integrated
|
||||
/// into page content, such as dropdowns for `<select>` elements.
|
||||
fn show_form_control(&self, _webview: WebView, _form_control: FormControl) {}
|
||||
|
||||
/// Request to play a haptic effect on a connected gamepad.
|
||||
fn play_gamepad_haptic_effect(
|
||||
&self,
|
||||
|
|
|
|||
|
|
@ -223,6 +223,27 @@ pub enum AllowOrDeny {
|
|||
Deny,
|
||||
}
|
||||
|
||||
#[derive(Clone, Debug, Deserialize, Serialize)]
|
||||
|
||||
pub struct SelectElementOption {
|
||||
/// A unique identifier for the option that can be used to select it.
|
||||
pub id: usize,
|
||||
/// The label that should be used to display the option to the user.
|
||||
pub label: String,
|
||||
/// Whether or not the option is selectable
|
||||
pub is_disabled: bool,
|
||||
}
|
||||
|
||||
/// Represents the contents of either an `<option>` or an `<optgroup>` element
|
||||
#[derive(Clone, Debug, Deserialize, Serialize)]
|
||||
pub enum SelectElementOptionOrOptgroup {
|
||||
Option(SelectElementOption),
|
||||
Optgroup {
|
||||
label: String,
|
||||
options: Vec<SelectElementOption>,
|
||||
},
|
||||
}
|
||||
|
||||
#[derive(Deserialize, IntoStaticStr, Serialize)]
|
||||
pub enum EmbedderMsg {
|
||||
/// A status message to be displayed by the browser chrome.
|
||||
|
|
@ -331,6 +352,16 @@ pub enum EmbedderMsg {
|
|||
ShutdownComplete,
|
||||
/// Request to display a notification.
|
||||
ShowNotification(Option<WebViewId>, Notification),
|
||||
/// Indicates that the user has activated a `<select>` element.
|
||||
///
|
||||
/// The embedder should respond with the new state of the `<select>` element.
|
||||
ShowSelectElementMenu(
|
||||
WebViewId,
|
||||
Vec<SelectElementOptionOrOptgroup>,
|
||||
Option<usize>,
|
||||
DeviceIntRect,
|
||||
IpcSender<Option<usize>>,
|
||||
),
|
||||
}
|
||||
|
||||
impl Debug for EmbedderMsg {
|
||||
|
|
@ -655,3 +686,9 @@ pub struct ScreenGeometry {
|
|||
/// of the `WebView`.
|
||||
pub offset: DeviceIntPoint,
|
||||
}
|
||||
|
||||
impl From<SelectElementOption> for SelectElementOptionOrOptgroup {
|
||||
fn from(value: SelectElementOption) -> Self {
|
||||
Self::Option(value)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@ use servo::ipc_channel::ipc::IpcSender;
|
|||
use servo::webrender_api::ScrollLocation;
|
||||
use servo::webrender_api::units::{DeviceIntPoint, DeviceIntRect, DeviceIntSize};
|
||||
use servo::{
|
||||
AllowOrDenyRequest, AuthenticationRequest, FilterPattern, GamepadHapticEffectType, LoadStatus,
|
||||
PermissionRequest, Servo, ServoDelegate, ServoError, SimpleDialog, TouchEventType, WebView,
|
||||
WebViewDelegate,
|
||||
AllowOrDenyRequest, AuthenticationRequest, FilterPattern, FormControl, GamepadHapticEffectType,
|
||||
LoadStatus, PermissionRequest, Servo, ServoDelegate, ServoError, SimpleDialog, TouchEventType,
|
||||
WebView, WebViewDelegate,
|
||||
};
|
||||
use url::Url;
|
||||
|
||||
|
|
@ -583,4 +583,19 @@ impl WebViewDelegate for RunningAppState {
|
|||
fn hide_ime(&self, _webview: WebView) {
|
||||
self.inner().window.hide_ime();
|
||||
}
|
||||
|
||||
fn show_form_control(&self, webview: WebView, form_control: FormControl) {
|
||||
if self.servoshell_preferences.headless {
|
||||
return;
|
||||
}
|
||||
|
||||
match form_control {
|
||||
FormControl::SelectElement(prompt) => {
|
||||
// FIXME: Reading the toolbar height is needed here to properly position the select dialog.
|
||||
// But if the toolbar height changes while the dialog is open then the position won't be updated
|
||||
let offset = self.inner().window.toolbar_height();
|
||||
self.add_dialog(webview, Dialog::new_select_element_dialog(prompt, offset));
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,14 @@ use std::sync::Arc;
|
|||
|
||||
use egui::Modal;
|
||||
use egui_file_dialog::{DialogState, FileDialog as EguiFileDialog};
|
||||
use euclid::Length;
|
||||
use log::warn;
|
||||
use servo::ipc_channel::ipc::IpcSender;
|
||||
use servo::servo_geometry::DeviceIndependentPixel;
|
||||
use servo::{
|
||||
AlertResponse, AuthenticationRequest, ConfirmResponse, FilterPattern, PermissionRequest,
|
||||
PromptResponse, SimpleDialog,
|
||||
PromptResponse, SelectElement, SelectElementOption, SelectElementOptionOrOptgroup,
|
||||
SimpleDialog,
|
||||
};
|
||||
|
||||
pub enum Dialog {
|
||||
|
|
@ -36,6 +39,10 @@ pub enum Dialog {
|
|||
selected_device_index: usize,
|
||||
response_sender: IpcSender<Option<String>>,
|
||||
},
|
||||
SelectElement {
|
||||
maybe_prompt: Option<SelectElement>,
|
||||
toolbar_offset: Length<f32, DeviceIndependentPixel>,
|
||||
},
|
||||
}
|
||||
|
||||
impl Dialog {
|
||||
|
|
@ -102,6 +109,16 @@ impl Dialog {
|
|||
}
|
||||
}
|
||||
|
||||
pub fn new_select_element_dialog(
|
||||
prompt: SelectElement,
|
||||
toolbar_offset: Length<f32, DeviceIndependentPixel>,
|
||||
) -> Self {
|
||||
Dialog::SelectElement {
|
||||
maybe_prompt: Some(prompt),
|
||||
toolbar_offset,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn update(&mut self, ctx: &egui::Context) -> bool {
|
||||
match self {
|
||||
Dialog::File {
|
||||
|
|
@ -373,6 +390,101 @@ impl Dialog {
|
|||
});
|
||||
is_open
|
||||
},
|
||||
Dialog::SelectElement {
|
||||
maybe_prompt,
|
||||
toolbar_offset,
|
||||
} => {
|
||||
let Some(prompt) = maybe_prompt else {
|
||||
// Prompt was dismissed, so the dialog should be closed too.
|
||||
return false;
|
||||
};
|
||||
let mut is_open = true;
|
||||
|
||||
let mut position = prompt.position();
|
||||
position.min.y += toolbar_offset.0 as i32;
|
||||
position.max.y += toolbar_offset.0 as i32;
|
||||
let area = egui::Area::new(egui::Id::new("select-window"))
|
||||
.fixed_pos(egui::pos2(position.min.x as f32, position.max.y as f32));
|
||||
|
||||
let mut selected_option = prompt.selected_option();
|
||||
|
||||
fn display_option(
|
||||
ui: &mut egui::Ui,
|
||||
option: &SelectElementOption,
|
||||
selected_option: &mut Option<usize>,
|
||||
is_open: &mut bool,
|
||||
in_group: bool,
|
||||
) {
|
||||
let is_checked =
|
||||
selected_option.is_some_and(|selected_index| selected_index == option.id);
|
||||
|
||||
// TODO: Surely there's a better way to align text in a selectable label in egui.
|
||||
let label_text = if in_group {
|
||||
format!(" {}", option.label)
|
||||
} else {
|
||||
option.label.to_owned()
|
||||
};
|
||||
let label = if option.is_disabled {
|
||||
egui::RichText::new(&label_text).strikethrough()
|
||||
} else {
|
||||
egui::RichText::new(&label_text)
|
||||
};
|
||||
let clickable_area = ui
|
||||
.allocate_ui_with_layout(
|
||||
[ui.available_width(), 0.0].into(),
|
||||
egui::Layout::top_down_justified(egui::Align::LEFT),
|
||||
|ui| ui.selectable_label(is_checked, label),
|
||||
)
|
||||
.inner;
|
||||
|
||||
if clickable_area.clicked() && !option.is_disabled {
|
||||
*selected_option = Some(option.id);
|
||||
*is_open = false;
|
||||
}
|
||||
|
||||
if clickable_area.hovered() && option.is_disabled {
|
||||
ui.ctx().set_cursor_icon(egui::CursorIcon::NotAllowed);
|
||||
}
|
||||
}
|
||||
|
||||
let modal = Modal::new("select_element_picker".into()).area(area);
|
||||
modal.show(ctx, |ui| {
|
||||
for option_or_optgroup in prompt.options() {
|
||||
match &option_or_optgroup {
|
||||
SelectElementOptionOrOptgroup::Option(option) => {
|
||||
display_option(
|
||||
ui,
|
||||
option,
|
||||
&mut selected_option,
|
||||
&mut is_open,
|
||||
false,
|
||||
);
|
||||
},
|
||||
SelectElementOptionOrOptgroup::Optgroup { label, options } => {
|
||||
ui.label(egui::RichText::new(label).strong());
|
||||
|
||||
for option in options {
|
||||
display_option(
|
||||
ui,
|
||||
option,
|
||||
&mut selected_option,
|
||||
&mut is_open,
|
||||
true,
|
||||
);
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
prompt.select(selected_option);
|
||||
|
||||
if !is_open {
|
||||
maybe_prompt.take().unwrap().submit();
|
||||
}
|
||||
|
||||
is_open
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -87,30 +87,6 @@ input[type="file"] {
|
|||
border-style: none;
|
||||
}
|
||||
|
||||
select {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
select[multiple] { padding: 0em 0.25em; }
|
||||
select:not([multiple]) { padding: 0.25em 0.5em; border-radius: 6px; }
|
||||
|
||||
select:not([multiple])::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
border-width: 5.2px 3px 0 3px;
|
||||
border-style: solid;
|
||||
border-color: currentcolor transparent transparent transparent;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
select:not([multiple]) option { display: none !important; }
|
||||
select:not([multiple]) option[selected] { display: inline !important; }
|
||||
select[multiple] option { display: block !important; }
|
||||
select[multiple] option[selected] { background-color: grey; color: white; }
|
||||
select[multiple]:focus option[selected] { background-color: darkblue; }
|
||||
|
||||
td[align="left"] { text-align: left; }
|
||||
td[align="center"] { text-align: center; }
|
||||
td[align="right"] { text-align: right; }
|
||||
|
|
@ -358,3 +334,12 @@ progress #-servo-progress-bar {
|
|||
height: 100%;
|
||||
background-color: #7a3;
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: lightgrey;
|
||||
border-radius: 5px;
|
||||
border: 1px solid gray;
|
||||
padding: 0 0.25em;
|
||||
/* Don't show a text cursor when hovering selected option */
|
||||
cursor: default;
|
||||
}
|
||||
2
tests/wpt/meta/MANIFEST.json
vendored
2
tests/wpt/meta/MANIFEST.json
vendored
|
|
@ -349238,7 +349238,7 @@
|
|||
],
|
||||
"the-select-element": {
|
||||
"option-add-label-quirks.html": [
|
||||
"2c3c8093e253250f11a7e84a7ba89f3535d2eb20",
|
||||
"f91609afc506b7530c6106bd047eab93b8645aa7",
|
||||
[
|
||||
null,
|
||||
[
|
||||
|
|
|
|||
2
tests/wpt/meta/css/css-content/content-none-option.html.ini
vendored
Normal file
2
tests/wpt/meta/css/css-content/content-none-option.html.ini
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
[content-none-option.html]
|
||||
expected: FAIL
|
||||
2
tests/wpt/meta/css/css-content/content-none-select-1.html.ini
vendored
Normal file
2
tests/wpt/meta/css/css-content/content-none-select-1.html.ini
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
[content-none-select-1.html]
|
||||
expected: FAIL
|
||||
2
tests/wpt/meta/css/css-content/content-none-select-2.html.ini
vendored
Normal file
2
tests/wpt/meta/css/css-content/content-none-select-2.html.ini
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
[content-none-select-2.html]
|
||||
expected: FAIL
|
||||
|
|
@ -28,3 +28,24 @@
|
|||
|
||||
[opened <details> content shown ("<div><details open><summary>abc</summary>123")]
|
||||
expected: FAIL
|
||||
|
||||
[<select size='1'> contents of options preserved ("<select size='1'><option>abc</option><option>def")]
|
||||
expected: FAIL
|
||||
|
||||
[<select size='2'> contents of options preserved ("<select size='2'><option>abc</option><option>def")]
|
||||
expected: FAIL
|
||||
|
||||
[empty <optgroup> in <select> ("<div>a<select><optgroup></select>bc")]
|
||||
expected: FAIL
|
||||
|
||||
[empty <option> in <select> ("<div>a<select><option></select>bc")]
|
||||
expected: FAIL
|
||||
|
||||
[<optgroup> containing <option> ("<select><optgroup><option>abc</select>")]
|
||||
expected: FAIL
|
||||
|
||||
[<select size='1'> contents of options preserved ("<div><select size='1'><option>abc</option><option>def")]
|
||||
expected: FAIL
|
||||
|
||||
[<select size='2'> contents of options preserved ("<div><select size='2'><option>abc</option><option>def")]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[option-label-whitespace.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[option-with-br.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[select-1-block-size-001.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[select-button-min-height-001.html]
|
||||
expected: FAIL
|
||||
2
tests/wpt/meta/html/rendering/replaced-elements/the-select-element/select-empty.html.ini
vendored
Normal file
2
tests/wpt/meta/html/rendering/replaced-elements/the-select-element/select-empty.html.ini
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
[select-empty.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[select-multiple-re-add-option-via-document-fragment.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[select-wrap-no-spill.optional.html]
|
||||
[Selected OPTION label with white-space:pre-wrap should not spill out.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[option-add-label-quirks.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[option-checked-styling.html]
|
||||
expected: FAIL
|
||||
|
|
@ -5,15 +5,9 @@
|
|||
[interactive content <input> as first child of <label>]
|
||||
expected: FAIL
|
||||
|
||||
[interactive content <select></select> as second child under <label>]
|
||||
expected: FAIL
|
||||
|
||||
[interactive content <iframe></iframe> as second child under <label>]
|
||||
expected: FAIL
|
||||
|
||||
[interactive content <select></select> as first child of <label>]
|
||||
expected: FAIL
|
||||
|
||||
[interactive content <video tabindex=""></video> as second child under <label>]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -32,9 +26,6 @@
|
|||
[interactive content <object usemap=""></object> as second child under <label>]
|
||||
expected: FAIL
|
||||
|
||||
[interactive content <select></select> deeply nested under <label>]
|
||||
expected: FAIL
|
||||
|
||||
[interactive content <textarea></textarea> as first child of <label>]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -67,4 +58,3 @@
|
|||
|
||||
[interactive content <textarea></textarea> as second child under <label>]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[closed-listbox-rendering.tentative.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[select-marker-end-aligned.tentative.html]
|
||||
expected: FAIL
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<title>OPTION's label attribute in SELECT -- Adding a label (quirks)</title>
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-select-element-2">
|
||||
<link rel="match" href="option-label-ref.html">
|
||||
<meta name="assert" content="An option element is expected to be rendered by displaying the element's label.">
|
||||
<meta name="assert" content="An option element is expected to be rendered by displaying the element's label when the document is in quirks mode">
|
||||
|
||||
<select>
|
||||
<option>Element Text</option>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue