Merge lp:~wgrant/launchpad/product-index-code-stab into lp:launchpad

[William Grant]

Move branch link, languages and VCS bits of Product:+index to a new "Code" portlet.

Move branch link, languages and VCS bits of Product:+index to a new "Code" portlet.

Now the "Browse the code" link isn't hidden in the middle of a blur of text. The licence section is also now 50% rather than 25% width, eliminating fugly wrapping. And the development focus series edit widget is now in the "Series and milestones" portlet.

I shuffled Bugs and contributors to the right column and FAQs to the left to balance them out a bit more in the common case.

This is preparation for a more minor adjustment to support linking to a default Git repository, not just a Bazaar branch. The increased width in the new portlet will also allow the clone URL to be shown on the project page, shock horror.

http://people.canonical.com/~wgrant/launchpad/product-index-code-old.png
http://people.canonical.com/~wgrant/launchpad/product-index-code-new.png

[Colin Watson (cjwatson)]

To my eye there seems to be a bit of missing spacing above "Version control system" relative to other similar things on the page. Presumably this has something to do with the default CSS for .two-column-list dl:first-child dt, so maybe style="margin-top 0.5em;" there would help.

I can see why you put the questions portlets on the LHS, but I'm not sure I like it. Having them more or less diagonally opposite bugs looks kind of odd, since they're listed in a similar style. Also, putting them on the LHS seems more prominent than they typically deserve; when skimming a page I find my eye scans down the LHS first rather than going across to the middle. And FAQs below questions makes no logical sense at all, since if we have FAQs at all they should appear earlier in the page flow. Perhaps:

  Code FAQs
  Bugs Questions
  Packages Specs
  Contributors Sprints

... would be reasonably balanced? Most common collaboration targets at the top left; FAQs above questions; LHS should I think usually come out similar height or slightly higher.

Another logical layout would be more developer-centric stuff on one side, more user-centric stuff on the other. That would yield something like:

  Code Packages
  Specs Bugs
  Sprints FAQs
  Contributors Questions

But I'm not convinced that's better, and it might need to be flipped left to right in order to avoid the RHS typically being longer, which decreases the prominence of Code too much for my taste.

The actual patch looks fine, and I definitely like the revamped Code layout; so whatever you pick out of these or your existing layout is OK, and we can always adjust things further later.

review: Approve

[William Grant (wgrant)]

I've left the portlet order as is for now; my intent was to keep Code and Bugs above the fold on 1920x1080, but perhaps I overcompensated for my 2560x1440 monitors. We can easily reorder them later once we see how it looks on real data.

=== modified file 'lib/lp/registry/stories/product/xx-product-development-focus.txt'
--- lib/lp/registry/stories/product/xx-product-development-focus.txt	2015-06-25 00:47:21 +0000
+++ lib/lp/registry/stories/product/xx-product-development-focus.txt	2016-03-24 02:58:58 +0000
@@ -23,9 +23,22 @@
     >>> owner_browser = setupBrowser('Basic [e-mail]:test')
     >>> def print_development_focus(browser):
     ...     """Print out the development focus part of the project info."""
-    ...     project_info = find_tag_by_id(browser.contents, 'project-info')
+    ...     dev_focus = find_tag_by_id(browser.contents, 'development-focus')
+    ...     print extract_text(dev_focus)
+    ...     print "Links:"
+    ...     for a in dev_focus.findAll('a'):
+    ...         for content in a.contents:
+    ...             print content
+    ...         title = a.get('title', '')
+    ...         print "%s (%s)" % (title, a['href'])
+    >>> def print_code_trunk(browser):
+    ...     """Print out code trunk part of the project info."""
+    ...     project_info = find_tag_by_id(browser.contents, 'code-info')
     ...     dev_focus = project_info.find(attrs={'id':'dev-focus'})
-    ...     print extract_text(dev_focus)
+    ...     try:
+    ...         print extract_text(dev_focus)
+    ...     except TypeError:
+    ...         return
     ...     print "Links:"
     ...     for a in dev_focus.findAll('a'):
     ...         for content in a.contents:
