Bug 408869: Make the extension installation dialog easier to understand.

r=mano, a=schrep.

toolkit/locales/en-US/chrome/mozapps/xpinstall/xpinstallConfirm.dtd

@@ -1,8 +1,9 @@
 <!-- extracted from institems.xul -->
 
-<!ENTITY dialog.title "Software Installation">
-<!ENTITY warningText2.label "Malicious software can damage your computer or violate your privacy.">
-<!ENTITY warningText3.label "You should only install software from sources that you trust.">
+<!ENTITY dialog.title            "Software Installation">
+<!ENTITY dialog.style            "width: 45em">
+<!ENTITY warningMain.label       "Only install add-ons from authors whom you trust.">
+<!ENTITY warningSecondary.label  "Malicious software can damage your computer or violate your privacy.">
 
 <!ENTITY from.label "from:">
 

toolkit/locales/en-US/chrome/mozapps/xpinstall/xpinstallConfirm.properties

@@ -1,4 +1,5 @@
-Unsigned=Unsigned
+unsigned=(Author Unknown)
+signed=(%S)
 
 itemWarnIntroMultiple=You have asked to install the following %S items:
 itemWarnIntroSingle=You have asked to install the following item:

toolkit/mozapps/xpinstall/content/xpinstallConfirm.js

@@ -77,7 +77,10 @@ XPInstallConfirm.init = function ()
     if (icon != "")
       installItem.icon = icon;
     var cert = this._param.GetString(++i);
-    installItem.cert = cert || bundle.getString("Unsigned");
+    if (cert)
+      installItem.cert = bundle.getFormattedString("signed", [cert]);
+    else
+      installItem.cert = bundle.getString("unsigned");
     installItem.signed = cert ? "true" : "false";
   }
   

toolkit/mozapps/xpinstall/content/xpinstallConfirm.xul

@@ -46,7 +46,7 @@
 <!DOCTYPE dialog SYSTEM "chrome://mozapps/locale/xpinstall/xpinstallConfirm.dtd">
 
 <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        id="xpinstallConfirm" title="&dialog.title;" style="width: 30em" 
+        id="xpinstallConfirm" title="&dialog.title;" style="&dialog.style;" 
         onload="XPInstallConfirm.init()" 
         ondialogaccept="return XPInstallConfirm.onOK();"
         ondialogcancel="return XPInstallConfirm.onCancel();">
@@ -57,13 +57,15 @@
                 src="chrome://mozapps/locale/xpinstall/xpinstallConfirm.properties"/>
 
   <vbox flex="1" id="dialogContentBox">
-    <description id="itemWarningIntro"/>
-    
-    <vbox id="itemList" class="listbox" flex="1" style="height: 16em; overflow: auto;"/>
-    
-    <description>&warningText2.label;</description> 
-    <description class="warning">&warningText3.label;</description> 
+    <hbox id="xpinstallheader" align="start">
+      <image class="alert-icon"/>
+      <vbox flex="1">
+        <description class="warning">&warningMain.label;</description>
+        <description>&warningSecondary.label;</description>
+      </vbox>
+    </hbox>
+    <label id="itemWarningIntro"/>
+    <vbox id="itemList" class="listbox" flex="1" style="overflow: auto;"/>
   </vbox>
 
 </dialog>
-

toolkit/mozapps/xpinstall/content/xpinstallItem.xml

@@ -16,13 +16,12 @@
         <xul:vbox align="center" pack="center">
           <xul:image class="xpinstallItemIcon" xbl:inherits="src=icon"/>
         </xul:vbox>
-        <xul:vbox flex="1">
+        <xul:vbox flex="1" pack="center">
           <xul:hbox class="xpinstallItemNameRow" align="center">
-            <xul:label class="xpinstallItemName" xbl:inherits="value=name" flex="1" crop="right"/>
+            <xul:label class="xpinstallItemName" xbl:inherits="value=name" crop="right"/>
             <xul:label class="xpinstallItemSigned" xbl:inherits="value=cert,signed"/>
           </xul:hbox>
           <xul:hbox class="xpinstallItemDetailsRow" align="center">
-            <xul:label class="xpinstallItemFromLabel">&from.label;</xul:label>
             <xul:textbox class="xpinstallItemURL" xbl:inherits="value=url" flex="1" readonly="true" crop="right"/>
           </xul:hbox>
         </xul:vbox> 

