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

Wed Jan 16 07:07:10 EST 2013

On Wed, Jan 16, 2013 at 2:11 PM, Max Rydahl Andersen <
max.andersen at redhat.com> wrote:

>
> > Opening multiple windows is not enough. They need to be "docked"
> together so that when one of them is brought forward the other are brought
> forward as well. Otherwise it will be a hard to operate multiple windows,
> make changes and see effects on each at the same time.
>
> So a "keep all windows on top" kinda-option.
>
> > On the screen real estate problem, WinPho emulator has a feature for
> setting the size of the emulator window [1]. This is may be hard to
> implement with the current BrowserSim though.
>
> Yeah, not sure if that is doable in java/swt.
>
Not following what is the problem here? BrowserSim already supports
different window sizes.

>
> >
> > [1]
> http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402566(v=vs.105).aspx
> >
> > --
> > Gorkem
> >
> > On Jan 16, 2013, at 4:08 AM, Burr Sutter <bsutter at redhat.com> wrote:
> >
> >> Yes and yes :-)
> >>
> >> On Jan 15, 2013, at 7:02 PM, Max Andersen wrote:
> >>
> >>> So you are simply asking for multiple "windows" right?
> >>>
> >>> You'll need a rather big monitor though :)
> >>>
> >>> Sent from a mobile device
> >>>
> >>> On 15/01/2013, at 21.13, Burr Sutter <bsutter at redhat.com> wrote:
> >>>
> >>>> 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".
>
If you open several BrowserSim instances and run the Xavier's LiveReload
server now, all instances will be updated on changes. So it is just a way
to use BrowserSim and it already works (as a PoC).

Another case is when the user navigates through the site, we could
synchronize current URL between multiple BrowserSim instances.
Something like this is implemented in Adobe Edge Inspect:
http://youtu.be/SyzZHS-1fPE?t=2m30s

> >>>>
> >>>> 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/browsersim.jar
> >>>>> 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 at redhat.com>
> wrote:
> >>>>> Hello Yahor,
> >>>>>
> >>>>> thanks !
> >>>>> here are the links for the Chrome extension (
> https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)
> 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.md#file-modified
> :
> >>>>> ["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 at redhat.com>
> 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.md#file-modified):
> 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 at lists.jboss.org
> >>>>>>>> https://lists.jboss.org/mailman/listinfo/jbosstools-dev
> >>>>>>>
> >>>>>>> _______________________________________________
> >>>>>>> jbosstools-dev mailing list
> >>>>>>> jbosstools-dev at lists.jboss.org
> >>>>>>> https://lists.jboss.org/mailman/listinfo/jbosstools-dev
> >>>>>>
> >>>>>>
> >>>>>> _______________________________________________
> >>>>>> jbosstools-dev mailing list
> >>>>>> jbosstools-dev at 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 at lists.jboss.org
> >>>> https://lists.jboss.org/mailman/listinfo/jbosstools-dev
> >>
> >> _______________________________________________
> >> jbosstools-dev mailing list
> >> jbosstools-dev at lists.jboss.org
> >> https://lists.jboss.org/mailman/listinfo/jbosstools-dev
> >
> > _______________________________________________
> > jbosstools-dev mailing list
> > jbosstools-dev at lists.jboss.org
> > https://lists.jboss.org/mailman/listinfo/jbosstools-dev
>
>
> _______________________________________________
> jbosstools-dev mailing list
> jbosstools-dev at lists.jboss.org
> https://lists.jboss.org/mailman/listinfo/jbosstools-dev
>

-- 
Best Regards,
Yahor Radtsevich
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.jboss.org/pipermail/jbosstools-dev/attachments/20130116/51748b58/attachment-0001.html 