Bug 1068181 - NEW Indicator for Pinned Tiles on New Tab Page [r=ttaubert a=sylvestre]
authorEd Lee <edilee@mozilla.com>
Wed, 24 Sep 2014 22:11:07 -0700
changeset 216868 02da3cf36508
parent 216867 8dd30191477e
child 216869 2a8947c986ed
push id3946
push useredilee@gmail.com
push date2014-09-28 14:45 +0000
treeherdermozilla-beta@2a8947c986ed [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersttaubert, sylvestre
bugs1068181
milestone33.0
Bug 1068181 - NEW Indicator for Pinned Tiles on New Tab Page [r=ttaubert a=sylvestre] Remove text styling and use an image instead with balanced spacing.
browser/themes/shared/newtab/controls.svg
browser/themes/shared/newtab/newTab.inc.css
--- a/browser/themes/shared/newtab/controls.svg
+++ b/browser/themes/shared/newtab/controls.svg
@@ -1,28 +1,32 @@
 <?xml version="1.0" encoding="utf-8"?>
 
 <svg version="1.1"
      id="icons-enhanced-tiles"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0"
      y="0"
-     width="256"
+     width="288"
      height="32"
-     viewBox="0 0 256 32">
+     viewBox="0 0 288 32">
 
   <defs>
     <style type="text/css"><![CDATA[
       /* Glyph Styles */
 
       .glyphShape-style {
         fill: #737373;
       }
 
+      .glyphShape-style-pin {
+        fill: #b4b4b4;
+      }
+
       .glyphShape-style-hover-gear {
         fill: #4a90e2;
       }
 
       .glyphShape-style-hover-pin {
         fill: #4a90e2;
       }
 
@@ -100,9 +104,13 @@
   </g>
 
   <g id="icon-delete-hover-active" transform="translate(224)">
     <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow" />
     <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle" />
     <use xlink:href="#glyphShape-delete" class="glyphShape-style-hover-active" />
   </g>
 
+  <g id="icon-pin-default" transform="translate(256)">
+    <use xlink:href="#glyphShape-pin"    class="glyphShape-style-pin" />
+  </g>
+
 </svg>
--- a/browser/themes/shared/newtab/newTab.inc.css
+++ b/browser/themes/shared/newtab/newTab.inc.css
@@ -140,18 +140,32 @@
   color: #5c5c5c;
 }
 
 .newtab-site:hover .newtab-title {
   color: #222;
 }
 
 .newtab-site[pinned] .newtab-title {
-  color: #2c72c4;
-  font-weight: bold;
+  padding: 0 15px;
+}
+
+.newtab-site[pinned] .newtab-title::before {
+  background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 7, 278, 28, 266);
+  background-size: 10px;
+  content: "";
+  height: 17px;
+  left: 0;
+  position: absolute;
+  width: 10px;
+}
+
+.newtab-site[pinned] .newtab-title:-moz-locale-dir(rtl)::before {
+  left: auto;
+  right: 0;
 }
 
 /* CONTROLS */
 .newtab-control {
   background-color: transparent;
   background-size: 24px;
   border: none;
   height: 24px;