Merge lp:~sinzui/launchpad/unlock-sprite into lp:launchpad

[Curtis Hovey]

Show the public/private lock in the information portlet.

Pre-implementation: purple squad

The information type portlet could show a lock icon to re-enforce the
lock shown in privacy banner. This branch adds the public lock icon that
was provided by mpt many years ago. Sorry about the svg in the diff :(

--------------------------------------------------------------------

RULES

    * Update the mixin view to provide the needed css to show the two locks.
    * Update the template to use the view's css.
    * Update the change information success handler to replace the css classes
      to match the new state.

QA

    * Visit https://bugs.qastaging.launchpad.net/launchpad/+bug/246964
    * Verify you see the unlocked public icon at the start of the information
      type portlet.
    * Change the bug to embargoed security.
    * Verify you see the locked private icon at the start of the information
      type portlet when the privacy banner appears.

    See http://people.canonical.com/~curtis/public-information-type.png
    and http://people.canonical.com/~curtis/private-information-type.png

LINT

    lib/canonical/launchpad/icing/inline-sprites-1.css.in
    lib/canonical/launchpad/icing/css/base.css
    lib/canonical/launchpad/images/public.png
    lib/canonical/launchpad/images/src/public.svg
    lib/lp/app/browser/informationtype.py
    lib/lp/bugs/browser/tests/test_bugview.py
    lib/lp/bugs/javascript/information_type_choice.js
    lib/lp/bugs/javascript/tests/test_information_type_choice.html
    lib/lp/bugs/javascript/tests/test_information_type_choice.js
    lib/lp/bugs/templates/bug-portlet-privacy.pt
    lib/lp/code/templates/branch-portlet-privacy.pt

    ^ There is some formatting issues in the CSS that I can fix after the
    review.

TEST

    ./bin/test -vvc -t information_type lp.bugs.browser.tests.test_bugview
    ./bin/test -vvc -t information_type lp.bugs.tests.test_yuitests

IMPLEMENTATION

Added the images attached to the bug:
    lib/canonical/launchpad/images/public.png
    lib/canonical/launchpad/images/src/public.svg

Added a sprite for public. Added a rule to not show the sprite on the body
element -- seeing that was quite a surprise as I was testing.
    lib/canonical/launchpad/icing/inline-sprites-1.css.in
    lib/canonical/launchpad/icing/css/base.css

Added information_type_css to InformationTypeViewMixin to provide the CSS
that matches the current aretefact state. The icon is shown at the start
of the portlet as the lock was shown in the original portlet.
    lib/lp/app/browser/informationtype.py
    lib/lp/bugs/browser/tests/test_bugview.py
    lib/lp/bugs/templates/bug-portlet-privacy.pt
    lib/lp/code/templates/branch-portlet-privacy.pt

Updated the success handler to replace the public or private class in the
portlet to match what happens with the privacy banner is updated.
    lib/lp/bugs/javascript/information_type_choice.js
    lib/lp/bugs/javascript/tests/test_information_type_choice.html
    lib/lp/bugs/javascript/tests/test_information_type_choice.js

[j.c.sackett (jcsackett)]

Thanks, Curtis.

review: Approve

=== modified file 'lib/canonical/launchpad/icing/css/base.css'
--- lib/canonical/launchpad/icing/css/base.css	2012-05-17 21:04:18 +0000
+++ lib/canonical/launchpad/icing/css/base.css	2012-06-07 18:40:26 +0000
@@ -1,29 +1,31 @@
 body {
+    /* line-height is the same as the sprite height. */
     font-family: Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;
     font-size: 12px;
-    line-height: 18px; /* The same as the sprite height. */
+    line-height: 18px;
     color: #333;
     }
-body.private {
+
+body.private,
+body.public {
     /* It must be obvious to the user that the context is private */
     background-image: none;
     }
+
 body.private .private-disallow {
     /* We want to disable/hide some actions on private artifacts */
-    display: none
+    display: none;
     }
+
 .private-only {
     /* We want to only show some items on private artifacts */
     display: none;
     }
+
 body.private .private-only {
     /* We want to only show some items on private artifacts */
     display: block;
     }
-* html body {
-    /* stops floats dropping in IE 5.5/6 */
-    word-wrap: break-word;
-    }
 
 hr {
     display: none;
@@ -34,122 +36,164 @@
     margin-top: 0.5em;
     font-weight: bold;
     }
+
 dt dfn {
     font-weight: bold;
     }
+
 dd {
     margin-bottom: .8em;
     }
+
 dl.faq dd {
     margin: 1em 0 2em 4em;
     }
+
 .contributors dt strong {
     padding-left: 1em;
     }
+
 ol {
     margin-left: 1.8em;
     }
+
 ol li {
     list-style: decimal outside;
     }
+
 li {
     padding-bottom: .3em;
     }
-ul.news, li.news {
+
+ul.news,
+li.news {
     list-style-type: none;
     margin-bottom: 1em;
     }
-ul.architecture, li.architecture {
+
+ul.architecture,
+li.architecture {
     list-style-image: url(/@@/architecture);
     }
-ul.build-success, li.build-success {
+
+ul.build-success,
+li.build-success {
     list-style-image: url(/@@/build-success);
     }
-ul.bug.remote, li.bug.remote {
+
+ul.bug.remote,
+li.bug.remote {
     list-style-image: url(/@@/bug-remote);
     }
-ul.language, li.language {
+
+ul.language,
+li.language {
     list-style-image: url(/@@/language);
     /* Disable .language sprite. */
     background: inherit;
     }
-ul.mail, li.mail {
+
+ul.mail,
+li.mail {
     list-style-image: url(/@@/mail);
     }
-ul.meeting, li.meeting {
+
+ul.meeting,
+li.meeting {
     list-style-image: url(/@@/meeting);
     }
-ul.rss, li.rss {
+
+ul.rss,
+li.rss {
     list-style-image: url(/@@/rss);
     }
-ul.translation, li.translation {
+
+ul.translation,
+li.translation {
     list-style-image: url(/@@/translation);
     }
-ul.webref, li.webref {
+
+ul.webref,
+li.webref {
     list-style-image: url(/@@/link);
     }
+
 ul.iconed {
     list-style-type: none;
     padding-left: 0 !important;
     margin: 0 !important;
     }
+
 ul.buttons {
     /* without !important, gets overridden by the '#maincontent ol' rule */
     margin: 0.5em 0 0.5em 0 !important;
     padding: 0 !important;
     }
+
 ul.buttons li {
     display: inline;
     margin: 0 0 0 0;
     }
+
 .bulleted {
     margin-bottom: 0.5em;
     }
+
 .bulleted li {
     margin: 0 0 0 2em;
     list-style-type: disc;
     }
+
 .horizontal {
     margin: 1em 0 0 0;
     }
+
 .horizontal li {
     display: inline;
     padding: 0 1.5em 0 0;
     }
+
 .subordinate {
     margin-left: 2em;
     }
+
 ol.subordinate {
     margin-left: 4em;
     }
+
 .two-column-list dl {
     width: 48%;
     float: left;
     display: inline;
     margin: 0 0.25em 0 0;
     }
+
 .two-column-list dl:first-child dt,
 .two-column-list dl:first-child + dl dt {
     margin-top: 0;
     }
+
 .three-column-list dl {
     width: 31%;
     float: left;
     display: inline;
     margin: 0 0.25em 0 0;
     }
+
 .two-column-list li {
     width: 48%;
     float: left;
     display: inline;
     margin: 0 0.25em 0 0;
     }
+
 .three-column-list li {
     width: 31%;
     float: left;
     display: inline;
     margin: 0 0.25em 0 0;
     }
+
 .two-column-list:after,
 .three-column-list:after {
     content: ".";
@@ -158,6 +202,7 @@
     clear: both;
     visibility: hidden;
     }
+
 .two-column-list dl.unseen,
 .two-column-list li.unseen,
 .three-column-list dl.unseen,
@@ -166,205 +211,279 @@
     display: none;
     }
 
-
 caption {
     caption-side: bottom;
     text-align: left;
     }
+
 th {
     text-align: right;
     }
-th, td {
+
+th,
+td {
     vertical-align: baseline;
     }
+
 .head th,
-thead th, tr.thead th {
+thead th,
+tr.thead th {
     text-align: left;
     vertical-align: bottom;
     }
-th.icon, td.icon {
+
+th.icon,
+td.icon {
     vertical-align: top;
     white-space: nowrap;
     width: 1px;
     }
-th.icon.left, td.icon.left {
+
+th.icon.left,
+td.icon.left {
     padding-right: 0;
     }
-th.icon.right, td.icon.right {
+
+th.icon.right,
+td.icon.right {
     padding-left: 0;
     }
-th.nowrap, td.nowrap {
+
+th.nowrap,
+td.nowrap {
     white-space: nowrap;
     }
-tfoot th, table.contributions th {
+
+tfoot th,
+table.contributions th {
     text-align: left;
     }
+
 tr.white {
     background-color: #fff;
     }
+
 tr.shaded {
     background-color: #f6f6f6;
     }
-table .amount, table .action-icons {
+
+table .amount,
+table .action-icons {
     text-align: right;
     }
+
 table.contributions th {
     font-weight: normal;
     }
+
 table.contributions td {
     vertical-align: middle;
     width: 16px;
     text-align: left;
     }
-table.latest th, table.latest td {
+
+table.latest th,
+table.latest td {
     padding-bottom: 2em;
     }
+
 table.duplicate.listing * {
     color: #999;
     }
+
 .table-actions:nth-child(2) {
-    /* text-align only works here because the <li> also has the
-       style display:inline.
-    */
+    /* text-align works because the <li> is also display:inline. */
     text-align: right;
     }
+
 .table-actions {
     margin: 1em 0 0 0;
     }
+
 .table-actions li {
     display: inline;
     padding: 0 1.5em 0 0;
     }
+
 table.compressed {
     width: auto;
     }
+
 table.compressed td {
     padding: 0.25em 0.5em;
     }
+
 table.cozy-listing {
     width: 20em;
     background-color: #fff;
     border: 1px solid #d2d2d2;
     border-bottom: 1px solid #d2d2d2;
     }
+
 table.cozy-listing td {
     border: 1px #d2d2d2;
     border-style: dotted none none none;
     }
+
 table.sortable a.sortheader {
     color: #666;
     font-weight: bold;
     text-decoration: none;
     display: block;
     }
+
 table.sortable img.sortarrow {
     padding-left: 2px;
     }
+
 table.sortable th {
     cursor: pointer;
     }
+
 th.ascending {
     background-image: url(/@@/arrowDown);
     background-position: center right;
     background-repeat: no-repeat;
     }
+
 th.descending {
     background-image: url(/@@/arrowUp);
     background-position: center right;
     background-repeat: no-repeat;
     }
-.sortkey, .revsortkey {
+
+.sortkey,
+.revsortkey {
     /* Used to indicate a value to be used to sort cells in a row */
     display: none;
     }
+
 table.listing {
     margin: 0;
     width: 100%;
     }
-table.listing, table.listing tbody, table.listing td.end-of-section {
+
+table.listing,
+table.listing tbody,
+table.listing td.end-of-section {
     border-bottom: 1px solid #d2d2d2;
     }
+
 table.listing th {
     font-weight: bold;
     }
-table.listing .head, table.listing .head th,
-table.listing thead, table.listing thead th, table.listing tfoot tr,
+
+table.listing .head,
+table.listing .head th,
+table.listing thead,
+table.listing thead th,
+table.listing tfoot tr,
 table.listing tr.thead th {
     border: 1px solid #d2d2d2;
     background-color: #fff;
     }
+
 table.listing tr.category {
     border-bottom: 1px solid #d2d2d2;
     }
-table.listing tr.category th, table.listing tr.category td {
+
+table.listing tr.category th,
+table.listing tr.category td {
     padding-top: 1em;
     }
+
 table.listing thead td,
-table.listing table tbody, table.listing table thead,
-table.listing table thead th, table.listing tfoot tr,
-table.listing table tfoot td, table.listing table td {
+table.listing table tbody,
+table.listing table thead,
+table.listing table thead th,
+table.listing tfoot tr,
+table.listing table tfoot td,
+table.listing table td {
     border: none;
     }
+
 table.listing tfoot td {
     border: 1px solid #d2d2d2;
     }
-table.listing th, table.listing td {
+
+table.listing th,
+table.listing td {
     padding: 0.25em;
     }
-table.listing table th, table.listing table td {
+
+table.listing table th,
+table.listing table td {
     /* We don't want extra padding on nested tables, like batch navigation. */
     padding: 0;
     }
-table.listing thead th, table.listing tr.thead th {
+
+table.listing thead th,
+table.listing tr.thead th {
     white-space: nowrap;
     }
+
 table.listing td {
     border: 1px #d2d2d2;
     border-style: dotted none none none;
     }
+
 table.listing .section-break td {
     border-width: 1px 0 0 0;
     border-style: solid;
     border-color: #d2d2d2;
     height: 1em;
     }
+
 table.listing .note td {
     border-style: none;
     }
+
 table.listing img {
     vertical-align: middle;
     }
-table.listing tr.secondary th, table.listing tr.secondary td {
+
+table.listing tr.secondary th,
+table.listing tr.secondary td {
     border-top: none;
     }
+
 table.listing table.simple {
     margin-left: 2em;
     }
+
 table.listing table.simple td {
     padding: 0.25em;
     }
+
 table.listing .section-heading {
     border: none;
     padding-top: 1.5em;
     }
-table.summary th, table.summary td,
-table.listing table.summary th, table.listing table.summary td {
-    /* Summary tables present information with subdued headers and a little
-       row spacing. */
+
+table.summary th,
+table.summary td,
+table.listing table.summary th,
+table.listing table.summary td {
+    /* Summary tables havesubdued headers and a little row spacing. */
     padding: 0 0.5em 0.5em 0;
     }
+
 table.summary th {
     font-weight: normal;
     }
+
 table.summary caption {
     font-style: italic;
     margin-left: 1em;
     }
-table.summary ul, table.summary ul li {
+
+table.summary ul,
+table.summary ul li {
     list-style-position: inside;
     margin: 0;
     padding: 0;
     }
+
 .results {
     background-color: #f4f4f4;
     padding: 2px 10px 5px 10px;

=== modified file 'lib/canonical/launchpad/icing/inline-sprites-1.css.in'
--- lib/canonical/launchpad/icing/inline-sprites-1.css.in	2012-06-02 03:10:14 +0000
+++ lib/canonical/launchpad/icing/inline-sprites-1.css.in	2012-06-07 18:40:26 +0000
@@ -277,6 +277,10 @@
     background-image: url(/@@/private.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
     }
+.public {
+    background-image: url(/@@/public.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+    }
 .meeting {
     background-image: url(/@@/meeting.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;

=== added file 'lib/canonical/launchpad/images/public.png'
Binary files lib/canonical/launchpad/images/public.png	1970-01-01 00:00:00 +0000 and lib/canonical/launchpad/images/public.png	2012-06-07 18:40:26 +0000 differ
=== added file 'lib/canonical/launchpad/images/src/public.svg'
--- lib/canonical/launchpad/images/src/public.svg	1970-01-01 00:00:00 +0000
+++ lib/canonical/launchpad/images/src/public.svg	2012-06-07 18:40:26 +0000
@@ -0,0 +1,141 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="78px" height="53px" viewBox="0 0 78 53" enable-background="new 0 0 78 53" xml:space="preserve">
+<g>
+	<defs>
+		<path id="SVGID_1_" d="M52.937,35.938c-0.553,0-0.999-0.447-0.999-1v-2.905c0-0.012,0-0.021,0-0.032c0.037-1.205,0.875-3,3.031-3
+			H57c0.006,0,0.014,0,0.021,0c1.209,0.025,2.511,0.661,2.511,2.001c0,0.304-0.139,0.592-0.376,0.78l-0.782,0.625
+			c-0.18,0.146-0.4,0.219-0.624,0.219c-0.121,0-0.242-0.021-0.358-0.065c-0.262-0.101-0.466-0.306-0.568-0.56
+			c-0.247,0-1.77,0-1.823,0c0,0.062,0,2.938,0,2.938c0,0.553-0.447,1-1,1H52.937"/>
+	</defs>
+	<clipPath id="SVGID_2_">
+		<use xlink:href="#SVGID_1_"  overflow="visible"/>
+	</clipPath>
+	<g clip-path="url(#SVGID_2_)">
+		<defs>
+			<rect id="SVGID_3_" width="78" height="53"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  overflow="visible"/>
+		</clipPath>
+		
+			<image overflow="visible" clip-path="url(#SVGID_4_)" width="78" height="53" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMA
+EAMCAwYAAAGDAAABjgAAAa//2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoX
+Hh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoa
+JjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIADUATgMBIgACEQEDEQH/
+xABfAAEBAQAAAAAAAAAAAAAAAAAABgcBAQAAAAAAAAAAAAAAAAAAAAAQAQEAAAAAAAAAAAAAAAAA
+AEBgEQEAAAAAAAAAAAAAAAAAAABgEgEAAAAAAAAAAAAAAAAAAABA/9oADAMBAAIRAxEAAADQAAAA
+AAAIG+gQBfQN8AAIG+gQBfQN8AAAAAf/2gAIAQIAAQUAJ//aAAgBAwABBQAn/9oACAEBAAEFAIb/
+2gAIAQICBj8AJ//aAAgBAwIGPwAn/9oACAEBAQY/AA3/2Q==">
+		</image>
+	</g>
+</g>
+<g>
+	<defs>
+		<path id="SVGID_5_" d="M56.969,31.001h-2c0,0-0.97,0-0.97,0.968v2.969h-1.062v-2.905c0,0,0.063-2.032,2.032-2.032H57
+			c0,0,1.531,0.031,1.531,1.001l-0.782,0.625C57.749,31.626,57.656,31.062,56.969,31.001z"/>
+	</defs>
+	<clipPath id="SVGID_6_">
+		<use xlink:href="#SVGID_5_"  overflow="visible"/>
+	</clipPath>
+	<g clip-path="url(#SVGID_6_)">
+		<defs>
+			<rect id="SVGID_7_" width="78" height="53"/>
+		</defs>
+		<clipPath id="SVGID_8_">
+			<use xlink:href="#SVGID_7_"  overflow="visible"/>
+		</clipPath>
+		
+			<image overflow="visible" clip-path="url(#SVGID_8_)" width="78" height="53" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMA
+EAMCAwYAAAGPAAABpAAAAcj/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoX
+Hh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoa
+JjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIADUATgMBIgACEQEDEQH/
+xABpAAEBAQEBAAAAAAAAAAAAAAAABQYCBwEBAAAAAAAAAAAAAAAAAAAAABAAAgMBAQAAAAAAAAAA
+AAAAABFAAhIgUBEBAQEBAAAAAAAAAAAAAAAAMQBAUBIBAAAAAAAAAAAAAAAAAAAAQP/aAAwDAQAC
+EQMRAAAA9AAAAAAAAlVZQAqyqoAAz2hzh05HWhzmjAAAAAP/2gAIAQIAAQUAif/aAAgBAwABBQCJ
+/9oACAEBAAEFAPDYxj73c3c3c3eN/9oACAECAgY/ACf/2gAIAQMCBj8AJ//aAAgBAQEGPwDmszOb
+/9k=">
+		</image>
+	</g>
+</g>
+<g>
+	<defs>
+		<rect id="SVGID_9_" x="51" y="34.031" width="9.969" height="7.938"/>
+	</defs>
+	<clipPath id="SVGID_10_">
+		<use xlink:href="#SVGID_9_"  overflow="visible"/>
+	</clipPath>
+	<g clip-path="url(#SVGID_10_)">
+		<defs>
+			<rect id="SVGID_11_" width="78" height="53"/>
+		</defs>
+		<clipPath id="SVGID_12_">
+			<use xlink:href="#SVGID_11_"  overflow="visible"/>
+		</clipPath>
+		
+			<image overflow="visible" clip-path="url(#SVGID_12_)" width="78" height="53" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMA
+EAMCAwYAAAGFAAABkAAAAbH/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoX
+Hh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoa
+JjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIADUATgMBIgACEQEDEQH/
+xABfAAEBAQAAAAAAAAAAAAAAAAAABgcBAQAAAAAAAAAAAAAAAAAAAAAQAQEAAAAAAAAAAAAAAAAA
+AEBgEQEAAAAAAAAAAAAAAAAAAABgEgEAAAAAAAAAAAAAAAAAAABA/9oADAMBAAIRAxEAAADQAAAA
+AAACBL5Ai+QN8AAIG+gQBfQN8AAIEAF8H//aAAgBAgABBQAn/9oACAEDAAEFACf/2gAIAQEAAQUA
+hv/aAAgBAgIGPwAn/9oACAEDAgY/ACf/2gAIAQEBBj8ADf/Z">
+		</image>
+	</g>
+</g>
+<g>
+	<defs>
+		<rect id="SVGID_13_" x="52" y="34.97" width="8" height="5.999"/>
+	</defs>
+	<clipPath id="SVGID_14_">
+		<use xlink:href="#SVGID_13_"  overflow="visible"/>
+	</clipPath>
+	<g clip-path="url(#SVGID_14_)">
+		<defs>
+			<rect id="SVGID_15_" width="78" height="53"/>
+		</defs>
+		<clipPath id="SVGID_16_">
+			<use xlink:href="#SVGID_15_"  overflow="visible"/>
+		</clipPath>
+		
+			<image overflow="visible" clip-path="url(#SVGID_16_)" width="78" height="53" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMA
+EAMCAwYAAAGNAAABoAAAAcT/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoX
+Hh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoa
+JjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIADUATgMBIgACEQEDEQH/
+xABnAAEBAQEBAAAAAAAAAAAAAAAABAUGBwEBAAAAAAAAAAAAAAAAAAAAABAAAwEBAAAAAAAAAAAA
+AAAAAAMUQFARAQEBAQAAAAAAAAAAAAAAADEAQFASAQAAAAAAAAAAAAAAAAAAAED/2gAMAwEAAhED
+EQAAAPQAAAAAAACEuQi5DcAAMjX5E12QNfX5HrgAAAAD/9oACAECAAEFAMn/2gAIAQMAAQUAyf/a
+AAgBAQABBQDm2qLVFqi1Wb//2gAIAQICBj8AJ//aAAgBAwIGPwAn/9oACAEBAQY/AOazM5v/2Q==">
+		</image>
+	</g>
+</g>
+<g>
+	<defs>
+		<rect id="SVGID_17_" x="52.977" y="35.958" width="5.984" height="4.021"/>
+	</defs>
+	<clipPath id="SVGID_18_">
+		<use xlink:href="#SVGID_17_"  overflow="visible"/>
+	</clipPath>
+	<g clip-path="url(#SVGID_18_)">
+		<defs>
+			<rect id="SVGID_19_" width="78" height="53"/>
+		</defs>
+		<clipPath id="SVGID_20_">
+			<use xlink:href="#SVGID_19_"  overflow="visible"/>
+		</clipPath>
+		
+			<image overflow="visible" clip-path="url(#SVGID_20_)" width="78" height="53" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMA
+EAMCAwYAAAGOAAABoQAAAcX/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoX
+Hh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoa
+JjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIADUATgMBIgACEQEDEQH/
+xABmAAEBAQEAAAAAAAAAAAAAAAAABgcFAQEAAAAAAAAAAAAAAAAAAAAAEAADAQEAAAAAAAAAAAAA
+AAAAAxRAUBEBAQEBAAAAAAAAAAAAAAAAMQBAUBIBAAAAAAAAAAAAAAAAAAAAQP/aAAwDAQACEQMR
+AAAA0AAAAAAAAjCzRgs0ZZgACFuszOk5o6V1memAAAAAH//aAAgBAgABBQDJ/9oACAEDAAEFAMn/
+2gAIAQEAAQUA5tiSxJYksTm//9oACAECAgY/ACf/2gAIAQMCBj8AJ//aAAgBAQEGPwDmszOb/9k=">
+		</image>
+	</g>
+</g>
+</svg>

=== modified file 'lib/lp/app/browser/informationtype.py'
--- lib/lp/app/browser/informationtype.py	2012-06-01 05:11:24 +0000
+++ lib/lp/app/browser/informationtype.py	2012-06-07 18:40:26 +0000
@@ -62,3 +62,10 @@
                     'Visible only to users with whom the project has '
                     'shared private information.')
         return description
+
+    @property
+    def information_type_css(self):
+        if self.context.information_type in PRIVATE_INFORMATION_TYPES:
+            return 'sprite private'
+        else:
+            return 'sprite public'

=== modified file 'lib/lp/bugs/browser/tests/test_bugview.py'
--- lib/lp/bugs/browser/tests/test_bugview.py	2012-06-02 13:52:34 +0000
+++ lib/lp/bugs/browser/tests/test_bugview.py	2012-06-07 18:40:26 +0000
@@ -67,6 +67,14 @@
             self.bug.information_type.description,
             self.view.information_type_description)
 
+    def test_information_type_css_class(self):
+        self.bug.transitionToInformationType(
+            InformationType.USERDATA, self.bug.owner)
+        self.assertEqual('sprite private', self.view.information_type_css)
+        self.bug.transitionToInformationType(
+            InformationType.UNEMBARGOEDSECURITY, self.bug.owner)
+        self.assertEqual('sprite public', self.view.information_type_css)
+
     def test_userdata_shown_as_private(self):
         # When the display_userdata_as_private feature flag is enabled, the
         # information_type is shown as 'Private'.

=== modified file 'lib/lp/bugs/javascript/information_type_choice.js'
--- lib/lp/bugs/javascript/information_type_choice.js	2012-06-05 08:10:16 +0000
+++ lib/lp/bugs/javascript/information_type_choice.js	2012-06-07 18:40:26 +0000
@@ -65,6 +65,7 @@
 
 namespace.information_type_save_success = function(value) {
     var body = Y.one('body');
+    var summary = Y.one('#information-type-summary');
     var private_type = (Y.Array.indexOf(LP.cache.private_types, value) >= 0);
     var subscription_ns = Y.lp.bugs.bugtask_index.portlets.subscription;
     var privacy_banner = Y.lp.app.banner.privacy.getPrivacyBanner();
@@ -72,9 +73,11 @@
     if (private_type) {
         var banner_text = namespace.get_information_type_banner_text(value);
         privacy_banner.updateText(banner_text);
+        summary.replaceClass('public', 'private');
         body.replaceClass('public', 'private');
         privacy_banner.show();
     } else {
+        summary.replaceClass('private', 'public');
         body.replaceClass('private', 'public');
         privacy_banner.hide();
     }

=== modified file 'lib/lp/bugs/javascript/tests/test_information_type_choice.html'
--- lib/lp/bugs/javascript/tests/test_information_type_choice.html	2012-06-05 08:10:16 +0000
+++ lib/lp/bugs/javascript/tests/test_information_type_choice.html	2012-06-07 18:40:26 +0000
@@ -90,9 +90,13 @@
         <script type="text/x-template" id="portlet-template">
             <div id="privacy">
                 <div id="privacy-text">
-                    This report contains <strong id="information-type">Public</strong> information
+                    <span id="information-type-summary" class="sprite public">
+                        This report contains
+                        <strong id="information-type">Public</strong>
+                        information
+                    </span>
                     <a class="sprite edit" id="privacy-link" href="#">edit</a>
-                    <div id='information-type-description'>Everyone can see this information.</div>
+                    <div id="information-type-description">Everyone can see this information.</div>
                 </div>
             </div>
             <div id="current_user_subscription">

=== modified file 'lib/lp/bugs/javascript/tests/test_information_type_choice.js'
--- lib/lp/bugs/javascript/tests/test_information_type_choice.js	2012-06-05 08:10:16 +0000
+++ lib/lp/bugs/javascript/tests/test_information_type_choice.js	2012-06-07 18:40:26 +0000
@@ -111,8 +111,11 @@
             Y.on('test:banner:hide', function() {
                 flag = true;
             });
+            var summary = Y.one('#information-type-summary');
+            summary.replaceClass('public', 'private');
 
             ns.information_type_save_success('Public');
+            Y.Assert.isTrue(summary.hasClass('public'));
             var body = Y.one('body');
             Y.Assert.isTrue(body.hasClass('public'));
             Y.Assert.isTrue(flag);

=== modified file 'lib/lp/bugs/templates/bug-portlet-privacy.pt'
--- lib/lp/bugs/templates/bug-portlet-privacy.pt	2012-06-07 12:21:49 +0000
+++ lib/lp/bugs/templates/bug-portlet-privacy.pt	2012-06-07 18:40:26 +0000
@@ -10,11 +10,15 @@
 >
   <div id="privacy-text">
     <tal:information_type tal:condition="view/show_information_type_in_ui">
-       This report contains <strong id="information-type"
-       tal:content="view/information_type"></strong> information&nbsp;<a
+       <span id="information-type-summary"
+         tal:attributes="class view/information_type_css;">This report
+         contains
+         <strong id="information-type" tal:content="view/information_type" />
+         information
+       </span>&nbsp;<a
            class="sprite edit" id="privacy-link"
            tal:attributes="href link/path" tal:condition="link/enabled"></a>
-      <div id='information-type-description' style='padding-top: 5px'
+      <div id="information-type-description" style="padding-top: 5px"
                 tal:content="view/information_type_description"></div>
     </tal:information_type>
     <tal:privacy tal:condition="not:view/show_information_type_in_ui">

=== modified file 'lib/lp/code/templates/branch-portlet-privacy.pt'
--- lib/lp/code/templates/branch-portlet-privacy.pt	2012-05-30 05:04:40 +0000
+++ lib/lp/code/templates/branch-portlet-privacy.pt	2012-06-07 18:40:26 +0000
@@ -8,8 +8,10 @@
   "
 >
   <tal:information_type tal:condition="view/show_information_type_in_ui">
-    This branch contains <strong id="information-type" tal:content="view/information_type"></strong> information
-    <div id='information-type-description' style='padding-top: 5px' tal:content="view/information_type_description"></div>
+    <span id="information-type-summary"
+      tal:attributes="class view/information_type_css;">This branch
+      contains <strong id="information-type" tal:content="view/information_type"></strong> information</span>
+    <div id="information-type-description" style="padding-top: 5px" tal:content="view/information_type_description"></div>
   </tal:information_type>
   <tal:privacy tal:condition="not:view/show_information_type_in_ui">
   <div tal:condition="not:context/private"