mozilla/universal-search-content

the iframe that we put inside the autocomplete dropdown

This repo is deprecated

The <iframe> approach is presently on hold. Follow the latest Universal Search developments at the mozilla/universal-search repository and on its Waffle.io board.

universal-search-content

the iframe that we put inside the autocomplete dropdown

develop

1. npm install
2. npm start
3. navigate to https://localhost:8080/

build

1. npm run build
2. find output in dist/

postmessage API docs

https://github.com/mozilla/universal-search-addon/blob/master/docs/API.md

debugging and performance tuning

1. Navigate to https://localhost:8080/
2. Show the debugger by running app.showDebugger() in the console
3. Enable event recording so that events can be replayed for debugging and performance tuning

universal-search-content's Issues

ensure only one row is highlighted in popup

Rows in the popup can be highlighted by either mouse hovering, or keying up/down. Currently, if you switch between key navigation and mouse navigation while the popup is open, you'll see two highlighted rows in the popup.

Simplest fix is probably to stop applying the mouse hover class via CSS, and apply it via JS instead. Then, the click and key handlers could both just remove .selected from all rows, and apply it to the one most recently selected row. Getting fancier, we could instead reify the selected state as a Selection object on the JS side, so that, on click or on navigational-key, we wouldn't have to touch the DOM to grab the selected item; instead, we'd ask the Selection which item it's attached to. @nchapman might have more specific ideas about the best approach for the current codebase.

This could be a fun, not too demanding front-end bug, in case anybody is feeling frisky (@pdehaan? @johngruen? @kitcambridge? @edmoz?).

s/Little Machine/recommendation/

Clearer/more obvious code, I suppose.

Prevent duplicates in top hits

Since there are URLs coming from multiple data sources, we should prevent duplicates.

Top hits don't always emtpy out

See #10.

Tab results should be styled differently

This should look like a tab and not show the mozaction: url.

audit docs

add tests

Add Sass-lint module to lint our Sass?

We're currently using it on Idea Town and it seems to be working well for us (and no Ruby dependencies).

Not sure if it'd be useful here, but currently reports a few warnings.

Add this to the package.json file's scripts section:

"sass-lint": "sass-lint src/styles/**/*.scss --verbose",

Create the following .sass-lint.yml file in the root of the repo:

rules:
  force-attribute-nesting: 0
  force-element-nesting: 0
  force-pseudo-nesting: 0
  nesting-depth: [2, max-depth: 3]
  no-ids: 0
  no-qualifying-elements: 0
  quotes: 0

Run this code from the Terminal:

$ npm i sass-lint -D
$ npm run sass-lint

