Fixes: CORE-3190 (again) we tried fixing this jira in g/201294 but it
still Doesn’t work for schools that have a custom JS file
We used to not load any of our webpack code on the mobile login screen
and so we needed to load a bare copy of jQuery so that accounts with
Custom JS files could rely on it.
But as of a while ago, we do load our own webpack bundles on that
Page, which means we now set a global window.jQuery variable. Which
means by loading a second copy, it was causing things to break because
things that relied on the global window.jQuery variable would get one
copy of jQuery and anything that used webpack to
`import $ from ‘jquery’` would get a different copy.
and the module ‘jquery-ui-touch-punch’ was just relying on looking for
the global window.jQuery and so it broke because `jqueryUI mouse` was
not present in that copy of jquery.
Test plan:
* you have to do this with a fully minified prod webpack build like on
portals
* have a custom js file set up in the theme editor that does something
Like `alert(‘I got loaded and this is jQuery version ’ + $.fn.jquery)`
* go to the mobile login page on a mobile device or using a browser with
The mobile device simulator
* your custom JS should load (aka it should alert)
* no errors should be present in the console
* click on the “forgot password” link
* it should work
Change-Id: I0c38d2bf08f748d60a8df2d993907edb1e1bf331
Reviewed-on: https://gerrit.instructure.com/201656
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
Tested-by: Jenkins
QA-Review: Clay Diffrient <cdiffrient@instructure.com>
Product-Review: Clay Diffrient <cdiffrient@instructure.com>
closes: CORE-2746
THis is an attempt to make loading our Lato font faster for our end
users. From talking to @pam, it is our understanding that at the time
we introduced this, google did not have all the extended latin
characters, and that is why we served it ourselves.
But now google *does* include the extended latin characters so
it should be fine?
The good thing about loading it from google is that there is more of a
Likelihood that our users will already have this cached.
Also, to be honest, I still think we should just not download a webfont
and rely on system fonts that users already have. But this is my attempt
to try to see if we can make it faster before resorting that. Because I
know design really likes it :)
Test plan:
* the Lato font on pages should show up the same as it did before but
page
* load speeds should be faster as reported by lighthouse or our real
user monitoring
Change-Id: Ibcf75c74f569b6b457fe42d3be91cf6006e560fa
Reviewed-on: https://gerrit.instructure.com/188464
Tested-by: Jenkins
Reviewed-by: Brent Burgoyne <bburgoyne@instructure.com>
QA-Review: Brent Burgoyne <bburgoyne@instructure.com>
Product-Review: Brent Burgoyne <bburgoyne@instructure.com>
test plan:
- tests pass and everything still works
Change-Id: I73540f1b5e4647c19f3446ce558bce7e4dfde684
Reviewed-on: https://gerrit.instructure.com/180736
Tested-by: Jenkins
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
QA-Review: Daniel Sasaki <dsasaki@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
I guess since our team owns these we can opt them in now
Test plan:
* nothing should change
Change-Id: Ic7207e1033869ef60644c41bd5c80a3e8532a6dd
Reviewed-on: https://gerrit.instructure.com/171471
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
Tested-by: Jenkins
QA-Review: Ryan Shaw <ryan@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
closes: CORE-1329
See: https://www.zachleat.com/web/comprehensive-webfonts/#critical-foft-preload
Test plan:
* the lato font should load a little faster, especially for repeat
page views
Change-Id: Ib070136ae02beb9e2f0213cc0247b2180de20666
Reviewed-on: https://gerrit.instructure.com/147704
Reviewed-by: Brent Burgoyne <bburgoyne@instructure.com>
Tested-by: Jenkins
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
closes CORE-822
test plan:
- go to a page with an rce
- type some text
- inspect element on the text
- look at computed styles
- font-family should start with "Lato"
Change-Id: I339c093e5a15d48f3a57e86e492afb3bffb5efeb
Reviewed-on: https://gerrit.instructure.com/141096
Reviewed-by: Brent Burgoyne <bburgoyne@instructure.com>
Reviewed-by: Ryan Shaw <ryan@instructure.com>
Tested-by: Jenkins
QA-Review: Jeremy Putnam <jeremyp@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
Closes: CORE-15
Test plan:
* Add a custom JS file to your account in theme editor
(e.g.: something like `console.log(‘this is jquery’, $)`)
* Log out
* Go to login screen from a mobile device (or you can cheat with
http://localhost:3000/login/canvas?mobile=true)
* make sure that your custom js gets loaded and that jquery does too
Change-Id: I229609a353bc14db97318ef708dbfb46ca18113c
Reviewed-on: https://gerrit.instructure.com/131374
Tested-by: Jenkins
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
fixes CNVS-34165
test plan:
- make sure you are running with RAILS_LOAD_ALL_LOCALES=1
for (web and webpack if you are running docker)
- change locale to each of es, de, fr, fr-ca, he and pl
- create/edit a quiz
- in the due date try setting the due date to a day in each month
- no need to save
- make sure after clicking the day it doesn't change to a different
month or year
Change-Id: I2da96f80678193e084786d867b27f2944a6e402c
Reviewed-on: https://gerrit.instructure.com/119926
Tested-by: Jenkins
Product-Review: brian kirkby <bkirkby@instructure.com>
Reviewed-by: Brent Burgoyne <bburgoyne@instructure.com>
Reviewed-by: brian kirkby <bkirkby@instructure.com>
QA-Review: Tucker McKnight <tmcknight@instructure.com>
refs: CNVS-37358
This is needed for the big .coffee to .js conversion because it uses
Object.values in some spots
Test plan
Open canvas in ie11 and open the developer tools.
Type this: Object.values({a: 1, b: 2})
it should log: [1,2] and not throw an error
Change-Id: Ia05606a3065d4c3cc46d7deadfe828ab77136e4b
Reviewed-on: https://gerrit.instructure.com/114322
Tested-by: Jenkins
Reviewed-by: brian kirkby <bkirkby@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
so we can use Map properly in the canvas planner
refs FALCOR-224
test plan:
* automated tests pass
Change-Id: I444c963b5094372a82dbef16479ff7e442127d52
Reviewed-on: https://gerrit.instructure.com/113281
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
Tested-by: Jenkins
Product-Review: Jon Willesen <jonw+gerrit@instructure.com>
QA-Review: Jon Willesen <jonw+gerrit@instructure.com>
closes: CNVS-36805
I’m working towards turning on babel for public/javascripts
And so instead of having to worry about selectively adding excludes
For things in public/javascripts/vendor that we haven’t modified,
I’m just moving things out of there.
This commit just relies on gulp rev to put these files in
public/dist/* instead of having the intermediate artifacts
hanging around in public/javascripts/vendor/* that then
get copied/revved to public/dist by gulp rev.
This also minifies any gulp-revved js in production
Test plan:
* Nothing should change
* run compile_assets
* the javascript for your timezone data should load
just fine like it did before
* the lato fontface observer should still be working
* go to the site in IE, there should not be any
Js errors (like “Promise is not defined”)
Change-Id: I10b2e3f102276ab0ef5f58cbc0d981f5aa800522
Reviewed-on: https://gerrit.instructure.com/111251
Tested-by: Jenkins
Reviewed-by: Brent Burgoyne <bburgoyne@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
closes: CNVS-34912
by starting to download scripts as soon as possible
in the head, but marking them as ‘defer’, the browser
will start downloading them sooner than if it only
knew about them once it got to the bottom of parsing
the html for the body. but it will still wait to execute
them after the body html is parsed, having the
same effect as if they were right before the </body>
test plan:
* this affects the load order of scripts on the page
but does not actually make any script changes, nor
change which scripts get loaded. so it theoretically
shouldn't change anything but maybe go visit some
of less frequently trafficked parts of the app and
make sure there it works
* upload a custom js file in your theme editor that uses the
jQuery "$" variable. make sure that works and that jquery
is available by the time your script loads
* if your themeeditor custom javascript file doesn’t
require(…) anything, you should not see the console
message about require-ing internal canvas modules
Test to make sure jQuery is available to custom JS
on the mobile login screen
* do something like this in your custom js file:
alert('there are ' + $('script').length + ' scripts on this page')
* go to http://c.dev/login/canvas?mobile=1
* you should see it say there are at least 2 scripts on the page
Change-Id: Ia7d9f6372b7372ad0de7a4c91c4c6bdc11be67cc
Reviewed-on: https://gerrit.instructure.com/101871
Reviewed-by: Brent Burgoyne <bburgoyne@instructure.com>
Tested-by: Jenkins
QA-Review: Tucker McKnight <tmcknight@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
Change-Id: I041d38bc6f7df2b84dcc965c18cf9ac70f9d7929
Reviewed-on: https://gerrit.instructure.com/102968
Tested-by: Jenkins
Reviewed-by: Simon Williams <simon@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
Fixes: CNVS-35153
Test plan:
rm -rf node_modules && yarn install && node_modules/.bin/gulp rev
It should work
rm -rf node_modules && npm install && node_modules/.bin/gulp rev
Should also work
Change-Id: I9ac28df95f821e74ee062eca012e247d3f1f01b1
Reviewed-on: https://gerrit.instructure.com/102967
Tested-by: Jenkins
Reviewed-by: Simon Williams <simon@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
fixes: CNVS-34796
emitting assets for each of these timezones adds a
non-trivial amount of time to the webpack build.
by making it so webpack doesn’t have to do anything
about them, it goes a lot faster since there is just
a lot less work to do.
this commit also uses npm to get `timezone` instead
of a git checkout
test plan:
in requireJS & webpack,
* load a few pages, make sure your timezone data loads
* automated specs should pass
Change-Id: Ice3b7b6d4c7ac53315d5cb238d4213afb9faddc5
Reviewed-on: https://gerrit.instructure.com/101116
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
Reviewed-by: Simon Williams <simon@instructure.com>
QA-Review: Jeremy Putnam <jeremyp@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
Tested-by: Jenkins
fixes: CNVS-31779 [webpack] bundle file size
test plan:
* using webpack, look at the network panel in
the chrome developer console.
* the total ammount of javascript loaded for any
given page should be much less than before this commit
and about on par with what requireJS loads for the same page.
* use chrome network panel to throttle to "Regular 3G"
* from both a clean cache and a primed cache:
* make sure that the total time to render the page
is about on par with requireJS
first change: load webpack chunks from CDN
fixes: CNVS-32261
test plan:
* run `npm run webpack-production`
* check your page, it should load js files and chunks
from the same hostname the page is served from.
* now set a host: in config/canvas_cdn.yml
(for testing locally, I just set it to http://127.0.0.1:3000,
* restart rails and reload the page, now the scripts and
chucks should come from that new hostname
second change:include fingerprints in webpack bundle and chunk filenames
closes: CNVS-28628
with this change we don't need to run `gulp rev`
after running webpack and we can load both the bundle
and chunk files safely from the cdn, since they will
have content-based fingerprints so we can tell
browsers to cache them forever. (we set those
http caching headers in lib/canvas/cdn/s3_uploader.rb:53)
test plan:
* for both dev and production
* run `npm run webpack` (or `npm run wepack-production`)
* with a cdn configured in canvas_cdn.yml, run:
RAILS_ENV=<dev or prod> bundle exec rake canvas:cdn:upload_to_s3
* check to make sure that the page loads the webpack js,
that there are no errors, and it all came from the cdn
third change: properly handle moment locale & timezone in webpack
test plan:
(see application_helper_spec.rb)
* set a non-default user timezone, context timezone
and locale
* dates should show up in your timezone and and
the date helper strings should be in your language
better handling of moment custom locales
closes: CNVS-33811
since we now have hatian and maori, we need to do this in
a way that is not just a one-off for maori
test plan:
* set your locale to maori
* in webpack & requireJS make sure dates show up right
Change-Id: I34dbff7d46a1047f9b459d5e1c0d141f435d42fb
Reviewed-on: https://gerrit.instructure.com/95737
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
Tested-by: Jenkins
QA-Review: Benjamin Christian Nelson <bcnelson@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
if an assignment is locked by having any due date
in a closed grading period all fields are locked except
RCE, submission type fields, peer review fields.
closes: CNVS-30899
Test Plan
- lock an assignment edit page by having at least one
due date in a closed grading period
- create an assignment with at least one due date in
a closed grading period
- go to the edit the assignment page
(e.g. /courses/1/assignments/1/edit)
- all fields are locked except for
- description (RCE)
- submission type
- peer reviews
- if an assignment is not locked, all fields should
be editable as normal
- if the user is an admin, they can edit anything they want
Change-Id: I5cbee4e552331915280c949f467565069aee8743
Reviewed-on: https://gerrit.instructure.com/93380
Reviewed-by: Jeremy Neander <jneander@instructure.com>
Reviewed-by: Shahbaz Javeed <sjaveed@instructure.com>
QA-Review: Anju Reddy <areddy@instructure.com>
Product-Review: Christi Wruck
Tested-by: Jenkins
fixes: CNVS-33446
test plan:
* turn on webpack
* go to any page
* you should not get a 404 for lato-fontfaceobserver.js
and the lato font should load fine
Change-Id: Ifd579b1590ba208c17cbfeb34ae9c59a167fb0a0
Reviewed-on: https://gerrit.instructure.com/95734
Tested-by: Jenkins
Reviewed-by: Chris Hart <chart@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
Fixes: CNVS-30278
The product design team wants to standardize
on Lato across all Instructure products. See
JIRA for more information.
With this change, we no longer have to use
font-weight: 300 etc to make the right
weight of Helvetica show up. We can go back
to simply using bold and normal, etc.; so
those rules have been updated in this
commit.
Test plan:
to accurately test this you need to set up your
canvas to use a CDN. there is a dev CDN that ops
has set up for us. you put the settings in
config/canvas_cdn.yml. slack ryan if you need help
setting that up or need to know what the values
are to use.
you also need to edit your config/environments/development.rb
file so it look like this:
config.action_controller.perform_caching = true
ENV['USE_OPTIMIZED_JS'] = 'true'
and then when you make any changes you need to run:
bundle exec rake canvas:compile_assets
bundle exec rake canvas:cdn:upload_to_s3
touch tmp/restart.txt
for the changes to be seen
- This change applies only to new UI. Legacy
should be unchanged.
- Clear cache and cookies first.
- Go to Canvas. On the first page load only
you should see a slight shifting of the text
as Canvas loads the Lato font and falls
back on the Helvetica system font.
- From that point on, Lato should be
cached in the browser and load instantly
when you move between views:
http://screencast.com/t/hZhUZOhH
- Canvas should still work in all supported
languages and browsers.
Not yet converted:
- TinyMCE textarea fiekd
- Mobile login
Change-Id: I861e609c01824f60ac38d3fc15e5b960a06e44de
Reviewed-on: https://gerrit.instructure.com/85737
Tested-by: Jenkins
Reviewed-by: Ryan Shaw <ryan@instructure.com>
QA-Review: Dan Sasaki
Product-Review: Kyle Follett <kfollett@instructure.com>
closes: CNVS-31787
the only things left in bower are things that
are just not avalable on npm because they are so old.
we'll have to continue using the bower versions of them,
but it's ok since they are mostly old ember stuff
that will be ripped out when we finish our react screenreader gradebook
also:
remove some ember stuff that wasn't being used anymore.
nothing was using this stuff
test plan:
this really does touch a lot of stuff. some things
to check out specifically in the prod/optimized requireJS build:
(load the page, click around to make sure things work)
the screenreader gradebook
client_apps:
quiz statistics
quiz event logging
creating a new student group
calendar, try all the views (month/agenda/etc)
gradebook 2
turn on the new course/user search feature for your account
and go to accounts/x and search for a user/course
the new react gradebook
use tinymce on a page, make sure that both the service
and local version of it work
Change-Id: I4322a154d289760ab51b92e34dd7fac808b41ba8
Reviewed-on: https://gerrit.instructure.com/93102
Tested-by: Jenkins
QA-Review: Benjamin Christian Nelson <bcnelson@instructure.com>
Reviewed-by: Simon Williams <simon@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
fixes: CNVS-31887
test plan:
* using both webpack and requireJS:
* in ie11, load a page in canvas
* open the IE developer console
* type: Promise.resolve().then(function(){console.log('it works')})
* it should log 'it works' to the console
Change-Id: Ib76c39a5397ca2f28280ca5c108605c63266b38b
Reviewed-on: https://gerrit.instructure.com/90270
Tested-by: Jenkins
Reviewed-by: Felix Milea-Ciobanu <fmileaciobanu@instructure.com>
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
QA-Review: August Thornton <august@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
closes: CNVS-31621
every other browser supports these features.
this will just make it so we can count on things
like Promise, Object.assign, [].includes etc (see
FEATURES_TO_POLYFILL at the top of
script/make-ie11-shim.js for full list)
what do people think of this? what do you think of the
approach, I don't want to include a polyfill in the
common bundle and force every other browser to download
this stuff they aren't going to need. but I still want
it to be performant as possible for those using ie11
Is there anything else people think we should polyfill?
the one I thought of is window.fetch, what do others
think about that?
test plan:
* in ie11, load a page in canvas
* open the IE developer console
* type: Promise.resolve().then(function(){console.log('it works')})
* it should log 'it works' to the console
* (that already works in other browsers, but you can
check to make sure that it still does there too)
Change-Id: Ie9c99a59631a13535903174a5e575427dbfeac4f
Reviewed-on: https://gerrit.instructure.com/89626
Reviewed-by: Jennifer Stern <jstern@instructure.com>
Tested-by: Jenkins
QA-Review: August Thornton <august@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
closes: CNVS-29725
this gets everything working on node 6.
As far as our build process goes, it cannot support
running on both node 6 at the same time as 0.12
since our i18nliner handlebars stuff uses jsdom and
one version of it only works on node <4 and the
next only works on 4+.
But the stuff in the production dependencies in
package.json, aka the stuff that runs on the job
servers (brandable_css), can work on both. we just
need to run npm rebuild on the job servers if the stuff
that was npm installed into ./node_modules was compiled
against a different version of node. that is done here:
https://gerrit.instructure.com/81254
that commit needs to be committed to caturday before
we commit and deploy this to beta
as far as managing node, there are 2 "official"
ways that will make you life easier, you can either
just use docker or use nvm (https://github.com/creationix/nvm)
if you use nvm and if you use ZSH:
Put this into your $HOME/.zshrc to call nvm use automatically
whenever you enter a directory that contains an
.nvmrc file with a string telling nvm which node to use:
# place this after nvm initialization!
autoload -U add-zsh-hook
load-nvmrc() {
if [[ -f .nvmrc && -r .nvmrc ]]; then
nvm use
elif [[ $(nvm version) != $(nvm version default) ]]; then
echo "Reverting to nvm default version"
nvm use default
fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc
but however you do it, as long as you have node 6.2
installed it should work
test plan:
* install nvm
* check this patchset out
* run bundle exec rake canvas:compile_assets
* it should work
* use theme editor to preview a change to a theme
* it should work
Change-Id: I1cc9faed361938afc713c4b921042386b956db70
Reviewed-on: https://gerrit.instructure.com/80839
Tested-by: Jenkins
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
QA-Review: Benjamin Christian Nelson <bcnelson@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
Ryan Shaw