Bugzilla – Full Text Bug Listing
| Summary: | [client] html page for embedding editor with the most common features configured | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | [ECD] Orion | Reporter: | Susan McCourt <susan> | ||||||
| Component: | Client | Assignee: | Susan McCourt <susan> | ||||||
| Status: | RESOLVED FIXED | QA Contact: | |||||||
| Severity: | normal | ||||||||
| Priority: | P3 | CC: | aniefer, bokowski, dean.t.roberts, eclipse.felipe, john.arthorne, johnjbarton, libingw, mamacdon, nathan | ||||||
| Version: | 0.2 | ||||||||
| Target Milestone: | 0.2 | ||||||||
| Hardware: | PC | ||||||||
| OS: | Windows 7 | ||||||||
| Whiteboard: | |||||||||
| Attachments: |
|
||||||||
|
Description
Susan McCourt
(In reply to comment #0) > Questions that come to mind: > - do we want a small banner and what would be in it? (ie, small logo and > status line?) JJB asked me about getting a small banner, and I noticed that > Nathan implemented a "fake" one on the landing page. We could do the dark bar > with the orion logo and a status line Vertical space is precious in Firebug. I basically have one bar to work with. I think it will take some time to sort out how to use it. > - do we want content assist? Ideally you provide the assist UI to make it seamless with the rest of the UI, but I get to give the entries out of live data in Firebug. This feature will be one of the most challenging. It must be very very fast. My efforts on Firebug 1.7 command line completion are fast enough, but the UI puts me on edge, its too jumpy. > - do we want the outliner? Same answer. > > I assume we would want all the keybindings, undo support, etc. Yes. > > Not sure what we would do about Ctrl-S, I could implement a hook by example but > if an embedder really wanted to save the text they'd have to write code. I implemented save two ways: 1) for orion server pages I issue PUT pretty much the same code as editor.js. 2) for file: URLs I write local files. (I use set/getText for these). John, would you mind making a screenshot of your current work embedding the editor? At the summit, I saw you were embedding the entire coding.html. Could you post a link to a screenshot here (or attach one?) I would like to have the graphic designer take a pass at a "skinny header" for the editor. Of course we can also just embed the editor without a header (similar to the new minimalEditor.html page), now that it's been refactored. Sure, I'll do it tonight when I am once again near my demo machine. I would like to watch the progress on this bug as the compare editor will go to the same trend. Created attachment 192059 [details]
Screen shot from Firebug + Orion CSS edit
I believe this is M6 with Firebug 1.8 pre a1 on Firefox 4.0 with my Dyne extension as of the Orion Planning meeting
thanks, John. Looking at this picture, I think most of the existing header could be omitted (links to the other orion pages, editor icons, etc.) Perhaps the user name and full path name are interesting. Some small amount of branding to differentiate the orion editor from the script panel might be useful. What do you think? Note that just above the 3 line Orion bar is the Firebug 'inner' toolbar, specific to each panel. We need to distinguish three cases, I make up some names: subsumed: Firebug uses the Orion code for Firebug purposes, embedded: Firebug uses Orion client to connect to Orion server (my demo), integrated: Orion (in another container UI) uses Firebug (not the focus here). Here we want to discuss embedded, but users may experience the other cases. As a user I'd like embedded to use one bar. If I use Orion embedded and integrated, then I'd want to be able to expand the one line in embedded to the same 3 line bar I'd see in integrated. If I use embedded and subsumed I'd like a visual hint about which experience to expect. If I put this much together, then what make sense to me for 'embedded' is to replace the Firebug inner toolbar with a one line Orion-branded bar which itself would have the option to fold open to the three line version. Does that make sense? Ideally the bar contents could be defaulted by orion and overridden by Firebug. I expect that we'll want just the file name to show, allowing the rest of the bar to be used for eg the call stack or similar navigation aids. The other features could be reached by UI operations. I've got some visuals now for a skinny header for the embedded case. I will turn minimaleditor.html into something that represents a typical set of features, and with hooks for save. I suggest that we use this as the basis for embedding on the landing page, firebug, etc. Would be good to blog about it (Andrew?) to show how things are different now that the "editorContainer" features are consumable. I just released the new visuals for the minimal editor (small black bar with orion orion logo). This handles John "one line bar" case. The idea is that the embedded can stick anything in there they like. In minimal editor, we put a status line there. From here, I will leave minimaleditor.html alone and start working on a new example page, embeddededitor.html, which has more function but still has pluggable save and dirty. I'm thinking that embeddededitor should have: - syntax highlighting for css, html, js - content assist but that it should be dead easy to alter the page to add/remove those features. The hooks for - save - dirty state should also be implemented and easy to alter. I've released a first cut at this. You can run the example at http://localhost:8080/examples/embeddededitor.html if you are self hosting the latest code. If anyone wants to see this and is not self-hosting, I can stick it out on orionhub, I think... It is doing js and css syntax highlighting and content assist. Save and dirty hooks, and an example that shows how input would be placed into this editor. At this point, I need to let the potential consumers (Andrew in a new blog post? Dean in the desktop? JJB in firebug? Nathan in the landing page?) comment on what's wrong with it. One thing I can't figure out is that the content assist is popping up in the wrong location (below the editor, causing the browser scrollbar to appear or lengthen). Mark, do you have any insight on this? Since our goal is that anyone could embed an editor in any page and have content assist, we'll need to figure out how to get the popup window to display at the right location in various DOM setups. Hi, I'm unsure what you mean by 'released'. Excellent! I will certainly use it in my next desktop example and blog post, which I need to have ready by next Friday ... hopefully sooner than that though. To be practical for my example purposes I would need the editor hosted somewhere publicly visible ... like Orion Hub I guess. I'll ping you today to get some details like the best place to look at the API etc. I'll move my discussion to email. Just thought I'd post this here since my name was mentioned so people know something is happening in response to comment 10 :-) (In reply to comment #10) > One thing I can't figure out is that the content assist is popping up in the > wrong location (below the editor, causing the browser scrollbar to appear or > lengthen). Mark, do you have any insight on this? Since our goal is that > anyone could embed an editor in any page and have content assist, we'll need to > figure out how to get the popup window to display at the right location in > various DOM setups. At the moment, content assist expects to be given an absolutely-positioned element as its target. So We need to change this line in minimaleditor.html > <div id="contentassist" class="contentassist"></div> to this > <div id="contentassist" class="contentassist" style="position:absolute;"></div> (In reply to comment #11) > Hi, I'm unsure what you mean by 'released'. Released into http://git.eclipse.org/c/e4/org.eclipse.orion.client.git bundles/org.eclipse.orion.client.core/static/examples The files are embeddededitor.html embeddededitor.js embeddededitor.css (In reply to comment #13) > At the moment, content assist expects to be given an absolutely-positioned > element as its target. So We need to change this line in minimaleditor.html > > <div id="contentassist" class="contentassist"></div> > > to this > > <div id="contentassist" class="contentassist" style="position:absolute;"></div> Thanks, Mark! The problem was that I don't use ide.css in the examples, so the class="contentassist" didn't do anything. I stole the contentassist styling from ide.css and put it in embeddededitor.css. Created attachment 194740 [details]
screenshot of embedded editor
here's what it looks like.
even better, Mark created a site on orionhub. As long as the foundation server is not interrupted/restarted, you can see it at http://mamacdon.orionhub.org:8080/examples/embeddededitor.html Off topic of this bug, but if you want to be able to host a site on orionhub like Mark did with the embedded editor example, read this: http://wiki.eclipse.org/Orion/How_Tos/Setup_Orion_Client_Hosted_Site_on_OrionHub marking this bug fixed. I'm sure there will be some further refinement of this for the various use cases, but we can work on that in specific bugs. I'm pretty confident that this is a good place to start for Dean on embedding into eclipse desktop, for general embed use, and for Nathan on the landing page. Less sure about John's needs on firebug. Note that I didn't implement the "skinny header expands to full header" idea suggested here, but if this makes sense later, we can certainly do it. |