Bug 1478435 - Apply photon-styling to autocomplete popup; r=nchevobbe.

This removes the border-radius from the autocomplete popup (and
its items) and refines the spacing.
Since we have more padding for the autocomplete items, we need
to adjust the xOffset when showing the popup.
The yOffset of the webconsole autocomplete is tweaked a bit so
we see its border; the xOffset of the markup search input is also
tweaked to consider the left padding we use to display the search
icon in the input.

MozReview-Commit-ID: JyLySLBUgGy

--HG--
extra : rebase_source : 04d0e1335447c576f7e23f4b8a2280337695ac46

devtools/client/inspector/inspector-search.js

@@ -458,7 +458,9 @@ SelectorAutocompleter.prototype = {
       const onPopupOpened = this.searchPopup.once("popup-opened");
       this.searchPopup.once("popup-closed", () => {
         this.searchPopup.setItems(items);
-        this.searchPopup.openPopup(this.searchBox);
+        // The offset is left padding (22px) + left border width (1px) of searchBox.
+        const xOffset = 23;
+        this.searchPopup.openPopup(this.searchBox, xOffset);
       });
       this.searchPopup.hidePopup();
       return onPopupOpened;

devtools/client/shared/autocomplete-popup.js

@@ -76,6 +76,18 @@ function AutocompletePopup(toolboxDoc, options = {}) {
   }
   this._list.className = "devtools-autocomplete-listbox " + theme + "-theme";
 
+  // We need to retrieve the item padding in order to correct the offset of the popup.
+  const paddingPropertyName = "--autocomplete-item-padding-inline";
+  const listPadding = this._document.defaultView
+    .getComputedStyle(this._list)
+    .getPropertyValue(paddingPropertyName)
+    .replace("px", "");
+
+  this._listPadding = 0;
+  if (!Number.isNaN(Number(listPadding))) {
+    this._listPadding = Number(listPadding);
+  }
+
   this._tooltip.setContent(this._list, { height: Infinity });
 
   this.onClick = this.onClick.bind(this);
@@ -133,8 +145,12 @@ AutocompletePopup.prototype = {
     // Retrieve the anchor's document active element to add accessibility metadata.
     this._activeElement = anchor.ownerDocument.activeElement;
 
+    // We want the autocomplete items to be perflectly lined-up with the string the
+    // user entered, so we need to remove the left-padding and the left-border from
+    // the xOffset.
+    const leftBorderSize = 1;
     this._tooltip.show(anchor, {
-      x: xOffset,
+      x: xOffset - this._listPadding - leftBorderSize,
       y: yOffset,
       position: this.position,
     });
@@ -206,6 +222,7 @@ AutocompletePopup.prototype = {
     this._document = null;
     this._list = null;
     this._tooltip = null;
+    this._listPadding = null;
   },
 
   /**

devtools/client/sourceeditor/autocomplete.js

@@ -225,10 +225,10 @@ function autoComplete({ ed, cm }) {
     // The cursor is at the end of the currently entered part of the token,
     // like "backgr|" but we need to open the popup at the beginning of the
     // character "b". Thus we need to calculate the width of the entered part
-    // of the token ("backgr" here). 4 comes from the popup's left padding.
+    // of the token ("backgr" here).
 
     const cursorElement = cm.display.cursorDiv.querySelector(".CodeMirror-cursor");
-    const left = suggestions[0].preLabel.length * cm.defaultCharWidth() + 4;
+    const left = suggestions[0].preLabel.length * cm.defaultCharWidth();
     popup.hidePopup();
     popup.setItems(suggestions);
 

devtools/client/themes/common.css

@@ -45,11 +45,7 @@ html|button, html|select {
 }
 
 /* Autocomplete Popup */
-
 .devtools-autocomplete-popup {
-  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
-  background-color: transparent;
-  border-radius: 3px;
   overflow: hidden;
 
   /* Devtools autocompletes display technical english keywords and should be displayed
@@ -73,11 +69,12 @@ html|button, html|select {
 }
 
 .devtools-autocomplete-listbox {
+  --autocomplete-item-padding-inline: 8px;
   -moz-appearance: none !important;
   background-color: transparent;
   border-width: 0px !important;
   margin: 0;
-  padding: 2px;
+  padding: 0;
   overflow-x: hidden;
   max-height: 20rem;
   height: 100%;
@@ -87,8 +84,8 @@ html|button, html|select {
 .devtools-autocomplete-listbox .autocomplete-item {
   width: 100%;
   background-color: transparent;
-  border-radius: 4px;
-  padding: 1px 0;
+  color: var(--theme-arrowpanel-color);
+  padding: 1px var(--autocomplete-item-padding-inline);
   cursor: default;
   text-overflow: ellipsis;
   white-space: pre;
@@ -143,30 +140,16 @@ html|button, html|select {
 
 /* Rest of the dark and light theme */
 
-.devtools-autocomplete-popup,
+.tooltip-panel.devtools-autocomplete-popup,
 .CodeMirror-hints,
 .CodeMirror-Tern-tooltip {
-  border: 1px solid hsl(210,24%,90%);
-  background-image: linear-gradient(to bottom, hsla(209,18%,100%,0.9), hsl(210,24%,95%));
-}
-
-.theme-dark .devtools-autocomplete-popup,
-.theme-dark .CodeMirror-hints,
-.theme-dark .CodeMirror-Tern-tooltip {
-  border: 1px solid hsl(210,11%,10%);
-  background-image: linear-gradient(to bottom, hsla(209,18%,18%,0.9), hsl(210,11%,16%));
+  border: 1px solid var(--theme-arrowpanel-border-color);
+  background-color: var(--theme-arrowpanel-background);
+  color: var(--theme-arrowpanel-color);
 }
 
 .devtools-autocomplete-listbox .autocomplete-item:hover {
-  background: var(--theme-selection-background-hover);
-}
-
-.devtools-autocomplete-listbox .autocomplete-item > span {
-  color: #666;
-}
-
-.theme-dark .devtools-autocomplete-listbox .autocomplete-item > span {
-  color: #ccc;
+  background-color: var(--theme-arrowpanel-dimmed);
 }
 
 .devtools-autocomplete-listbox .autocomplete-selected,
@@ -175,10 +158,6 @@ html|button, html|select {
   color: var(--theme-selection-color);
 }
 
-.devtools-autocomplete-listbox .autocomplete-selected > span {
-  color: var(--theme-selection-color);
-}
-
 .devtools-autocomplete-listbox .autocomplete-selected > .initial-value {
   font-weight: bold;
 }

devtools/client/themes/tooltips.css

@@ -555,15 +555,6 @@
   overflow-x: hidden;
 }
 
-#searchbox-panel-listbox .autocomplete-item > .initial-value {
-  max-width: 130px;
-  margin-left: 15px;
-}
-
-#searchbox-panel-listbox .autocomplete-item > .autocomplete-value {
-  max-width: 150px;
-}
-
 /* Tooltip: Image tooltip */
 
 .devtools-tooltip-image-broken {

devtools/client/webconsole/components/JSTerm.js

@@ -1275,7 +1275,7 @@ class JSTerm extends Component {
         popupAlignElement = this.node.querySelector(".CodeMirror-cursor");
         // We need to show the popup at the ".".
         xOffset = -1 * lastPart.length * this._inputCharWidth;
-        yOffset = 4;
+        yOffset = 5;
       } else if (this.inputNode) {
         const offset = inputUntilCursor.length -
           (inputUntilCursor.lastIndexOf("\n") + 1) -