Add DataTransferItems support for drag-and-drop'ed files and texts
https://bugs.webkit.org/show_bug.cgi?id=76367
Reviewed by Tony Chang.
WebKit-svn:
* ManualTests/data-transfer-items-file-dragout.html: Added.
* ManualTests/resources/test:lorem-text.html: Added.
WebKit-svn/LayoutTests:
* editing/pasteboard/data-transfer-items-drag-drop-file-expected.txt: Added.
* editing/pasteboard/data-transfer-items-drag-drop-file.html: Added.
* editing/pasteboard/data-transfer-items-drag-drop-string-expected.txt: Added.
* editing/pasteboard/data-transfer-items-drag-drop-string.html: Added.
* platform/gtk/Skipped: Added the new tests as the platform does not support dataTransferItems yet.
* platform/mac/Skipped: Ditto.
* platform/qt/Skipped: Ditto.
* platform/win/Skipped: Ditto.
WebKit-svn/Source/WebCore:
Per http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-datatransfer-interface
the new interface should also support drag-and-dropped files and texts in
addition to pasted texts/images. The user apps should also be able to add
texts/files to the drag store by calling event.dataTransfer.items.add().
This patch adds drag-and-drop'ed items support in DataTransferItem and
DataTransferItemList so that they work for dropped files and texts (as well as
the copy-pasted texts/images).
This patch also adds customized toJS()/toV8() code to Blob/File javascript
binding so that the JS code can get either Blob or File underlying object
where the API returns Blob. This change is necessary since we return Blob
from DataTransferItem.getAsFile() for pasted images but want to return File
for dropped files.
Tests: editing/pasteboard/data-transfer-items-drag-drop-file.html
editing/pasteboard/data-transfer-items-drag-drop-string.html
* GNUmakefile.list.am: Added entries for the new {JS,V8}BlobCustom.
* Target.pri: Ditto.
* UseJSC.cmake: Ditto.
* WebCore.gypi: Ditto.
* bindings/js/JSBindingsAllInOne.cpp: Ditto.
* bindings/js/JSBlobCustom.cpp: Added toJS custom code that returns File or
Blob depending on the return value of isFile().
(WebCore::toJS):
* bindings/v8/custom/V8BlobCustom.cpp: Added toV8 custom code.
(WebCore::toV8):
* dom/DataTransferItem.h: Added a new create() method which takes File.
* dom/DataTransferItemList.cpp: Added add(File) method.
(WebCore::DataTransferItemList::add):
* dom/DataTransferItemList.h: Ditto.
* dom/DataTransferItemList.idl: Ditto.
* fileapi/Blob.idl: Added CustomToJS for toJS/toV8.
* platform/chromium/ClipboardChromium.cpp: Added code for drag-and-drop'ed items.
(WebCore::ClipboardChromium::items): Revised.
(WebCore::ClipboardChromium::mayUpdateItems): Added.
(WebCore::ClipboardChromium::isStorageUpdated): Added.
* platform/chromium/ClipboardChromium.h:
* platform/chromium/DataTransferItemChromium.cpp: Added a new constructor that
takes File and updated getAsFile() to make it support dropped files.
(WebCore::DataTransferItem::create):
(WebCore::DataTransferItemChromium::DataTransferItemChromium):
(WebCore::DataTransferItemChromium::getAsFile):
* platform/chromium/DataTransferItemChromium.h:
* platform/chromium/DataTransferItemListChromium.cpp:
(WebCore::DataTransferItemListChromium::addInternalItem):
* platform/chromium/DataTransferItemListChromium.cpp: Added overrides implementation for m_item accessors to make them reflect the changes in the owner clipboard.
(WebCore::DataTransferItemListChromium::length):
(WebCore::DataTransferItemListChromium::item):
(WebCore::DataTransferItemListChromium::deleteItem):
(WebCore::DataTransferItemListChromium::clear):
(WebCore::DataTransferItemListChromium::add):
(WebCore::DataTransferItemListChromium::mayUpdateItems): Added.
* platform/qt/DataTransferItemQt.cpp: Added a new constructor that takes File and updated
getAsFile() to make it support dropped files.
(WebCore::DataTransferItem::create):
(WebCore::DataTransferItemQt::DataTransferItemQt):
(WebCore::DataTransferItemQt::getAsFile):
* platform/qt/DataTransferItemQt.h:
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@105506 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/ManualTests/data-transfer-items-file-dragout.html b/ManualTests/data-transfer-items-file-dragout.html
new file mode 100644
index 0000000..b76d25a
--- /dev/null
+++ b/ManualTests/data-transfer-items-file-dragout.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<body>
+<p><b>BUG ID: 76367</b> <a href="http://bugs.webkit.org/show_bug.cgi?id=76367">Bugzilla bug </a> Add DataTransferItems support for drag-and-drop'ed files and texts</p>
+
+<p id="test" style="background-color:skyblue; padding:3px;"><b>STEPS TO TEST:</b> <br>
+1. Open the <a href="resources">$(WebKitRoot)/ManualTests/resources</a> folder in your native file browser.<br>
+2. Drag and drop the file 'test:lorem-text.html' into the 'Drop files here' area below.<br>
+3. Drag out <a href="#" id="dragout" draggable="true">this link</a> out of the browser window into a different folder in the native file browser).
+</p>
+
+<div id="destination" style="min-height:100px; margin: 5px; border: solid 1px black">Drop files here </div>
+
+<p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
+The same file you dropped in the step 2 should be dragged out to the folder in the step 3. The file should have the same content and the same file name (i.e. 'test:lorem-text.html', make sure the prefix 'test:' is not dropped) as the dropped file. (NOTE: this does not work for multiple files yet.)
+</p>
+
+<p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
+Nothing happens or a different file from the dropped one (likely a text file with the page title) is dragged out.
+</p>
+<p id="console"></p>
+
+<script>
+function log(text)
+{
+ var console = document.getElementById('console');
+ console.appendChild(document.createTextNode(text));
+ console.appendChild(document.createElement('br'));
+}
+
+function test(expect, actual)
+{
+ log((expect == actual ? 'PASS' : 'FAIL') + ': "' + expect + '" == "' + actual + '"');
+}
+
+var destination = document.getElementById('destination');
+destination.addEventListener('dragover', handleDragOver, false);
+destination.addEventListener('drop', handleDrop, false);
+
+function handleDragOver(e)
+{
+ e.stopPropagation();
+ e.preventDefault();
+}
+
+function handleDrop(e)
+{
+ e.stopPropagation();
+ e.preventDefault();
+
+ log('Verifying contents of DataTransferItems...');
+ var items = e.dataTransfer.items;
+ var files = [];
+ test(1, items.length);
+
+ for (var i = 0; i < items.length; ++i) {
+ test('file', items[i].kind);
+ var file = items[i].getAsFile();
+ log('Dragged files: ' + file.name);
+ log('Dragged file size: ' + file.size);
+ files.push(file);
+ }
+
+ // Setting up dragout items.
+ log('Setting up dragging out with the dropped items...');
+ var source = document.getElementById('dragout');
+ source.addEventListener('dragstart', function(e) {
+ for (var i = 0; i < files.length; ++i) {
+ log('Dragging out ' + files[i].name);
+ e.dataTransfer.items.add(files[i]);
+ }
+ }, false);
+
+ log('Please dragout the link (noted in the step 3) and see if the same file you dropped in in the step 2 is properly drag out.');
+}
+
+</script>
+</body>
+</html>
