Bug 932446 - in-content click-to-activate UI should look more clickable. Give the entire plugin a pointer cursor; reorder the vulnerable and activate sentences; underline the activate sentence so it looks like a clickable link; make the activate sentence red when :active so it also behaves more like a link, r=jaws ui-r=lco
authorBenjamin Smedberg <benjamin@smedbergs.us>
Thu, 07 Nov 2013 10:14:34 -0500
changeset 167383 033ab73cf295db93d5c010fbb540fa6bd3caaef4
parent 167382 95b5e9fcccee5f0b9f571be2edfe6abdba7772f9
child 167384 82c4cd6c3b932c5479fb9268060850627ef279fa
push id428
push userbbajaj@mozilla.com
push dateTue, 28 Jan 2014 00:16:25 +0000
treeherdermozilla-release@cd72a7ff3a75 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, lco
bugs932446
milestone27.0a2
Bug 932446 - in-content click-to-activate UI should look more clickable. Give the entire plugin a pointer cursor; reorder the vulnerable and activate sentences; underline the activate sentence so it looks like a clickable link; make the activate sentence red when :active so it also behaves more like a link, r=jaws ui-r=lco
toolkit/mozapps/plugins/content/pluginProblem.xml
toolkit/mozapps/plugins/content/pluginProblemContent.css
toolkit/themes/shared/plugins/pluginProblem.css
--- a/toolkit/mozapps/plugins/content/pluginProblem.xml
+++ b/toolkit/mozapps/plugins/content/pluginProblem.xml
@@ -21,19 +21,19 @@
         <stylesheet src="chrome://mozapps/skin/plugins/pluginProblem.css"/>
     </resources>
 
     <content>
         <html:div class="mainBox" anonid="main" chromedir="&locale.dir;">
             <html:div class="hoverBox">
                 <html:label>
                     <html:button class="icon" anonid="icon"/>
+                    <html:div class="msg msgVulnerabilityStatus" anonid="vulnerabilityStatus"><!-- set at runtime --></html:div>
                     <html:div class="msg msgTapToPlay">&tapToPlayPlugin;</html:div>
                     <html:div class="msg msgClickToPlay" anonid="clickToPlay">&clickToActivatePlugin;</html:div>
-                    <html:div class="msg msgVulnerabilityStatus" anonid="vulnerabilityStatus"><!-- set at runtime --></html:div>
                 </html:label>
 
                 <html:div class="msg msgUnsupported">&missingPlugin;</html:div>
                 <html:div class="msg msgUnsupportedPlatform">&unsupportedPlatform.pre;<html:a class="unsupportedLearnMoreLink" href="" target="_blank">&unsupportedPlatform.learnMore;</html:a>&unsupportedPlatform.post;</html:div>
                 <html:div class="msg msgDisabled">&disabledPlugin;</html:div>
                 <html:div class="msg msgBlocked">&blockedPlugin.label;</html:div>
                 <html:div class="msg msgCrashed">
                     <html:div class="msgCrashedText" anonid="crashedText"><!-- set at runtime --></html:div>
--- a/toolkit/mozapps/plugins/content/pluginProblemContent.css
+++ b/toolkit/mozapps/plugins/content/pluginProblemContent.css
@@ -63,16 +63,29 @@ html|applet:not([height]), html|applet[h
 .mainBox[chromedir="rtl"] {
   direction: rtl;
 }
 
 :-moz-handler-playpreview .mainBox {
   display: none;
 }
 
+:-moz-handler-clicktoplay .hoverBox,
+:-moz-handler-vulnerable-updatable .hoverBox,
+:-moz-handler-vulnerable-no-update .hoverBox {
+  cursor: pointer;
+}
+
+.hoverBox > label {
+  cursor: inherit;
+}
+.icon {
+  cursor: inherit;
+}
+
 .previewPluginContent {
   display: none;
 }
 
 .previewPluginContent > iframe {
   width: inherit;
   height: inherit;
   border: none;
--- a/toolkit/themes/shared/plugins/pluginProblem.css
+++ b/toolkit/themes/shared/plugins/pluginProblem.css
@@ -28,16 +28,25 @@
   height: 100%;
 }
 :-moz-handler-vulnerable-updatable .hoverBox:active,
 :-moz-handler-vulnerable-no-update .hoverBox:active,
 :-moz-handler-clicktoplay .hoverBox:active {
   background-color: rgb(65, 65, 65);
 }
 
+:-moz-handler-clicktoplay .hoverBox:active .msgTapToPlay,
+:-moz-handler-clicktoplay .hoverBox:active .msgClickToPlay,
+:-moz-handler-vulnerable-updatable .hoverBox:active .msgTapToPlay,
+:-moz-handler-vulnerable-updatable .hoverBox:active .msgClickToPlay,
+:-moz-handler-vulnerable-no-update .hoverBox:active .msgTapToPlay,
+:-moz-handler-vulnerable-no-update .hoverBox:active .msgClickToPlay {
+  color: red;
+}
+
 :-moz-handler-vulnerable-updatable .hoverBox,
 :-moz-handler-vulnerable-no-update .hoverBox,
 :-moz-handler-blocked .hoverBox,
 :-moz-handler-crashed .hoverBox {
   background-image: url(chrome://mozapps/skin/plugins/contentPluginStripe.png);
 }
 
 html|a {
@@ -82,16 +91,21 @@ html|a {
 }
 
 .throbber {
   padding-left: 16px; /* width of the background image */
   background: url(chrome://global/skin/icons/loading_16.png) no-repeat;
   margin-left: 5px;
 }
 
+.msgTapToPlay,
+.msgClickToPlay {
+  text-decoration: underline;
+}
+
 @media not all and (-moz-touch-enabled) {
   :-moz-handler-clicktoplay .msgTapToPlay {
     display: none;
   }
 }
 
 @media (-moz-touch-enabled) {
   :-moz-handler-clicktoplay .msgClickToPlay {