Merge pull request #40 from mozilla/experimental-messaging

Closes Bug 1119985 - Experimental messaging for recommendation view

data/about-you.html

@@ -33,6 +33,8 @@
                 <div class="cog-img"></div>
               </button>
               <ul class="dropdown-menu-right dropdown-menu" role="menu">
+                <li><a class="cog-title" href="#">Options</a></li>
+                <li class="divider title-divider"></li>
                 <li><a href="https://www.mozilla.org/en-US/firefox/interest-dashboard/">About this page</a></li>
                 <li class="divider"></li>
                 <li ng-click="processHistory()" ><a href="#">Recompute history</a></li>
@@ -42,6 +44,11 @@
                 <li><a data-toggle="modal" data-target="#uninstallModal" href="#">Uninstall</a></li>
                 <li class="divider"></li>
                 <li ng-click="setRecommendationTabVisibility()"><a href="#">{{recommenderTabToggle}}</a></li>
+                <li class="divider"></li>
+                <li class="report-bugs">
+                  <div class="blurb">This is a work in progress. See something that isn't right? Help us fix it.</div>
+                  <button onClick="window.open('https://bugzilla.mozilla.org/enter_bug.cgi?product=Content%20Services&component=Interest%20Dashboard')">Report a bug</button>
+                </li>
               </ul>
             </div>
             <div class="tabWrapper" role="tabpanel">

data/about-you.js

@@ -99,6 +99,9 @@ aboutYou.controller("vizCtrl", function($scope, dataService) {
       // Adjusting highligted tab
       $('#interests_tab').addClass("active");
       $('#recommend_tab').removeClass("active");
+
+      // Remove experimental messaging since we're now removing the recommend tab.
+      $('.dropdown-menu .report-bugs').css("display", 'none');
     }
     $('#recommend_tab').css("display", displayVal);
   };

data/charts/InterestDashboard.js

@@ -736,6 +736,14 @@ InterestDashboard.prototype = {
 
   graph: function(data, table, $scope) {
     try {
+      // Show the recommend tab messaging in the cog only when viewing the recommend tab.
+      $('#interests_tab').on('click', () => {
+        $('.dropdown-menu .report-bugs').css("display", 'none');
+      });
+      $('#recommend_tab').on('click', () => {
+        $('.dropdown-menu .report-bugs').css("display", 'inherit');
+      });
+
       // We got some data so make the Dashboard view active and the 'no history' view inactive
       $('#yourInterests').addClass("active");
       $('#noHistory').removeClass("active");

data/css/devmenu/styles.css

@@ -210,30 +210,72 @@ li.active {
 }
 
 .dropdown-menu {
-  background-color: #2F3943;
+  min-width: 268px;
+  max-width: 268px;
   padding: 0px;
+  border: none;
 }
 
 .dropdown-menu > li > a {
-  padding: 0;
-  padding-right: 30px;
-  padding-left: 30px;
-  height: 40px;
-  line-height: 40px;
-  font-weight: 100;
-  color: white;
+  padding: 0px 18px;
+  height: 55px;
+  line-height: 55px;
+  color: #171F26;
 }
 
 .dropdown-menu > li > a:hover {
-  background-color: #576872;
-  color: white;
+  background-color: #F2F2F2;
+  color: #171F26;
 }
 
 .dropdown-menu .divider {
-  background-color: #576872;
+  background-color: #E6E6E6;
   margin: 0px;
 }
 
+.dropdown-menu .title-divider {
+  background-color: #E6E6E6;
+  height: 2px;
+}
+
+.dropdown-menu .cog-title {
+  font-weight: 500;
+  text-transform: uppercase;
+  height: 45px;
+  line-height: 45px;
+}
+
+.dropdown-menu .cog-title:hover {
+  background-color: white;
+  cursor: auto;
+}
+
+.dropdown-menu .report-bugs {
+  display: none;
+  background-color: #F2F2F2;
+  padding-bottom: 15px;
+  text-align: center;
+  font-size: 12px;
+  border-radius: 4px;
+}
+
+.report-bugs > .blurb {
+  white-space: normal;
+  line-height: 20px;
+  padding: 14px;
+  padding-top: 20px;
+  cursor: auto;
+}
+
+.report-bugs button {
+  background-color: rgb(0, 150, 221);
+  border: 1px solid rgb(0, 149, 221);
+  width: 240px;
+  height: 26px;
+  border-radius: 4px;
+  color: white;
+}
+
 
 
 /* Visual Area */