Finding top-level X Window x/y coordinates of CTRL-F text in Firefox

Question

I need to programmatically determine the top-level X window coordinates of the text that is found by using CTRL-f in Firefox. For example, starting with this sequence:

Open up Firefox on Linux (MS Windows is not involved here).
Browse to some web page.
Type CTRL-f to start finding text "foo" that exists in the page.
Firefox then highlights the text as expected.
Type Escape key which eliminates the find toolbar at the bottom of the page.

Now, at this point, I want to open up the Scratchpad (Shift-F4), and type some javascript that will dump out to the console the X and Y coordinates of the top left point of the text that is highlighted/selected (again, to clarify, the coordinates need to be the top-level X window coordinates). The coordinates need to be transformed into coordinates relative to the top-level X window (the Firefox window).

I would prefer not to install any Firefox extensions such as Selenium, just use straight javascript. I also do not want to modify the content of the page being loaded and viewed if possible.

The selected text and xy coordinates question seems similar to this. The window.getSelection() method returns the text string, but I'm looking specifically for the X and Y coordinates of that string as it is on the X window.

EDIT #1: Note that the "window coordinates" given by http://javascript.info/tutorial/coordinates is not the same as the top-level X window coordinates. A viable answer to this question includes the full affine transformation javascript code to transform from Element or Node coordinates to top-level X window coordinates (even if it means intermediate transformations into "window coordinates" as given by http://javascript.info/tutorial/coordinates).

EDIT #2: Possible answer is in the works in https://stackoverflow.com/a/14119731/257924 but I am still confirming it. Confirmed via EDIT #3 below:

EDIT #3: A followup to Tim Downs answer: This is what worked, with a caveat:

var sel = window.getSelection();
var result = "no_selection";
if (sel.rangeCount) {
    var range = sel.getRangeAt(0).cloneRange();
    if (range.getBoundingClientRect) {
        range.collapse(true);
        var rect = range.getBoundingClientRect();
        if (rect) {
            x = rect.left;
            y = rect.top;
            x += window.mozInnerScreenX;
            y += window.mozInnerScreenY;
            result = "" + x + " " + y;
        }
    }
}
result

The caveat is that if the user has scaled the page by pressing CTRL-PLUS or CTRL-MINUS in the page, the x and y values will not be correct (scaling issue). But I found that if scaling is not involved, the x and y values were absolute X root window (under X11 under Linux) coordinates, not relative to the origin of the Firefox X root window, which is what I originally asked for.

I've asked a separate related issue about accessing the scaling factor during debugging.

score 1 · Accepted Answer · edited May 23 '17 at 10:24

1

You can do this using the getClientRects() method of a range obtained from the selection. See https://stackoverflow.com/a/6847328/96100

To transform the coordinates returned by the rectangle returned by getClientRects() into coordinates relative to the "screen" in Firefox only, you can use window.mozInnerScreenX and window.mozInnerScreenY. Demo below; the results seem plausible in Firefox on Windows.

http://jsfiddle.net/timdown/gaw5W/1/

edited May 23 '17 at 10:24

Community

1
1

answered Jan 02 '13 at 09:40

Tim Down

318,141
75
454
536

Marked the answer as useful. But, what I actually need is the top-level X window coordinates of the Firefox X (X11) window of the top left corner of the selected text range, not relative to the "document" object. – bgoodr Jan 03 '13 at 16:00
1

@bgoodr: You can get that in Firefox by adding [`window.mozInnerScreenX`](https://developer.mozilla.org/en-US/docs/DOM/window.mozInnerScreenX) and [`window.mozInnerScreenY`](https://developer.mozilla.org/en-US/docs/DOM/window.mozInnerScreenY) to your `x` and `y` coordinates, although I've never used these so can't vouch for them. – Tim Down Jan 03 '13 at 16:11
@Tim_Down: Thanks very much! That may be what I'm looking for, but I'll have to fiddle with a modified copy of your jsfiddle at http://stackoverflow.com/a/6847328/257924 to confirm it on the targeted X window managers to see if it is reliable enough. – bgoodr Jan 03 '13 at 16:15
@Tim_Down: I see your edit to the answer, but the jsfiddle.net demo link does not show any Javascript code. Could you fix that, please? – bgoodr Jan 05 '13 at 15:54
@Tim_Down: http://jsfiddle.net/aSUSh/5/ indicated at http://stackoverflow.com/a/6847328/96100 is also not showing up either. Hmmm maybe this is a glitch on jsfiddle.net? – bgoodr Jan 05 '13 at 15:56
@Tim_Down: Yes, jsFiddle is still unresponsive even a week later, so I've pasted my own solution as another answer to this question (used to be a part of http://stackoverflow.com/a/14185479/257924 but I moved the Javascript code here where I should have put it in the first place). – bgoodr Jan 12 '13 at 15:33
@bgoodr: Turns out that shift-refresh or clearing the browser cache fixes the jsFiddle problem. – Tim Down Jan 14 '13 at 00:49

score 0 · Answer 2 · edited May 23 '17 at 11:55

Given that the jsfiddle.net is unresponsive (referenced in Tim's answer), I'm replying with my own solution below that also addresses the issue I described in "EDIT #3" in my question concerning getting the scaling factor.

The following Javascript code demonstrates how to obtain the properly scaled origin coordinate of the selected text. The selected text includes what is selected if you type CTRL-f, type some text that is then selected, and you type Escape.

In order for screenPixelsPerCSSPixel to be available without throwing exceptions, the devtools.chrome.enabled flag in about:config should be set to true, and you will have to use the Scratchpads Environment menu to select the Browser configuration (See Inspecting Firefox Components.interfaces.nsIDOMWindowUtils.screenPixelsPerCSSPixel value in Javascript Scratchpad for details).

To avoid security risks, be sure to turn devtools.chrome.enabled flag back to false after trying the code below.

After the above configuration changes are applied, type the following text into the Scratchpad, place your cursor after "result" at the very end, and type CTRL-L to see the result.

var contentWindow = window.content;
var sel = contentWindow.getSelection();
var result = "no_selection";
if (sel.rangeCount) {
    var range = sel.getRangeAt(0).cloneRange();
    if (range.getClientRects) {
        range.collapse(true);
        var rect = range.getClientRects()[0];
        if (rect) {
            x = rect.left;
            y = rect.top;
            x += contentWindow.mozInnerScreenX;
            y += contentWindow.mozInnerScreenY;
            var util = contentWindow.QueryInterface(Components.interfaces.nsIInterfaceRequestor).getInterface(Components.interfaces.nsIDOMWindowUtils);
            x *= util.screenPixelsPerCSSPixel;
            y *= util.screenPixelsPerCSSPixel;
            result = "" + x + " " + y;
        }
    }
}
result

I verified that the above handles scaling properly in the content window such that the resulting coordinate values embedded in the result string correspond to the absolute X root window coordinates. I have not tested the above on MS Windows.

Finding top-level X Window x/y coordinates of CTRL-F text in Firefox

2 Answers2

Linked