Merge lp:~ya-bo-ng/juju-gui/linkify-charm-descriptions into lp:juju-gui/experimental

[Anthony Dillon]

Fixes word wrapping in charm description.

Removed respect-whitespace class from entire description and commits and only applied it to links and launchpad branches.

[lp:~ya-bo-ng/juju-gui/linkify-charm-descriptions]

1158. By Huw Wilkins on 2013-10-29

Remove old inspector styles

We had all the styles from the old inspector left in the stylesheet. I've merged the few styles that were being used by the new inspector.

One change that will be difference after the removal is that the font weight should now be 300 instead of 400. This was a change confirmed with Luca and Spencer that 300 is the correct weight.

R=
CC=
https://codereview.appspot.com/17470043

1159. By Huw Wilkins on 2013-10-29

Big CSS cleanup

Apologies for the size of this branch.

In this branch:
Moved mixins to own file.
Removed old @vars and those only used once (no need for them to remain a var).
Removed classes that are no longer being used.
Added comments to classes.
Changed remaining font sizes to use px (to be consistent with the web team).
Added some documentation on class ordering.
Redesigned login/connecting to juju/unsupported browser notice to fit with the current GUI style.

R=jeff.pihach
CC=
https://codereview.appspot.com/18970043

1160. By Huw Wilkins on 2013-10-29

Fix fullscreen bundles

The fullscreen bundles page was quite broken. Added the appropriate classes to make it work.

R=jeff.pihach
CC=
https://codereview.appspot.com/18980043

1161. By Jeff Pihach on 2013-10-29

Add Deploy tab to bundle details view

Also adds:
bundle location into bundle details view header
bzr branch command to Code tab
moved the Readme tab to the second tab spot as per UX

R=bac
CC=
https://codereview.appspot.com/18630045

1162. By Jeff Pihach on 2013-10-30

Adds confirmation to bundle deploy

When clicking the 'add to canvas' button in the bundle
details page it will now show a notification above the
button and require an additional click on the button
which now reads, 'Yes, I'm sure'.

R=gary.poster
CC=
https://codereview.appspot.com/19570043

1163. By Huw Wilkins on 2013-10-30

Remove "charms" from section titles

With the addition of bundles the section headers no longer make sense. Under the feature flag that adds bundles I've removed "charms" from the titles in the browser.

R=jeff.pihach
CC=
https://codereview.appspot.com/18950044

1164. By Huw Wilkins on 2013-10-30

More sprite and CSS cleanups

Moved images that are only used via background-image out of the sprites folder.
Changed some images to be used as sprites.
Removed some unused images.
Added a new mixin to handle using sprites for hover.
Removed some CSS that is no longer being used.
Cleaned up a little CSS for the sake of file size.
Removed old slider images from the Makefile as they were no longer being used.
Drive-by fix for bug #1245907 where extra scrollbars where appearing in the ghost inspector.

R=
CC=
https://codereview.appspot.com/19700044

1165. By Brad Crittenden on 2013-10-30

Show bundle change log.

Other changes:
 * Change date format for charm and bundle change logs to be like 2013-10-31.
 * Lots of drive-by typo fixes. Sorry for the noise but I cannot help myself.

R=jeff.pihach, benji
CC=
https://codereview.appspot.com/19380044

1166. By Richard Harding on 2013-10-30

Provide a 'deploy' button in quicksearch results.

- Add the control to the tokens for both charms and bundles
- Wire up a new event that the search widget can fire EVT_DEPLOY
- Make views that extend view.js (fullscree/sidebar) watch for that event and
build a proper deploy command.
- Make sure those views get access to the deploy and bundleDeploy helpers from
the browser.js
- Deploying does not actual perform a selection so no search or details takes
place. It's an alternate behavior for quicksearch.

Several drive-by fixes for things. Documented in the reviewer comments.

QA:

The button is feature flagged due to the fact that this quick deploy doesn't
involve the charm cache and causes the inspector to 'hang' for a sec when you
hit the deploy button. It's not an ideal experience.

http://gui:8888/:flags:/searchDeploy

Search for apa and then click on the + next to apache2. It should deploy to
the canvas. No text is in the quicksearch box, no charm highlighted, etc.

You can also QA this with a bundle.

http://gui:8888/:flags:/searchDeploy/charmworldv3/

Now enter "TestB" and get the TestBundle result. Press the + to deploy the
bundle.

R=gary.poster, jeff.pihach
CC=
https://codereview.appspot.com/18920045

1167. By Anthony Dillon on 2013-10-30

Merged with live and resolved conflicts

1168. By Anthony Dillon on 2013-10-30

