Announce: web-browser


#1

The readme follows …

Web-Browser package

A web browser that runs seamlessly in the Atom editor

This is a web browser tightly integrated into the Atom editor. The web pages appear in the normal editor tabs. The pages are fully functional with scripting and linking. A browser toolbar appears at the top of the Atom window to allow simple webpage navigation.

The browser is quite useful for testing a web page inside the same programming editor being used for development. Splitting panes allow code to be seen next to the web page.

Usage

  • Install with apm install web-browser
  • Press ctrl-alt-B (web-browser:toggle) and a toolbar will appear above the tabs
  • Enter a url and press enter
  • To later create a new tab use ctrl-enter instead
  • Press ctrl-alt-B again to refocus input
  • Press ctrl-alt-B again to close the toolbar
  • Click on the globe in the toolbar to close the toolbar (secret feature)

Auto-reload

Auto-reload is a feature that works much like a live-reload but is simpler and requires no setup. The last button on the left (after the reload button) is the auto-reload button.

Image inserted by Atom editor package auto-host-markdown-image

This button toggles the auto-reload feature for the visible webpage. When the feature is enabled the page’s tab shows a red dashed box around the page’s favicon. You can toggle this feature on multiple pages at once.

Image inserted by Atom editor package auto-host-markdown-image

This activates a simple live reload feature. Whenever any source file in any tab is saved the web page is auto-reloaded. There is a delay before the reload that can be set in settings. The default is one second. This delay gives the system time to process the file such as compiling coffeescript.

Favorites

The package command-toolbar supports buttons to save webpages and open them at any time with a single click. This means that it can act as a “favorites” toolbar for this web-browser package.

API

This web-browser package listens for requests to open URLs. This is anything that starts with http:// or https://. To open a webpage from code use the atom.workspace.open command with such a URL.

License

Copyright Mark Hahn by MIT license


#2

Thank you Mark!!!
My only issue is the ctrl-alt-b shortcut. Atom Beautify uses the same.
And the two pixel #9A9A9A border :-))


#3

Shortcut conflicts in packages are a bitch and and it’s going to get worse. I thought of not specifying any and making the user add them, but then the user would lose the out-of-box experience which would be painful. On many packages I wouldn’t try them out if I had to take the extra effort. I’m going to post a question about this now.

I’ll fix that. I also need to add a margin. Pages are touching the edge of the pane.


#4

There already was this thread. Key-binding hell

Can anyone suggest an alternative binding for this web-browser package?


#5

Announcement: 1.0.0 was just released. It is now using the webview tag which is awesome.

IMHO, the whole experience now seems like a real browser. The next 1.1.0 release will have live reload and context help page loading.


#6

Announcement: web-browser 1.1.2 was just released with an auto-reload feature.

This is usually called live-reload but this is a very simple no-configuration-required version of reload. You mark which webpage you want to auto-reload with a click in the toolbar. Then whenever any source file in the editor is saved that marked page will reload. You can specify a delay to give time for background processing, like a coffeescript compile, to complete.

If anyone has a live-reload requirement that this doesn’t work for let me know.

Edit: The updated readme is at https://atom.io/packages/web-browser.


#7

Announcement: web-browser 1.2.0 was just released. It has cleaned up the auto-reload feature to make it more usable. It also has two new major features …

Search for selected text

If you are in a text file you can search for selected text in google using a single keystroke. The google search results will appear in a new tab. Execute the command web-browser:search-google (default keybinding is ctrl-H).

Show all web pages in a right pane

There is a setting to have all web pages open in a right pane. If a right pane doesn’t exist one will be created. This is especially useful when you are modifying source on the left and viewing the rendered version on the right. This similar to how the markdown preview works.

The search feature will soon have the option of using devdocs.io which will let you select things like ajax and get a doc page for jQuery’s ajax command. Check out http://devdocs.io/#q=jquery%20ajax


#8

Announcement: 1.4.0 was released. It adds support for searching devdocs.io.

For those of you not familiar with the site it has docs for almost every technology available in one search. It will take you right the to doc for a single api command like jQuery’s ajax.

You can now search devdocs.io by selecting some text and pressing ctrl-alt-H (command web-browser:devdocs-it. The google search is still ctrl-H but the command has changed to web-browser:google-it. As before it brings up the real web page.


#9

This is fantastic. Thanks!

Question though: I use this for viewing my Jupyter/iPython notebooks. The iPython native keybindings to delete/add frames utilizes an escape. Obviously, doing so within Atom just cancels/unfocuses, and the notebook doesn’t interpret the following keystrokes as part of a delete/add command (e.g. esc-d doesn’t delete a frame, it just cancels and then prints a ‘d’ in the current iPython frame). Any idea for a workaround?


#10

I can try to change the key bindings. I had to change others. Can you make an issue for me?


#11

Added on github. Thanks!