New API to handle Drop & Drow menu (ERP5 specific changes)

Change introduced by Xavier Hardy.

product/Zelenium/selenium/core/scripts/htmlutils.js

@@ -18,6 +18,49 @@
 // This script contains a badly-organised collection of miscellaneous
 // functions that really better homes.
 
+// ERP5
+function getDropDownColors(element){
+    var result = new Array(); //First element: normal state, Second: selected state, Third: disabled state (if it exists)
+    for(var i = 0; i < 6; i++){
+        result[i] = '';
+    }
+
+    var children = element.children;
+    var n = children.length;
+
+    for(var i = 0; i < n; i++){
+        var child = children[i];
+        if(child.selected && result[2] == ''){
+            result[2] = 'color:' + getCssAttr(child, 'color') + '; ';
+            result[3] = 'background-color: ' + getCssAttr(child, 'background-color') + '; ';
+        }
+        else if(child.disabled && result[4] == ''){
+            result[4] = 'color:' + getCssAttr(child, 'color') + '; ';
+            result[5] = 'background-color: ' + getCssAttr(child, 'background-color') + '; ';
+        }
+        else if(!child.disabled && !child.selected && result[0] == ''){
+            result[0] = 'color:' + getCssAttr(child, 'color') + '; ';
+            result[1] = 'background-color: ' + getCssAttr(child, 'background-color') + '; ';
+        }
+        i++;
+    }
+    return result;
+}
+
+function getCssAttr(element, CssAttr){
+	var value = "";
+	if(document.defaultView && document.defaultView.getComputedStyle){
+		value = document.defaultView.getComputedStyle(element, "").getPropertyValue(CssAttr);
+	}
+	else if(element.currentStyle){
+		CssAttr = CssAttr.replace(/\-(\w)/g, function (strMatch, p1){
+			return p1.toUpperCase();
+		});
+		value = element.currentStyle[CssAttr];
+	}
+	return value;
+}
+
 function classCreate() {
     return function() {
       this.initialize.apply(this, arguments);

product/Zelenium/selenium/core/scripts/selenium-api.js

@@ -882,7 +882,126 @@ Selenium.prototype.doSelect = function(selectLocator, optionLocator) {
     this.browserbot.selectOption(element, option);
 };
 
+Selenium.prototype.doHideOptions = function(selectLocator) {
+    /**
+   * Simulate an ERP5 drop-down menu with a select option using an option locator.
+   *
+   * <p>
+   * Option locators provide different ways of specifying options of an HTML
+   * Select element (e.g. for selecting a specific option, or for asserting
+   * that the selected option satisfies a specification). There are several
+   * forms of Select Option Locator.
+   * </p>
+   * <ul>
+   * <li><strong>label</strong>=<em>labelPattern</em>:
+   * matches options based on their labels, i.e. the visible text. (This
+   * is the default.)
+   * <ul class="first last simple">
+   * <li>label=regexp:^[Oo]ther</li>
+   * </ul>
+   * </li>
+   * <li><strong>value</strong>=<em>valuePattern</em>:
+   * matches options based on their values.
+   * <ul class="first last simple">
+   * <li>value=other</li>
+   * </ul>
+   *
+   *
+   * </li>
+   * <li><strong>id</strong>=<em>id</em>:
+   *
+   * matches options based on their ids.
+   * <ul class="first last simple">
+   * <li>id=option1</li>
+   * </ul>
+   * </li>
+   * <li><strong>index</strong>=<em>index</em>:
+   * matches an option based on its index (offset from zero).
+   * <ul class="first last simple">
+   *
+   * <li>index=2</li>
+   * </ul>
+   * </li>
+   * </ul>
+   * <p>
+   * If no option locator prefix is provided, the default behaviour is to match on <strong>label</strong>.
+   * </p>
+   *
+   *
+   * @param selectLocator an <a href="#locators">element locator</a> identifying a drop-down menu
+   * @param optionLocator an option locator (a label by default)
+   */
+    var element = this.browserbot.findElement(selectLocator);
     
+    var elementName = element.id;
+    if(elementName == ''){
+        elementName = element.name;
+    }
+    if(elementName == ''){
+        elementName = element.className;
+    }
+
+    element = this.browserbot.findElement('//ul[@id="' + elementName + '_TEMPORARY_OPTION_DISPLAY' + '"]');
+    this.browserbot.hideOptions(element);
+};
+
+Selenium.prototype.doShowOptions = function(selectLocator, optionLocator) {
+    /**
+   * Simulate an ERP5 drop-down menu with a select option using an option locator.
+   *
+   * <p>
+   * Option locators provide different ways of specifying options of an HTML
+   * Select element (e.g. for selecting a specific option, or for asserting
+   * that the selected option satisfies a specification). There are several
+   * forms of Select Option Locator.
+   * </p>
+   * <ul>
+   * <li><strong>label</strong>=<em>labelPattern</em>:
+   * matches options based on their labels, i.e. the visible text. (This
+   * is the default.)
+   * <ul class="first last simple">
+   * <li>label=regexp:^[Oo]ther</li>
+   * </ul>
+   * </li>
+   * <li><strong>value</strong>=<em>valuePattern</em>:
+   * matches options based on their values.
+   * <ul class="first last simple">
+   * <li>value=other</li>
+   * </ul>
+   *
+   *
+   * </li>
+   * <li><strong>id</strong>=<em>id</em>:
+   *
+   * matches options based on their ids.
+   * <ul class="first last simple">
+   * <li>id=option1</li>
+   * </ul>
+   * </li>
+   * <li><strong>index</strong>=<em>index</em>:
+   * matches an option based on its index (offset from zero).
+   * <ul class="first last simple">
+   *
+   * <li>index=2</li>
+   * </ul>
+   * </li>
+   * </ul>
+   * <p>
+   * If no option locator prefix is provided, the default behaviour is to match on <strong>label</strong>.
+   * </p>
+   *
+   *
+   * @param selectLocator an <a href="#locators">element locator</a> identifying a drop-down menu
+   * @param optionLocator an option locator (a label by default)
+   */
+    var element = this.browserbot.findElement(selectLocator);
+    if (!("options" in element)) {
+        throw new SeleniumError("Specified element is not a Select (has no options)");
+    }
+    var locator = this.optionLocatorFactory.fromLocatorString(optionLocator);
+    var option = locator.findOption(element);
+    this.browserbot.showOptions(element, option);
+};
 
 Selenium.prototype.doAddSelection = function(locator, optionLocator) {
     /**

product/Zelenium/selenium/core/scripts/selenium-browserbot.js

@@ -1749,6 +1749,79 @@ BrowserBot.prototype.selectOption = function(element, optionToSelect) {
     }
 };
 
+/*
+* Remove an HTML element, used to hide the list of options displayed by the function showOptions
+*/
+BrowserBot.prototype.hideOptions = function(element) {
+    element.parentNode.removeChild(element);
+
+};
+
+/*
+* Select the specified option and show the list of options. (in order to see them in screenshots).
+* Do not use twice in a row, use hideOptions first.
+*/
+BrowserBot.prototype.showOptions = function(element, option) {
+    var elementName = element.id;
+    if(elementName == ''){
+        elementName = element.name;
+    }
+    if(elementName == ''){
+        elementName = element.className;
+    }
+
+    var bgColor = getCssAttr(element, 'background-color');
+    var JQW = new JQueryWrapper(element);
+    var jQueryElement = JQW.jQuery(element);
+    var children = element.children;
+    var n = children.length
+    var maxNbItems = 20;
+    var startId;
+    if(n < maxNbItems){
+        startId = 0;
+    }
+    else{
+        // Let's first determine where is the element we are interested in. (in order not to display everything but only maxNbItems elements)
+        var i = 0;
+        while(i < n && children[i].innerHTML != option.innerHTML){
+            i++;
+        }
+        startId = Math.max(0, i - maxNbItems/2);
+    }
+
+    var dropDownStyle = getDropDownColors(element);
+
+    // We don't want to mess with the css sheets
+    var afterHTML = '<ul id="' + elementName + '_TEMPORARY_OPTION_DISPLAY" style="position:absolute; z-index:300; margin:-3px -3px -3px 0px; width:' + (element.offsetWidth - 3) + 'px; padding:0 0px 1px 0px; list-style:none; border-left:2px solid #b2b2b2; border-top:2px solid #b2b2b2; border-bottom:1px solid #000000; border-right:1px solid #000000;';
+    afterHTML += 'background-color:' + bgColor + ';">\n';
+    //  background-color:#edeceb;">\n';
+    for(var i = startId; i < Math.min(startId + maxNbItems, n); i++){
+        var child = children[i];
+        var text = child.innerHTML;
+        var disabled = child.disabled;
+        var selected = text == option.innerHTML;
+        var text_color;
+        afterHTML += '<li style="';
+        if(!selected && !disabled){
+            afterHTML += dropDownStyle[1];
+            text_color = dropDownStyle[0];
+        }
+        else if(disabled){
+            afterHTML += dropDownStyle[5];
+            text_color = dropDownStyle[4];
+        }
+        else{
+            afterHTML += dropDownStyle[3];
+            text_color = dropDownStyle[2];
+        }
+        afterHTML += ' padding:0 2px 0 3px;">\n<a href="#" style="' + text_color + '">';
+        afterHTML += text;
+        afterHTML += '</a>\n</li>\n';
+    }
+    afterHTML += '</ul>';   
+    jQueryElement.after(afterHTML);
+};
+
 /*
 * Select the specified option and trigger the relevant events of the element.
 */