Bug 1317076 - Making navigation marker more obvious; r=nchevobbe
authorsavvysiddharth <siddharth21805@gmail.com>
Wed, 17 Oct 2018 15:11:28 +0000
changeset 500154 b684eb7a73c05a4e3f3d6cd4b7de9d0664dbc1ee
parent 500153 a8e1eaf6d370c7861f6e3b56f3f2ffe93cf3626d
child 500155 0589e0ff75c7d7d1eced9c91230492d7cc39c2d6
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1317076
milestone64.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 1317076 - Making navigation marker more obvious; r=nchevobbe Before this patch, in developer console, enabling persist log, message displayed "Navigated to" ..something was not distinguishable from console.log messages. Now specific class for navigation marker is added. Differential Revision: https://phabricator.services.mozilla.com/D7040
devtools/client/jar.mn
devtools/client/themes/images/webconsole/globe.svg
devtools/client/themes/variables.css
devtools/client/themes/webconsole.css
devtools/client/webconsole/constants.js
devtools/client/webconsole/utils/messages.js
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -152,16 +152,17 @@ devtools.jar:
     skin/images/command-console.svg (themes/images/command-console.svg)
     skin/images/command-eyedropper.svg (themes/images/command-eyedropper.svg)
     skin/images/command-rulers.svg (themes/images/command-rulers.svg)
     skin/images/command-measure.svg (themes/images/command-measure.svg)
     skin/images/command-noautohide.svg (themes/images/command-noautohide.svg)
     skin/images/command-chevron.svg (themes/images/command-chevron.svg)
     skin/markup.css (themes/markup.css)
     skin/images/editor-error.png (themes/images/editor-error.png)
