LibWeb: Implement the DataTransferItem kind and type attributes

Author: https://github.com/trflynn89
Commit: https://github.com/LadybirdBrowser/ladybird/commit/001d8384e5e
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1158
Reviewed-by: https://github.com/shannonbooth

Tests/LibWeb/Text/expected/HTML/data-transfer.txt

@@ -1,7 +1,7 @@
 dropEffect: none
 effectAllowed: none
 length=0, types=
-stringItem: [object DataTransferItem]
+stringItem: kind=string, type=custom-type
 length=1, types=custom-type
-fileItem: [object DataTransferItem]
+fileItem: kind=file, type=text/plain
 length=2, types=custom-type,Files

Tests/LibWeb/Text/input/HTML/data-transfer.html

@@ -9,7 +9,7 @@
         println(`length=${dataTransferItemList.length}, types=${dataTransfer.types}`);
 
         let stringItem = dataTransferItemList.add("well hello friends", "custom-type");
-        println(`stringItem: ${stringItem}`);
+        println(`stringItem: kind=${stringItem.kind}, type=${stringItem.type}`);
         println(`length=${dataTransferItemList.length}, types=${dataTransfer.types}`);
 
         if (dataTransferItemList[0] !== stringItem) {
@@ -26,7 +26,7 @@
         });
 
         let fileItem = dataTransferItemList.add(file);
-        println(`fileItem: ${fileItem}`);
+        println(`fileItem: kind=${fileItem.kind}, type=${fileItem.type}`);
         println(`length=${dataTransferItemList.length}, types=${dataTransfer.types}`);
 
         if (dataTransferItemList[1] !== fileItem) {

Userland/Libraries/LibWeb/HTML/DataTransfer.cpp

@@ -266,6 +266,14 @@ JS::NonnullGCPtr<DataTransferItem> DataTransfer::item(size_t index) const
     return m_item_list[index];
 }
 
+DragDataStoreItem const& DataTransfer::drag_data(size_t index) const
+{
+    VERIFY(m_associated_drag_data_store);
+    VERIFY(index < m_item_list.size());
+
+    return m_associated_drag_data_store->item_list()[index];
+}
+
 size_t DataTransfer::length() const
 {
     if (m_associated_drag_data_store)

Userland/Libraries/LibWeb/HTML/DataTransfer.h

@@ -62,6 +62,7 @@ public:
     JS::NonnullGCPtr<DataTransferItem> add_item(DragDataStoreItem item);
     bool contains_item_with_type(DragDataStoreItem::Kind, String const& type) const;
     JS::NonnullGCPtr<DataTransferItem> item(size_t index) const;
+    DragDataStoreItem const& drag_data(size_t index) const;
     size_t length() const;
 
 private:

Userland/Libraries/LibWeb/HTML/DataTransferItem.cpp

@@ -40,4 +40,49 @@ void DataTransferItem::visit_edges(JS::Cell::Visitor& visitor)
     visitor.visit(m_data_transfer);
 }
 
+// https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransferitem-kind
+String DataTransferItem::kind() const
+{
+    // The kind attribute must return the empty string if the DataTransferItem object is in the disabled mode; otherwise
+    // it must return the string given in the cell from the second column of the following table from the row whose cell
+    // in the first column contains the drag data item kind of the item represented by the DataTransferItem object:
+    //
+    //     Kind | String
+    //     ---------------
+    //     Text | "string"
+    //     File | "file"
+    if (!mode().has_value())
+        return {};
+
+    auto const& item = m_data_transfer->drag_data(*m_item_index);
+
+    switch (item.kind) {
+    case DragDataStoreItem::Kind::Text:
+        return "string"_string;
+    case DragDataStoreItem::Kind::File:
+        return "file"_string;
+    }
+
+    VERIFY_NOT_REACHED();
+}
+
+// https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransferitem-type
+String DataTransferItem::type() const
+{
+    // The type attribute must return the empty string if the DataTransferItem object is in the disabled mode; otherwise
+    // it must return the drag data item type string of the item represented by the DataTransferItem object.
+    if (!mode().has_value())
+        return {};
+
+    auto const& item = m_data_transfer->drag_data(*m_item_index);
+    return item.type_string;
+}
+
+Optional<DragDataStore::Mode> DataTransferItem::mode() const
+{
+    if (!m_item_index.has_value())
+        return {};
+    return m_data_transfer->mode();
+}
+
 }

Userland/Libraries/LibWeb/HTML/DataTransferItem.h

@@ -22,12 +22,17 @@ public:
     static JS::NonnullGCPtr<DataTransferItem> create(JS::Realm&, JS::NonnullGCPtr<DataTransfer>, size_t item_index);
     virtual ~DataTransferItem() override;
 
+    String kind() const;
+    String type() const;
+
 private:
     DataTransferItem(JS::Realm&, JS::NonnullGCPtr<DataTransfer>, size_t item_index);
 
     virtual void initialize(JS::Realm&) override;
     virtual void visit_edges(JS::Cell::Visitor&) override;
 
+    Optional<DragDataStore::Mode> mode() const;
+
     JS::NonnullGCPtr<DataTransfer> m_data_transfer;
     Optional<size_t> m_item_index;
 };

Userland/Libraries/LibWeb/HTML/DataTransferItem.idl

@@ -5,8 +5,8 @@ callback FunctionStringCallback = undefined (DOMString data);
 // https://html.spec.whatwg.org/multipage/dnd.html#datatransferitem
 [Exposed=Window]
 interface DataTransferItem {
-    [FIXME] readonly attribute DOMString kind;
-    [FIXME] readonly attribute DOMString type;
+    readonly attribute DOMString kind;
+    readonly attribute DOMString type;
     [FIXME] undefined getAsString(FunctionStringCallback? _callback);
     [FIXME] File? getAsFile();
 };