Set breakpoint to event in google chrome debugger - debugging

Sorry if this question was mentioned. I have web page with bunch of javascript files. One of it has function that sets value to some input on HTML file. Is it possible to see via debugger which javascript function invokes changing of value of the input HTML element?

Right click on the input tag that you are willing to observe and select Break On and then Attribute Modifications. Your scripts will stop if they try to modify the input value.

Related

Apex main region header with dynamic value

I have tried everything I know to make title of header replicate items value, including substitution string &P10_TITLE_TEXT. inside headers title property. Generally, this would work for normal region, but in my case I try to modify value of pages main region, which is rendering first, before any other item. My assumption is that title text is not showing because it cannot see items value yet.
Is there a simple way to refresh title header after items are ready, or perhaps another better solution?
PS: This is main header of the modal dialog page, that has no property for setting static id, and it's template is less adjustable then normal regions.
Try the following javascript in "Execute When Page Loads" of the modal page:
$('.ui-dialog-title',parent ? parent.document : document).text( apex.items. P10_TITLE_TEXT.value );
Pre-Rendering computations may be the solution here.
You can try creating a computation before Regions under Pre-Rendering to set &P10_TITLE_TEXT.. There will be no need to "refresh". This is if you are simply loading it once.
If you are trying to set headers based on input every time you change it, I would advise separating into two pages so you can submit the page and APEX can reload and process, or just use javascript.

TinyMCE4 `image_list` external url

I am trying to get TinyMCE 4's image_list to work with a URL returning JSON data as specified in the example here.
I have setup a GET endpoint http://demo.com/media on my server which gives back a JSON response consisting of a list of objects with their title and value attributes set, for example:
[{"title":"demo.jpg","value":"http://demo.com/demo.jpg"}]
I have also specified the option image_list: "http://demo.com/media" when initializing the plugin.
However, when I click the image icon in the toolbar, nothing pops up. All I can see in the network tab is an OPTIONS request with status 200, but then nothing. The GET request I was expecting never happens.
What is the correct way of using image_list in TinyMCE 4? Also, does anyone have a working demo example? I couldn't find anything.
It is somewhat hard to say what the issue is without seeing the exact data your URL is returning. I have created a TinyMCE Fiddle to show (in general) how this is supposed to work:
http://fiddle.tinymce.com/pwgaab
There is a JavaScript variable at the top (pretendFetchedData) that simulates what you would grab from the server (an array of JavaScript objects) and that is referenced via image_list.
If you enter your URL (http://demo.com/media) into a browser window what is returned? Are you sure its an array of JavaScript objects?
I have the identical problem. No matter what I do with the detail of the format (e.g. putting quotes round title and value), nothing happens.
I guess the only way (for me anyway) is to insert the list into the script with php before sending the web page.

What exactly does aria-controls do for the user? How is it affected by AJAX usage?

I have a set of tabs with proper roles and attributes for accessibility support. The content that tab controls gets loaded in via ajax. But each wrapper for the content loaded in also has proper tab pane roles and attributes.
The problem is, when I run an automated audit using Chrome Accessibility Tools, the test fails stating that the corresponding ID of the tab pane is missing for all of the tabs except the one that's currently active (because that wrapper with ID has been loaded). The exact error states: "ARIA attributes which refer to other elements by ID should refer to elements which exist in the DOM."
Since the ID will exist once the tab with the corresponding aria-controls attribute is active, is this really an error? Or is this just a case of a false positive because it's an automated test and they can only do so much.
In summary, What does aria-controls do and does it really need to refer to an ID that currently exists in the DOM?
aria-controls give your assisting technology a way to move to the controlled element.
If this element is not in the DOM or can't be accessed, then yes it's an error.
The two (the element with aria-controls as well the element with the referenced id) must exist at the same time, whether at page render or via JS injection.
The DOM is parsed by the UA/AT combo before the user even gets to the control or your script fires to make it exist. If you use JS injection then you need to make sure the DOM is re-parsed.
This would apply to aria-owns as well.
I don't know whether the following would work in your architecture, but it would solve the error problem:
Design the tabs so they are all in the page at the time it loads. Format those that should not be shown to be outside the viewport using absolute positioning and something like "left: -99em." Use AJAX to reset the positioning when the time has come to display the tabs. The result is that the ARIA ID dependencies will always be valid because the tabs are always part of the DOM.

How to encode the kendo editor field?

I am using the kendo editor. If I write any html data like : <img src=x onerror=alert(0) > as an input. The script is getting executed. Means the kendo editor is not secure. How I can encode the value on client side ?
Thanks in advance.
I don't think the problem here is so much that the Kendo editor is insecure, more that the javascript fragment has made it onto the page in the first place.
On initialization the Kendo editor merely copies the input value verbatim and uses it within the iFrame that is contained within the editor, hence the script executes.
Typically you would encode/sanitize user content server-side before it's displayed. It's your website that generates the HTML page so you have full control over the output and need to ensure that a potentially dangerous value doesn't get added to the input's value in the first place.
It might be worth looking into Microsoft's AntiXSS offering.

Deleting elements using Watir

Does anyone know how to delete an element from the source using Watir? There doesn't seem to be a method for removing elements. Perhaps I'm missing something.
If you know JavaScript, you could execute any JavaScript code on the page.
Example:
browser.execute_script("some javascript code")
I am not a JavaScript ninja, but this question could help you: JavaScript: remove element by id.
Remove elements by css:
browser.execute_script("[...document.querySelectorAll('.some.class')].map(e => {e.parentNode.removeChild(e)})")
We can remove it with javascript. Here's an example to remove a breadcrumbs div element but it's id:
browser.execute_script("bd = document.getElementById('breadcrumbs'); bd.parentNode.removeChild(bd);")
The Purpose for Watir is to do web testing, which is to say drive the browser as if a user was interacting with it. That means doing the things a user could do, clicking on stuff, filling in input fields, etc. It also means being able to verify what is there on the screen that the user can see or interact with.
Since a user cannot delete elements, there is no means by which to do that using the tool.
If the application provides a way for users to 'remove' or 'delete' something, like closing a simulated window, removing a tab etc, then you need to do that by simulating what the user would do (usually clicking on some specific element) in order for that to happen.

Resources