I'm new to developing firefox addons and was wondering if there is a way to override/modify the link preview text that appears at the bottom of the browser when you hover over a link.
I've looked briefly and wasn't able to find any reference describing this.
Thanks for any thoughts.
You can set the status text like this:
aDOMWindow.XULBrowserWindow.setOverLink('blah')
Where aDOMWindow is a window like that returned from for example Services.wm.getMostRecentWindow('navigator:browser').
So like do link.addEventListener('onmouseenter'.... a function that does setOverLink
and to make it go away set it to blank string. So just window.XULBrowserWindow.setOverLink('')
But you are doing this on mouse enter of a link and by default mouse out of links will blank it so you may not neede to handle blanking it.
edit:
you asked about add-sdk, so the Services.wm.getMostRecentWindow might not make sense, so here's a quick test you can try in sdk:
const { getMostRecentBrowserWindow } = require('sdk/window/utils');
getMostRecentBrowserWindow().XULBrowserWindow.setOverLink('hiiiiiii!!!')
Related
Our app is using 1+ toolbars written using add-on sdk. The problem is, right now the toolbars seems to decide for themselves in which order they will get displayed. In the first window I have toolbar A below toolbar B. However, if I open a new window, toolbar B will be on top.
Anybody else encountered this issue? Do you guys have any tips on how to deal with it?
Thanks!
Luka
EDIT: attaching a code that shows how I create toolbars:
this.myframe = new ui.Frame({
url: self.data.url(this.LABELS.TRANSLATION_FRAME)
});
this.mytoolbar = ui.Toolbar({
title: this.NAME,
items: [this.myframe],
hidden: true
});
The second toolbar has the same three arguments (title, items, hidden) and both frames contain a properly structured, very minimal html files.
These toolbars reside in two separate extensions. If both are enabled, as I mentioned above, the ordering seems to be pretty random.
I'm talking desktop browser experience, e.g. chrome.
In jira, if I attach the image I can use it in my comment - and it's great!
I usually use width=800px so the whole image can be seen in the comment.
So I can write something like this:
Here's the screenshot
!my-screenshot-image.jpg|width=600px!
The problem is that sometimes screenshot is too big and when shrunk to smaller size, e.g. 600px, is not readable.
When you click on the image in attached files area then it pops up and this is what I want in the comment section.
I was wondering if there's any parameter that would make it happen?
Is there a list of parameters that can be used when "embedding" image somewhere? I only seem to find width parameter.
P.S. When you open jira ticket on mobile - it looks fine and image is actually clickable - when you click on it it opens up a page with just image in it.
You want this to allow a small image in the comment to be expanded into a larger light box view:
!my-screenshot-image.jpg|thumbnail!
Per the source for JIRA 6.3, the following are also valid attributes for images:
align
border
bordercolor
alt
title
longdesc
height
width
src
lang
dir
hspace
vspace
ismap
usemap
id
class
This one works for me.
!my-screenshot-image.jpg|thumbnail,
width=800px!
I'm developing an extension for Firefox which searches terms in a page. And I'd like to change found text highlight color and background. For example, I search for a letter "s" and by default it's selected with a blue rectangle with white text color. So I want to change the blue to the red.
How could I do this via JS?
Edit0:
To select a found text I use document.createRange() and selection.addRange() methods.
I don't know how the default finder selects a found term and applies background to it.
So maybe the 'range' method is not the best.
But I think I'm searching a way to highlight this created range...
Edit1:
Now I've partially resolved the color-changing preoblem. Just add a CSS rule with ::-moz-selection and red background when a text is found and selected. Then for document 'onmousedown' I remove this rule not to leave the default selection as red.
But a new problem is when I find say a digit and it gets a selection the background of that selection is gray (so it looks like a text selection of an inactive window). Then when I click with my mouse somewhere in the document text and press F3 the extension finds the next digit and selects it with the red background. And next findings work right (with red background).
So my purpose is change that initial gray background to red.
Maybe I should change the inactive selection color...
Edit2:
Now I updated my JS code:
var selection=w.getSelection()
var range=w.document.createRange()
range.setStart(foundNode,foundOffset)
range.setEnd(foundNode,foundOffset+foundLength)
selection.removeAllRanges()
selection.addRange(range)
var controller=gBrowser.docShell.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsISelectionDisplay)
.QueryInterface(Ci.nsISelectionController);
controller.setDisplaySelection(controller.SELECTION_ATTENTION)
controller.repaintSelection(controller.SELECTION_NORMAL)
Thanks to Noitidart's answer I found some information on how to use nsISelectionController XPCOM interface to select found text with background. Still I can't set a custom color for this background so that it be different from the default color of found text in Firefox. But setting the ui.textSelectBackgroundAttention preference in about:config to desired color will work with both my extension and default find engine.
I've found that SELECTION_ATTENTION constant is responsible for that background color and the setDisplaySelection method links the color to the selected text. But I couldn't find any implementation of this method. I saw only nsISelectionController idl file with its structure but no correspondent .cpp or .js file implementing this .idl. So I don't have information on how the color is set.
Edit3:
Recently I added the "Highlight All" functionality to my extension. And a new question about color of this highlight has rised. Using the above tecnique will show all the matches with green find color (by default). But it's more comfortable to use a different color to distinguish the current match and others.
So I couldn't find another helpful nsISelectionController constant for the "Highlight All" selection. I simply set this selection to 'DISABLED' type and changed the ui.textSelectBackgroundDisabled about:config pref. This pref is obviously for the selected text background of an inactive window. And it worked for me.
controller.setDisplaySelection(controller.SELECTION_DISABLED)
Another thing is that I'm not sure that the controller.repaintSelection() in the previous Edit is necessary. I guess the selection didn't work without it when I started my experiments with this stuff. But now I removed that line and all still work.
Plus:
And some additional links if somebody will need:
nsISelectionController Reference
Selection Reference
Forum question about highlight
about:config prefs for highlight
An Add-on using a similar tecnique
Finder.jsm and other sources
Also I used some files from Firefox source archive: Firefox 33 Source:
- nsISelectionController.idl [\content\base\public\]
- nsTypeAheadFind.cpp [\toolkit\components\typeaheadfind\]
- Finder.jsm [\toolkit\modules\]
- findbar.xml [\toolkit\content\widgets\]
I asked this question to quicksilver via email and this is what he told me:
You might find this one helpful: https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsISelectionController
I'm hardly the master you think I am, actually. :) To change those colors I just change the values for preferences:
ui.textHighlightBackground
ui.textHighlightForeground
ui.textSelectBackgroundAttention -> SELECTION_ATTENTION, it's not a highlight, it's a normal selection (as you would select some text with your mouse and it would turn the regular blue blackground, in windows at least) but it's given "attention", so it has the green background that the find operation reports. Basically it's a way of showing the user "Here I am!!" after firefox automatically selecs the text he searched for.
And I really don't know most of those contants, SELECTION_NORMAL is for normal text selection, like it would be when you select text with your mouse, SELECTION_FIND is for the highlights, and I only know the ON/HIDDEN/OFF/DISABLED ones which are self-explanatory. SELECTION_SPELLCHECK is probably for the auto-correct when you are typing in an editable content node, but I'm just guessing that one from the name.
Also, as far as I know, it's not possible to just create custom selection ranges/contants, as the code simply won't recognize them without editing the C++ code as well. Which is actually one of the reasons I haven't implemented https://github.com/Quicksaver/FindBar-Tweak/issues/76 yet.
I have a website that is optimized to work on iOS devices. But the problem is that the keyboard always says Go as user fills the form. How do I get the keyboard to say Next until the last entry on the form, where it should say Go? Or alternatively, how do I disable the Enter button entirely?
Again, this is a website. It works everywhere websites work: in browsers. Except I have having this particular problem in Safari on mobile devices.
while changing the input type gives you some control of the keyboard layout the return key label in IOS cannot be customized.
Other than changing it to say Search there are no customizations available. You can disable the functionality of the button using something like this injQuery:
$("#myForm input").live("keyup", function(evt) {
if (evt.keyCode === 13) {
$("#myForm").trigger("submit");
}
});
I'm currently playing with a bar chart implemented through Open Flash Charts (I believe version 1, might be version 2...) with PHP. Unfortunately, we're having real trouble with the tooltip not showing the correct thing. I am trying to get it to show the x-axis label for the hovered-over column, then a ":", then the value of the bar. The code is as follows:
$Colour = '#3465A4';
$BarChart= new bar();
$BarChart->set_values($Bar);
$BarChart->set_colour($Colour);
$BarChart->set_tooltip('#x_label#:#val#');
$x_labels = new x_axis_labels();
$x_labels->set_labels($Roles);
$x_labels->rotate(-60);
$x = new x_axis();
$x->set_labels($x_labels);
$chart = new open_flash_chart();
$chart->add_element($BarChart);
$chart->set_bg_colour( '#FFFFFF' );
$chart->set_x_axis($x);
$tooltip = new tooltip();
$tooltip->set_hover();
$chart->set_tooltip($tooltip);
$JSONArray['my_chart_1'] = $chart->toPrettyString();
As far as I can tell, this should be correct - the bar chart appears, with the correct values (populated from $bar, whose generation is not shown above). However, the hover-over tool-tip for a column only shows ":value" - the label name is missing!
Does anyone know where we might have gone wrong, and how I can fix it?
EDIT:
An update for any Bounty Hunters coming in to try and answer this question. The reason I have not accepted the below answer is that it only provides a work-around, and does not explain why the work-around is necessary. I am looking either for an answer to my original question (how to make the labels show in a normal bar-chart), or a reasonable explanation regarding why one must use a stacked bar chart (including sources makes your answer so much better!). If the latter, example code or an explanation of how stacked charts are created would be much appreciated as well!
If you are happy with the simple bar visuals then use stacked bar (using it with an array of one element will draw it just like the simple bar). That one will replace #x_label# correctly.
Alternatively you can copy the missing code from Bars/Stack.as to other bar types and recompile the code.
As per: http://forums.openflashchart.com/viewtopic.php?p=7433#p7433
It's a bug in OFC2 in the latest versions (at least). I've found what is causing the issue with #x_label#, but my understanding of the code/Flash isn't good enough to know why it's happened/broken.
I've done a quick fix that I need to test some more, but it now works on bar charts. Assuming I've not broken anything else beyond repair, it'll make it's way into the next community release.
If anyone wants the source code changes before the next release let me know.
(I am currently maintaining the community releases)