Editing Automatically refresh display of html on saving file

{{TipNew
|id=1656
|previous=1655
|next=1657
|created=June 15, 2010
|complexity=basic
|author=A generic person
|version=7.0
|subpage=/201006
|category1=
|category2=
}}
Editing HTML in Vim is a ''lot'' nicer if you can see updates in Firefox without needing to remove your hands from the keyboard. With MozRepl and a little vimrc script, you can do just that!

===The bad old way===
You are probably all too familiar with this annoying mini-workflow:
*Edit your HTML/css file.
*Hit save in Vim.
*Take your hands off the keyboard and move your mouse over to Firefox.
*Press Ctrl-R in Firefox to refresh.
*Move the mouse back to Vim and put your hands back on the keyboard.
*Do it again and again, wincing a little bit each time.

===The joyful new Vim + MozRepl way===
With the little [[vimrc]] + [http://wiki.github.com/bard/mozrepl/ MozRepl] hack shown below, all you need to do is:
*Edit your HTML/css file.
*Hit save in Vim – Firefox will refresh automatically, preserving its scroll offsets!

This integration is no where near as fancy as the Emacs MozRepl binding, but this one feature makes it super useful.

==Vim + MozRepl==
When editing an .html,.css, or .gtpl file, make Firefox refresh after the buffer is saved, preserving the current scroll offset.

===Requires===
#MozRepl must be installed and running in Firefox. After installation, start it in Tools > MozRepl > Start.
#[http://netcat.sourceforge.net/ Netcat] (nc) must be on your path.
#Firefox and Vim are both on the same machine (localhost).

===How it works===
I use echo + netcat (nc) to send a dopey little MosRepl script (see below) to Firefox. All the output is tossed away (2>&1 > /dev/null) because MozRepl is chatty.

Global variables are used (vimXo, vimYo) to capture the X,Y offset of the web page for Vim. Maybe there's a way to not use a global, but I don't know what that might be. After saving the buffer and reloading the browser, scroll to the X,Y offset.

See also:
*http://wiki.github.com/bard/mozrepl/tutorial
*http://forums.whirlpool.net.au/forum-replies-archive.cfm/495300.html

===Code for vimrc===
<pre>
autocmd BufWriteCmd *.html,*.css,*.gtpl :call Refresh_firefox()
function! Refresh_firefox()
  if &modified
    write
    silent !echo  'vimYo = content.window.pageYOffset;
          \ vimXo = content.window.pageXOffset;
          \ BrowserReload();
          \ content.window.scrollTo(vimXo,vimYo);
          \ repl.quit();'  |
          \ nc -w 1 localhost 4242 2>&1 > /dev/null
  endif
endfunction
</pre>

- added "-w 1" flag to netcat to solve occasional hung connections

==A few additions==
To put in [[vimrc]]:
<pre>
command! -nargs=1 Repl silent !echo
      \ "repl.home();
      \ content.location.href = '<args>';
      \ repl.enter(content);
      \ repl.quit();" |
      \ nc localhost 4242

nmap <leader>mh :Repl http://
" mnemonic is MozRepl Http
nmap <silent> <leader>ml :Repl file:///%:p<CR>
" mnemonic is MozRepl Local
nmap <silent> <leader>md :Repl http://localhost/
" mnemonic is MozRepl Development
</pre>

Now, when working on local html files, if you switch files often then just press <leader>ml and the file is shown in Firefox. Also, <leader>mh will bring you to ex mode where you can type in a URL and go there in Firefox etc.

==Scrolling==
I use these commands to scroll up and down:
<pre>
nnoremap <silent> <c-f><c-d> :call Firefox_scroll_down()<cr><br>
function! Firefox_scroll_down()<br>
  silent call system("echo 'content.window.scrollByPages(1); repl.quit();' | nc -w 1 localhost 4242")<br>
endfunction

nnoremap <silent> <c-f><c-u> :call Firefox_scroll_up()<cr><br>
function! Firefox_scroll_up()<br>
  silent call system("echo 'content.window.scrollByPages(-1); repl.quit();' | nc -w 1 localhost 4242")<br>
endfunction
</pre>

==Next and previous tab==
Here are commands for next and previous tab in Firefox.
<pre>
nnoremap <c-f><c-l> :call Firefox_next_tab()<cr><br>
function! Firefox_next_tab()<br>
  call system("echo 'var tabc = window.getBrowser().tabContainer; var tabs = tabc.childNodes; var index = tabc.selectedIndex; if (index !== tabs.length -1) { tabc.selectedItem = tabs[index + 1]; } else { tabc.selectedItem = tabs[0]; } repl.quit()' | nc -w 1 localhost 4242")<br>
endfunction

nnoremap <c-f><c-h> :call Firefox_prev_tab()<cr><br>
function! Firefox_prev_tab()<br>
  call system("echo 'var tabc = window.getBrowser().tabContainer; var tabs = tabc.childNodes; var index = tabc.selectedIndex; if (index === 0) { tabc.selectedItem = tabs[tabs.length - 1]; } else { tabc.selectedItem = tabs[index - 1]; } repl.quit()' | nc -w 1 localhost 4242")<br>
endfunction
</pre>

==See also==
*[http://groups.google.com/group/mozlab/browse_thread/thread/749ad1250bf8ef81 original Vim+MozRepl posting]

==Comments==
Excellent!  Needed something to replace LiveReload on my Linux workstation at work.  This did the trick.  Thanks.
----
Maybe need to add <code>:redraw</code> or <code>:redraw!</code> after reload if web page. --July 22, 2014