@@ -49,10 +62,10 @@
 
     >>> anon_browser.open('http://launchpad.dev/fooix')
     >>> print_development_focus(anon_browser)
-    Development focus:
-    trunk series
+    trunk series is the current focus of development.
     Links:
       trunk series (/fooix/trunk)
+    >>> print_code_trunk(anon_browser)
     >>> print_involvement_portlet(anon_browser)
 
 
@@ -65,13 +78,11 @@
 
     >>> owner_browser.open('http://launchpad.dev/fooix')
     >>> print_development_focus(owner_browser)
-    Development focus:
-    trunk series    Change details
+    trunk series is the current focus of development.  Change details
     Links:
-    trunk series
-     (/fooix/trunk)
-     Change details
-     (http://launchpad.dev/fooix/+edit)
+     trunk series (/fooix/trunk)
+     Change details (http://launchpad.dev/fooix/+edit)
+    >>> print_code_trunk(anon_browser)
     >>> print_involvement_portlet(owner_browser)
     Code
     http://launchpad.dev/fooix/+configure-code
@@ -94,11 +105,22 @@
 
 The owner is taken back to the project page.
 
-    >>> print_tag_with_id(owner_browser.contents, 'dev-focus')
+    >>> print_development_focus(owner_browser)
+    trunk series is the current focus of development.  Change details
+    Links:
+     trunk series (/fooix/trunk)
+     Change details (http://launchpad.dev/fooix/+edit)
+    >>> print_code_trunk(owner_browser)
     Development focus:
-    trunk series Change details
-    lp://dev/fooix Change branch
+    lp://dev/fooix  Configure Code
     Browse the code
+    Links:
+      lp://dev/fooix (http://code.launchpad.dev/~eric/fooix/trunk)
+      Configure Code
+        Configure code for this project
+        (http://launchpad.dev/fooix/+configure-code)
+      Browse the code
+        (http://bazaar.launchpad.dev/~eric/fooix/trunk/files)
 
 
 Projects with development focus branches
@@ -112,30 +134,33 @@
 
     >>> anon_browser.open('http://launchpad.dev/fooix')
     >>> print_development_focus(anon_browser)
+    trunk series is the current focus of development.
+    Links:
+     trunk series (/fooix/trunk)
+    >>> print_code_trunk(anon_browser)
     Development focus:
-    trunk series
     lp://dev/fooix
     Browse the code
     Links:
-      trunk series (/fooix/trunk)
       lp://dev/fooix (http://code.launchpad.dev/~eric/fooix/trunk)
       Browse the code
         (http://bazaar.launchpad.dev/~eric/fooix/trunk/files)
 
     >>> owner_browser.open('http://launchpad.dev/fooix')
     >>> print_development_focus(owner_browser)
+    trunk series is the current focus of development.  Change details
+    Links:
+     trunk series (/fooix/trunk)
+     Change details (http://launchpad.dev/fooix/+edit)
+    >>> print_code_trunk(owner_browser)
     Development focus:
-    trunk series     Change details
-    lp://dev/fooix   Change branch
+    lp://dev/fooix   Configure Code
     Browse the code
     Links:
-      trunk series (/fooix/trunk)
-      Change details
-        (http://launchpad.dev/fooix/+edit)
       lp://dev/fooix (http://code.launchpad.dev/~eric/fooix/trunk)
-      Change branch
-      Change the branch for this series
-        (http://launchpad.dev/fooix/trunk/+setbranch)
+      Configure Code
+        Configure code for this project
+        (http://launchpad.dev/fooix/+configure-code)
       Browse the code
         (http://bazaar.launchpad.dev/~eric/fooix/trunk/files)
 
@@ -154,24 +179,26 @@
 
     >>> anon_browser.open('http://launchpad.dev/fooix')
     >>> print_development_focus(anon_browser)
-    Development focus:
-    trunk series
+    trunk series is the current focus of development.
     Links:
       trunk series (/fooix/trunk)
+    >>> print_code_trunk(anon_browser)
 
     >>> owner_browser.open('http://launchpad.dev/fooix')
     >>> print_development_focus(owner_browser)
-    Development focus:
-    trunk series     Change details
-    lp://dev/fooix   Change branch
-    Browse the code
+    trunk series is the current focus of development.  Change details
     Links:
       trunk series (/fooix/trunk)
       Change details
         (http://launchpad.dev/fooix/+edit)
+    >>> print_code_trunk(owner_browser)
+    Development focus:
+    lp://dev/fooix   Configure Code
+    Browse the code
+    Links:
       lp://dev/fooix (http://code.launchpad.dev/~eric/fooix/trunk)
-      Change branch
-      Change the branch for this series
-        (http://launchpad.dev/fooix/trunk/+setbranch)
+      Configure Code
+        Configure code for this project
+        (http://launchpad.dev/fooix/+configure-code)
       Browse the code
         (https://bazaar.launchpad.dev/~eric/fooix/trunk/files)

=== modified file 'lib/lp/registry/stories/product/xx-product-index.txt'
--- lib/lp/registry/stories/product/xx-product-index.txt	2014-11-27 22:13:36 +0000
+++ lib/lp/registry/stories/product/xx-product-index.txt	2016-03-24 02:58:58 +0000
@@ -57,7 +57,7 @@
     External downloads http://download.url/
 
     >>> print extract_text(find_tag_by_id(content, 'product-languages'))
-    Programming Languages: C++,Xenon and Purple
+    Programming languages: C++,Xenon and Purple
 
 When the sourceforge URL is identical to the homepage, we omit the homepage:
 
@@ -148,7 +148,7 @@
     '<...This project&rsquo;s licence is proprietary...
     >>> print extract_text(
     ...     find_tag_by_id(user_browser.contents, 'licences'))
-    Licences:
+    Licence:
     Other/Proprietary (Internal project.)
     Commercial subscription expires ...
 
@@ -178,7 +178,7 @@
     None
     >>> print extract_text(
     ...     find_tag_by_id(user_browser.contents, 'licences'))
-    Licences:
+    Licence:
     GNU GPL v2
     Commercial subscription expires ...
 
@@ -235,7 +235,7 @@
     >>> anon_browser.open('http://launchpad.dev/firefox')
     >>> print extract_text(
     ...     find_tag_by_id(anon_browser.contents, 'development-focus'))
-    Mozilla Firefox trunk series  is the current focus of development
+    trunk series is the current focus of development.
 
 The page has a link to view the project's milestones.
 

=== modified file 'lib/lp/registry/templates/product-index.pt'
--- lib/lp/registry/templates/product-index.pt	2015-09-16 13:30:33 +0000
+++ lib/lp/registry/templates/product-index.pt	2016-03-24 02:58:58 +0000
@@ -106,39 +106,11 @@
                 <dt>Driver:</dt>
                 <dd tal:content="structure view/driver_widget" />
               </dl>
-
-              <dl id="dev-focus"
-                  tal:define="dev_focus context/development_focus;
-                              trunk dev_focus/branch;
-                              trunk_visible trunk/required:launchpad.View|nothing">
-                <dt>Development focus:</dt>
-                <dd>
-                  <p>
-                  <a tal:attributes="href dev_focus/fmt:url"
-                     tal:content="string:${dev_focus/name} series" />&nbsp;
-                  <a tal:replace="structure overview_menu/edit/fmt:icon" /></p>
-                  <p tal:condition="trunk_visible">
-                    <a tal:replace="structure trunk/fmt:link" />&nbsp;
-                    <a tal:replace="structure dev_focus/menu:overview/set_branch/fmt:icon" />
-                    <br/>
-                    <a tal:replace="structure trunk/menu:context/source/fmt:link"/>
-                  </p>
-                </dd>
-              </dl>
-
-              <dl id="product-languages"
-                tal:condition="view/show_programming_languages">
-                <dt>Programming Languages:</dt>
-                <dd tal:content="structure view/languages_edit_widget" />
-              </dl>
-
-              <dl id="product-vcs" tal:condition="context/inferred_vcs">
-                <dt>Version control system:</dt>
-                <dd tal:content="context/inferred_vcs/title">Git</dd>
-              </dl>
-
+            </div>
+
+            <div>
               <dl id="licences">
-                <dt>Licences:</dt>
+                <dt>Licence:</dt>
                 <dd>
                   <tal:licenses repeat="license context/licenses">
                     <tal:license replace="license/title">GPL</tal:license><tal:comma
@@ -188,8 +160,10 @@
               metal:use-macro="context/@@+timeline-macros/timeline-iframe" />
 
             <p id="development-focus">
-              <a tal:replace="structure context/development_focus/fmt:link" />
-              is the current focus of development
+              <a tal:attributes="href context/development_focus/fmt:url"
+                tal:content="string:${context/development_focus/name} series" />
+                is the current focus of development.
+              <a tal:replace="structure overview_menu/edit/fmt:icon" />
             </p>
 
             <ul class="horizontal">
@@ -214,25 +188,61 @@
 
       <div class="yui-g">
         <div class="yui-u first">
+          <div id="code-info" class="portlet">
+            <h2>
+              <span class="see-all"><a
+                tal:attributes="href context/fmt:url:code">
+                All code</a></span>
+              Code
+            </h2>
+
+            <dl id="dev-focus"
+                tal:define="trunk context/development_focus/branch;
+                            trunk_visible trunk/required:launchpad.View|nothing"
+                tal:condition="trunk_visible">
+              <dt>Development focus:</dt>
+              <dd>
+                <p>
+                  <a tal:replace="structure trunk/fmt:link" />&nbsp;
+                  <a tal:replace="structure context/menu:overview/configure_code/fmt:icon" />
+                  <br/>
+                  <a tal:replace="structure trunk/menu:context/source/fmt:link"/>
+                </p>
+              </dd>
+            </dl>
+
+            <div class="two-column-list">
+              <dl id="product-vcs" tal:condition="context/inferred_vcs">
+                <dt>Version control system:</dt>
+                <dd tal:content="context/inferred_vcs/title">Git</dd>
+              </dl>
+
+              <dl id="product-languages"
+                tal:condition="view/show_programming_languages">
+                <dt>Programming languages:</dt>
+                <dd tal:content="structure view/languages_edit_widget" />
+              </dl>
+            </div>
+          </div>
+
+          <div tal:content="structure context/@@+portlet-latestquestions"
+            tal:condition="context/answers_usage/enumvalue:LAUNCHPAD" />
+
           <div tal:content="structure context/@@+portlet-listfaqs"
             tal:condition="context/answers_usage/enumvalue:LAUNCHPAD" />
+          <div tal:content="structure context/@@+portlet-packages" />
+        </div>
 
+        <div class="yui-u">
           <div tal:content="structure context/@@+portlet-latestbugs"
             tal:condition="context/bug_tracking_usage/enumvalue:LAUNCHPAD" />
 
-          <div tal:content="structure context/@@+portlet-top-contributors" />
-
-          <div tal:content="structure context/@@+portlet-packages" />
-        </div>
-
-        <div class="yui-u">
-          <div tal:content="structure context/@@+portlet-latestquestions"
-            tal:condition="context/answers_usage/enumvalue:LAUNCHPAD" />
-
           <div tal:content="structure context/@@+portlet-latestspecs"
             tal:condition="context/blueprints_usage/enumvalue:LAUNCHPAD" />
 
           <div tal:content="structure context/@@+portlet-coming-sprints" />
+
+          <div tal:content="structure context/@@+portlet-top-contributors" />
         </div>
         <div class="yui-u">
           <div id="structural-subscription-content-box"></div>