152 строки
4.9 KiB
Plaintext
Executable File
152 строки
4.9 KiB
Plaintext
Executable File
** index.html
|
|
*
|
|
* The 'Most Popular' page.
|
|
*
|
|
* This file is to show 10 charts. They will be charts from
|
|
* the top 10 Properties of the stack rank page.
|
|
*
|
|
* This implementation is not complete.
|
|
* This depends upon stack rank.
|
|
*
|
|
**
|
|
|
|
** stackrank.html
|
|
*
|
|
* Lists all properties from highest popularity to least
|
|
* User may reverse order
|
|
*
|
|
* Will function, once a date is specified in QueryStackRank of main.py
|
|
*
|
|
**
|
|
|
|
** main.py
|
|
*
|
|
* Handler File
|
|
*
|
|
* /data/querystableinstances performs a query to get all instances
|
|
* from the database. This data is converted to JSON and written to
|
|
* the page.
|
|
*
|
|
* /data/querystackrank performs a query to get most recent day's
|
|
* popularity rank in default descending order. The data is converted to
|
|
* JSON and written to the page.
|
|
*
|
|
**
|
|
|
|
** admin.py
|
|
*
|
|
* Handler File
|
|
*
|
|
* visiting /cron/metrics calls YesterdayHandler which retrieves yesterday's data from the UMA Cloud Storage.
|
|
* This is how the cron job is updating - Daily grabbing the previous day's data
|
|
* The data is parsed and stored as:
|
|
* class StableInstance(DictModel):
|
|
* property_name = db.StringProperty();
|
|
* bucket_id = db.IntegerProperty();
|
|
* date = db.DateProperty();
|
|
* day_percentage = db.FloatProperty();
|
|
* rolling_percentage = db.FloatProperty();
|
|
*
|
|
* visiting /cron/histograms calls HistogramsHandler which retrieves FeatureObserver and
|
|
* FeatureObserver histograms from chromium.googlesource.com.
|
|
*
|
|
* ACTION REQUIRED: we will need to replace histogramID with the appropriate ID.
|
|
* This can be obtained from uma.googleplex.com/data/histograms/ids-chrome-histograms.txt
|
|
* Searching this file for CSS Properties, once our histogram has data should give us a hex
|
|
* value which should be converted to an integer.
|
|
*
|
|
*
|
|
|
|
|
|
** featurelevel.js
|
|
*
|
|
* Creates charts for the feature level page.
|
|
*
|
|
* drawVisualization()
|
|
* This function takes in the name of the property for which the graph is being drawn.
|
|
* (This should probably be changed to the propertyID/bucketID in the future.)
|
|
* We iterate through parsed data, building up a data object which we can pass to chart.draw()
|
|
* The desired form of data to pass to chart.draw() is:
|
|
* [[Date, Name, Percentage]
|
|
* [Mar 3, Color, 60]
|
|
* [Mar 4, Width, 70]]
|
|
* ** If we need to look into further optimization, building this data structure is probably the place it can happen.
|
|
*
|
|
* getNamesArray()
|
|
* Takes the desired name to have displayed on the chart. Checks if there is a correspinding property (prefixed or unprefixed)
|
|
* adds the given name plus the corresponding name to an array and returns the array.
|
|
*
|
|
**
|
|
|
|
|
|
|
|
appcfg.py upload_data --config_file=bulkloader.yaml --kind=Feature --url=https://chromestatus.googleplex.com/_ah/remote_api --filename=import.csv
|
|
|
|
|
|
|
|
---
|
|
|
|
OPTIMIZATIONS
|
|
- show/hide less of panel when user clicks it
|
|
- recalc style issue perf in chrome 28 (https://src.chromium.org/viewvc/blink?revision=150018&view=revision)
|
|
-> turn on shadow dom polyfill for stable (e.g. Platform = {flags: {shadow: 'polyfill'}};)
|
|
- insertBefore issue being fixed: https://code.google.com/p/chromium/issues/detail?id=255734.
|
|
-> Remove inline <style> in elements.
|
|
- Calculate a property in a *Changed handler rather than getters. Latter sets
|
|
up timers if o.Observe() is not present. Former is only calculated once when
|
|
the prop changes.
|
|
|
|
load features from server. could have also done ajax
|
|
|
|
elements talk to each other through events and passing chromemetadata in
|
|
|
|
color-status does its thing. repurposed in mulitple places
|
|
|
|
chrome-metadata that does auto ajax
|
|
|
|
render list of features on a filtered view, not entire list.
|
|
|
|
ajax-delete link element is pretty coo
|
|
|
|
sass workflow
|
|
|
|
added tabindex=0 to features so they can be a11yn
|
|
|
|
dont publish opened in chromedash-feature. Property reflection to attributes
|
|
redistribute entire thing in SD polyfill. https://github.com/Polymer/polymer/issues/236
|
|
|
|
Way sass was written, selectors match from right to left. So *:hover matched
|
|
all elements in SD, then filtered on :hover. Change was to be more specific and add tag:
|
|
|
|
.views {
|
|
@include display-flex;
|
|
@include flex-wrap(wrap);
|
|
|
|
& > span { // was & > * {
|
|
@include display-flex;
|
|
@include align-items(center);
|
|
position: relative;
|
|
...
|
|
}
|
|
}
|
|
|
|
|
|
|
|
the css in ericbidelman's app is the issue
|
|
lots of very complex selectors
|
|
ex. chromedash-feature section .views > :hover::before
|
|
we match from right to left, which means that can "match" <html>
|
|
or any descendants
|
|
so now hovering anything on that page recalcs style the entire document
|
|
same thing with tapping tapping
|
|
chromedash-feature section .views > :active::before
|
|
|
|
the rest of the slow recalcs are [data-first-of-milestone]:first-of-type { ... } in the css for <chromedash-featurelist>
|
|
tapping to expand a single row triggers the "invalidate style on all my siblings because of complex selectors" case in Element::recalcStyle
|
|
|
|
Solution was to remove one selector.
|
|
|
|
&:first-of-type {
|
|
margin-top: $milestone-label-size + 2;
|
|
}
|