+    skin/images/webconsole/globe.svg (themes/images/webconsole/globe.svg)
     skin/images/breakpoint.svg (themes/images/breakpoint.svg)
     skin/webconsole.css (themes/webconsole.css)
     skin/images/webconsole/alert.svg (themes/images/webconsole/alert.svg)
     skin/images/webconsole/info.svg (themes/images/webconsole/info.svg)
     skin/images/webconsole/input.svg (themes/images/webconsole/input.svg)
     skin/images/webconsole/return.svg (themes/images/webconsole/return.svg)
     skin/images/webconsole/jump.svg (themes/images/webconsole/jump.svg)
     skin/images/breadcrumbs-scrollbutton.svg (themes/images/breadcrumbs-scrollbutton.svg)
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/webconsole/globe.svg
@@ -0,0 +1,4 @@
+<!-- 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 viewBox="0 0 24 24" fill="context-fill #0b0b0b" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.062 11a8.009 8.009 0 0 1 5.14-6.497c-.05.137-.1.28-.15.43C8.577 6.356 8.113 8.379 8.017 11H4.062zm6.887-5.434c.234-.702.465-1.22.632-1.555a8.138 8.138 0 0 1 .838 0c.167.335.398.853.632 1.555.412 1.237.835 3.047.93 5.434H10.02c.094-2.387.517-4.197.929-5.434zM13.98 13h-3.96c.094 2.387.517 4.197.929 5.434.234.701.465 1.22.632 1.555a8.07 8.07 0 0 0 .838 0c.167-.335.398-.854.632-1.555.412-1.237.835-3.047.93-5.434zm.819 6.497c.05-.137.1-.28.15-.43.473-1.422.937-3.444 1.033-6.067h3.956a8.009 8.009 0 0 1-5.14 6.497zM15.982 11c-.096-2.622-.56-4.645-1.033-6.066-.05-.15-.1-.294-.15-.43A8.009 8.009 0 0 1 19.939 11h-3.957zm-11.92 2h3.956c.096 2.623.56 4.645 1.033 6.066a15.91 15.91 0 0 0 .15.43A8.009 8.009 0 0 1 4.062 13zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z"></path></svg>
\ No newline at end of file
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -213,16 +213,17 @@
   /* The photon animation curve */
   --animation-curve: cubic-bezier(.07,.95,0,1);
 
   /* Images */
   --select-arrow-image: url(chrome://devtools/skin/images/select-arrow.svg);
   --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
   --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
   --theme-console-alert-image: url(chrome://devtools/skin/images/webconsole/alert.svg);
+  --theme-console-navigation-image: url(chrome://devtools/skin/images/webconsole/globe.svg);
   --theme-console-info-image: url(chrome://devtools/skin/images/webconsole/info.svg);
   --theme-console-input-image: url(chrome://devtools/skin/images/webconsole/input.svg);
   --theme-console-return-image: url(chrome://devtools/skin/images/webconsole/return.svg);
   --theme-console-jump-image: url(chrome://devtools/skin/images/webconsole/jump.svg);
 
   /* Firefox Colors CSS Variables v1.0.3
    * Colors are taken from: https://github.com/FirefoxUX/design-tokens
    * Some intermediate colors were added (names ending in '5').
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -97,16 +97,21 @@ a {
   border-inline-start-color: var(--theme-highlight-blue);
 }
 
 .message.error {
   color: var(--error-color);
   background-color: var(--error-background-color);
 }
 
+.message.navigationMarker {
+  border-top: 1px solid var(--theme-emphasized-splitter-color);
+  color: var(--object-color);
+}
+
 .message.warn {
   color: var(--warning-color);
   background-color: var(--warning-background-color);
 }
 
 .message.paused::before {
   background: #d8461f;
   opacity: 0.6;
@@ -201,16 +206,21 @@ a {
   background-image: var(--theme-console-alert-image);
 }
 
 .message.warn > .icon {
   color: var(--console-output-icon-warning);
   background-image: var(--theme-console-alert-image);
 }
 
+.message.navigationMarker > .icon {
+  color: var(--object-color);
+  background-image: var(--theme-console-navigation-image);
+}
+
 
 .message > span.icon[title="Jump"] {
   background-image:var(--theme-console-jump-image);
   background-size: 14px 14px;
   cursor: pointer;
   opacity: 0;
 }
 
@@ -314,17 +324,17 @@ a {
   display: flex;
   flex-wrap: wrap;
 }
 
 .message.network .method {
   flex: none;
 }
 
-.message.network:not(.navigation-marker) .url {
+.message.network .url {
   flex: 1 1 auto;
   /* Make sure the URL is very small initially, let flex change width as needed. */
   width: 100px;
   min-width: 5em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: default;
@@ -447,35 +457,16 @@ textarea.jsterm-input-node:focus {
 
 .jsterm-cm .cm-auto-complete-shadow-text::after {
   content: attr(title);
   color: var(--theme-comment);
 }
 
 /* Security styles */
 
-.navigation-marker {
-  color: #aaa;
-  background: linear-gradient(#aaa, #aaa) no-repeat left 50%;
-  background-size: 100% 2px;
-  margin-block-start: 6px;
-  margin-block-end: 6px;
-  font-size: 0.9em;
-}
-
-.navigation-marker .url {
-  padding-inline-end: 9px;
-  text-decoration: none;
-  background: var(--theme-body-background);
-}
-
-.theme-light .navigation-marker .url {
-  background: #fff;
-}
-
 .stacktrace {
   display: none;
   overflow-y: auto;
   margin-block-start: 5px;
   margin-block-end: var(--attachment-margin-block-end);
   padding-inline-start: 4px;
 }
 
@@ -718,17 +709,17 @@ a.learn-more-link.webconsole-learn-more-
 .webconsole-output-wrapper .message.network .xhr {
   background-color: var(--theme-comment);
   color: white;
   border-radius: 2px;
   font-weight: normal;
   line-height: inherit;
 }
 
-.webconsole-output-wrapper .message.network:not(.navigation-marker) .url {
+.webconsole-output-wrapper .message.network .url {
   color: var(--theme-comment);
   font-style: inherit;
 }
 
 .webconsole-output-wrapper .message.network .status {
   color: var(--theme-highlight-blue);
   font-style: inherit;
 }
--- a/devtools/client/webconsole/constants.js
+++ b/devtools/client/webconsole/constants.js
@@ -129,16 +129,17 @@ const chromeRDPEnums = {
     PROFILE_END: "profileEnd",
     // Undocumented in Chrome RDP, but is used for evaluation results.
     RESULT: "result",
     // Undocumented in Chrome RDP, but is used for input.
     COMMAND: "command",
     // Undocumented in Chrome RDP, but is used for messages that should not
     // output anything (e.g. `console.time()` calls).
     NULL_MESSAGE: "nullMessage",
+    NAVIGATION_MARKER: "navigationMarker"
   },
   MESSAGE_LEVEL: {
     LOG: "log",
     ERROR: "error",
     WARN: "warn",
     DEBUG: "debug",
     INFO: "info"
   }
--- a/devtools/client/webconsole/utils/messages.js
+++ b/devtools/client/webconsole/utils/messages.js
@@ -192,17 +192,17 @@ function transformConsoleAPICallPacket(p
     executionPoint: message.executionPoint,
   });
 }
 
 function transformNavigationMessagePacket(packet) {
   const { message } = packet;
   return new ConsoleMessage({
     source: MESSAGE_SOURCE.CONSOLE_API,
-    type: MESSAGE_TYPE.LOG,
+    type: MESSAGE_TYPE.NAVIGATION_MARKER,
     level: MESSAGE_LEVEL.LOG,
     messageText: l10n.getFormatStr("webconsole.navigated", [message.url]),
     timeStamp: message.timeStamp,
     private: message.private,
   });
 }
 
 function transformLogMessagePacket(packet) {