Fixed the QA issue

[Gary Poster (gary)]

This is a great idea, and I have been struggling with how to include it without introducing new XSS vectors. I think it can be done, but it takes more time than I have now.

[Gary Poster (gary)]

I ran with this in a bit of an obsession: https://codereview.appspot.com/22200045

=== modified file 'app/subapps/browser/templates/browser_charm.handlebars'
--- app/subapps/browser/templates/browser_charm.handlebars	2013-10-30 13:11:05 +0000
+++ app/subapps/browser/templates/browser_charm.handlebars	2013-10-30 15:20:50 +0000
@@ -101,7 +101,7 @@
                             <p><em>This is a local charm; only limited information will be available</em></p>
                         {{/if}}
                         <h2>Description</h2>
-                        <p class="respect-whitespace">{{#if isFullscreen}}{{ description }}{{else}}{{ truncate description 300 }}{{/if}}</p>
+                        <p>{{#if isFullscreen}}{{{ description }}}{{else}}{{{ truncate description 300 }}}{{/if}}</p>
                     </div>
 
                     <div class="changelog">
@@ -127,7 +127,7 @@
                                         {{prettyCommits.first.prettyDate}}
                                     </span>
                                     <strong>{{prettyCommits.first.author.name}}</strong>
-                                    <span class="respect-whitespace">{{prettyCommits.first.message}}</span> -
+                                    <span>{{{prettyCommits.first.message}}}</span> -
                                     <a href="{{ prettyCommits.first.revnoLink }}">
                                       REVNO{{prettyCommits.first.revno}}
                                     </a>
@@ -146,7 +146,7 @@
                                                     {{prettyDate}}
                                                 </span>
                                                 <strong>{{author.name}}</strong>
-                                                <span class="respect-whitespace">{{message}}</span> -
+                                                <span>{{{message}}}</span> -
                                                 <a href="{{ revnoLink }}">
                                                     REVNO{{revno}}
                                                 </a>

=== modified file 'app/subapps/browser/views/charm.js'
--- app/subapps/browser/views/charm.js	2013-10-30 13:23:16 +0000
+++ app/subapps/browser/views/charm.js	2013-10-30 15:20:50 +0000
@@ -340,10 +340,13 @@
       if (Y.Object.isEmpty(templateData.provides)) {
         templateData.provides = false;
       }
-
+      // Wrap plain text links in descriptions and commit messages with a tags
+      templateData.description = this.Linkify(templateData.description);
+      templateData.recentCommits.forEach(function(commit) {
+        commit.message = this.Linkify(commit.message);
+      }, this);
       var template = this.template(templateData);
-
-      // Set the content then update the container so that it reloads
+      // Set the content then update the container so that it reload
       // events.
       var renderTo = this.get('renderTo');
       renderTo.setHTML(container.setHTML(template));
@@ -375,6 +378,30 @@
     },
 
     /**
+       Sanitize links.
+
+       Linkify links in the plain text descriptions and commit messages.
+       Wrap launchpad branch locations in spans to wrap them.
+
+       @method Linkify
+     */
+    Linkify: function(text) {
+      if (text) {
+        // Wraps an a tag around links.
+        var links =
+            /(\b(https?|http):\/\/[-A-Za-z0-9+&@#\/%?=~_()|!:,.;]*[-A-Za-z0-9+&@#\/%=~_()|]+)/ig;
+        text = text.replace(links,
+            '<a href="$1" target="_blank" class="respect-whitespace">$1</a>');
+
+        // Puts lp branch addresses in spans with respect-whitespace
+        var lp_links = /(\b(lp:~)[^ ]*[0-9A-Za-z_]+)/ig;
+        text = text.replace(lp_links,
+            '<span class="respect-whitespace">$1</span>');
+      }
+      return text;
+    },
+
+    /**
        Render out the view to the DOM.
 
        The View might be given either a entityId, which means go fetch the
@@ -387,7 +414,6 @@
     render: function() {
       var isFullscreen = this.get('isFullscreen');
       this.showIndicator(this.get('renderTo'));
-
       if (this.get('entity')) {
         this._renderCharmView(this.get('entity'), isFullscreen);
         this.hideIndicator(this.get('renderTo'));

=== modified file 'lib/views/browser/charm-full.less'
--- lib/views/browser/charm-full.less	2013-10-30 12:54:32 +0000
+++ lib/views/browser/charm-full.less	2013-10-30 15:20:50 +0000
@@ -180,6 +180,7 @@
     #bws-summary,
     #bws-readme {
         padding-top: 10px;
+        padding-bottom: 50px;
     }
     #bws-readme {
         ul {