On clicking the option on context menu (of my chrome extension) I want to show a modal on the page, which contains a form.
How do you implement this?
What I have found implemented right now:
I can easily describe a form in contentScript.js and inject it.
Problems I have found:
Defining the elements to be injected in javascript is tedious. (isn't there a better way)
Website's CSS interferes with my injected elements
Possible solutions I have found:
Shadow-DOM so that website's CSS does not interfere with the injected element.
Example:
Pocket Chrome extension is exactly the type of action I want to build and it doesn't user shadow-DOM. How does it do?
Related
I have some custom controls that I want to include in Xpages, but I don't want them to be visible to the user or to take up space on the screen, as it is throwing my alignment off. I have looked at the properties rendered, loaded, and visible, but I don't really understand them and they don't seem to do what I want, which is to include some functionality but not change the layout.
I am sure there is a way to do this, but I can't figure it out.
Loaded means it won't be added to the component tree and only affects server-side functionality. Because it's not in the component tree (the server-side map of the page) it can't be passed to the browser or processed during partial refreshes. Rendered and visible are the same and mean they're in the component tree, so server-side processing can interact with them, but no HTML is passed to the browser for them. So you can't interact with them via CSJS. If you want it passed to the browser, available for CSJS but not visible to the user, you'll need to set the style as display:none. Another option is to put that style in a theme and allocate the themeId you choose to your custom control.
I'm using the intern and writing some functional tests.
The application I am testing uses a lot of Dojo tabs and iframes and I'm having some trouble navigating around with my functional tests.
I can select the iframes using the "frame()" call and this is fine for accessing the nested iframes. However how do I navigate back up? Selenium WebDriver has a defaultContent to return you to the top most frame but I can't find an implementation of this in the Intern WD.
The problem I am having is that I navigate down into a nested iframe and click a button which switches to a different Dojo tab in a higher frame. I can see the browser loading and switching to the new tab but intern is still stuck on the same nested iframe and I can't navigate back up.
Thanks
Passing null as the frame identifier switches back to the page’s default content.
I am currently on a project redesigning an existing traditional domino web application to XPages. This application contains a web form with quite a lot of helper dialog boxes. Also notifications and validation and confirmation is done through dialogboxes.
I know I can create a custom control for each dialog box and add it to the Xpage and call the show. I even managed to load it dynamically using a dynamic content control with a facet for each dialog. Since the dialog cc contains a show() in the onClientLoad. It is easy to open a dialog by switching the content of the dynamic content control.
Still, adding all these custom controls to my XPages feels inefficient and really clutters the design tab. What's your take?
I would prefer setting the content of the dialog dynamically (Like in traditional domino you would define a form for each dialog). Is that possible?
If not is it possible to load a custom control dynamically (Like using a computed subform)?
Also for confirmation boxes I need the OK button to execute different code for each confirm. What would be the best way to implement that? Add custom parameter "functionOnOk" to the "dlgConfirm" custom control and evaluate that in the submit button?
PS: I am still using panels with dojoType=dijit.DialogBox, but will change those to extlib dialog boxes. For the confirm and messageboxes I am now using client side dijit.Dialogs with mark-up in code, but I would like the markup in XPages as well.
I know there are issues with panels with dijit.Dialog, because Dojo moves the dialog in the DOM, which prevents any SSJS in the dialog running. I don't know if that's also an issue with dijit.DialogBox, but I suspect it could be. Jeremy Hodge did some code to workaround that.
However, I would strongly recommend using the Extension Library control. Client-side dijit.Dialogs are likely to be much more difficult to code and will not allow any SSJS interaction. I'm not aware of any Dojo properties not available in the Extension Library control, and the Extension Library control also allows you to open or close the dialog both in CSJS or SSJS. It also allows you to specify an area to refresh on close.
In terms of the properties, preload is there purely to speed up showing. Are you using the refreshOnShow property? This ensures the URL or content is refreshed each time the dialog is shown. The Extension Library chapter on dialogs has a table covering all the properties. You can set the URL to point to another XPage or another web page. This may allow you to use the Dynamic Content control to pass parameters to switch the content that should appear.
In terms of the code behind the OK button, if you use the Extension Library dialog, you have all the functionality you would have outside the dialog.
I am new to Watir, and am working on developing a testing tool for my work.
I have run into a problem that I cannot seem to solve, even after checking several sites.
The javascript window creation is below: (the window created holds a pdf in a window, so the only "buttons" are the minimize, maximize, close)
<a id="LogIn_HyperLink2" class="ms-WPTitle" onclick="javascript:var win = new Window({className: 'spread', title: 'Security Statement', top:0, left:1, width:750, height:365, url:'--redacted--/security.pdf', showEffectOptions: {duration:1.0}}); win.setConstraint(true, {left:10, right:20}); win.showCenter(); return false;" href="--redacted--/security.pdf" style="color:#6699cc; font-weight:bold;">Security Statement</a><br>
I have tried using both
puts browser.modal_dialog(:title, "Security Statement").exists?
puts browser.javascript_dialog.exists?
both have returned 'false'
What approach should I be taking to attach to this new window, or more directly: How can I close this new window?
You can see the page at this link (IE only)
If the window holds a PDF file it's a browser window, not a modal javascript popup (alert, confirm, prompt)
It's defined to start without all the normal menus etc active, but it's still a browser window. You can attach to it as described in the Watir Wiki section about new browser windows, using the url or the title since you know both of those (given the HTML you showed us).
If you are using Watir-Webdriver use it's window switching commands. Right now the watirspec for that is your best reference to the methods supported and how they work.
EDIT
Thanks for the link. While the above would be true for a new browser window, that's not what you are faced with. What you have there is all inside the browser HTML, created in the DOM on the fly with javascript. It's all standard HTML elements, easily interacted with once you know what's going on (this is actually IMHO easier to deal with than a popup or separate window)
Use the IE developer tools, after you click the link that makes that 'window' appear, click the icon in the toolbar of the dev tools to refresh the DOM in the dev tools and you will be able to see that.
The outermost container appears to be a div of class 'dialog', which is unique in the DOM at that point.
The window controls are three divs under that one, with classes 'spread_close', 'spread_minimize', 'spread_maximize'. There are three tables that hold the graphic elements for the top, sides, and bottom of the 'window' but there is ZERO actual content there, it's just a visual windowframe.
There is also an iframe that superimposes that window, which is I think were the content would be (I can't get it to load, maybe because I'm not authorized for it or something)
If you just want to close the window, try this:
browser.div(:class => 'spread_close').click
Since this is coming into existing due to a bunch of client side JS code you may need to use something like the 'when_present' method after clicking the link before you first start to interact with it. eg if all you want to do is click the link to open it, and then close it, you'd do something like this
browser.link(:text => 'Security Statement').click
browser.div(:class => 'spread_close').when_present.click
I have a page in which an augmented context menu would be natural and intuitive for a visitor. Not so different from a ton of pages, I'm sure. EDIT: Of course, I must do that without losing any of the browser's native context-menu items/actions. Just want to add an item.
Is there any way to accomplish that yet in any browser?
We can imagine (putative) markup for such a thing. Maybe somehting like:
<context n onclick="handleNewItem"> my new item </context>
where n is the line number of "my new item"
Thanks!
You could totally replace the context menu with your own, but then you'd loose the standard browser's one.
Unless you are writing a browser extension, I don't know of any way to just append commands to the browser's context menu from within javascript.