You should get something like the following (assuming @chuckharmston's #76 PR is merged):

> [email protected] sass-lint /Users/pdehaan/dev/tmp/del/universal-search-content
> sass-lint src/styles/**/*.scss --verbose


src/styles/main.scss
    3:16  warning  Hex values should use the shorthand format - 3 characters where possible     hex-length
    7:15  warning  Hex notation should all be lower case                                        hex-notation
    9:16  warning  Hex values should use the shorthand format - 3 characters where possible     hex-length
   33:3   warning  Selectors must be placed on new lines                                        single-line-per-selector
   33:13  warning  Selectors must be placed on new lines                                        single-line-per-selector
   34:3   warning  Expected `-moz-user-select`, found `box-sizing`                              property-sort-order
   35:3   warning  Expected `box-sizing`, found `-moz-user-select`                              property-sort-order
   35:3   warning  Vendor prefixes should not be used                                           no-vendor-prefixes
   71:17  warning  Indentation of 16, expected 4                                                indentation
   72:17  warning  Indentation of 16, expected 4                                                indentation
  156:27  warning  Color functions such as 'rgba' should only be used in variable declarations  no-color-literals
  156:41  warning  Don't include leading zeros on numbers                                       leading-zero
  202:49  warning  Quotes around URLs are required                                              url-quotes
  206:58  warning  Quotes around URLs are required                                              url-quotes
  212:58  warning  Quotes around URLs are required                                              url-quotes
  215:69  warning  Quotes around URLs are required                                              url-quotes
  219:1   warning  Rule `.icon` should be merged with the rule on line 195                      no-mergeable-selectors
  230:48  warning  Quotes around URLs are required                                              url-quotes
  251:15  warning  Color literals such as 'eee' should only be used in variable declarations    no-color-literals
  252:28  warning  Color literals such as 'ccc' should only be used in variable declarations    no-color-literals
  256:12  warning  Color literals such as '555' should only be used in variable declarations    no-color-literals
  267:19  warning  Color literals such as 'fff' should only be used in variable declarations    no-color-literals
  268:25  warning  Color literals such as 'ccc' should only be used in variable declarations    no-color-literals
  273:21  warning  Color literals such as 'ddd' should only be used in variable declarations    no-color-literals

✖ 24 problems (0 errors, 24 warnings)

Improve render performance

if user mouses over popup, then hits down key, I see two selections

probably just need to clear selection when any navigational key event occurs, dunno if the mouse selection differs from the key selection

Measure user engagement with the iframe

Data we might want to collect:

• when the user interacts with the dropdown, how far down the list do they go?
• how many chars do they type before interacting with the dropdown?
• do users more often click or key to their results? (could key vs. click help us differentiate between power users and casual users?)

(Partially extracted from description of mozilla/universal-search-addon#6)

Add navigational search results

Favicons: render favicon data-uri

We currently use a prototype favicon proxy service[1] to grab favicons. We don't want to keep using it.

Once mozilla/universal-search-addon#139 lands, the addon will be sending over a usable, serialized favicon image with each local history result.

This bug collects work to render the serialized image (just set the data-uri as the favicon img src?).

[1] https://github.com/nchapman/summarizer-server

Remove section headings

Remove the subsections and blend results together

Sometimes items don't have titles.

Not sure how or why, but sometimes pages that definitely have HTML <title> elements aren't having titles handed off to the content:

This bug is in two parts:

1. Why is that happening? It shouldn't. mozilla/universal-search-addon#142
2. The iframe should handle it better, in the event that it does happen. (this bug)

Edited to undo my inaccurate editing, sorry!

favicons flicker if you type too fast

(was mozilla/universal-search-addon#38)

---

Steps to reproduce:

1. I installed the add-on in my Aurora browser in a new profile and restarted my browser.
2. If I type too fast in my awesum bar, I notice that the favicons kind of flicker.

Actual results:

Favicons flicker if you type too fast.

Workaround:

Slow. Your. Role. and. Type. Slower.

---

favicons not rendering for certain sites

Using Universal Search Addon @ 4.0.2 and just randomly noticed that if I search for "abo" (I was trying to go to about:addons) and noticed that I'm getting a broken/missing favicon for www.abo-ncle.org. Seems a bit unexpected since the site actually has a favicon.ico file, but regardless we should fallback to a placeholder icon while the real icon loads (or whatever).

Add CHANGELOG?

It may be nice to have a handy CHANGELOG to this repo so we can see what changes betweenst releases, etc.

Possibly use something like:

• https://www.npmjs.com/package/gulp-changelog-release
• https://www.npmjs.com/package/gulp-conventional-changelog

(ref: mozilla/universal-search-addon#65)

Calculate dominant color of favicon on the fly

For the purposes of doing something like this:

Dependencies:

• #90
• #64
• #65 (sort of)
• mozilla/universal-search-addon/#139

Convert all the icons to sprite sheets

Why? Because less trips to the server.

We'll need a 1x and 2x version.

Maybe we could even use data-uris?

click code assumes top hit is always a URL

Now that we have a resultType in the click response packet, we should find a cleaner way of assigning the type to a given row, and use that (instead of my horrible jQuery one-liner) to decide what type of result it is.

UI Tweaks

Updated mock from Bryan:

We don't have access to the dominant color of the favicon, and some preliminary tests have it being a little too slow, so we'll use a light grey color for the first pass at it.

Highlight search string matches in results list

Per mock. Note that it also matches in URLs.

Lint code on Git prepush hook

Ref: mozilla/universal-search-addon#69

Probably just use husky like we did for Chronicle and keeps it consistent w mozilla/universal-search-addon. Just a wrapper for gulp lint so code is linted before we check in and have Travis re-lint it.

Integrate server results into UI

Suppose we obtain results from a source other than FF, for instance, a server with weather data.

We want to figure out how to integrate that data into the autocomplete popup.

This should probably just use xhr for a first exploration, keep the networking story slow but simple.

Substitute history icon for search suggestions if they've been used before

Per @bryanbell's mockup:

Empty out views on popupclose?

It seems like every time I open the popup, I see the previous popup content. It might feel nicer to just blank it out when there's no content - maybe just set visibility hidden?

Popup should resize to fit the content

Our MVP UI spec shows varying popup heights. We need an API on the chrome side to specify this.

search dropdown has a high z-index and can interfere with other popups

This is pretty edge case, but I'm a firm believer in filing everything...

I noticed that the search dropdown menu has a high z-index and happens to overlap my Moom window sizing popup menu.

Steps to reproduce:

1. Use Moom window manager (or something that adds some dropdown to one of the Mac buttons near the search bar.
2. Enter a search term into the address bar.
3. Hover over the green "maximize" button to bring up the Moom context menu.

Actual results:

the Moom window opens beneath the search content iframe.

Expected results:

Moom on top.

---

For reference here's what my Moom window should look like:

Move tiny machine to AWS

Currently tiny machine is on Heroku. Let's move it to AWS

Little Machine preview images with white backgrounds look strange

Example:

Customize CSS to individual platforms?

At some point, we should figure out what this would idiomatically look like on Windows and Linux and implement an approximation of that. This would probably involve passing the platform from the addon to the iframe, making a CSS class out of that, and keying all of our pretties off of it.

Favicons: remove summarizer

We currently use a prototype favicon proxy service[1] to grab favicons. We don't want to keep using it.

Once mozilla/universal-search-addon#139 lands, the addon will be sending over a usable, serialized favicon image with each local history result.

Task here: once #64 lands, remove all references to the summarizer server from the front-end.

[1] https://github.com/nchapman/summarizer-server

Measure user engagement

Whenever the user types in the urlbar, the popup opens.

When the popup closes, for whatever reason, either the user interacted with the iframe, or the popup will send the iframe a popupclose event.

We should be able to measure, on the iframe side,

• whether the user engaged with one of the items
• which item (one- or two-dimensional coordinate system)
• which layout heuristic was used

We can send this info on every popupclose and measure the effectiveness of different UI layouts and different ordering heuristics.

Refactor handling of Enter key

We currently fake a mousedown to handle Enter keys (see #37).

Generalize the UI code to handle the key event directly.

Consider excluding search engine results from history items

Those two Google items are a bit awkward, and are getting in the way of mo' real-er content. Perhaps we should exclude results from known search engine domains?

Dedupe items in the iframe

Let's avoid showing a search suggestion and its result, or several items containing the same domain

Figure out AMO distribution and review timelines

Add Gulp

Not sure if we want to add Grunt to this repo to run ESLint, Webpack, generate CHANGELOG files, and manage npm versioning (via grunt-bump or whatever).

Use includePaths for normalize dependency?

I randomly noticed in src/styles/main.scss that we're doing a not-so-fancy @import '../../node_modules/... to bring in the normalize dependency.

I'm not a webpack or Sass expert, but I think we may be able to simplify that slightly using the node-normalize-scss dependency's includePaths var.

Maybe something like this...

1. Change /src/styles/main.scss:1 to:

   @import 'normalize';

2. Add this line to webpack.config.js:2:

   const normalize = require('node-normalize-scss');

3. Finally add the normalize includePaths[] to the sass-loader in webpack.config.js:23:

   { test: /\.scss$/, loader: 'style!css!sass?sourceMap&includePaths[]=' + normalize.includePaths },

Current tab + bookmark conflicts

If an item is both a bookmark and an unselected tab, we currently show the switch to tab icon and behavior. Is that correct?

Without Pitchfork result in an unselected tab:

#### With Pitchfork result in an unselected tab:

Search dropdown leaks outside of Firefox when browser is partially offscreen

I noticed that if my browser is partially offscreen, then the dropdown button gets pushed outside of the browser window, which was a bit unexpected.

ESLint results

Setup:

% npm i eslint babel-eslint -D

And then add the following script to the package.json file:

"lint": "eslint .",

NOTE: Ideally we'd use something like Grunt/Gulp to run tasks, but npm is good enough for now.

Running:

% npm run lint

---

Here's the results from a semi-quirky ESLint setup:

$ npm run lint

> [email protected] lint /Users/pdehaan/dev/github/universal-search-content
> eslint .

src/adapters/search_suggestions_adapter.js
  14:118  error  Missing semicolon  semi
  15:115  error  Missing semicolon  semi

src/models/activity_result.js
  24:3  error  Unexpected trailing comma  comma-dangle

src/views/index_view.js
   3:7   error  NavigationalSearchSuggestionsIndex is defined but never used  no-unused-vars
  53:49  error  Missing semicolon                                             semi
  55:28  error  Expected '===' and instead saw '=='                           eqeqeq
  74:47  error  Missing semicolon                                             semi

webpack.config.js
  2:6  error  webpack is defined but never used  no-unused-vars

✖ 8 problems (8 errors, 0 warnings)

---

/.eslintrc

parser: babel-eslint

env:
  browser: true
  es6: true
  node: true

rules:
  indent: [2, 2]
  no-console: 0
  no-underscore-dangle: 0
  no-unused-vars: [2, {vars: all, args: none}]
  no-use-before-define: [2, nofunc]
  quotes: [2, single]
  strict: 0

---

/.eslintignore

dist/

Remove normalize.css and install via Bower (or something)

See /src/styles/vendor/normalize.css

It may be nice if we include that via Bower or something, rather than embed it directly in the repo.
If Bower is a deal breaker, some potential alternatives are:

• https://www.npmjs.com/package/normalize-scss
• https://www.npmjs.com/package/normalize-css

---

UPDATE: Ultimately I went with node-normalize-scss since it didn't have a compass dependency and I couldn't get the two suggestions above to work. See #47

Use SVG effects instead of separate resources to change icon colors

We should be able to use the CSS filter property in combination with the SVG <feColorMatrix> element to change our icon colors without requiring a second resource entirely.

I had trouble making this particular combination of techniques work with our build system, which base64s SVGs inline in the CSS, so I'm punting it for now.

Enable A/B testing of results blending heuristics

1. Vary the algorithm used to decide how to render elements visually
2. Measure the engagement rate with each: was an item clicked, which item was it, which layout method was it
3. Send it home for offline analysis

Placeholder images

We should have placeholder images for both favicons and Tiny Machine preview images. Perhaps those are set as a background image, and the overlaying tag has opacity: 0 until the img.onLoad fires?

Remove hard coded color references from Sass

Ref: #83

---

I ran Sass-lint locally against a recent PR and it turns out there are a few hard-coded color values in the Sass. Not sure if we should variable-ize them to make sure we don't have 4 very similar variants of gray.

  156:27  warning  Color functions such as 'rgba' should only be used in variable declarations  no-color-literals
  251:15  warning  Color literals such as 'eee' should only be used in variable declarations    no-color-literals
  252:28  warning  Color literals such as 'ccc' should only be used in variable declarations    no-color-literals
  256:12  warning  Color literals such as '555' should only be used in variable declarations    no-color-literals
  267:19  warning  Color literals such as 'fff' should only be used in variable declarations    no-color-literals
  268:25  warning  Color literals such as 'ccc' should only be used in variable declarations    no-color-literals
  273:21  warning  Color literals such as 'ddd' should only be used in variable declarations    no-color-literals

We should clear Little Machine results as soon as they're no longer congruent with the search terms

As demonstrated in this video, Little Machine results are not immediately cleared when they no longer match the search terms; instead, they wait for updated results from the service. Screencap from the ~100ms where it's wrong

It's a little subtle, but it feels pretty bad.

Enable A/B testing of styles

The simplest way to A/B test the layout of a given set of data is probably to toggle a top-level class on the body tag / container element of the iframe.

Let's figure out some alternative layouts, add an API method to toggle manually, and also use a coinflip to decide which to show for a given window.