Bug 1445703 - Change console input focus ring from grey dotted line to blue. r?nchevobbe draft
authorErica Wright <ewright@mozilla.com>
Wed, 14 Mar 2018 14:00:35 -0400
changeset 776637 63cc0f7b07620ae58a78c500400cf8b1f4d13730
parent 776583 4a3275936ddf871103b53e00608e2b8d5aee7e69
push id104932
push userbmo:ewright@mozilla.com
push dateTue, 03 Apr 2018 14:32:58 +0000
reviewersnchevobbe
bugs1445703
milestone61.0a1
Bug 1445703 - Change console input focus ring from grey dotted line to blue. r?nchevobbe MozReview-Commit-ID: 7HDsqKrYGaW
devtools/client/themes/webconsole.css
devtools/client/webconsole/jsterm.js
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -441,17 +441,17 @@ html #webconsole-notificationbox {
 
 html .jsterm-stack-node {
   position: relative;
 }
 
 textarea.jsterm-input-node,
 textarea.jsterm-complete-node {
   width: 100%;
-  border: none;
+  border: 1px solid transparent;
   margin: 0;
   background-color: transparent;
   resize: none;
   font-size: inherit;
   line-height: 16px;
   overflow-x: hidden;
   /* Set padding for console input on textarea to make sure it is included in
      scrollHeight that is used when resizing JSTerminal's input. */
@@ -465,16 +465,24 @@ textarea.jsterm-complete-node {
   left: 0;
   height: 100%;
   pointer-events: none;
 }
 
 textarea.jsterm-input-node:focus {
   background-image: var(--theme-command-line-image-focus);
   box-shadow: none;
+  border: 1px solid var(--blue-50);
+  transition: border-color 0.2s ease-in-out;
+  outline: none;
+}
+
+:root[platform="mac"] textarea.jsterm-input-node,
+:root[platform="mac"] textarea.jsterm-complete-node {
+  border-radius: 0 0 4px 4px;
 }
 
 
 /*  styles for the old frontend, which can be removed in Bug 1381834 */
 
 textbox.jsterm-input-node,
 textbox.jsterm-complete-node {
   border: none;
--- a/devtools/client/webconsole/jsterm.js
+++ b/devtools/client/webconsole/jsterm.js
@@ -1031,17 +1031,19 @@ JSTerm.prototype = {
 
     // Now resize the input field to fit its contents.
     // TODO: remove `inputNode.inputField.scrollHeight` when the old
     // console UI is removed. See bug 1381834
     let scrollHeight = inputNode.inputField ?
       inputNode.inputField.scrollHeight : inputNode.scrollHeight;
 
     if (scrollHeight > 0) {
-      inputNode.style.height = scrollHeight + "px";
+      // Add extra pixels to account for the border.
+      let borderSize = inputNode.getBoundingClientRect().height - inputNode.clientHeight;
+      inputNode.style.height = (scrollHeight + borderSize) + "px";
     }
   },
 
   /**
    * Sets the value of the input field (command line), and resizes the field to
    * fit its contents. This method is preferred over setting "inputNode.value"
    * directly, because it correctly resizes the field.
    *