Search code examples
javascriptfirefoxxulxpcom

How can I change label of OK/Cancel buttons of a dialog window?


How can I change/tranlate label of OK/Cancel buttons of a dialog window of XPCOM? You can see a list of such buttons here.

Indeed I want localize Zotero Firefox add-on. A portion of code that display such dialog is here:

var regenerate = promptService.confirmEx(
    window, 
    Zotero.getString('integration.revert.title'),
    Zotero.getString('integration.revert.body'),
    promptService.STD_OK_CANCEL_BUTTONS + promptService.BUTTON_POS_1_DEFAULT,
    null, null, null, null, out
);​

Solution

  • Well, first, if you want to learn XUL, I would highly recommend getting the XUL Explorer, which is an interactive tool you can use to build snippets and preview what you are designing.

    This will come in handy if you've never worked in XUL before, as though it looks a lot like HTML, it's not the same lineup of elements and approaches. It really lives a bit above where HTML does, in that it's used to build desktop apps, which can be used to build things such as:

    https://developer.mozilla.org/en-US/docs/tag/tools

    The majority of those programs you can download the source for and look through it just like you would a list of documents. You'll also notice several extensions, such as the Firefox Web Developer add-on. Here's the source, and here's some of the XUL files. Which happens to include a dialogs directory, and a message.xul:

    <?xml version="1.0"?>
    <?xml-stylesheet href="chrome://global/skin/"?>
    <?xml-stylesheet href="chrome://web-developer/content/dialogs/style-sheets/message.css"?>
    <!DOCTYPE dialog SYSTEM "chrome://web-developer/locale/dialogs/message.dtd">
    <dialog buttons="accept" id="web-developer-message-dialog" onload="WebDeveloper.Message.initialize()" title="&webdeveloper.message.title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
        <script src="chrome://web-developer/content/common/common.js"/>
        <script src="chrome://web-developer/content/dialogs/javascript/message.js"/>
    
        <vbox id="web-developer-message-details">
            <description id="web-developer-message"/>
            <description id="web-developer-more-information" value="&webdeveloper.more.information;" onclick="WebDeveloper.Message.moreInformation()" class="url"/>
        </vbox>
    </dialog>​
    

    So you can use a Dialog for this, which let's you create different types of prompts. For instance, I made the following going through a tutorial some time ago:

    <?xml version="1.0"?>
    <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
    <dialog id="myDialog" title="My Dialog"
            xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
            onload="window.sizeToContent();"
            buttons="accept,cancel"
            buttonlabelaccept="Set Favorite"
            buttonaccesskeyaccept="S"
            ondialogaccept="return doSave();"
            buttonlabelcancel="Cancel"
            buttonaccesskeycancel="n"
            ondialogcancel="return doCancel();">
      <script>
      function doSave(){
          //doSomething()
          return true;
      }
      function doCancel(){
          return true;
      }
      </script>
      <dialogheader title="My dialog" description="Example dialog"/>
      <groupbox flex="1">
        <caption label="Select favorite fruit"/>
        <radiogroup>
          <radio id="1" label="Oranges because they are fruity"/>
          <radio id="2" selected="true" label="Strawberries because of color"/>
          <radio id="3" label="Bananna because it pre packaged"/>
        </radiogroup>
      </groupbox>
    </dialog>
    

    Which looks like:

    enter image description here

    So you really have a lot of options, even, if you want, nsIPromptService...

    var prompts = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
                            .getService(Components.interfaces.nsIPromptService);
    
    var check = {value: false};                  // default the checkbox to false
    
    var flags = prompts.BUTTON_POS_0 * prompts.BUTTON_TITLE_SAVE +
                prompts.BUTTON_POS_1 * prompts.BUTTON_TITLE_IS_STRING  +
                prompts.BUTTON_POS_2 * prompts.BUTTON_TITLE_CANCEL;
    // This value of flags will create 3 buttons. The first will be "Save", the
    // second will be the value of aButtonTitle1, and the third will be "Cancel"
    
    var button = prompts.confirmEx(null, "Title of this Dialog", "What do you want to do?",
                                   flags, "", "Button 1", "", null, check);
    

    There's also something called PopupNotifications.jsm. There's a lot there, so I'm sure there's something you can find for what you're looking to do. There's also the Zotero source, too.