Skip to content

Commit f8341b8

Browse files
samitbadlesamitbadle
committed
Improve the UI including autocomplete and fix a bunch of minor bugs
1 parent 3b7466a commit f8341b8

File tree

3 files changed

+81
-72
lines changed

3 files changed

+81
-72
lines changed

‎ide/main/src/content/editor.js

+12-1
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,10 @@ function Editor(window) {
169169
this.selDebugger = new Debugger(this);
170170
this.selDebugger.addObserver({
171171
stateUpdated: function (state) {
172-
document.getElementById("pause-button").setAttribute("class", "icon " + (state == Debugger.PAUSED ? "resume" : "pause"));
172+
var pauseBtn = document.getElementById("pause-button");
173+
pauseBtn.classList.remove("resume");
174+
pauseBtn.classList.remove("pause");
175+
pauseBtn.classList.add(state == Debugger.PAUSED ? "resume" : "pause");
173176
self.updateState();
174177
}
175178
});
@@ -713,6 +716,14 @@ Editor.prototype.updateDeveloperTools = function (show) {
713716
$("reload-button").disabled = !show;
714717
};
715718

719+
Editor.prototype.autoCompleteCommand = function (command) {
720+
var newcmd = command.replace(/^.+ >> /, '');
721+
if (newcmd !== command) {
722+
$('commandAction').value = newcmd;
723+
this.treeView.updateCurrentCommand('command', newcmd);
724+
}
725+
};
726+
716727
Editor.prototype.addCommand = function (command, target, value, window, insertBeforeLastCommand) {
717728
this.log.debug("addCommand: command=" + command + ", target=" + target + ", value=" + value + " window.name=" + window.name);
718729
if (command != 'open' &&

‎ide/main/src/content/selenium-ide-common.xul

+1-1
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ limitations under the License.
166166
<menuitem label="&saveSuiteCmd.label;" command="cmd_save_suite" />
167167
<menuitem label="&saveSuiteAsCmd.label;" command="cmd_save_suite_as" />
168168
<menu label="&exportSuiteCmd.label;" accesskey="X">
169-
<menupopup id="popup_export_formats" onpopupshowing="window.editor.populateFormatsPopup(this, 'exportTestSuite')" oncommand="window.editor.exportTestSuiteWithFormat(window.editor.app.getFormats().selectFormat(event.target.getAttribute('value')))" />
169+
<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')))" />
170170
</menu>
171171
<menu label="&recentSuiteCmd.label;">
172172
<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 -->

‎ide/main/src/content/selenium-ide.xul

+68-70
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ limitations under the License.
3535
windowtype="global:selenium-ide"
3636
xmlns:html="http://www.w3.org/1999/xhtml"
3737
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
38-
width="400"
39-
height="520"
38+
width="600"
39+
height="550"
4040
persist="screenX screenY width height"
4141
onload="new StandaloneEditor(window)"
4242
onunload="window.editor.unload()"
@@ -73,7 +73,7 @@ limitations under the License.
7373
type="autocomplete" autocompletesearch="selenium-ide-generic" enablehistory="true" tabscrolling="true"/>
7474
</hbox>
7575
</toolbar>
76-
<toolbar id="toolbar2">
76+
<toolbar id="toolbar2" iconsize="small" mode="icons">
7777
<stack id="speedSliderBox" />
7878
<toolbarbutton id="play-suite-button" label="Play TestSuite" class="icon" tooltiptext="&playSuiteButton.tooltip;" command="cmd_selenium_play_suite"/>
7979
<toolbarbutton id="play-button" label="Play" class="icon" tooltiptext="&playButton.tooltip;" command="cmd_selenium_play"/>
@@ -88,77 +88,75 @@ limitations under the License.
8888
</toolbox>
8989

9090
<vbox flex="1">
91-
<hbox id="mainhbox" width="100" persist="height width" flex="1">
91+
<hbox id="mainhbox" width="150" persist="height width" flex="1">
9292
<vbox id="suitePane" persist="height width" />
9393
<splitter id="suiteTreeSplitter" collapse="before" persist="state">
9494
<grippy/>
9595
</splitter>
96-
<tabbox id="tabbox" flex="3" height="300" width="250" persist="height width">
97-
<tabs orient="horizontal" onselect="if (window.editor) { window.editor.tabSelected(selectedItem.id) }" id="viewTabs">
98-
<tab id="editorTab" label="&tableTab.label;" />
99-
<tab id="sourceTab" label="&sourceTab.label;" />
100-
</tabs>
101-
<tabpanels flex="1">
102-
<stack>
103-
<vbox flex="1">
104-
<tree id="commands" flex="1" enableColumnDrag="false" hidecolumnpicker="true"
105-
context="treeContextMenu" onselect="window.editor.treeView.selectCommand()"
106-
ondblclick="goDoCommand('cmd_selenium_exec_command')" disableKeyNavigation="true">
107-
<treecols>
108-
<treecol id="command" label="&command.label;" width="120"/>
109-
<splitter class="tree-splitter" />
110-
<treecol id="target" label="&target.label;" flex="3" width="120"/>
111-
<splitter class="tree-splitter" />
112-
<treecol id="value" label="&value.label;" flex="3" width="120"/>
113-
</treecols>
114-
<treechildren ondraggesture="nsDragAndDrop.startDrag(event, commandsDragObserver);"/>
115-
</tree>
116-
<separator class="thin"/>
117-
<!-- command editing -->
118-
<vbox id="commandDetail" persist="height">
119-
<grid>
120-
<columns>
121-
<column/>
122-
<column flex="1"/>
123-
</columns>
124-
<rows>
125-
<row align="center">
126-
<!-- do drop down that depends upon the element type -->
127-
<label control="commandAction" value="&command.label;"/>
128-
<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"/>
129-
</row>
130-
<row align="center">
131-
<!-- show different options collected by the client. Allow user to override -->
132-
<label control="commandTarget" value="&target.label;"/>
133-
<hbox flex="1">
134-
<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" />
135-
<button label="Select" disabled="true"
136-
oncommand="window.editor.selDebugger.selectElement()"
137-
id="selectElementButton" />
138-
<button label="&findTarget.label;" disabled="true"
139-
oncommand="window.editor.selDebugger.showElement(document.getElementById('commandTarget').value)"
140-
id="findElementButton" />
141-
</hbox>
142-
</row>
143-
<row align="right" id="selectElementTip" style="display: none">
144-
<label></label>
145-
<description>Select an element by clicking on it in the browser or click Cancel to cancel.</description>
146-
</row>
147-
<row align="center">
148-
<label control="commandValue" value="&value.label;"/>
149-
<textbox disabled="true" id="commandValue" oninput="window.editor.treeView.updateCurrentCommand('value', window.editor.treeView.decodeText(this.value))"/>
150-
</row>
151-
</rows>
152-
</grid>
153-
</vbox>
154-
</vbox>
155-
<vbox id="tableViewUnavailable" />
156-
</stack>
157-
<tabpanel orient="vertical">
158-
<textbox id="source" multiline="true" flex="1" onchange="window.editor.sourceView.syncModel()" oninput="window.editor.saveTC();" wrap="off"/>
159-
</tabpanel>
160-
</tabpanels>
161-
</tabbox>
96+
<vbox id="testCasePane" flex="3" height="300" width="450" persist="height width">
97+
<tabbox id="tabbox" flex="1">
98+
<tabs orient="horizontal" onselect="if (window.editor) { window.editor.tabSelected(selectedItem.id) }" id="viewTabs">
99+
<tab id="editorTab" label="&tableTab.label;" />
100+
<tab id="sourceTab" label="&sourceTab.label;" />
101+
</tabs>
102+
<tabpanels flex="1">
103+
<stack>
104+
<vbox flex="1">
105+
<tree id="commands" flex="1" enableColumnDrag="false" hidecolumnpicker="true"
106+
context="treeContextMenu" onselect="window.editor.treeView.selectCommand()"
107+
ondblclick="goDoCommand('cmd_selenium_exec_command')" disableKeyNavigation="true">
108+
<treecols>
109+
<treecol id="command" label="&command.label;" width="120" overflow="true"/>
110+
<splitter class="tree-splitter" />
111+
<treecol id="target" label="&target.label;" flex="3" width="120"/>
112+
<splitter class="tree-splitter" />
113+
<treecol id="value" label="&value.label;" flex="3" width="120"/>
114+
</treecols>
115+
<treechildren ondraggesture="nsDragAndDrop.startDrag(event, commandsDragObserver);"/>
116+
</tree>
117+
<separator class="thin"/>
118+
<!-- command editing -->
119+
<vbox id="commandDetail" persist="height">
120+
<grid>
121+
<columns>
122+
<column/>
123+
<column flex="1"/>
124+
</columns>
125+
<rows>
126+
<row align="center">
127+
<!-- do drop down that depends upon the element type -->
128+
<label control="commandAction" value="&command.label;"/>
129+
<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"/>
130+
</row>
131+
<row align="center">
132+
<!-- show different options collected by the client. Allow user to override -->
133+
<label control="commandTarget" value="&target.label;"/>
134+
<hbox flex="1">
135+
<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" />
136+
<button label="Select" disabled="true" oncommand="window.editor.selDebugger.selectElement()" id="selectElementButton"/>
137+
<button label="&findTarget.label;" disabled="true" oncommand="window.editor.selDebugger.showElement(document.getElementById('commandTarget').value)" id="findElementButton"/>
138+
</hbox>
139+
</row>
140+
<row align="right" id="selectElementTip" style="display: none">
141+
<label></label>
142+
<description>Select an element by clicking on it in the browser or click Cancel to cancel.</description>
143+
</row>
144+
<row align="center">
145+
<label control="commandValue" value="&value.label;"/>
146+
<textbox disabled="true" id="commandValue" oninput="window.editor.treeView.updateCurrentCommand('value', window.editor.treeView.decodeText(this.value))"/>
147+
</row>
148+
</rows>
149+
</grid>
150+
</vbox>
151+
</vbox>
152+
<vbox id="tableViewUnavailable" />
153+
</stack>
154+
<tabpanel orient="vertical">
155+
<textbox id="source" multiline="true" flex="1" onchange="window.editor.sourceView.syncModel()" oninput="window.editor.saveTC();" wrap="off"/>
156+
</tabpanel>
157+
</tabpanels>
158+
</tabbox>
159+
</vbox>
162160
</hbox>
163161
<splitter id="logSplitter" collapse="after" persist="state">
164162
<grippy/>

0 commit comments

Comments
 (0)