Chrome has a feature as did firebug before it went defunct to break on an element's changes. Chrome however, only breaks on 3 types of changes and Firebug no longer works on new versions of Firefox and the tool to replace doesn't have the ability to break on changes to an element.
I have tried all three break on events for chrome and none enter the debugger. I have a select list like:
<select id="someid">
<option value="">Choose</option>
<option value="12"> Some Text with bad formatting and <span>in it for some reason</span>
<option value="13"> Other text with <span>etc</span> in it</option>
</select>
What I have found happens is that some JS on load will replace all the bad option text with valid html after load. Why does magento2 do this? I don't know. But it makes it a pain for me and is likely tied to a core feature as the spans have ids to products and more in it.
I append text to the options but it gets removed by this other replace procedure. I ended up writing setTimeout to check every 1000ms if the newer option text is there, and add my changes. But it's not a good fix it's a work around that is prone to break for a multitude of reasons, and slow besides.
My question is, in this gigantic huge program of software I never wrote how can I easily find what arbitrary javascript is changing the option text on load? Chrome won't persist on load, and even if I quickfinger Mcgee it and hit f8 to pause loading just as it starts, then find the element, then set it to break on changes, it doesn't actually break.
So I tried Mutation Observers, but then found out via another stack overflow answer to someone else's question, that you can never have the call stack visible using mutation observers. So now I'm looking at watch(), but I doubt it will solve my issue either?
Why isn't breaking on changes to element or it's children or it's text from JS a default easy to use feature this is a CONSTANT issue in development to find out which chunk of code in thousands and thousands of lines is actually causing a behavior you don't want, or you wish to run other javascript after it runs.
I don't have reputation to comment, but based on what you said:
What I have found happens is that some JS on load will replace all the bad option text with valid html after load. Why does magento2 do this?
i was thinking if magento doesn't have a function to show raw input ? maybe it's the root of your problems...
https://magento.stackexchange.com/questions/569/how-to-escape-output-data
Related
I was looking at popular LinkedIn post feature, the three dots seems to trigger html injection inside specific tags. My first question would be, why they did this choice, however what really interest me, is how can I debug and understand the mechanics involved, since when I inspect the page with firefox I cannot find the starting point nor the triggers to control this pop-up trigger?
I made the horrible mistake of using an html feature without looking it up first and, lo and behold, when I'm a few hours away from deploying a website I realize Safari doesn't have support for datalist...
http://caniuse.com/#search=datalist
This is a rather troublesome thing since a large part of the audience for this specific website consists of the technologically impaired and, as such, I expect safari to constitute 30-50% of all access on the website.
Now, I can see how a simple-ish polyfill for datalist could be written in JavaScript, so that I can just include a script tag and painlessly-ish get rid of the problem without having to shim my whole html, but I can't find said JavaScript.
I'm not asking for you guys to write it, I could obviously do that myself if I wanted to waste a bunch of time. I'm hoping you guys know of a true-tested library for this that I, in my stupidity and anger can't seem to find right now.
Before anyone comments on the issue, yes, it was stupid of me not to do parallel testing on Safari considering up to half my users could come from there... but hindsight is 20-20
edit: I should mention, I found two plugin which were sadly, Jquery&modernizer depended, and that's really the kind of dependency I'd rather not take on.
Edit: Someone marked this question as a duplicate without apparently reading the questions. I will, as such, restate my question:
I want a Javascript script that polyfills datalists for Safari/Opera mini. Now, lets go through these terms, shall we:
-> Javascript != Hmtml
-> polyfill: https://en.wikipedia.org/wiki/Polyfill Let me TL;DR: Allows you to implement a feature that is not supported by a browser.
-> datalist: allows the user to type words dynamically in an input element and suggests autcompletes from a drop-downlist. It looks like this:
<body>
Choose: <input type="text" list="languages">
<label for="languages">
<datalist id="languages">
<option value="JavaScript"></option>
<option value="Haskell"></option>
<option value="Ruby"></option>
<option value="Go"></option>
<option value="Python"></option>
<option value="etc"></option>
</datalist>
</label>
https://jsfiddle.net/a5o2cna3/
Problem with the other answer is that:
a) It take html editing, its not a javascript that you insert painlessly and that allows other human beings to read the code without going: What the fuck is that ?
b) It REPLACES the datalist by a select element. It can server the same purpose IF you don't want users to input anything but the predefined options, IF you don't care about how the element look visually AND IF you don't care about the fact that, instead of typing, the user has to select from a list (very annoying on mobile).
This is how the proposed solution works (the one in the "duplicate" question):
<body>
Choose: <input type="text" list="languages">
<label for="languages">
<select id="languages">
<option value="JavaScript">JavaScript</option>
<option value="Haskell">Haskell</option>
<option value="Ruby">Ruby</option>
<option value="Go">Go</option>
<option value="Python">Python</option>
<option value="etc">etc</option>
</select>
</label>
https://jsfiddle.net/vv63pptj/
So, this question is indeed similar but its similar to a question that wasn't ever solved the way I wanted it solve it, and instead of "necro bumping" (don't even know if its possible).
Now, to exemplify what I wanted (and found after some digging on github):
https://github.com/Fyrd/purejs-datalist-polyfill
-> No external dependencies, just a few hundred lines of js and css
-> Can be simply included in the html and it makes existing datalists work without mangling the html
-> Makes the input element behave on safari and opear mini the same way it behaves in firefox, chrome and android browser. It offer the same functionality and looks the same. Its not a "This replace you element with an element with different behavior but often used for similar situations" its a "This mimics your element with javascript for browsers that don't support it"
I shall post this answer to the similar question, in case people reading that want an alternative. But I wanted to explain as clear as possible why this is not a duplicate, since it was asked of me.
Safari support will be part of the upcoming iOS and MacOS releases that most likely will be released end of February/beginning of March.
And you could as well use another polyfill for that: https://github.com/mfranzke/datalist-polyfill/
The answer to my question was found digging a bit on github:
https://github.com/Fyrd/purejs-datalist-polyfill
Basically a short and sweet .js and .css that you can include in your html and it makes datalists linked inputs behave the same on Safari and Opera mini as they do on Chrome, Firefox and Android Browser.
I have some rather lengthy HTML and related styles and javascript. I am trying to find something within them that changes the text of a specific element. It changes this...
<span class="panel-title"> I'm a Panel with All Options</span>
... to this ...
<span class="panel-title">Best Panel Ever</span>
It seems crazy, but I tried searching every single file (1704 of them) for the text "Best Panel" and Visual Studio found nothing.
So... I am hoping that a debugger in Chrome or IE can point me to script is changing this text but I'm not familiar enough with those debugging tools to perform a task like this... or if it's even possible.
Edit for Clarification
Just to be clear... this is straight HTML, CSS, and Javascript. There is nothing like ASP or PHP involved. The HTML file in question has the first text, but the rendered HTML file has the second text.
You can using the Elements tab in Chrome find a specific item in the code (CTRL + F). This screenshot might help: http://gyazo.com/72f2f8a819bf5bfad17a210a53427f2d - It may or may not help.
Edit 1
Are you sure you looked through every single file? Maybe that Best Panel Ever is coming from a database entry which has been attacked or it may just be an attack not through a database. Have you considered that to be an option?
Edit 2
As suggested in the chat you should probably search for occurences where the span is being changed rather than looking for a specific value as it may be stored in a variable which isn't showing the text.
Edit 3
After finding out it was something to do with LS (local storage):
I think it should be broke down in to steps, first ensure that the value in question is in LS that way you can narrow down your search to localStorage.getItem("yourKeyWhichHoldTheText") and you'd have a rough idea what you are actually looking for.
The latest versions of FireFox have a javascript event inspector. Perhaps you could inspect that element for any possible js functions that could be updating it?
Here's a resource
and another
I am trying to improve performance of the select2 v3.4.8 library in IE8.
Essentially, I have narrowed the problem down to the call from the SingleSelect2's opening method to the parent AbstractSelect2's opening method. The method call I am speaking of is this one:
this.parent.opening.apply(this, arguments);
I have seen this call take upwards of 5 seconds to complete. In some instances, it has taken up to 10 seconds to open the dropdown in IE8.
I've made some performance improvements already. For example, rather than constantly adding the:
<div id="select2-drop-mask" class="select2-drop-mask"></div>
to the DOM programmatically, I just added it directly to the markup and set it's display:none. This saves quite a number of cycles because apparently, adding elements to the DOM in IE8 is expensive to do from Javascript.
But I still want to get more performance improvements than this. We have only increased performance by about 10-20% by making this change.
Does anyone have any suggestions for me?
We've already cached the data to display in the dropdown on the client on page load. So, there are zero server calls being made when the dropdown is opening. The performance bottleneck is entirely inside the select2 library itself.
Unfortunately, we are unable to upgrade our select2 library. Doing so would be at least an 8-Point User Story, so it's prohibitive at this time for us to undertake an upgrade.
Thanks to anyone who's able to help!
-classTemplateT
I have created a Drupal website that uses Openlayers to display maps. In one of these maps there are some "Filters" which the user can use to dynamically change the data shown in the map. The data are related to countries are shown as bubbles over the countries. The bubbles are drawn using Openlayers' API. A good amount of calculations go behind the scene while filters are selected. I have used setTimeout to avoid long running loops. The filters work fine. However, after a number of filters are clicked (e.g. if 12 filters are clicked), if the user tries to move to another page by clicking a link, in IE7 and IE8 the following error shows -
"Stop running this script?
A script on this page is causing your web browser to run slowly.
If it continues to run, your computer might become unresponsive."
This error does not show in any other browser and does not show in IE7, 8 until a link is clicked. Any pointer in this regard will be highly appreciated.
UPDATE : The problem was in OpenLayers' event cache. OpenLayers's clears the event cache in the window unload event and this was getting stuck in IE7 and IE8 (I am not sure why). So far I have been able to solve the issue when user clicks another link, by calling OpenLayers.Event.unloadCache() on click of normal links.
jQuery can be very resource expensive. The articles linked bellow gives you 10 good advices to perform better your jQuery applications. The most useful for me (I had the same problem a month ago) was to replace $.each() with traditional for lops and to replace extensive DOM construction with jquery templates. Also the use of ID instead of classes and to give a context for the selectors, selector caching, and so on.
This list is ordered using my own criteria of "usefulness" in the advices.
10 ways to instantly increase your jquery performance
improve your jquery 25 excellent tips
10 advanced jquery performance tuning tips from paul irish
8 jquery performance tips
You need to optimize your client script. Please refer to answers here.