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

--HG--
extra : moz-landing-system : lando

devtools/client/jar.mn

@@ -157,6 +157,7 @@ devtools.jar:
     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)

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>

devtools/client/themes/variables.css

@@ -218,6 +218,7 @@
   --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);

devtools/client/themes/webconsole.css

@@ -102,6 +102,11 @@ a {
   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);
@@ -206,6 +211,11 @@ a {
   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);
@@ -319,7 +329,7 @@ a {
   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;
@@ -452,25 +462,6 @@ textarea.jsterm-input-node:focus {
 
 /* 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;
@@ -723,7 +714,7 @@ a.learn-more-link.webconsole-learn-more-link {
   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;
 }

devtools/client/webconsole/constants.js

@@ -134,6 +134,7 @@ const chromeRDPEnums = {
     // 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",

devtools/client/webconsole/utils/messages.js

@@ -197,7 +197,7 @@ 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,