Bug 1341045 - Remove broken CSS overrides from responsive.html. r=jryans draft
authorTim Nguyen <ntim.bugs@gmail.com>
Sat, 25 Feb 2017 15:42:20 +0000
changeset 493260 5d295a3a46f651659fdff14fcd317d33fc01b9b3
parent 492168 c54c652af04c5a918610bc3d419250177a68b9f7
child 493261 347c24ecabe902a225841c063327266340aa67ee
push id47707
push userbmo:jryans@gmail.com
push dateFri, 03 Mar 2017 18:11:38 +0000
reviewersjryans
bugs1341045
milestone54.0a1
Bug 1341045 - Remove broken CSS overrides from responsive.html. r=jryans MozReview-Commit-ID: KCb8G3agjE4
devtools/client/responsive.html/index.css
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -67,27 +67,30 @@ body,
  */
 
 .container {
   background-color: var(--theme-toolbar-background);
   border: 1px solid var(--theme-splitter-color);
 }
 
 .toolbar-button {
-  margin: 1px 3px;
-  width: 16px;
-  height: 16px;
-  /* Reset styles from .devtools-button */
-  min-width: initial;
-  min-height: initial;
-  align-self: center;
+  margin: 0;
+  padding: 0;
+  border: none;
 }
 
-.toolbar-button:active::before {
-  filter: url("chrome://devtools/skin/images/filters.svg#checked-icon-state");
+.toolbar-button:empty:hover:not(:disabled),
+.toolbar-button:empty:-moz-any(:hover:active, .checked):not(:disabled) {
+  /* Reset background from .devtools-button */
+  background: none;
+}
+
+.toolbar-button:active::before,
+.toolbar-button.active::before {
+  filter: var(--checked-icon-filter);
 }
 
 select {
   -moz-appearance: none;
   background-color: var(--theme-toolbar-background);
   background-image: var(--viewport-selection-arrow);
   background-position: 100% 50%;
   background-repeat: no-repeat;
@@ -150,48 +153,35 @@ select > option.divider {
   -moz-user-select: none;
 }
 
 #global-toolbar > .title {
   border-right: 1px solid var(--theme-splitter-color);
   padding: 1px 6px 0 2px;
 }
 
-#global-toolbar .toolbar-button {
-  margin: 0 0 0 5px;
-  padding: 0;
-}
-
-#global-toolbar .toolbar-button,
-#global-toolbar .toolbar-button::before {
+#global-toolbar > .toolbar-button::before {
   width: 12px;
   height: 12px;
 }
 
 #global-touch-simulation-button::before {
   background-image: url("./images/touch-events.svg");
-  margin: -6px 0 0 -6px;
-}
-
-#global-touch-simulation-button.active::before {
-  filter: url("chrome://devtools/skin/images/filters.svg#checked-icon-state");
 }
 
 #global-screenshot-button::before {
   background-image: url("./images/screenshot.svg");
-  margin: -6px 0 0 -6px;
 }
 
 #global-exit-button::before {
   background-image: url("./images/close.svg");
-  margin: -6px 0 0 -6px;
 }
 
 #global-screenshot-button:disabled {
-  filter: url("chrome://devtools/skin/images/filters.svg#checked-icon-state");
+  filter: var(--checked-icon-filter);
   opacity: 1 !important;
 }
 
 #global-network-throttling-selector {
   height: 15px;
   padding-left: 0;
   width: 103px;
 }
@@ -264,17 +254,17 @@ select > option.divider {
  */
 
 .viewport-toolbar {
   border-width: 0;
   border-bottom-width: 1px;
   display: flex;
   flex-direction: row;
   justify-content: center;
-  height: 18px;
+  height: 16px;
 }
 
 .viewport-rotate-button {
   position: absolute;
   right: 0;
 }
 
 .viewport-rotate-button::before {
@@ -507,22 +497,22 @@ select > option.divider {
   margin-right: 5px;
 }
 
 .device-name {
   flex: 1;
 }
 
 .device-remove-button,
-.device-remove-button::before {
+.device-remove-button:empty::before {
   width: 12px;
   height: 12px;
 }
 
-.device-remove-button::before {
+.device-remove-button:empty::before {
   background-image: url("./images/close.svg");
   margin: -6px 0 0 -6px;
 }
 
 #device-submit-button {
   background-color: var(--theme-tab-toolbar-background);
   border-width: 1px 0 0 0;
   border-top-width: 1px;