Re: [jbosstools-dev] PoC : Browser Refresh in conjunction with the Chrome LiveReload Extension

One thing that just came up...as I was discussing this idea with some other interested parties. Ideally, an app is a single set of HTML5 sources - with some cleverness in the CSS to address the Phone vs Tablet vs Desktop layout. Therefore I would like to see the browsersim have all 3 UIs up concurrently, each auto-refreshing so that I know what my changes look like across the multiple "channels". On Jan 15, 2013, at 2:25 PM, Yahor Radtsevich wrote: > Hi Xavier, > > There is livereload.js which could be used in any browser by just adding it as a <script> tag. > So I implemented a PoC version of BrowserSim with LiveReload support. It checks if a LiveReload server is started, and if yes, it adds this script to the opened page. > > Standalone jar of BrowserSim with LiveReload support (run as >java -jar browsersim.jar): https://dl.dropbox.com/u/79157143/JBIDE/BrowserSim/livereload-poc/browser... > YouTube screencast: http://www.youtube.com/watch?v=MQikQPwqGJk > The source: https://github.com/yradtsevich/jbosstools-vpe/tree/livereload-poc > JIRA: https://issues.jboss.org/browse/JBIDE-13379 > > In general it works not bad. But if you watch the screencast carefully, you will see that sometimes it lose some CSS or text. A bug on the server side? > > On Mon, Jan 7, 2013 at 11:06 AM, Xavier Coulon <xcoulon(a)redhat.com&gt; wrote: >> Hello Yahor, >> >> thanks ! >> here are the links for the Chrome extension (https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcged...) and the Fireforx extension (http://download.livereload.com/2.0.8/LiveReload-2.0.8.xpi) >> >> As I said, for now, each time a file is re-published on the server (ie, after server adapter notified the publication) the Eclipse plugins send a "refresh" command to the browser extension using the syntax described here https://github.com/mockko/livereload/blob/master/docs/WebSocketProtocol.m...: >> ["refresh", { "path": "/some/path/myfile.css", "apply_js_live": true, "apply_css_live": true }] >> >> This happens over websocket because the browser extension initialized the connexion when the user enabled 'LiveReload' on the browser (the Eclipse plugin embeds a websocket server based on netty 3.5) >> >> I kept the "apply_js_live" and "apply_css_live" optional args to "true" and I run a quick test: when changing a .css file, it's just that file that's reloaded: >> >> <Screen Shot 2013-01-07 at 9.01.57 AM.png> >> >> I did not do testing with AJAX not CSS @import, so I can't tell if you'd need to send a "refresh" command for the whole page or not. >> If you change the html file, I guess it'll do a full refresh. Did you expect some DOM update ? >> >> Also, the extensions code is on github: https://github.com/mockko/livereload/ , if we need to better understand how they work. >> >> >> Best regards, >> /Xavier >> >> >> >> On Jan 6, 2013, at 4:07 PM, Yahor Radtsevich wrote: >> >>> Hi Xavier, >>> >>> The video looks great! I like the one click interface (just enable LiveReload on server). >>> >>> I wanted to run it on my desktop, but did not found the Chrome and FF extensions. Are they available somewhere? >>> >>> Also could you please explain how it works in some technical details? >>> I.e. about which changes the browser is notified (all published files or only currently loaded files)? >>> How it decides to refresh? Does it refreshes the full page? If not, then does it rerun changed scripts? >>> Does it handle html content loaded through AJAX (like it is done in jQuery Mobile)? >>> Does it handle CSS @import? >>> What if I change opened html file, will it do a partial refresh or full refresh? >>> >>> On Thu, Jan 3, 2013 at 1:15 PM, Xavier Coulon <xcoulon(a)redhat.com&gt; wrote: >>>>> On Jan 3, 2013, at 9:28 AM, Xavier Coulon wrote: >>>>> >>>>>> Hello and Happy New Year to everyone! >>>>>> >>>>>> Between F2F meeting and Christmas vacations, I spend some time working on a PoC of LiveReload from Eclipse. >>>>>> [My first iteration was using the Chrome Remote Debugging Protocol, but since it required starting Chrome with an extra "--remote-debugging-protocol" arg and it was specific to Chrome, I reworked on it to turn what's described below] >>>>>> >>>>>> The PoC implements the server-side of the LiveReload protocol (based on websockets). >>>>>> 2 things to get it working (once you've checkout the plugin repo on github and started an Eclipse Runtime): >>>>>> >>>>>> * on the Browser side, the user needs to install the LiveReload extension >>>>>> * on the Eclipse side, the user starts his AS server and then clicks on "Enable LiveReload" on the server menu. >>>>>> >>>>>> Then, when the use edits html/js/css content, the files are published by the server adapter on the AS server and then, the browser is notified of the (web) resource changes (with URL and not file location). Then, the extension decides which part of the page needs to be refreshed. >>>>>> Of course, the notification occurs *after* the html/js/css files have been published on the server ;-) >>>>>> >>>>>> # A few notes: # >>>>>> >>>>>> * this PoC only works from Server Adapter level, as it made more sense and helped me resolve the file URL from the server host/port and the application deployment context. >>>>>> See the "refresh" command description (https://github.com/mockko/livereload/blob/master/docs/WebSocketProtocol.m...): the command must include the URL of the changed file. >>>>>> To get notified that the server deployed the resource, I use a PublishAdapter, so this is pure generic WTP API. >>>>>> The only JBossAS-specific thing I use here is when I need to retrieve the server port: >>>>>> server.getAttribute("org.jboss.ide.eclipse.as.core.server.webPort", "8080") >>>>>> but there may be a more portable manner to do it. >>>>>> >>>>>> - one thing I did not get to work (yet) was the Firefox "LiveReload" extension. It looked as if the browser extension was disconnecting immediately after connexion, so there was no channel I could use to send the "refresh" command. That should be solved, though. >>>>>> >>>>>> * the http://livereload.com/ doc mentions this hack: >>>>>> "How do you stop that snippet from making it into production, then? Well, simple: add an IF and check location.host, and then feel free to commit and deploy." >>>>>> which means that it should be possible to also support Mobile devices and BrowserSim if no extension can be installed on them. >>>>>> >>>>>> The code is at the same location as before: https://github.com/xcoulon/jbosstools-pagereload (the old plugin has been moved to another branch) >>>>>> There's another screencast for that: https://www.youtube.com/watch?v=MWoZIQwitSs >>>>>> As usual, sound is low and accent is strong, but I'll try to fix that in the future ;-) >>>>>> >>>>>> # Further developments # >>>>>> >>>>>> Now, this also opens question of support to even wider file types, such as SASS/LESS instead of plain CSS: >>>>>> >>>>>> * should we provide editors for those types (usual stuff: syntax coloring, validation, content assist, navigation) ? >>>>>> * as far as SASS is concerned, there's no Java implementation of the processor. Would writing one in Java help us when it comes to processing SASS files to convert them into CSS and publish them ? The only way to do it is to invoke the ruby gem with JRuby - I haven't tried it yet, though. >>>> >>>> After a little more search, I found these Java implementations for SASS: >>>> - http://code.google.com/p/jsass/ but licensed under GPLv3 >>>> - https://github.com/darrinholst/sass-java but looks inactive (https://github.com/darrinholst/sass-java/graphs/commit-activity) - Last release was in May 2011 >>>> >>>> OTOH, LESS seems to have an "official" Java port: https://github.com/marceloverdijk/lesscss-java >>>> >>>> >>>>>> >>>>>> >>>>>> All feedback is welcome. >>>>>> >>>>>> Best regards, >>>>>> /Xavier >>>>>> >>>>>> >>>>>> >>>>>> >>>>>> _______________________________________________ >>>>>> jbosstools-dev mailing list >>>>>> jbosstools-dev(a)lists.jboss.org >>>>>> https://lists.jboss.org/mailman/listinfo/jbosstools-dev >>>>> >>>>> _______________________________________________ >>>>> jbosstools-dev mailing list >>>>> jbosstools-dev(a)lists.jboss.org >>>>> https://lists.jboss.org/mailman/listinfo/jbosstools-dev >>>> >>>> >>>> _______________________________________________ >>>> jbosstools-dev mailing list >>>> jbosstools-dev(a)lists.jboss.org >>>> https://lists.jboss.org/mailman/listinfo/jbosstools-dev >>> >>> >>> >>> -- >>> Best Regards, >>> Yahor Radtsevich > > > > -- > Best Regards, > Yahor Radtsevich _______________________________________________ jbosstools-dev mailing list jbosstools-dev(a)lists.jboss.org https://lists.jboss.org/mailman/listinfo/jbosstools-dev