toolkit/themes/pinstripe/mozapps/xpinstall/xpinstallConfirm.css

@@ -1,6 +1,25 @@
+#xpinstallheader {
+  margin-bottom: 2em;
+}
+
+.alert-icon {
+  width: 48px;
+  height: 48px;
+  list-style-image: url("chrome://global/skin/icons/warning-large.png");
+  margin-top: 0 !important;
+  margin-bottom: 6px !important;
+  -moz-margin-start: 6px !important;
+  -moz-margin-end: 20px !important;
+}
+
 #itemList {
   -moz-appearance: listbox;
-  margin: 10px 4px 10px 4px;
+  margin: 3px 4px 10px 4px;
+  height: 14em;
+}
+
+#itemWarningIntro {
+  -moz-margin-start: 8px;
 }
 
 #dialogContentBox {
@@ -8,13 +27,15 @@
 }
 
 installitem {
-  padding: 5px 0px 5px 5px;
+  padding: 5px 0 5px 5px;
   border-bottom: 1px dotted #C0C0C0;
   margin-bottom: 5px;
 }
 
 .warning {
   font-weight: bold;
+  font-size: 1.25em;
+  margin-bottom: 1em;
 }
 
 .xpinstallItemIcon {
@@ -22,7 +43,7 @@ installitem {
   height: 32px;
   max-width: 32px !important;
   max-height: 32px !important;
-  margin-right: 5px;
+  -moz-margin-end: 5px;
 }
 
 .xpinstallItemName {
@@ -31,22 +52,17 @@ installitem {
 
 .xpinstallItemSigned {
   font-style: italic;
-}
-
-.xpinstallItemSigned[signed=false] {
-  color: #ED1C24;
-  font-style: normal;
-  font-weight: bold;
-}
-
-.xpinstallItemNameRow {
-  padding-bottom: 3px;
+  font-size: 0.9em;
 }
 
 .xpinstallItemURL {
   -moz-appearance: none;
   border: none;
   background-color: Window;
+  margin-top: 2px;
+  margin-bottom: 1px;
+  -moz-margin-start: 6px;
+  -moz-margin-end: 5px;
 }
 
 .xpinstallItemIcon {

toolkit/themes/winstripe/mozapps/xpinstall/xpinstallConfirm.css

@@ -1,6 +1,11 @@
+#xpinstallheader {
+  margin-bottom: 2em;
+}
+
 #itemList {
   -moz-appearance: listbox;
-  margin: 10px 4px 10px 4px;
+  margin: 3px 4px 10px 4px;
+  height: 14em;
   border: 2px solid;
   -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
   -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
@@ -10,6 +15,10 @@
   color: -moz-FieldText;
 }
 
+#itemWarningIntro {
+  -moz-margin-start: 8px;
+}
+
 #dialogContentBox {
   padding: 5px;
 }
@@ -18,13 +27,19 @@ installitem {
   padding-top: 5px;
   padding-bottom: 5px;
   -moz-padding-start: 5px;
-  -moz-padding-end: 0px;
+  -moz-padding-end: 0;
   border-bottom: 1px dotted #C0C0C0;
   margin-bottom: 5px;
 }
 
+.alert-icon {
+  -moz-margin-end: 20px;
+}
+
 .warning {
   font-weight: bold;
+  font-size: 1.25em;
+  margin-bottom: 1em;
 }
 
 .xpinstallItemIcon {
@@ -41,23 +56,19 @@ installitem {
 
 .xpinstallItemSigned {
   font-style: italic;
-}
-
-.xpinstallItemSigned[signed=false] {
-  color: #ED1C24;
-  font-style: normal;
-  font-weight: bold;
-}
-
-.xpinstallItemNameRow {
-  padding-bottom: 3px;
+  font-size: 0.9em;
 }
 
 .xpinstallItemURL {
   -moz-appearance: none;
   border: none;
+  padding: 0;
   background-color: -moz-Field;
   color: -moz-FieldText;
+  margin-top: 1px;
+  margin-bottom: 1px;
+  -moz-margin-start: 6px;
+  -moz-margin-end: 5px;
 }
 
 .xpinstallItemIcon {