Closed Bug 1455818 Opened 7 years ago Closed 7 years ago

"Hmm. That address doesn’t look right" message after drag & drop

Categories

(Core :: DOM: Core & HTML, defect)

59 Branch
defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: info, Unassigned)

Details

Attachments

(1 file)

Attached image Screenshot_4.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:59.0) Gecko/20100101 Firefox/59.0 Build ID: 20180323154952 Steps to reproduce: https://webequipage.com/ this is the web-site where the problem happens, with Firefox v 59.0.2. The website is still in development, however Drag & Drop feature works fine in Chrome. In Firefox it shows a very strange, disturbing behavior. Which crashes the website's workflow too. To reproduce the problem, you need: 1. Start the website https://webequipage.com/ 2. Click over "Load Database from Server" button in the upper right part of the screen. Wait until the database is loaded, it might take about a minute. Disregard "stop it" or "wait" message if it shows up. Just wait. (I hope your computer has 16 GB of memory, I'm not 100% sure if the database is going to load with 8) 3. I have attached to this message a screenshot of the workflow that should emerge at the end of the load. There will be some more objectson the screen showing at the rightmost part, just click anywhere at the empty space of the screen, and emerging right part will be gone. There you get the workflow, where the problems happens, after drag & drop of Items, shown on the attached illustration. Actual results: As soon as I drop an from any of the above mentioned lists that are seen on the attached illustration, my websites crashes and I get messages like these, which are completely senseless to me: - Hmm. That address doesn’t look right. Please check that the URL is correct and try again. - Hmm. We’re having trouble finding that site. We can’t connect to the server at www.xn--1001500-vm0dbdb61gsa844qva.com. If that address is correct, here are three other things you can try: Try again later. Check your network connection. If you are connected but behind a firewall, check that Firefox has permission to access the Web. - Hmm. We’re having trouble finding that site. We can’t connect to the server at www.xn--4800-6h9ab513hoa.com. If that address is correct, here are three other things you can try: Try again later. Check your network connection. If you are connected but behind a firewall, check that Firefox has permission to access the Web. P.S. I HAVE NO IDEA WHAT ALL THESE WEB-ADDRESSES MEAN. THEY AREN'T RELATED TO ME ANYWAYS. Also, my Windows Defender always reports that I have no any threats. Expected results: Expected results you can check at Google Chrome browser. Dropped Items just take place and all proper procedures, associated with them, are being executed without issues or bugs. Please help me figure out is it a firefox bug, or maybe a problem at my side. Thank you! Dmitry Chernikov
Hi Dmitry, I tried reproducing this bug successfully, but unfortunately your test page is quite large and complex, and it's pretty difficult for us to figure out what's the root cause of this issue on this test page as is. I looked at the scripts on this page, and the only one that seems to do anything with regards to drag and drop events seems to be https://webequipage.com/JS/adminEvents.js. In that script, you have code like this: // Start of drag and drop Events var iGrabbedId = ""; var iOverId = ""; var grabbedArray=[]; function dragStart(e) { let eT=e.target; closeCPIDP(eT,true); iGrabbed = eT.draggable ? eT : eT.parentNode; iGrabbedId=iGrabbed.id; e.dataTransfer.setData("text/plain", iGrabbedId); e.dataTransfer.effectAllowed = 'move'; //e.dataTransfer.dropEffect='move'; if(iGrabbed.parentNode === lAA) defineGrabbedArray(iGrabbed); } function dragOver(e) { e.preventDefault(); let eT = e.target; let oo = $eP(eT); if(iGrabbedId==="" || oo === null) return; let overList = oo.draggable ? oo.parentNode : oo; let ooId = oo.id; if(iOverId === "") iOverId = ooId; if(!isDraggedItemLegit($id(iGrabbedId),overList)) return; if (!$eP(eT).draggable) return false; if ( oo.classList.contains('draggedOver') ) {iOverId = ooId; return;} else if (iOverId !== ooId) {$cRem($id(iOverId),"draggedOver");$cAdd(oo,"draggedOver")} iOverId = ooId; } function dragEnd(e){ e.preventDefault(); let [iOver,iDropped]=[$id(iOverId),$id(iGrabbedId)]; if(iOver === null) return; let droppedList = iOver.draggable ? iOver.parentNode : iOver; if(!isDraggedItemLegit(iDropped,droppedList)) return; try{ if(grabbedArray.length===0) {droppedList.insertBefore(iDropped,iOver)} else{grabbedArray.forEach(item=>droppedList.insertBefore(item,iOver))} $cRem(iOver,"draggedOver"); iOverId=""; iGrabbedId=""; grabbedArray=[]; switch (droppedList) { case lAA: reWriteAOrder_D(); showAllAttributes_D(_D.a); break; case lPPA: reWritePPAOrder_P(droppedList); break; case lPTS: reWritePTSAOrder_P(droppedList); break; case lAVA: atvReWriteManualSort(droppedList); break; } return; } catch(err){console.log(`${err.message}. Error`, err)} } // End of drag and drop Events I suspect something here is breaking somehow in Firefox... It would help if you could try to create a reduced test case based on what you know about what this code is trying to do. One thing that jumped at me was the call to dataTransfer.setData() here. I dragged one of these fields out to a separate Firefox window rendering a <textarea> element, and I got this text there: "⟨65∶0∶0⟩". Note the Unicode characters there. If you add a .com at the end of this, the puny-code version of this string would be xn--6500-6h9ab513hoa.com (you can try it out on https://www.punycoder.com/ yourself). Similarly if you puny decode the .com addresses you had gotten, you will see similar Unicode strings. Based on this, my rough guess as to what's happening is that the drop operation is probably failing (perhaps for some reason a drop event handler isn't registered and we don't have a drop target) and when you drop the item, Chrome drops the text value but Firefox gets confused somehow and thinks you're dropping a link and tries to wrap it in www.<>.com, and things break from there... I hope this gives you some ideas for further investigation...
Flags: needinfo?(info)
Dear Ehsan, Thank you for such a detailed answer. I know I gave you a hard time with my heavyweight web-site that is in development, I'm sorry about that. I'm going to do something better about it and hopefully I can find a real source of the problem and share it with you. My own ideas are also about Google Chrome stringifying drugged compound Object, inserting it as a string in a new place and then parsing back to compound Object. Meanwhile, Firefox could've been doing the same thing somehow different, without stringifying-parsing back first of all, and in combination with something unknown, some problems with drag event declaration that I just cannot see, for instance, this might cause that strange looking problem. Or maybe those specific Unicode characters that I widely use somehow confuse Firefox exactly in drag'n'drop situation: anywhere else they work just fine. Your punycode idea definitely worth investigation, and at least it perfectly explains the most confusing thing: where these extremely suspicious URLs come from? Thank you for this information in particular, because I was really worried about these URLs. I feel like I need to find some time in my schedule to isolate this problem better and then text to you again. Thank you for sharing your thoughts, I'll see what I can do in the next few days. Dmitry
Flags: needinfo?(info)
Dear Ehsan, I've figured out how to isolate the problem quickly. Still might not be a final solution from me perhaps, but at least it shows that the problem isn't caused by UNICODE characters that I'm using as IDs. These are the steps for you to reproduce the problem with easy: 1. Start the website pragmadb.com (after the start, do not load any database from server or whatever, just start the website) 2. In the right upper corner you'll see "Create New Attribute" darkcyan button. 3. Click over the button once, an Attribute will pop up below. You are going to need only one Attribute. 4. Drag and drop it in it's near neighborhood: you'll be transferred by firefox to "punycoded" address http://www.xn--100-lg2ab858fma.com/. This is what I reported in my first letter, just to make sure it's sill there. 5. Reload pragmadb.com again, and "Create New Attribute" again. Just one. 6. Proceed to Firefox Developer Tools and find the Item that represents the just created Attribute. It's the <div> element with unicode id="⟨1∶0∶0⟩" (Make sure you have only 1 Attribute, it's just better for the case of the isolation of the problem) 7. In developer tools, change the id="⟨1∶0∶0⟩" into id="mozilla" (or whatever URL, where you want to be transferred later) 8. Go back to pragmadb.com tab in firefox browser, grab the Attribute, and drop it nearby. After a few seconds, you'd be transferred to this URL, if at the previous step you made the id="mozilla": https://www.mozilla.org/en-US/firefox/ I still don't know if I made some mistakes, specific to firefox drag & drop event declaration. I only notice that my code and declarations are specific - since my Attributes are compound Objects, rather than a simple ones. But since in Chrome everything works just fine there's probably nothing serious with my own software: possibly just a small mistake that I cannot notice now, which is specific for firefox Also, I don't think that those transfers by firefox shall be considered as the "default" behavior in whatever situation that causes them. Obviously, there's something wrong with they, it just shouldn't happen. Try to do this: 1. Start pragmadb.com 2. Click over Create New Attribute" button 3 times: you'll get 3 Attributes popped up 3. Grab the lowest one and drop it at the first, or at the second place in the list of the Attributes 4. I notice the following behavior after the drop of the grabbed Attribute in a new place. You'd probably notice this too: 4.1 The dropped Attribute takes it's place in the list of other Attributes, where it was dropped (which is totally expected from my software) 4.2 After a few seconds, firefox makes a transfer to some URL that it has "figured out" from id of the dropped Attribute. Why?? So, basically drag and drop of my software works in firefox too. However, after the successful end of the drop operation, something outrageous gets initiated in firefox, for no particular reason. This definitely might be a bug of the firefox, rather than of my software. By the way, if you try to change placements of the Attributes in the list from Firefox Developer Tools - by drag and drop, but drag and drop of HTML elements, as you see them in Developer Tools Inspector, everything goes just smoothly: they change place in HTML, in the browser tab of the pragmadb.com results are being displayed correctly, and no transfer to any URLs happening later then. This all I can add to description of the problem at the moment. I hope this will help to study it and develop a proper solution. Yours, Dmitry
Hi Dmitry, Thanks for your helpful comments! Based on your explanations, I managed to create this minimized test case: https://pewter-waste.glitch.me/ If you look at the test case, there are two drop targets, one that cancels the *drop* event, one that cancels the *dragend* event. If you drag the "Drag me" text on top of the first one, nothing happens. If you drag it on top of the second one, the page goes to mozilla.com. The reason is that per the HTML spec, the dragend event isn't cancelable <https://html.spec.whatwg.org/multipage/dnd.html#event-dnd-dragend>, so the preventDefault() call on that event is ignored by the browser. The default action of Firefox when you drop some piece of text on the content area is to try to navigate to it (try typing "apple" in the location bar, select it all, and drag it over to the content area and drop it; you'll go to apple.com) whereas Chrome doesn't have this default behavior. This means that when you don't cancel the *drop* event, there is a visible difference between Firefox and Chrome. And in your dragEnd() function that I quoted in comment 1, the preventDefault() call is being ignored in both browsers. This means that there is no bug in Firefox, your web app just needs to be updated to cancel the *drop* event. I tried adding a ondrop="event.preventDefault()" attribute to the div with id="ppAttributesContainer" in the Developer Tools on your test site, and that fixes the drag and drop issue. Hope this helps. I'm going to close the bug since there is nothing to do on our side. If you believe my analysis is mistaken, please feel free to reopen. Thanks!
Status: UNCONFIRMED → RESOLVED
Closed: 7 years ago
Resolution: --- → INVALID
Dear Ehsan! You nailed it! Thanks a lot for your great attention to this problem and a quick respond! Besides the correct solution, you also provided me with detailed, thoughtful explanation of all its aspects. I'm totally grateful, please accept my sincere respect! As a matter of fact, I'd never guessed that this would be a default behavior of the firefox browser, which should've been cancelled in a little bit uncommon, despite being totally clear, way. Hence, I'd probably spend days looking for a solution (in a wrong place) myself. Really appreciate your help, thank you! And all the best! Dmitry
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: