Bug 1502684 - Update in-content textboxes according to photon spec. r=dao,ntim
authormatthias <matthias@kammueller.eu>
Thu, 22 Nov 2018 21:54:34 +0000
changeset 504195 388921b466517e8dce3a57b8e3cc9de4627ea2bb
parent 504194 b7f29f09e6ea1766148add6ab91da70051034743
child 504196 2d716f894292b48c1bf7b37c1436b09748c71253
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, ntim
bugs1502684
milestone65.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 1502684 - Update in-content textboxes according to photon spec. r=dao,ntim Differential Revision: https://phabricator.services.mozilla.com/D10926
toolkit/themes/osx/global/in-content/common.css
toolkit/themes/osx/global/textbox.css
toolkit/themes/shared/in-content/common.inc.css
--- a/toolkit/themes/osx/global/in-content/common.css
+++ b/toolkit/themes/osx/global/in-content/common.css
@@ -78,18 +78,18 @@ html|*.numberbox-input::-moz-number-spin
 }
 
 html|*.numberbox-input::-moz-number-spin-down  {
   border-radius: 0 0 4px 4px;
 }
 
 textbox[type="search"] {
   -moz-appearance: none;
-  padding-inline-start: 10px;
-  padding-inline-end: 10px;
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
 }
 
 xul|textbox[type="search"] > moz-input-box > .textbox-search-sign {
   list-style-image: url(chrome://global/skin/icons/search-textbox.svg);
   margin-inline-end: 5px;
 }
 
 html|button {
--- a/toolkit/themes/osx/global/textbox.css
+++ b/toolkit/themes/osx/global/textbox.css
@@ -40,17 +40,17 @@ textbox[readonly="true"] {
   background-color: -moz-Dialog;
   color: -moz-DialogText;
 }
 
 textbox[disabled="true"] {
   cursor: default;
   background-color: -moz-Dialog;
   color: GrayText;
-} 
+}
 
 textbox.plain {
   -moz-appearance: none !important;
   background-color: transparent;
   padding: 0px !important;
   margin: 0px !important;
   border: none !important;
 }
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -10,21 +10,26 @@
   --in-content-page-color: #0c0c0d;
   --in-content-page-background: #f9f9fa;
   --in-content-text-color: #0c0c0d;
   --in-content-selected-text: #fff;
   --in-content-box-background: #fff;
   --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */
   --in-content-box-background-hover: #ededf0; /* grey 20 */
   --in-content-box-background-active: #d7d7db; /* grey 30 */
-  --in-content-box-border-color: #d7d7db; /* grey 30 */
+  --in-content-box-border-color: var(--grey-90-a30);
   --in-content-item-hover: rgba(69, 161, 255, 0.2); /* blue 40 a20 */
   --in-content-item-selected: #0a84ff;
   --in-content-border-highlight: #0a84ff;
   --in-content-border-focus: #0a84ff;
+  --in-content-border-hover: var(--grey-90-a50);
+  --in-content-border-active: var(--blue-50);
+  --in-content-border-active-shadow: var(--blue-50-a30);
+  --in-content-border-invalid: var(--red-50);
+  --in-content-border-invalid-shadow: var(--red-50-a30);
   --in-content-border-color: #d7d7db;
   --in-content-category-outline-focus: 1px dotted #0a84ff;
   --in-content-category-text: rgba(12,12,13);
   --in-content-category-text-selected: #0a84ff;
   --in-content-category-text-selected-active: #0060df;
   --in-content-category-background-hover: rgba(12,12,13,0.1);
   --in-content-category-background-active: rgba(12,12,13,0.15);
   --in-content-category-background-selected-hover: rgba(12,12,13,0.15);
@@ -45,16 +50,19 @@
   --blue-50-a30: rgba(10, 132, 255, 0.3);
   --grey-20: #ededf0;
   --grey-30: #d7d7db;
   --grey-60: #4a4a4f;
   --grey-90: #0c0c0d;
   --grey-90-a10: rgba(12, 12, 13, 0.1);
   --grey-90-a20: rgba(12, 12, 13, 0.2);
   --grey-90-a30: rgba(12, 12, 13, 0.3);
+  --grey-90-a50: rgba(12, 12, 13, 0.5);
+  --red-50: #ff0039;
+  --red-50-a30: rgba(255, 0, 57, 0.3);
   --yellow-50: #ffe900;
   --yellow-90: #3e2800;
 
   --shadow-10: 0 1px 4px var(--grey-90-a10);
   --card-shadow: var(--shadow-10);
   --card-outline-color: var(--grey-30);
   --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
   --card-shadow-focus: 0 0 0 2px var(--blue-50), 0 0 0 6px var(--blue-50-a30);
@@ -176,17 +184,17 @@ html|select:not([size]):not([multiple]) 
   background-repeat: no-repeat;
   background-size: auto 18px;
   font-size: inherit;
   padding-inline-start: 5px;
   padding-inline-end: 24px;
   text-overflow: ellipsis;
 }
 
