Backed out 3 changesets (bug 1551202) for Causing Bug 1550093 to break on browser_parsable_css.js
authorDorel Luca <dluca@mozilla.com>
Sat, 18 May 2019 08:28:33 +0300
changeset 474418 c07f5967e0fc880bb9db128e98369f648a1884e2
parent 474417 2d06ae6700d5be5988713669b4b9c4d91aeff3b0
child 474419 6bd4c5122a6a47b0b25090c334befd38404adf5d
push id113152
push userdluca@mozilla.com
push dateSat, 18 May 2019 10:33:03 +0000
treeherdermozilla-inbound@9b2f851979cb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1551202, 1550093
milestone68.0a1
backs out70b0d5a417b826c34f76cc244a303200fc4de885
1454297813951e8531bed6673e41fb38425b9def
5f5daca84fbeb06f7df1569b18ad49da977b024e
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
Backed out 3 changesets (bug 1551202) for Causing Bug 1550093 to break on browser_parsable_css.js Backed out changeset 70b0d5a417b8 (bug 1551202) Backed out changeset 145429781395 (bug 1551202) Backed out changeset 5f5daca84fbe (bug 1551202)
toolkit/mozapps/extensions/content/aboutaddons.css
toolkit/mozapps/extensions/content/abuse-report-panel.css
toolkit/mozapps/extensions/content/message-bar.css
toolkit/mozapps/extensions/content/panel-item.css
toolkit/themes/shared/in-content/common.inc.css
toolkit/themes/shared/incontent-icons/info.svg
--- a/toolkit/mozapps/extensions/content/aboutaddons.css
+++ b/toolkit/mozapps/extensions/content/aboutaddons.css
@@ -211,26 +211,26 @@ recommended-addon-card .addon-descriptio
   margin-top: 30px;
 }
 
 .discopane-privacy-policy-link {
   font-size: small;
 }
 
 addon-details {
-  color: var(--in-content-deemphasized-text);
+  color: var(--grey-60);
 }
 
 .addon-detail-description {
   margin: 16px 0;
 }
 
 .addon-detail-contribute {
   padding: var(--card-padding);
-  border: 1px solid var(--in-content-box-border-color);
+  border: 1px solid var(--grey-90-a20);
   border-radius: var(--panel-border-radius);
   margin-bottom: var(--card-padding);
   display: flex;
   flex-direction: column;
 }
 
 .addon-detail-contribute > label {
   font-style: italic;
@@ -247,25 +247,25 @@ addon-details {
   margin-bottom: 0;
   align-self: flex-end;
 }
 
 .addon-detail-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-top: 1px solid var(--in-content-box-border-color);
+  border-top: 1px solid var(--grey-90-a20);
   margin: 0 calc(var(--card-padding) * -1);
   padding: var(--card-padding);
-  color: var(--in-content-text-color);
+  color: var(--grey-90);
 }
 
 .addon-detail-row.addon-detail-help-row {
   display: block;
-  color: var(--in-content-deemphasized-text);
+  color: var(--grey-60);
   padding-top: 4px;
   padding-bottom: var(--card-padding);
   border: none;
 }
 
 .addon-detail-row-has-help,
 .addon-detail-row:last-of-type {
   padding-bottom: 0;
--- a/toolkit/mozapps/extensions/content/abuse-report-panel.css
+++ b/toolkit/mozapps/extensions/content/abuse-report-panel.css
@@ -17,45 +17,26 @@
   --textarea-height: 220px;
   --button-padding: 52px;
   --listitem-padding-bottom: 14px;
   --list-radio-column-size: 28px;
   --note-font-size: 14px;
   --note-font-weight: 400;
   --subtitle-font-size: 16px;
   --subtitle-font-weight: 600;
-
-  --input-radio-border: var(--in-content-box-border-color);
-  --input-radio-background: var(--grey-90-a10);
-  --input-radio-background-hover: var(--grey-90-a20);
-  --input-radio-background-active: var(--grey-90-a30);
-  --input-radio-background-selected: var(--blue-60);
-  --input-radio-background-selected-hover: var(--blue-70);
-  --input-radio-background-selected-active: var(--blue-80);
-  --input-radio-focus-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
-}
-
-@supports -moz-bool-pref("browser.in-content.dark-mode") {
-@media (prefers-color-scheme: dark) {
-  :root {
-    --input-radio-background: #202023;
-    --input-radio-background-hover: #303033;
-    --input-radio-background-active: #404044;
-  }
-}
 }
 
 /* Ensure that the document (embedded in the XUL about:addons using a
    XUL browser) has a transparent background */
 html {
   background-color: transparent;
 }
 
 .modal-overlay-outer {
-  background: var(--grey-90-a60);
+  background: rgba(12, 12, 13, 0.6);
   width: 100%;
   height: 100%;
   position: fixed;
   z-index: -1;
 }
 
 .modal-panel-container {
   padding-top: var(--modal-panel-margin-top);
@@ -116,17 +97,17 @@ button.abuse-report-close-icon:hover:act
 }
 
 .abuse-report-contents,
 .abuse-report-contents > hr {
   width: 100%;
 }
 
 .abuse-report-note {
-  color: var(--in-content-deemphasized-text);
+  color: var(--grey-50);
   font-size: var(--note-font-size);
   font-weight: var(--note-font-weight);
   line-height: var(--line-height);
 }
 
 .abuse-report-subtitle {
   font-size: var(--subtitle-font-size);
   font-weight: var(--subtitle-font-weight);
@@ -168,49 +149,38 @@ ul.abuse-report-reasons > li > label > s
   padding-top: 2px;
 }
 
 .abuse-report-contents [type=radio] {
   -moz-appearance: none;
   height: var(--radio-size);
   width: var(--radio-size);
   border-radius: 100%;
-  border: 1px solid var(--input-radio-border);
-  background-color: var(--input-radio-background);
+  border: 1px solid var(--grey-90-a30);
+  background-color: var(--grey-90-a10);
   margin-inline-start: 4px;
   margin-inline-end: 4px;
 }
 
 .abuse-report-contents [type=radio]:focus {
-  border: none;
-  box-shadow: var(--input-radio-focus-shadow);
+  box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
 }
 
