Skip to content
This repository has been archived by the owner on Feb 26, 2021. It is now read-only.

Commit

Permalink
React and most popup functionality (#507)
Browse files Browse the repository at this point in the history 
* Fix #491, convert the popup to use React
* Remove popup.js and add to gitignore. It is auto-generated by script "npm run build:jsx"
* Fixes Issue #502 Remove card rendering
  • Loading branch information
@jenniferharmon @ianb
jenniferharmon authored and ianb committed Nov 1, 2019
1 parent 9114b22 commit 808f57c
Show file tree
Hide file tree
Showing 10 changed files with 899 additions and 806 deletions.
2 changes: 2 additions & 0 deletions .eslintignore
View file
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
extension/js/vendor/
extension/popup/popupController.js
extension/popup/popupView.js
4 changes: 4 additions & 0 deletions .eslintrc.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,16 @@ env:
node: true
webextensions: true

ecmaFeatures:
jsx: true

extends:
- eslint:recommended
- plugin:mozilla/recommended

plugins:
- mozilla
- react

globals:
Metrics: true
Expand Down
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ extension/css/vendor/
extension/views/CHANGELOG.html
extension/views/lexicon.html
extension/buildSettings.js
extension/popup/popupController.js
extension/popup/popupView.js
node_modules
npm-debug.log
package-lock.json
Expand Down
164 changes: 15 additions & 149 deletions extension/popup/popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,91 +15,13 @@ body,
font-family: "Inter" !important;
}

.listening #voice-input {
display: block;
}

.listening
:-moz-any(#transcript, #popup-settings, #back-icon, #card, #error-message) {
display: none;
}

.processing
:-moz-any(#suggestions, #feedback, #popup-settings, #back-icon, #card, #error-message) {
display: none;
}

.processing #transcript {
display: block;
}

#text-input {
opacity: 0;
}

.typing #text-input {
opacity: 1;
}

.typing :-moz-any(#text-input, #back-icon) {
display: block;
}

.typing #text-input > :not(span) {
display: block !important;
}

.typing :-moz-any(#voice-input, #card) {
display: none;
}

:-moz-any(.success, .error, .searchResults)
:-moz-any(#suggestions, #feedback, #popup-settings, #card) {
display: none;
}

.success.hasCard #card {
display: block;
}

.success.hasCard #text-input,
.success.hasCard #error-message {
display: none;
}

.success.hasCard #zap-wrapper {
transition-property: max-height;
max-height: 0;
overflow: hidden;
transition-duration: 0.6s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
transition-delay: 2s;
}

.success.hasCard #transcript {
transition-property: font-size padding;
font-size: 1.5rem;
text-align: left;
padding: 0.5rem 0;
transition-duration: 0.6s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
transition-delay: 2s;
}

.settings :-moz-any(#popup-settings, #back-icon) {
display: block;
}

.settings #popup-content {
display: none;
}

.settings #settings-icon {
.hidden {
visibility: hidden;
}

#popup {
min-height: 200px;
min-width: inherit;
width: 350px;
padding: 1rem;
}
Expand Down Expand Up @@ -164,7 +86,19 @@ body,
font-style: italic;
}

#voice-input {
#search-results,
#text-input,
#error-message {
margin: 40px 0;
}

#voice-input,
#text-input,
#search-results,
#error-message,
#error-autoplay,
#transcript,
#text-display {
text-align: center;
}

Expand Down Expand Up @@ -213,7 +147,6 @@ body,
}

#send-btn-wrapper {
display: none;
text-align: center;
margin-top: 1em;
}
Expand Down Expand Up @@ -258,77 +191,10 @@ body,
fill: #b3b3b3;
}

/* CARD INTERFACE */
#card {
/* border-top: 1px solid #0c0c0d10; */
border-bottom: 1px solid #0c0c0d10;

/* padding-top: 0.8em; */
}

#card-header {
display: none;
font-weight: 300;
font-size: 1.7em;
letter-spacing: 0.3px;
color: #000;
margin-bottom: 0.4em;
}

#card-image {
display: inline-block;
}

#card-image > img {
border-radius: 5px;
max-width: 50%;
}

#card-summary {
font-size: 0.85em;
margin-top: 1em;
line-height: 1.3em;
display: inline-block;
}

#card-ack {
display: flex;
justify-content: space-between;
margin-top: 1.2em;
font-size: 0.7em;
}

#ddg-ack,
#source-ack {
margin-bottom: 0.8em;
display: flex;
}

#source-ack {
display: flex;
}

#source-ack > span {
margin-right: 0.7em;
}

#card-source > a {
color: #0a84ff;
}

.sep {
/* border-left: 1px solid #0c0c0d10; */
}

#ddg-ack > a {
color: #aaa;
margin-left: 0.7em;
}

#ddg-logo {
max-width: 1.2em;
}

