Switch from jQuery UI to Bootstrap

[fedarko]

This won't be a "cure-all," but it should make the site look nicer on a wider variety of devices. Bootstrap is designed with mobile-first functionality, so a lot of stuff (e.g. control groups, tooltips, dialogs, ...) will look pretty in both mobile and desktop browsers.

Not only will this make designing for mobile a lot easier, it'll also make the tool look a lot nicer in general: Bootstrap is more recent than jQuery UI in many respects, and it definitely provides a more aesthetically pleasing out-of-the-box experience for users.

The only downsides to this:

• Not sure about Bootstrap support for draggable dialogs, which we currently use from jQuery UI. However, 1) it's not like those jQuery dialogs are draggable on mobile so it seems fair to not have dragging functionality altogether, and 2) jQuery UI and Bootstrap are compatible (and both rely on jQuery) so if we really want we can keep the jQuery UI dialogs and replace its other features.
• Not sure about Bootstrap support for spinners (input box with up/down buttons that can scale to certain limits; we use this for the connected component selector, with a "min" of 1 and a "max" of whatever the number of connected components in the assembly graph is). However, like above, we can use jQuery UI for this (or just get by with a Bootstrap solution; the spinner's behavior isn't really that important, although it is certainly nice).
• Time taken in replacing jQuery stuff with Bootstrap stuff (shouldn't be that bad; a few hours at most, I'm guessing)

[fedarko]

http://www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap/

Straight out of the box, Twitter Bootstrap includes CSS weighing in at 126KB and 29KB of JavaScript. If you do want to use all of the sweet functionality baked into Twitter Bootstrap, you should have a good think about resource loading times. Of course for some this may not be an issue, but here in New Zealand the internet has to be pumped all the way across the Pacific ocean, and by the time it gets here it is slow and tired.

I... I can't actually tell if this is a joke or not.

[fedarko]

Another motivation here: we can use Bootstrap's nice-looking, inoffensive, easy-to-use tooltips, as opposed to jQuery UI's large and oftentimes intrusive tooltips. Not only would this improve existing functionality within the AsmViz viewer, this would also allow us to easily add dynamic help buttons to dialogs/etc. that show the user information in context. Sort of like what WEB BLAST and Bandage do.

[fedarko]

Ok, so I've gotten most of the various UI elements (sans dialogs) replaced with Bootstrap. One issue, though, is that disabling buttons/etc is a bit more complex in Bootstrap than in jQuery UI, so that'll necessitate a bit of time going through stuff tomorrow. (I've managed to get everything properly disabled on initialization, I believe -- now it's a matter of selectively enabling certain things properly, and supporting toggling enabled/disabled status).

After getting the enabled stuff sorted out, I need to go through the JS and HTML code and sort out old jQuery UI non-dialog references (replacing them with Bootstrap stuff). I'd consider this step "done" when the viewer tool works as it did before, with no errors. At this point, I'll commit the changes that I've made (keeping both jQuery UI and Bootstrap for the time being).

After that, I'd like to replace all dialogs with inline or otherwise Bootstrap equivalent things. Then I'll remove jQuery UI and mark this issue as done.

[fedarko]

Well, the viewer mostly works for now (you can load/view components as before) -- some of the controls are still disabled, so I need to fix that. But the functionality is definitely close.

[fedarko]

Spent today working on control panel sizing stuff + switching some last things over to Bootstrap (again, sans dialogs). On the docket:

• Go through each element and determine when it should be enabled, disabled, etc -- and implement that accordingly, replacing old jQuery UI disabling/enabling (which was via the .button() function). The places in the code where this is done should be mostly the same as before, unless I change anything in particular (e.g. rotation button group). I might need to create a few helper functions for this, to make easily disabling/enabling an arbitrary bootstrap button/text area/etc based on ID easier.
• Implement onChange listener stuff for the new rotation button group. Alternatively, just only have rotation influence the next "drawing" of a graph. This should be really really similar to what we had before.
• Implement collapse button name detection for the collapsing code, since that uses the button name to determine which operation is undertaken. Alternatively, just create two buttons: collapseAll and uncollapseAll, which may be easier and might actually make more sense from a UI perspective.
• Commit changes thus far: at this point, full functionality is available.
• Determine a suitable replacement for each dialog (inline stuff or Bootstrap dialogs, or some other solution). Implement & commit accordingly.
• Once all dialogs have been converted away from jQuery UI, remove jQuery UI from the project.

[fedarko]

Enabling/disabling and the collapse button stuff is all taken care of. Just have to implement onChange for rotation.