Bug 1277858 - adding more polish to console input focus style. r=bgrins
authorYura Zenevich <yzenevich@mozilla.com>
Fri, 03 Jun 2016 14:15:29 -0400
changeset 339489 d35a3e8043bda4cfcfeb38690261c789bbbc8b43
parent 339488 49762b7df7479802962bd1a6c985a21f83822f1a
child 339490 e2b1014ab07515c248fe3667c009a55bc2289cc0
push id6249
push userjlund@mozilla.com
push dateMon, 01 Aug 2016 13:59:36 +0000
treeherdermozilla-beta@bad9d4f5bf7e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1277858
milestone49.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 1277858 - adding more polish to console input focus style. r=bgrins MozReview-Commit-ID: 1LVCcYe1a0S
devtools/client/jar.mn
devtools/client/themes/commandline.inc.css
devtools/client/themes/debugger.css
devtools/client/themes/images/commandline-icon.png
devtools/client/themes/images/commandline-icon.svg
devtools/client/themes/images/commandline-icon@2x.png
devtools/client/themes/images/firebug/commandline-icon.svg
devtools/client/themes/variables.css
devtools/client/themes/webconsole.css
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -164,18 +164,17 @@ devtools.jar:
     skin/images/animation-fast-track.svg (themes/images/animation-fast-track.svg)
     skin/images/performance-icons.svg (themes/images/performance-icons.svg)
     skin/widgets.css (themes/widgets.css)
     skin/images/power.svg (themes/images/power.svg)
     skin/images/filetypes/dir-close.svg (themes/images/filetypes/dir-close.svg)
     skin/images/filetypes/dir-open.svg (themes/images/filetypes/dir-open.svg)
     skin/images/filetypes/globe.svg (themes/images/filetypes/globe.svg)
     skin/images/filetypes/store.svg (themes/images/filetypes/store.svg)
-    skin/images/commandline-icon.png (themes/images/commandline-icon.png)
-    skin/images/commandline-icon@2x.png (themes/images/commandline-icon@2x.png)
+    skin/images/commandline-icon.svg (themes/images/commandline-icon.svg)
     skin/images/alerticon-warning.png (themes/images/alerticon-warning.png)
     skin/images/alerticon-warning@2x.png (themes/images/alerticon-warning@2x.png)
     skin/rules.css (themes/rules.css)
     skin/commandline.css (themes/commandline.css)
     skin/images/command-paintflashing.svg (themes/images/command-paintflashing.svg)
     skin/images/command-screenshot.svg (themes/images/command-screenshot.svg)
     skin/images/command-responsivemode.svg (themes/images/command-responsivemode.svg)
     skin/images/command-scratchpad.svg (themes/images/command-scratchpad.svg)
--- a/devtools/client/themes/commandline.inc.css
+++ b/devtools/client/themes/commandline.inc.css
@@ -12,26 +12,30 @@
 :root[devtoolstheme="light"] #developer-toolbar {
   --gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */
   --gcli-input-background: #fcfcfc; /* --theme-toolbar-background */
   --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */
   --gcli-input-color: #393f4c; /* --theme-body-color */
   --gcli-border-color: #dde1e4; /* --theme-splitter-color */
   --selection-background: #4c9ed9; /* --theme-selection-background */
   --selection-color: #f5f7fa; /* --theme-selection-color */
+  --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
+  --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
 }
 
 :root[devtoolstheme="dark"] #developer-toolbar {
   --gcli-background-color: #272b35; /* --theme-toolbar-background */
   --gcli-input-background: #272b35; /* --theme-tab-toolbar-background */
   --gcli-input-focused-background: #272b35; /* --theme-tab-toolbar-background */
   --gcli-input-color: #b6babf; /* --theme-body-color-alt */
   --gcli-border-color: #454d5d; /* --theme-splitter-color */
   --selection-background: #5675b9; /* --theme-selection-background */
   --selection-color: #f5f7fa; /* --theme-selection-color */
+  --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme); /* --theme-command-line-image */
+  --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus); /* --theme-command-line-image-focus */
 }
 
 #developer-toolbar {
   -moz-appearance: none;
   padding: 0;
   min-height: 32px;
   background-color: var(--gcli-background-color);
   border-top: 1px solid var(--gcli-border-color);