-.abuse-report-contents label:hover [type=radio]:not(:active),
 .abuse-report-contents [type=radio]:hover {
-  background-color: var(--input-radio-background-hover);
-}
-
-.abuse-report-contents [type=radio]:active {
-  background-color: var(--input-radio-background-active);
+  background-color: var(--grey-90-a20);
 }
 
 .abuse-report-contents [type=radio]:checked {
   background-image: var(--radio-image-url);
-  background-color: var(--input-radio-background-selected);
+  background-color: var(--blue-60);
   background-position: center center;
 }
 
-.abuse-report-contents label:hover [type=radio]:checked:not(:active),
 .abuse-report-contents [type=radio]:checked:hover {
-  background-color: var(--input-radio-background-selected-hover);
-}
-
-.abuse-report-contents [type=radio]:checked:active {
-  background-color: var(--input-radio-background-selected-active);
+  background-color: var(--blue-70);
 }
 
 abuse-report-submit-panel textarea {
   width: 100%;
   height: var(--textarea-height);
   resize: none;
   box-sizing: border-box;
 }
--- a/toolkit/mozapps/extensions/content/message-bar.css
+++ b/toolkit/mozapps/extensions/content/message-bar.css
@@ -3,59 +3,37 @@
   --warn-icon-url: url("chrome://global/skin/icons/warning.svg");
   --check-icon-url: url("chrome://global/skin/icons/check.svg");
   --error-icon-url: url("chrome://global/skin/icons/error.svg");
   --close-icon-url: url("chrome://global/skin/icons/close.svg");
   --icon-size: 16px;
 }
 
 /* MessageBar colors by message type */
