This prototype is based on HTML 5 with an iframe
for the content and, unlike the legacy UI, does not use HTML 4 frameset
s. Technically, it sits on top of the legacy UI. For example, when doing a full search, the HTML page of the legacy UI will be parsed and rendered in the web browser (widget) using JavaScript. This has disadvantages, but it has made it easier to develop this prototype as a plugin without the need to patch Eclipse.
Once the new UI no longer requires anything from the legacy UI and is no longer lagging behind in terms of internationalization and accessibility, the legacy UI can be deprecated and removed: see Further development below.
Improvements compared to the legacy UI:
This prototype can be activated with the following Java property:
-Dorg.eclipse.help.webapp.experimental.ui=true
To test, modify and/or customize this prototype, the files in this folder can be put in a separate plugin (in index.html
the links to the JavaScript and CSS file have to be changed from m/...
to something like rtopic/com.example.my_plugin/...
) and activated as follows (assuming the plugin has the symbolic name com.example.my_plugin
; using the raw topic help link rtopic/<plugin>/<optional-path>/<file>
):
-Dorg.eclipse.help.webapp.experimental.ui=<plugin>/<optional-path>/<file>
For example, when the plugin has the symbolic name com.example.my_plugin
with index.html
in the folder customized-help
:
-Dorg.eclipse.help.webapp.experimental.ui=com.example.my_plugin/customized-help/index.html
The m/index.js
JavaScript file can be customized in the same way:
-Dorg.eclipse.help.webapp.experimental.ui.js=<plugin>/<optional-path>/<file>
The customized HTML and JavaScript file can contain placeholders (see org.eclipse.help.internal.webapp.HelpUi.resolve(String, HttpServletRequest)
).
Unsorted list of things to improve and where the legacy UI is currently used:
fo
, a search is executed for fo*
(which means starts with fo
), but this disables stemming like in the full search (which means when entering logging
, pages containing log
or logs
are not found; ideally starts with and stemming should be combined; the search term completion proposals are currently computed from the words contained in the results, for which there are better ways to do this on the server side/advanced/workingSetManager.jsp
- list of scopes/advanced/workingSetState.jsp
- add, edit or remove a scope/scopeState.jsp
- set or unset scope.../index.jsp#topic/...
instead of via .../index.jsp?topic=...
, but still support such legacy linksTo use a web browser for debugging, specify a fixed port for the help server, e.g. -Dserver_port=49999
, in Eclipse open the help window (Help > Help Contents) and in the web browser open one or more of the following pages:
http://127.0.0.1:49999/help/index.jsp
http://127.0.0.1:49999/help/index.jsp?legacy
The Index tab of the legacy UI was dropped in favor of a simpler UI.
On the one hand state of the art should be used, on the other hand as many browsers as possible should be supported.
→ Support browsers that support Flexbox (98.74%): Chrome 21, Internet Explorer 10, Firefox 22, Android Browser 21, etc. and higher
See:
Flexbox
(tutorial, 98.74%)float
, layout via tables (both are deprecated for that) and gridx
(since it is too new and not yet widely supported)Going back in the browser history can cause issues in combination with deep linking, since the navigation is done in the iframe
except for the search page which is not shown in the iframe
. The problem is that when going back to a search page, the search might need to be submitted again and for this the query must be known.
Ways that don't work:
...#q=...
) set via history.pushState(...)
: top window hash might not be restored when navigation happens also in the content iframe
iframe
set via history.pushState(...)
: conflicts with existing hashes/queries of content pages and does not work with external content pagesiframe
containing the query: not allowed in Internet Explorer for security reasonsChosen solution:
iframe
instead of doing a remote request and get result from live DOM of the iframe
when loadedTo simulate a slow response replace return function(data) {
with
return function(data) { setTimeout(function(data) { return function() {processData(data)}}(data), 1000); }; function processData(data) {
<iframe>
To catch mouse and click events (for slider and drop-down menues) add an overlay element covering the whole page (see createOverlay()
).
Debug overlay by adding the following line after the line overlayStyle.width = '100%';
:
overlayStyle.background = 'rgba(200, 100, 100, .2)';