@@ -155,29 +159,21 @@ html|*#gcli-output-frame {
 
 .gclitoolbar-input-node::before {
   content: "";
   display: inline-block;
   -moz-box-ordinal-group: 0;
   width: 16px;
   height: 16px;
   margin: 0 2px;
-  background-image: url("chrome://devtools/skin/images/commandline-icon.png");
-  background-position: 0 center;
-  background-size: 32px 16px;
+  background-image: var(--command-line-image);
 }
 
 .gclitoolbar-input-node[focused="true"]::before {
-  background-position: -16px center;
-}
-
-@media (min-resolution: 1.1dppx) {
-  .gclitoolbar-input-node::before {
-    background-image: url("chrome://devtools/skin/images/commandline-icon@2x.png");
-  }
+  background-image: var(--command-line-image-focus);
 }
 
 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
   background-color: var(--selection-background);
   color: var(--selection-color);
   text-shadow: none;
 }
 
--- a/devtools/client/themes/debugger.css
+++ b/devtools/client/themes/debugger.css
@@ -345,31 +345,22 @@
   max-height: 125px;
 }
 
 .dbg-expression {
   height: 20px;
 }
 
 .dbg-expression-arrow {
-  background-image: url(images/commandline-icon.png);
-  background-position: -16px 0;
-  background-repeat: no-repeat;
-  background-size: 32px 16px;
+  background-image: var(--theme-command-line-image-focus);
   width: 16px;
   height: 16px;
   margin: 2px;
 }
 
-@media (min-resolution: 1.1dppx) {
-  .dbg-expression-arrow {
-    background-image: url(images/commandline-icon@2x.png);
-  }
-}
-
 .dbg-expression-input {
   color: inherit;
 }
 
 .dbg-expression-button {
   -moz-appearance: none;
   border: none;
   background: none;
deleted file mode 100644
index e51f67f137e49e26ee0aa4400b99bb05ecfdb09e..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/commandline-icon.svg
@@ -0,0 +1,42 @@
+<!-- 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="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style>
+      g {
+        display: none;
+      }
+
+      #light-theme:target,
+      #light-theme-focus:target ~ #light-theme,
+      #dark-theme:target,
+      #dark-theme-focus:target ~ #dark-theme {
+        display: inline;
+      }
+
+      #light-theme-focus:target ~ #light-theme {
+        fill: #4A90E2;
+      }
+      #dark-theme-focus:target ~ #dark-theme {
+        fill: #00FF7F;
+      }
+
+      /* Unfocused states */
+      #light-theme,
+      #dark-theme {
+        fill: rgba(128, 128, 128, .5);
+      }
+    </style>
+  </defs>
+  <g id="light-theme-focus"/>
+  <g id="light-theme">
+    <path d="M7.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
+    <path d="M2.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
+  </g>
+  <g id="dark-theme-focus"/>
+  <g id="dark-theme">
+    <path d="M7.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
+    <path d="M2.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
+  </g>
+</svg>
\ No newline at end of file
deleted file mode 100644
index 407fdae8c93c5ad6ba942c62884babc950ab208b..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/devtools/client/themes/images/firebug/commandline-icon.svg
+++ b/devtools/client/themes/images/firebug/commandline-icon.svg
@@ -1,18 +1,26 @@
 <!-- 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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14">
   <defs>
+    <style>
+      path {
+        opacity: 0.5;
+      }
+      path:target {
+        opacity: 1;
+      }
+    </style>
     <linearGradient id="b">
       <stop offset="0" stop-color="#234ccd"/>
       <stop offset="1" stop-color="#5d7de3"/>
     </linearGradient>
     <linearGradient id="a">
       <stop offset="0" stop-color="#1e3faa"/>
       <stop offset="1" stop-color="#3a61de"/>
     </linearGradient>
     <linearGradient x1="2.002" y1="12.252" x2="-.099" y2="6.755" id="d" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="translate(5.841 1034.646)"/>
     <linearGradient x1="3.309" y1="11.177" x2="1.468" y2="6.456" id="c" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="translate(5.841 1034.646)"/>
   </defs>
-  <path d="M6.841 1040.052l-.437.406 2.469 3.688-2.47 3.687.438.407 3.438-4.094z" fill="url(#c)" stroke="url(#d)" stroke-width=".4" stroke-linecap="round" stroke-linejoin="round" transform="translate(-1.341 -1037.146)"/>
+  <path id="focus" d="M6.841 1040.052l-.437.406 2.469 3.688-2.47 3.687.438.407 3.438-4.094z" fill="url(#c)" stroke="url(#d)" stroke-width=".4" stroke-linecap="round" stroke-linejoin="round" transform="translate(-1.341 -1037.146)"/>
 </svg>
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -63,16 +63,20 @@
   /* Images */
   --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
   --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
 
   /* Tooltips */
   --theme-tooltip-border: #d9e1e8;
   --theme-tooltip-background: rgba(255, 255, 255, .9);
   --theme-tooltip-shadow: rgba(155, 155, 155, 0.26);
