how to put textbox on nav-bar

General discussion, compatibility and contributed extensions.

Moderators: satrow, Lootyhoof, FranklinDM

Locked
Ziad El Hachem

how to put textbox on nav-bar

Post by Ziad El Hachem » 2016-08-27, 19:18

Dear all,

I am new in xul language, still in the early "hello world" status.
I managed to add a menu item, but still not successful in adding a new text box on nav-bar, which i intend to use later on.

i could only manage to add this inside the overlay section:

<overlay id="textbox1Overlay" xmlns="http://www.mozilla.org/keymaster/gateke ... s.only.xul">
<toolbar id="nav-var">
<textbox id="mytextbox1" insertbefore="downloads-indicator" value="Zil"/>
</toolbar>
</overlay>

I feel i need some javascript to force palemoon to accept this. Any help? :crazy:

wost_

Re: how to put textbox on nav-bar

Post by wost_ » 2016-08-27, 20:43

I have never used overlays to modify browser's XUL content but these steps should allow to make an extension with this modification:

1. Create a new directory and a content sub-directory inside
2. Save the code below as a ziad.xul file and put it inside content directory

Code: Select all

<?xml version="1.0"?>

<overlay id="textbox1Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <toolbar id="nav-bar">
        <textbox id="mytextbox1" insertbefore="downloads-indicator" value="Zil"/>
    </toolbar>
</overlay>
3. Save the code below as a chrome.manifest file and put it inside the newly created directory (outside content directory)

Code: Select all

content ziad content/

overlay chrome://browser/content/browser.xul chrome://ziad/content/ziad.xul
4. Save the code below as a install.rdf file and put it near chrome.manifest file

Code: Select all

<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
     
  <Description about="urn:mozilla:install-manifest">
    <em:id>ziad@ziad</em:id>
    <em:version>0.0.1</em:version>
    <em:type>2</em:type>
   
    <em:targetApplication>
      <Description>
        <em:id>{8de7fcbb-c55c-4fbe-bfc5-fc555c87dbc4}</em:id>
        <em:minVersion>25.0</em:minVersion>
        <em:maxVersion>27.*</em:maxVersion>
      </Description>
    </em:targetApplication>

    <em:name>Ziad</em:name>
    <em:description>Description</em:description>
    <em:creator>Creator</em:creator>
  </Description>
</RDF>
5. Pack everything (content directory, chrome.manifest and install.rdf) into a ZIP archive and rename it to have .xpi extension.
6. Open the .xpi file with Pale Moon and allow to restart when it asks to after installing.

Ziad El Hachem

Re: how to put textbox on nav-bar

Post by Ziad El Hachem » 2016-08-28, 09:08

Dear wost,

thank you for your time, and i could use your answer to perfect my chrome.manifest file, (i was targeting firefox since i do not know
pale moon I) but I am afraid that the portion of the overlay is the one i need most: it is not working...

wost_

Re: how to put textbox on nav-bar

Post by wost_ » 2016-08-28, 09:20

It works for me with Pale Moon. Not sure about Firefox though.
aaa.jpg
aaa.jpg (4.49 KiB) Viewed 1236 times

Ziad El Hachem

Re: how to put textbox on nav-bar

Post by Ziad El Hachem » 2016-08-28, 13:06

Ah? really sorry. I am using pale moon also, but thought your answer was not exactly meant for my question. I will give it a try this evening
Thanks

wost_

Re: how to put textbox on nav-bar

Post by wost_ » 2016-08-28, 13:45

Ok, I see you already know how to make an installable extension.

So, maybe the only problem is with a typo in your code:

Code: Select all

<toolbar id="nav-var">
which should be:

Code: Select all

<toolbar id="nav-bar">
I fixed this in the code posted previously but forgot to point that out and you probably missed it.

Ziad El Hachem

Re: how to put textbox on nav-bar

Post by Ziad El Hachem » 2016-08-28, 18:25

Et voilà!

Many thanks wost! It was indeed a Typo! feel ashamed... But my project can now continue.
It will be a long journey, but basically I am planning to have like a quick saving code, with the text box indicating which folder to use...
More ideas are on their way too. But this is a nice start!

Locked