-html|select:not([size]):not([multiple]):dir(rtl){
+html|select:not([size]):not([multiple]):dir(rtl) {
   background-position: left 3px center;
 }
 
 html|button:enabled:hover,
 html|select:not([size]):not([multiple]):enabled:hover,
 html|*.numberbox-input::-moz-number-spin-up:hover,
 html|*.numberbox-input::-moz-number-spin-down:hover,
 html|input[type="color"]:hover,
@@ -278,17 +286,17 @@ html|*.numberbox-input::-moz-number-spin
   background-position: center;
 }
 
 html|*.numberbox-input::-moz-number-spin-up {
   border-radius: 1px 1px 0 0;
   background-image: url("chrome://global/skin/arrow/arrow-up.gif");
 }
 
-html|*.numberbox-input::-moz-number-spin-down  {
+html|*.numberbox-input::-moz-number-spin-down {
   border-radius: 0 0 1px 1px;
   background-image: url("chrome://global/skin/arrow/arrow-dn.gif");
 }
 
 xul|*.menulist-dropmarker {
   -moz-appearance: none;
   margin-inline-end: 4px;
   padding: 0;
@@ -371,24 +379,24 @@ html|input[type="tel"],
 html|input[type="text"],
 html|textarea,
 xul|textbox {
   -moz-appearance: none;
   border: 1px solid var(--in-content-box-border-color);
   border-radius: 2px;
   /* !important to override disabled styling from textbox.css. We reduce the
      opacity instead of changing colors. */
-  color: var(--in-content-text-color) !important;
+  color: inherit !important;
   background-color: var(--in-content-box-background) !important;
 }
 
 xul|textbox {
   min-height: 30px;
-  padding-right: 10px;
-  padding-left: 10px;
+  padding-right: 8px;
+  padding-left: 8px;
 }
 
 xul|textbox[type="number"] {
   padding-inline-end: 0;
 }
 
 html|*.numberbox-input::-moz-number-text {
   margin-inline-end: 10px;
@@ -403,43 +411,59 @@ xul|textbox.tree-input {
 }
 
 html|input[type="email"],
 html|input[type="tel"],
 html|input[type="text"],
 html|textarea {
   font-family: inherit;
   font-size: inherit;
-  padding: 5px 10px;
+  padding: 5px 8px;
+}
+
+html|input[type="email"]:hover,
+html|input[type="tel"]:hover,
+html|input[type="text"]:hover,
+html|textarea:hover,
+xul|textbox:hover {
+  border-color: var(--in-content-border-hover);
 }
 
 html|input[type="email"]:focus,
 html|input[type="tel"]:focus,
 html|input[type="text"]:focus,
 html|textarea:focus,
 xul|textbox[focused] {
-  border-color: var(--in-content-border-focus);
+  border-color: var(--in-content-border-active);
+  box-shadow: 0 0 0 3px var(--in-content-border-active-shadow);
+}
+
+html|input[type="email"]:-moz-ui-invalid,
+html|input[type="tel"]:-moz-ui-invalid,
+html|input[type="text"]:-moz-ui-invalid,
+html|textarea:-moz-ui-invalid {
+  border-color: var(--in-content-border-invalid);
 }
 
 /* Don't show the field error outlines and focus borders at the same time.
    This doesn't apply to XUL <textbox> since they don't expose validity
    attributes */
 html|input[type="email"]:-moz-ui-invalid:focus,
 html|input[type="tel"]:-moz-ui-invalid:focus,
 html|input[type="text"]:-moz-ui-invalid:focus,
 html|textarea:-moz-ui-invalid:focus {
-  border-color: transparent;
+  box-shadow: 0 0 0 3px var(--in-content-border-invalid-shadow);
 }
 
 html|input[type="email"]:disabled,
 html|input[type="tel"]:disabled,
 html|input[type="text"]:disabled,
 html|textarea:disabled,
 xul|textbox[disabled="true"] {
-  opacity: 0.5;
+  opacity: 0.4;
 }
 
 /* Links */
 
 html|a,
 .text-link {
   color: var(--in-content-link-color);
   text-decoration: none;