+
+  /* Command line */
+  --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme);
+  --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus);
 }
 
 :root.theme-dark {
   --theme-body-background: #393f4c;
   --theme-sidebar-background: #393f4c;
   --theme-contrast-background: #ffb35b;
 
   --theme-tab-toolbar-background: #272b35;
@@ -119,16 +123,20 @@
   /* Images */
   --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
   --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
 
   /* Tooltips */
   --theme-tooltip-border: #434850;
   --theme-tooltip-background: rgba(19, 28, 38, .9);
   --theme-tooltip-shadow: rgba(25, 25, 25, 0.76);
+
+  /* Command line */
+  --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme);
+  --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus);
 }
 
 :root.theme-firebug {
   --theme-body-background: #fcfcfc;
   --theme-sidebar-background: #fcfcfc;
   --theme-contrast-background: #e6b064;
 
   --theme-tab-toolbar-background: #ebeced;
@@ -173,21 +181,23 @@
 
   /* Font size */
   --theme-toolbar-font-size: 12px;
 
   /* Header */
   --theme-header-background: #F0F0F0 linear-gradient(to top,
                                                      rgba(0, 0, 0, 0.1),
                                                      transparent) repeat-x;
+
+  /* Command line */
+  --theme-command-line-image: url(chrome://devtools/skin/images/firebug/commandline-icon.svg);
+  --theme-command-line-image-focus: url(chrome://devtools/skin/images/firebug/commandline-icon.svg#focus);
 }
 
 :root {
   --theme-focus-border-color-textbox: #0675d3;
   --theme-textbox-box-shadow: rgba(97,181,255,.75);
 
   /* For accessibility purposes we want to enhance the focus styling. This
    * should improve keyboard navigation usability. */
   --theme-focus-outline: 1px dotted var(--theme-focus-outline-color);
   --theme-focus-box-shadow-textbox: 0 0 0 1px var(--theme-textbox-box-shadow);
-  --theme-focus-box-shadow-inset-bottom: 0 -2px 1px var(--theme-textbox-box-shadow) inset,
-    0px -2px var(--theme-highlight-blue) inset;
 }
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -1,28 +1,14 @@
 /* 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/. */
 
 /* Webconsole specific theme variables */
-
-.theme-dark {
-  --command-line-image: -moz-image-rect(url("chrome://devtools/skin/images/commandline-icon.png"), 0, 32, 16, 16);
-  --command-line-image-2x: -moz-image-rect(url('chrome://devtools/skin/images/commandline-icon@2x.png'), 0, 64, 32, 32);
-}
-
-.theme-light {
-  --command-line-image: -moz-image-rect(url("chrome://devtools/skin/images/commandline-icon.png"), 0, 32, 16, 16);
-  --command-line-image-2x: -moz-image-rect(url('chrome://devtools/skin/images/commandline-icon@2x.png'), 0, 64, 32, 32);
-}
-
 .theme-firebug {
-  --command-line-image: url(chrome://devtools/skin/images/firebug/commandline-icon.svg);
-  --command-line-image-2x: url(chrome://devtools/skin/images/firebug/commandline-icon.svg);
-
   --error-color: #FF0000;
   --error-background-color: #FFEBEB;
   --warning-background-color: #FFFFC8;
 }
 
 /* General output styles */
 
 a {
@@ -409,43 +395,35 @@ a {
   padding: 0;
   padding-inline-start: 20px;
   margin: 0;
   -moz-appearance: none;
   background-color: transparent;
 }
 
 .jsterm-input-node[focused="true"] {
-  outline: var(--theme-focus-outline);
-  outline-offset: -1px;
-  transition: none;
+  background-image: var(--theme-command-line-image-focus);
   box-shadow: none;
 }
 
 .jsterm-complete-node {
   color: var(--theme-comment);
 }
 
 .jsterm-input-node {
   /* Always allow scrolling on input - it auto expands in js by setting height,
      but don't want it to get bigger than the window. 24px = toolbar height. */
   max-height: calc(90vh - 24px);
-  background-image: var(--command-line-image);
+  background-image: var(--theme-command-line-image);
   background-repeat: no-repeat;
   background-size: 16px 16px;
   background-position: 4px 50%;
   color: var(--theme-content-color1);
 }
 
-@media (min-resolution: 1.1dppx) {
-  .jsterm-input-node {
-    background-image: var(--command-line-image-2x);
-  }
-}
-
 :-moz-any(.jsterm-input-node,
           .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
   overflow-x: hidden;
   /* Set padding for console input on textbox to make sure it is inlcuded in
      scrollHeight that is used when resizing JSTerminal's input. Note: textbox
      default style has important already */
   padding: 4px 0 !important;
 }