-/* Colors from: https://design.firefox.com/photon/components/message-bars.html#type-specific-style */
-
-:host {
-  /* Colors used by default, and for [type=generic] message bars.*/
-  background-color: var(--in-content-box-info-background);
-  color: var(--in-content-text-color);
-
-  --message-bar-icon-url: var(--info-icon-url);
-  /* The default values of --in-content-button* are sufficient, even for dark themes */
-}
 
 :host([type=warning]) {
   background-color: var(--yellow-50);
   color: var(--yellow-90);
-
-  --message-bar-icon-url: var(--warn-icon-url);
-  --in-content-button-background: var(--yellow-60);
-  --in-content-button-background-hover: var(--yellow-70);
-  --in-content-button-background-active: var(--yellow-80);
 }
 
 :host([type=success]) {
-  background-color: var(--green-50);
-  color: var(--green-90);
-
-  --message-bar-icon-url: var(--check-icon-url);
-  --in-content-button-background: var(--green-60);
-  --in-content-button-background-hover: var(--green-70);
-  --in-content-button-background-active: var(--green-80);
+  background-color: #30e60b;
+  color: #003706;
 }
 
 :host([type=error]) {
-  background-color: var(--red-60);
+  background: #d70022;
   color: #ffffff;
-
-  --messsage-bar-icon-url: var(--error-icon-url);
-  --in-content-button-background: var(--red-70);
-  --in-content-button-background-hover: var(--red-80);
-  --in-content-button-background-active: var(--red-90);
 }
 
 :host {
   border-radius: 4px;
+  /* Colors used by default, and for [type=generic] message bars.*/
+  background-color: var(--grey-20);
+  color: var(--grey-90);
 }
 
 /* Make the host to behave as a block by default, but allow hidden to hide it. */
 :host(:not([hidden])) {
   display: block;
 }
 
 .container {
@@ -113,23 +91,42 @@ button.close {
 /* MessageBar icon style */
 
 .icon {
   padding: 4px;
   width: var(--icon-size);
   height: var(--icon-size);
 }
 
-.icon::after {
+.icon {
   -moz-appearance: none;
-  -moz-context-properties: fill, stroke;
+  -moz-context-properties: fill, fill-opacity;
   color: inherit !important;
   fill: currentColor;
-  stroke: currentColor;
-  content: var(--message-bar-icon-url);
+  fill-opacity: 0;
+}
+
+:host([type=success]) .icon {
+  fill-opacity: 1;
+}
+
+:host(:not([type])) .icon::after, :host([type=generic]) .icon::after {
+  content: var(--info-icon-url);
+}
+
+:host([type=warning]) .icon::after {
+  content: var(--warn-icon-url);
+}
+
+:host([type=success]) .icon::after {
+  content: var(--check-icon-url);
+}
+
+:host([type=error]) .icon::after {
+  content: var(--error-icon-url);
 }
 
 /* Close icon styles */
 
 :host(:not([dismissable])) button.close {
   display: none;
 }
 
--- a/toolkit/mozapps/extensions/content/panel-item.css
+++ b/toolkit/mozapps/extensions/content/panel-item.css
@@ -1,11 +1,10 @@
 button {
   background-color: transparent;
-  color: inherit;
   background-image: var(--icon);
   background-position: 16px center;
   background-repeat: no-repeat;
   background-size: 16px;
   border: none;
   position: relative;
   display: block;
   font-size: inherit;
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -67,33 +67,22 @@
   --grey-40: #b1b1b3;
   --grey-50: #737373;
   --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);
-  --green-50: #30e60b;
-  --green-60: #12bc00;
-  --green-70: #058b00;
-  --green-80: #006504;
-  --green-90: #003706;
   --purple-70: #6200a4;
   --purple-70-a40: rgba(98, 0, 164, 0.4);
   --red-50: #ff0039;
   --red-50-a30: rgba(255, 0, 57, 0.3);
   --red-60: #d70022;
-  --red-70: #a4000f;
-  --red-80: #5a0002;
-  --red-90: #3e0200;
   --yellow-50: #ffe900;
-  --yellow-60: #d7b600;
-  --yellow-70: #a47f00;
-  --yellow-80: #715100;
   --yellow-90: #3e2800;
 
   --shadow-10: 0 1px 4px var(--grey-90-a10);
   --shadow-30: 0 4px 16px var(--grey-90-a10);
 
   --card-padding: 16px;
   --card-shadow: var(--shadow-10);
   --card-outline-color: var(--grey-30);
--- a/toolkit/themes/shared/incontent-icons/info.svg
+++ b/toolkit/themes/shared/incontent-icons/info.svg
@@ -1,8 +1,8 @@
 <!-- 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" viewBox="0 0 100 100" fill="context-fill #424e5a">
-  <circle cx="50" cy="50" r="44" stroke="context-fill #424e5a" stroke-width="11" fill="none"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="#424e5a">
+  <circle cx="50" cy="50" r="44" stroke="#424e5a" stroke-width="11" fill="none"/>
   <circle cx="50" cy="24.6" r="6.4"/>
   <rect x="45" y="39.9" width="10.1" height="41.8"/>
 </svg>