Implement Photon ResultList Design (#5839)

MicahRamirez · jasonLaster · commit c2b3627af798 · 2018-04-11T18:19:20.000-04:00
* initial pass on showing the icons in the result list

* tweaks

* integrated jason's changes, styling needs to be looked over it looks pretty close IMO

* addressing cc feedback about getSourceClassnames doing too much, removed unused badge in QuickOpenResult

* Ensure all icons are the same size and align; nits

* Tweak position of tab icon

* Fix jest

* Shim around jest errors for now

* Reset yarn.lock to master
diff --git a/assets/images/Svg.js b/assets/images/Svg.js
@@ -47,6 +47,7 @@ const svg = {
   stepOut: require("./stepOut.svg"),
   stepOver: require("./stepOver.svg"),
   subSettings: require("./subSettings.svg"),
+  tab: require("./tab.svg"),
   toggleBreakpoints: require("./toggle-breakpoints.svg"),
   togglePanes: require("./toggle-panes.svg"),
   typescript: require("./typescript.svg"),
diff --git a/assets/images/tab.svg b/assets/images/tab.svg
@@ -0,0 +1,6 @@
+<!-- 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 28 28">
+  <path fill="context-fill" d="M15 11h-1V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v6H1a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2z"></path>
+</svg>
diff --git a/src/components/PrimaryPanes/SourcesTree.js b/src/components/PrimaryPanes/SourcesTree.js
@@ -38,11 +38,10 @@ import {
   getDirectories,
   isDirectory,
   nodeHasChildren,
-  updateTree,
-  getExtension
+  updateTree
 } from "../../utils/sources-tree";
 
-import { getRawSourceURL } from "../../utils/source";
+import { getRawSourceURL, getSourceClassnames } from "../../utils/source";
 import { copyToTheClipboard } from "../../utils/clipboard";
 import { features } from "../../utils/prefs";
 
@@ -72,13 +71,6 @@ type State = {
   highlightItems?: any
 };
 
-const sourceTypes = {
-  coffee: "coffeescript",
-  js: "javascript",
-  jsx: "react",
-  ts: "typescript"
-};
-
 class SourcesTree extends Component<Props, State> {
   focusItem: Function;
   selectItem: Function;
@@ -214,13 +206,14 @@ class SourcesTree extends Component<Props, State> {
     if (!nodeHasChildren(item)) {
       const obj = item.contents.get("id");
       const source = sources.get(obj);
-      if (source && source.get("isBlackBoxed")) {
-        return <img className="blackBox" />;
-      }
-
-      const sourceType = sourceTypes[getExtension(source)];
-      const classNames = classnames("source-icon", sourceType || "file");
-      return <img className={classNames} />;
+      return (
+        <img
+          className={classnames(
+            getSourceClassnames(source.toJS()),
+            "source-icon"
+          )}
+        />
+      );
     }
 
     return <img className="folder" />;
diff --git a/src/components/QuickOpenModal.js b/src/components/QuickOpenModal.js
@@ -22,9 +22,9 @@ import {
 import { scrollList } from "../utils/result-list";
 import {
   formatSymbols,
-  formatSources,
   parseLineColumn,
-  formatShortcutResults
+  formatShortcutResults,
+  formatSources
 } from "../utils/quick-open";
 import Modal from "./shared/Modal";
 import SearchInput from "./shared/SearchInput";
@@ -419,7 +419,7 @@ function mapStateToProps(state) {
 
   return {
     enabled: getQuickOpenEnabled(state),
-    sources: formatSources(getRelativeSources(state)),
+    sources: formatSources(getRelativeSources(state), getTabs(state).toArray()),
     selectedSource,
     symbols: formatSymbols(getSymbols(state, selectedSource)),
     symbolsLoading: isSymbolsLoading(state, selectedSource),
diff --git a/src/components/shared/ResultList.css b/src/components/shared/ResultList.css
@@ -26,6 +26,7 @@
   padding: 10px;
   flex-direction: row;
   border-bottom: 1px solid var(--theme-splitter-color);
+  line-height: 18px;
 }
 
 .result-list.small li {
@@ -57,8 +58,24 @@
   background: var(--grey-70);
 }
 
+.result-list li .result-item-icon {
+  background-color: var(--theme-comment);
+}
+.result-list li.selected .result-item-icon {
+  background-color: var(--theme-selection-color);
+}
+
+.result-list li .result-item-icon.tab {
+  mask-size: 150%;
+  mask-position: 2px 4px;
+}
+
+.result-list li img.result-item-icon {
+  width: 16px;
+  height: 16px;
+}
+
 .result-list li .title {
-  line-height: 1.5em;
   word-break: break-all;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/src/components/shared/ResultList.js b/src/components/shared/ResultList.js
@@ -53,6 +53,9 @@ export default class ResultList extends Component<Props> {
 
     return (
       <li {...props}>
+        <div>
+          <img className={item.icon} />
+        </div>
         <div id={`${item.id}-title`} className="title">
           {item.title}
         </div>
diff --git a/src/components/shared/Svg.css b/src/components/shared/Svg.css
@@ -47,6 +47,11 @@ img.source-icon {
   height: 15px;
 }
 
+img.result-item-icon {
+  height: 18px;
+  width: 18px;
+}
+
 img.domain {
   mask: url(/images/domain.svg) no-repeat;
 }
@@ -63,6 +68,10 @@ img.javascript {
   mask: url(/images/javascript.svg) no-repeat;
 }
 
+img.tab {
+  mask: url(/images/tab.svg) no-repeat;
+}
+
 img.react {
   mask: url(/images/react.svg) no-repeat;
 }
@@ -86,6 +95,13 @@ img.source-icon {
   display: inline-block;
 }
 
+img.result-item-icon {
+  mask-size: 100%;
+  margin-inline-end: 15px;
+  margin-inline-start: 5px;
+  display: inline-block;
+}
+
 .refresh svg,
 .shortcut svg,
 .worker svg {
diff --git a/src/components/shared/tests/__snapshots__/ResultList.spec.js.snap b/src/components/shared/tests/__snapshots__/ResultList.spec.js.snap
@@ -16,6 +16,9 @@ exports[`Result list should render the component 1`] = `
     role="option"
     title="value"
   >
+    <div>
+      <img />
+    </div>
     <div
       className="title"
       id="0-title"
@@ -38,6 +41,9 @@ exports[`Result list should render the component 1`] = `
     role="option"
     title="value 1"
   >
+    <div>
+      <img />
+    </div>
     <div
       className="title"
       id="1-title"
diff --git a/src/components/tests/__snapshots__/QuickOpenModal.spec.js.snap b/src/components/tests/__snapshots__/QuickOpenModal.spec.js.snap
@@ -865,6 +865,9 @@ exports[`QuickOpenModal showErrorEmoji false when count + query 1`] = `
                   onClick={[Function]}
                   role="option"
                 >
+                  <div>
+                    <img />
+                  </div>
                   <div
                     className="title"
                     id="undefined-title"
@@ -890,6 +893,9 @@ exports[`QuickOpenModal showErrorEmoji false when count + query 1`] = `
                   onClick={[Function]}
                   role="option"
                 >
+                  <div>
+                    <img />
+                  </div>
                   <div
                     className="title"
                     id="undefined-title"
diff --git a/src/reducers/sources.js b/src/reducers/sources.js
@@ -24,7 +24,7 @@ import type { Record } from "../utils/makeRecord";
 
 type Tab = string;
 export type SourcesMap = Map<string, SourceRecord>;
-type TabList = List<Tab>;
+export type TabList = List<Tab>;
 
 export type SourcesState = {
   sources: SourcesMap,
diff --git a/src/utils/quick-open.js b/src/utils/quick-open.js
@@ -3,13 +3,14 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 // @flow
-
+import classnames from "classnames";
 import { endTruncateStr } from "./utils";
-import { isPretty, getFilename } from "./source";
+import { isPretty, getFilename, getSourceClassnames } from "./source";
 
 import type { Location as BabelLocation } from "@babel/types";
 import type { Symbols } from "../reducers/ast";
 import type { QuickOpenType } from "../reducers/quick-open";
+import type { TabList } from "../reducers/sources";
 import type { RelativeSource } from "../selectors/getRelativeSources";
 import type { SymbolDeclaration } from "../workers/parser";
 
@@ -50,14 +51,16 @@ export function parseLineColumn(query: string) {
   }
 }
 
-export function formatSourcesForList(source: RelativeSource) {
+export function formatSourcesForList(source: RelativeSource, tabs: TabList) {
   const title = getFilename(source);
   const subtitle = endTruncateStr(source.relativeUrl, 100);
-
   return {
     value: source.relativeUrl,
     title,
     subtitle,
+    icon: tabs.includes(source.url)
+      ? "tab result-item-icon"
+      : classnames(getSourceClassnames(source), "result-item-icon"),
     id: source.id,
     url: source.url
   };
@@ -69,7 +72,8 @@ export type QuickOpenResult = {|
   title: string,
   subtitle?: string,
   location?: BabelLocation,
-  url?: string
+  url?: string,
+  icon?: string
 |};
 
 export type FormattedSymbolDeclarations = {|
@@ -121,10 +125,11 @@ export function formatShortcutResults(): Array<QuickOpenResult> {
 }
 
 export function formatSources(
-  sources: RelativeSource[]
+  sources: RelativeSource[],
+  tabs: TabList
 ): Array<QuickOpenResult> {
   return sources
     .filter(source => !isPretty(source))
-    .map(source => formatSourcesForList(source))
+    .map(source => formatSourcesForList(source, tabs))
     .filter(({ value }) => value != "");
 }
diff --git a/src/utils/source.js b/src/utils/source.js
@@ -15,12 +15,21 @@ import { basename } from "./path";
 
 import { parse as parseURL } from "url";
 export { isMinified } from "./isMinified";
+import { getExtension } from "./sources-tree";
 
 import type { Source, SourceRecord, Location } from "../types";
 import type { SymbolDeclarations } from "../workers/parser";
 
 type transformUrlCallback = string => string;
 
+export const sourceTypes = {
+  coffee: "coffeescript",
+  js: "javascript",
+  jsx: "react",
+  ts: "typescript",
+  css: "css"
+};
+
 /**
  * Trims the query part or reference identifier of a url string, if necessary.
  *
@@ -329,3 +338,11 @@ export function getTextAtPosition(source: Source, location: Location) {
 
   return lineText.slice(column, column + 100).trim();
 }
+
+export function getSourceClassnames(source: Object) {
+  if (source && source.isBlackBoxed) {
+    return "blackBox";
+  }
+
+  return sourceTypes[getExtension(source)] || "file";
+}
diff --git a/src/utils/sources-tree/utils.js b/src/utils/sources-tree/utils.js
@@ -38,7 +38,8 @@ export function isDirectory(url: Object) {
 }
 
 export function getExtension(source: Object): string {
-  const parsedUrl = parse(source.get("url")).pathname;
+  const url = source.get ? source.get("url") : source.url;
+  const parsedUrl = parse(url).pathname;
   if (!parsedUrl) {
     return "";
   }
