Skip to content

Commit

Permalink
Improve the UI including autocomplete and fix a bunch of minor bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@samitbadle
samitbadle committed Sep 14, 2014
1 parent 3b7466a commit f8341b8
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 72 deletions.
13 changes: 12 additions & 1 deletion ide/main/src/content/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,10 @@ function Editor(window) {
this.selDebugger = new Debugger(this);
this.selDebugger.addObserver({
stateUpdated: function (state) {
document.getElementById("pause-button").setAttribute("class", "icon " + (state == Debugger.PAUSED ? "resume" : "pause"));
var pauseBtn = document.getElementById("pause-button");
pauseBtn.classList.remove("resume");
pauseBtn.classList.remove("pause");
pauseBtn.classList.add(state == Debugger.PAUSED ? "resume" : "pause");
self.updateState();
}
});
Expand Down Expand Up @@ -713,6 +716,14 @@ Editor.prototype.updateDeveloperTools = function (show) {
$("reload-button").disabled = !show;
};

Editor.prototype.autoCompleteCommand = function (command) {
var newcmd = command.replace(/^.+ >> /, '');
if (newcmd !== command) {
$('commandAction').value = newcmd;
this.treeView.updateCurrentCommand('command', newcmd);
}
};

Editor.prototype.addCommand = function (command, target, value, window, insertBeforeLastCommand) {
this.log.debug("addCommand: command=" + command + ", target=" + target + ", value=" + value + " window.name=" + window.name);
if (command != 'open' &&
Expand Down
2 changes: 1 addition & 1 deletion ide/main/src/content/selenium-ide-common.xul
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ limitations under the License.
<menuitem label="&saveSuiteCmd.label;" command="cmd_save_suite" />
<menuitem label="&saveSuiteAsCmd.label;" command="cmd_save_suite_as" />
<menu label="&exportSuiteCmd.label;" accesskey="X">
<menupopup id="popup_export_formats" onpopupshowing="window.editor.populateFormatsPopup(this, 'exportTestSuite')" oncommand="window.editor.exportTestSuiteWithFormat(window.editor.app.getFormats().selectFormat(event.target.getAttribute('value')))" />
<menupopup id="popup_export_formats_ts" onpopupshowing="window.editor.populateFormatsPopup(this, 'exportTestSuite')" oncommand="window.editor.exportTestSuiteWithFormat(window.editor.app.getFormats().selectFormat(event.target.getAttribute('value')))" />
</menu>
<menu label="&recentSuiteCmd.label;">
<menupopup id="popup_recent_suites" onpopupshowing="window.editor.app.recentTestSuites.populateMenu(this)" oncommand="window.editor.loadRecentSuite(event.target.getAttribute('value'))" /><!-- Samit: Enh: Prompt to save first -->
Expand Down
138 changes: 68 additions & 70 deletions ide/main/src/content/selenium-ide.xul
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ limitations under the License.
windowtype="global:selenium-ide"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
width="400"
height="520"
width="600"
height="550"
persist="screenX screenY width height"
onload="new StandaloneEditor(window)"
onunload="window.editor.unload()"
Expand Down Expand Up @@ -73,7 +73,7 @@ limitations under the License.
type="autocomplete" autocompletesearch="selenium-ide-generic" enablehistory="true" tabscrolling="true"/>
</hbox>
</toolbar>
<toolbar id="toolbar2">
<toolbar id="toolbar2" iconsize="small" mode="icons">
<stack id="speedSliderBox" />
<toolbarbutton id="play-suite-button" label="Play TestSuite" class="icon" tooltiptext="&playSuiteButton.tooltip;" command="cmd_selenium_play_suite"/>
<toolbarbutton id="play-button" label="Play" class="icon" tooltiptext="&playButton.tooltip;" command="cmd_selenium_play"/>
Expand All @@ -88,77 +88,75 @@ limitations under the License.
</toolbox>

<vbox flex="1">
<hbox id="mainhbox" width="100" persist="height width" flex="1">
<hbox id="mainhbox" width="150" persist="height width" flex="1">
<vbox id="suitePane" persist="height width" />
<splitter id="suiteTreeSplitter" collapse="before" persist="state">
<grippy/>
</splitter>
<tabbox id="tabbox" flex="3" height="300" width="250" persist="height width">
<tabs orient="horizontal" onselect="if (window.editor) { window.editor.tabSelected(selectedItem.id) }" id="viewTabs">
<tab id="editorTab" label="&tableTab.label;" />
<tab id="sourceTab" label="&sourceTab.label;" />
</tabs>
<tabpanels flex="1">
<stack>
<vbox flex="1">
<tree id="commands" flex="1" enableColumnDrag="false" hidecolumnpicker="true"
context="treeContextMenu" onselect="window.editor.treeView.selectCommand()"
ondblclick="goDoCommand('cmd_selenium_exec_command')" disableKeyNavigation="true">
<treecols>
<treecol id="command" label="&command.label;" width="120"/>
<splitter class="tree-splitter" />
<treecol id="target" label="&target.label;" flex="3" width="120"/>
<splitter class="tree-splitter" />
<treecol id="value" label="&value.label;" flex="3" width="120"/>
</treecols>
<treechildren ondraggesture="nsDragAndDrop.startDrag(event, commandsDragObserver);"/>
</tree>
<separator class="thin"/>
<!-- command editing -->
<vbox id="commandDetail" persist="height">
<grid>
<columns>
<column/>
<column flex="1"/>
</columns>
<rows>
<row align="center">
<!-- do drop down that depends upon the element type -->
<label control="commandAction" value="&command.label;"/>
<textbox disabled="true" id="commandAction" oninput="window.editor.treeView.updateCurrentCommand('command', this.value)" type="autocomplete" autocompletesearch="selenium-ide-generic" enablehistory="true" forcecomplete="true" tabscrolling="true"/>
</row>
<row align="center">
<!-- show different options collected by the client. Allow user to override -->
<label control="commandTarget" value="&target.label;"/>
<hbox flex="1">
<textbox flex="1" disabled="true" id="commandTarget" oninput="window.editor.treeView.updateCurrentCommand('target', window.editor.treeView.decodeText(this.value))" autocompletesearch="selenium-ide-generic" enablehistory="true" forcecomplete="true" tabscrolling="true" type="autocomplete" showcommentcolumn="true" />
<button label="Select" disabled="true"
oncommand="window.editor.selDebugger.selectElement()"
id="selectElementButton" />
<button label="&findTarget.label;" disabled="true"
oncommand="window.editor.selDebugger.showElement(document.getElementById('commandTarget').value)"
id="findElementButton" />
</hbox>
</row>
<row align="right" id="selectElementTip" style="display: none">
<label></label>
<description>Select an element by clicking on it in the browser or click Cancel to cancel.</description>
</row>
<row align="center">
<label control="commandValue" value="&value.label;"/>
<textbox disabled="true" id="commandValue" oninput="window.editor.treeView.updateCurrentCommand('value', window.editor.treeView.decodeText(this.value))"/>
</row>
</rows>
</grid>
</vbox>
</vbox>
<vbox id="tableViewUnavailable" />
</stack>
<tabpanel orient="vertical">
<textbox id="source" multiline="true" flex="1" onchange="window.editor.sourceView.syncModel()" oninput="window.editor.saveTC();" wrap="off"/>
</tabpanel>
</tabpanels>
</tabbox>
<vbox id="testCasePane" flex="3" height="300" width="450" persist="height width">
<tabbox id="tabbox" flex="1">
<tabs orient="horizontal" onselect="if (window.editor) { window.editor.tabSelected(selectedItem.id) }" id="viewTabs">
<tab id="editorTab" label="&tableTab.label;" />
<tab id="sourceTab" label="&sourceTab.label;" />
</tabs>
<tabpanels flex="1">
<stack>
<vbox flex="1">
<tree id="commands" flex="1" enableColumnDrag="false" hidecolumnpicker="true"
context="treeContextMenu" onselect="window.editor.treeView.selectCommand()"
ondblclick="goDoCommand('cmd_selenium_exec_command')" disableKeyNavigation="true">
<treecols>
<treecol id="command" label="&command.label;" width="120" overflow="true"/>
<splitter class="tree-splitter" />
<treecol id="target" label="&target.label;" flex="3" width="120"/>
<splitter class="tree-splitter" />
<treecol id="value" label="&value.label;" flex="3" width="120"/>
</treecols>
<treechildren ondraggesture="nsDragAndDrop.startDrag(event, commandsDragObserver);"/>
</tree>
<separator class="thin"/>
<!-- command editing -->
<vbox id="commandDetail" persist="height">
<grid>
<columns>
<column/>
<column flex="1"/>
</columns>
<rows>
<row align="center">
<!-- do drop down that depends upon the element type -->
<label control="commandAction" value="&command.label;"/>
<textbox disabled="true" id="commandAction" oninput="window.editor.treeView.updateCurrentCommand('command', this.value)" onchange="window.editor.autoCompleteCommand(this.value)" type="autocomplete" autocompletesearch="selenium-ide-generic" completedefaultindex="true" completeselectedindex="true" enablehistory="true" forcecomplete="true" tabscrolling="false"/>
</row>
<row align="center">
<!-- show different options collected by the client. Allow user to override -->
<label control="commandTarget" value="&target.label;"/>
<hbox flex="1">
<textbox flex="1" disabled="true" id="commandTarget" oninput="window.editor.treeView.updateCurrentCommand('target', window.editor.treeView.decodeText(this.value))" type="autocomplete" autocompletesearch="selenium-ide-generic" enablehistory="true" forcecomplete="true" tabscrolling="false" completedefaultindex="true" showcommentcolumn="true" />
<button label="Select" disabled="true" oncommand="window.editor.selDebugger.selectElement()" id="selectElementButton"/>
<button label="&findTarget.label;" disabled="true" oncommand="window.editor.selDebugger.showElement(document.getElementById('commandTarget').value)" id="findElementButton"/>
</hbox>
</row>
<row align="right" id="selectElementTip" style="display: none">
<label></label>
<description>Select an element by clicking on it in the browser or click Cancel to cancel.</description>
</row>
<row align="center">
<label control="commandValue" value="&value.label;"/>
<textbox disabled="true" id="commandValue" oninput="window.editor.treeView.updateCurrentCommand('value', window.editor.treeView.decodeText(this.value))"/>
</row>
</rows>
</grid>
</vbox>
</vbox>
<vbox id="tableViewUnavailable" />
</stack>
<tabpanel orient="vertical">
<textbox id="source" multiline="true" flex="1" onchange="window.editor.sourceView.syncModel()" oninput="window.editor.saveTC();" wrap="off"/>
</tabpanel>
</tabpanels>
</tabbox>
</vbox>
</hbox>
<splitter id="logSplitter" collapse="after" persist="state">
<grippy/>
Expand Down

0 comments on commit f8341b8

Please sign in to comment.