a#lexicon {
text-decoration: none;
color: #0a84ff;
Expand Down
141 changes: 5 additions & 136 deletions extension/popup/popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,152 +6,21 @@
<link rel="stylesheet" href="popup.css" />
</head>
<body>
<div id="popup" class="listening">
<div id="popup-header">
<div id="left-icon">
<svg
id="back-icon"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewbox="0 0 16 16"
>
<path
fill="context-fill"
d="M6.414 8l4.293-4.293a1 1 0 0 0-1.414-1.414l-5 5a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414z"
></path>
</svg>
</div>
<div id="header-title">
Listening
</div>
<div id="close-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewbox="0 0 16 16"
>
<path
fill="context-fill"
d="M9.061 8l3.47-3.47a.75.75 0 0 0-1.061-1.06L8 6.939 4.53 3.47a.75.75 0 1 0-1.06 1.06L6.939 8 3.47 11.47a.75.75 0 1 0 1.06 1.06L8 9.061l3.47 3.47a.75.75 0 0 0 1.06-1.061z"
></path>
</svg>
</div>
</div>
<div id="popup-content">
<div id="voice-input">
<div id="zap-wrapper">
<div id="zap"></div>
</div>
<div id="suggestions">
<p id="prompt">
You can say things like:
</p>
<div id="suggestions-list">
<p class="suggestion">Go to the New York Times</p>
<p class="suggestion">Search for hiking in Denver</p>
<p class="suggestion">Find my calendar tab</p>
</div>
<div>
<a
target="_blank"
rel="noopener"
id="lexicon"
href="../views/lexicon.html"
>
More things you can say
</a>
</div>
</div>
<div id="transcript"></div>
<div id="error-message"></div>
<div style="display: none" id="text-display"></div>
<div id="error-autoplay" style="display: none">
<img
src="images/autoplay-instruction.png"
style="width: 90%; height: auto"
alt="To enable autoplay, open the site preferences and select Allow Audio and Video"
/>
</div>
<div id="search-results" style="display: none">
<!-- FIXME: alt="" isn't correct here: -->
<img id="search-image" style="display: none" alt="" />
<div id="search-show-next" style="display: none">
Say <strong>next result</strong> to view: <br />
<strong id="search-show-next-title"></strong>
<span id="search-show-next-domain"></span>
</div>
</div>
<div id="feedback">
<div id="feedback-prompt">
How was your last experience?
</div>
<div id="most-recent-query">Search for shoes on Amazon</div>
</div>
</div>
<div id="text-input">
<input type="text" id="text-input-field" autofocus="1" />
<div id="send-btn-wrapper">
<button id="send-text-input">GO</button>
</div>
</div>
<div id="card">
<div id="card-header"></div>
<div id="card-image"><img alt="" src="" /></div>
<div id="card-summary"></div>
<div id="card-ack">
<div id="ddg-ack">
<img alt="" id="ddg-logo" src="./images/dax-logo.svg" /><a
href="https://duckduckgo.com/"
>Results from DuckDuckGo</a
>
</div>
<div class="sep"></div>
<div id="source-ack">
<span>Source:</span>
<div id="card-source">
<a id="card-source-link"></a>
</div>
</div>
</div>
</div>
</div>
<div id="popup-footer">
<div id="settings-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewbox="0 0 16 16"
>
<path
fill="context-fill"
d="M15 7h-2.1a4.967 4.967 0 0 0-.732-1.753l1.49-1.49a1 1 0 0 0-1.414-1.414l-1.49 1.49A4.968 4.968 0 0 0 9 3.1V1a1 1 0 0 0-2 0v2.1a4.968 4.968 0 0 0-1.753.732l-1.49-1.49a1 1 0 0 0-1.414 1.415l1.49 1.49A4.967 4.967 0 0 0 3.1 7H1a1 1 0 0 0 0 2h2.1a4.968 4.968 0 0 0 .737 1.763c-.014.013-.032.017-.045.03l-1.45 1.45a1 1 0 1 0 1.414 1.414l1.45-1.45c.013-.013.018-.031.03-.045A4.968 4.968 0 0 0 7 12.9V15a1 1 0 0 0 2 0v-2.1a4.968 4.968 0 0 0 1.753-.732l1.49 1.49a1 1 0 0 0 1.414-1.414l-1.49-1.49A4.967 4.967 0 0 0 12.9 9H15a1 1 0 0 0 0-2zM5 8a3 3 0 1 1 3 3 3 3 0 0 1-3-3z"
></path>
</svg>
</div>
<div id="moz-voice-privacy">
<strong>For Mozilla internal use only</strong>
<!--
<a href="">How Mozilla ensures voice privacy</a>
-->
</div>
<div></div>
</div>
</div>
<div id="popup-container"></div>
<script src="../js/vendor/react.production.min.js"></script>
<script src="../js/vendor/react-dom.production.min.js"></script>
<script src="../buildSettings.js"></script>
<script src="../log.js"></script>
<script src="../js/vendor/sentry.js"></script>
<script src="../catcher.js"></script>
<script src="../util.js"></script>
<script src="../settings.js"></script>
<script src="../js/vendor/lottie.min.js"></script>
<script src="ui.js"></script>
<script src="vad.js"></script>
<script src="../js/vendor/webrtc_vad.js"></script>
<script src="voice.js"></script>
<script src="voiceShim.js"></script>
<script src="popup.js"></script>
<script src="popupView.js"></script>
<script src="popupController.js"></script>
</body>
</html>
Loading

0 comments on commit 808f57c

Please sign in to comment.