Bug 1276675 : change the size, position and hover background color of close.svg. Adjusted the position of the close icon of responsive design mode. r=honza
authorDeepjyoti Mondal <djmdeveloper060796>
Tue, 13 Sep 2016 10:44:00 +0200
changeset 357622 20db017e3e38cff8e40b5217f33559317717e22b
parent 357621 ce601f2084764937aac885cdd4fed1ceb4877b51
child 357623 38fceae2b551fd7770c6443a00f0325f09afa415
push id1324
push usermtabara@mozilla.com
push dateMon, 16 Jan 2017 13:07:44 +0000
treeherdermozilla-release@a01c49833940 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershonza
bugs1276675
milestone51.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1276675 : change the size, position and hover background color of close.svg. Adjusted the position of the close icon of responsive design mode. r=honza
devtools/client/shared/components/notification-box.css
devtools/client/themes/images/close.svg
devtools/client/themes/responsivedesign.inc.css
--- a/devtools/client/shared/components/notification-box.css
+++ b/devtools/client/shared/components/notification-box.css
@@ -68,30 +68,28 @@
 
 .notificationbox .messageImage[data-type="critical"] {
   background-image: url("chrome://global/skin/icons/error-16.png");
 }
 
 /* Close button */
 
 .notificationbox .messageCloseButton {
-  /* Use odd value for the width so, the icon can be nicely h-centered.
-    This also means that the button is not perfect circle (its using
-    10x border radius), but it's less visible visual discrepency
-    than wrong centering of the icon */
-  width: 19px;
+  width: 20px;
   height: 20px;
   margin: 4px;
   margin-inline-end: 8px;
   background-image: url("chrome://devtools/skin/images/close.svg");
-  background-position: 3px center;
+  background-position: 3.45px 2.5px;
   background-color: transparent;
   background-repeat: no-repeat;
-  border-radius: 10px;
+  border-radius: 11px;
+  filter: invert(0);
 }
 
 .notificationbox .messageCloseButton:hover {
-  background-color: rgba(170, 170, 170, .2); /* --toolbar-tab-hover */
+  background-color: gray;
+  filter: invert(1);
 }
 
 .notificationbox .messageCloseButton:active {
   background-color: rgba(170, 170, 170, .4); /* --toolbar-tab-hover-active */
 }
--- a/devtools/client/themes/images/close.svg
+++ b/devtools/client/themes/images/close.svg
@@ -1,6 +1,6 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#0b0b0b">
+<svg width="17" height="17" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="#0b0b0b">
   <path d="M8.707 8l4.23 4.23a.5.5 0 1 1-.707.707L8 8.707l-4.23 4.23a.5.5 0 1 1-.707-.707L7.293 8l-4.23-4.23a.5.5 0 1 1 .707-.707L8 7.293l4.23-4.23a.5.5 0 0 1 .707.707L8.707 8z" fill-rule="evenodd"/>
 </svg>
--- a/devtools/client/themes/responsivedesign.inc.css
+++ b/devtools/client/themes/responsivedesign.inc.css
@@ -164,16 +164,18 @@
 }
 
 .devtools-responsiveui-close {
   list-style-image: url("chrome://devtools/skin/images/close.svg");
 }
 
 .devtools-responsiveui-close > image {
   filter: invert(1);
+  padding-inline-start: 3px;
+  padding-top: 2px;
 }
 
 .devtools-responsiveui-rotate {
   list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate.png");
 }
 
 @media (min-resolution: 1.1dppx) {
   .devtools-responsiveui-rotate {