Add a `<range-input>` WC. #136

developit · 2018-08-10T13:41:56Z

Note: the 2 flipped ranges used in WebP options are problematic. Perhaps I should add <range-input reversed>?

surma · 2018-08-10T13:42:51Z

How about we give range-input a left and right instead of min and max?

jakearchibald · 2018-08-10T14:04:02Z

🚲start and end? (in case we ever add a vertical option).

Yeah, the flipping is something the component should do with it's internal range input, rather than flipping the <range-input> itself.

developit · 2018-08-10T15:38:51Z

@jakearchibald @surma the implication being that min<max but start>end is fine?

jakearchibald · 2018-08-10T15:52:02Z

Yep!

surma · 2018-08-14T15:26:53Z

src/components/Output/custom-els/RangeInput/index.ts

+  private _handleEvent(event: Event) {
+    this._update();
+    event.stopImmediatePropagation();
+    const retargetted = new (event.constructor as typeof Event)(event.type, event);


Does ... as Constructor<Event> work?

But also, is this redirection necessary?

it's the same approach Jake used elsewhere, was the only thing I could get to work. I could just use the Event constructor maybe? But there are multiple event types.

new Event is fine here since all the events being retargeted are just regular events.

jakearchibald

This is really nice. Most of the comments are around API design & nits:

min, max, step, precision should use the attribute as the source of truth. Setting the value attribute should set the inner input's attribute, setting the property should set the property - this means you'll inherit the way value behaves.

precision's getter should only return valid values.

It's kinda weird that <input> returns strings for these things, but I guess that's in-keeping with other input types. You could decide not to follow that here, and return numbers instead. Your call.

Also, we should lose the focus ring from the input. The bubble is good enough.

The design includes a text field. Should that be part of this component? If so, I'm happy for this to merge before doing that (just make an issue to track it).

jakearchibald · 2018-08-15T13:02:15Z

src/components/Output/custom-els/RangeInput/index.ts

+    super();
+    this._input.type = 'range';
+    this._update = this._update.bind(this);
+    this._handleEvent = this._handleEvent.bind(this);


Use @bind for these two.

didn't think we were using that in the web components. added.

jakearchibald · 2018-08-15T13:04:04Z

src/components/Output/custom-els/RangeInput/index.ts

+  'change',
+  'focus',
+  'blur',
+];


🚲 RETARGETED_EVENTS?

jakearchibald · 2018-08-15T13:06:27Z

src/components/Output/custom-els/RangeInput/index.ts

+  'min',
+  'max',
+  'step',
+];


🚲 REFLECTED_PROPERTIES?

jakearchibald · 2018-08-15T13:09:56Z

src/components/Output/custom-els/RangeInput/index.ts

+  value: string;
+  min?: string;
+  max?: string;
+  step?: string;


None of min, max, or step are optional.

They have default values, but I agree it's likely pointless to support that.

jakearchibald · 2018-08-15T13:21:05Z

src/components/Output/custom-els/RangeInput/index.ts

+
+  attributeChangedCallback (name: string, value: string) {
+    if (name === 'value') this.value = value;
+  }


Does this work? Doesn't look like you've defined "value" as an attribute you're interested in.

not sure what you mean, though this is now just a reflection of the input's value attribute now.

But it only fires for things listed in observedAttributes right?

jakearchibald · 2018-08-15T13:23:34Z

src/components/Output/custom-els/RangeInput/index.ts

+  min?: string;
+  max?: string;
+  step?: string;
+  precision?: number | string;


number | string - pick one to be compatible with the rest of the interface.

jakearchibald · 2018-08-15T13:28:11Z

src/components/Output/custom-els/RangeInput/index.ts

+  private _handleEvent(event: Event) {
+    this._update();
+    event.stopImmediatePropagation();
+    const retargetted = new (event.constructor as typeof Event)(event.type, event);


new Event is fine here since all the events being retargeted are just regular events.

jakearchibald · 2018-08-15T13:31:38Z

src/components/Output/custom-els/RangeInput/index.ts

+    const percent = 100 * (value - min) / (max - min);
+    this.style.setProperty('--value-percent', percent + '%');
+    let displayValue = '' + value;
+    let precision = this.precision;


precision should be renamed to reflect that it's only related to display.

it's now valueDisplayPrecision.

jakearchibald · 2018-08-15T13:33:49Z

src/components/Output/custom-els/RangeInput/styles.css

+  -webkit-appearance: none;
+}
+
+range-input:before {


Nit: :: for pseudo-elements.

jakearchibald · 2018-08-15T13:40:27Z

src/components/Output/custom-els/RangeInput/styles.css

+  margin: 0 0 0 -16px;
+  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
+  transform-origin: 50% 90%;
+  opacity: 0;


I'm getting a bit of jank when the bubble first appears. I wonder if an opacity of 0.0001 and will-change: transform will improve responsiveness here.

good call - I was seeing that but wasn't sure if it was related.

that seems to have addressed it for me.

... actually it seems like removing the focus ring addressed the issue. odd.

Hah, I guess that's a heavy paint operation?

developit · 2018-08-20T02:03:54Z

@jakearchibald regarding the text field, I'd prefer to keep that separate from this component since it's hierarchically at the same level as a wrapping <label>. Should be easy to drive it using props+events, and that way we can have what I think seemed to be the implied "click to edit" text mode on that field, which wouldn't make much sense in a generic slider component.

…lue is derived from the input.

jakearchibald

The main problem here is still the lack of attribute checking. It works fine for squoosh because preact uses properties rather than attributes. But, unless I'm missing something, <range-input value="50"> won't work in normal HTML, as that value is never sent to the underlying input.

See how orientation works on <two-up> https://github.com/GoogleChromeLabs/squoosh/blob/master/src/components/Output/custom-els/TwoUp/index.ts.

HTML elements tend to use the attribute as the source of truth, so it makes sense to be as similar to them as reasonably possible.

In this case, setting attributes like value, min, max, step, name should set the same value on the inner input.

After setting properties of those names, it should set them on the inner input (as it does now), but it also needs to update the <range-input>'s corresponding attribute to whatever the inner input's is now. This means, if the attribute changes as the result of changing a property, we catch that and behave the same.

As a result you get all of the input's behaviours in terms of property vs attribute source-of-truth, which is slightly weird when it comes to .value, but relied upon in the wild.

jakearchibald · 2018-08-20T11:07:03Z

src/codecs/webp/options.tsx

            name="filter_strength"
-            type="range"
            min="0"
            max="100"
            disabled={!!options.autofilter}


This is broken - filed #142

jakearchibald · 2018-08-20T11:15:17Z

src/components/Output/custom-els/RangeInput/index.ts

+    const max = parseFloat(this._input.max || '100');
+    const percent = 100 * (value - min) / (max - min);
+    this.style.setProperty('--value-percent', percent + '%');
+    let displayValue = '' + value;


This seems to go from string to number to string back to number.

jakearchibald · 2018-08-20T11:32:59Z

Also, feels like valueDisplayPrecision should have a corresponding attribute. Maybe label-precision and labelPrecision (or is that confusing with <label>)?

developit · 2018-09-06T02:06:36Z

Update: still fighting with TypeScript passively on this one. Hopefully will have a proper update tomorrow.

jakearchibald · 2018-09-06T07:47:31Z

Which parts are causing issues?

developit · 2018-09-18T01:45:11Z

ok. I think I have something working like you described. TBH I hate it, but this is where I was able to get to without resorting to as any in a myriad of places.

…s the source of authority.

jakearchibald

Lemmie take a swing at this

jakearchibald · 2018-09-18T05:10:52Z

src/components/Output/index.tsx

@@ -2,6 +2,7 @@ import { h, Component } from 'preact';
 import PinchZoom from './custom-els/PinchZoom';
 import './custom-els/PinchZoom';
 import './custom-els/TwoUp';
+import './custom-els/RangeInput';


Is this used?

Would you prefer it be imported from the options that require range inputs? I didn't want to since we arbitrarily nested these CE's within directories specific to each component, seemed like reaching across a boundary.

jakearchibald · 2018-09-18T05:39:28Z

src/components/Output/custom-els/RangeInput/index.ts

+
+const RETARGETED_EVENTS = [
+  'input',
+  'change',


Doesn't input and change bubble?

Yes. In this case the retargeting is pointless, but it invokes this._update() on input and change.

jakearchibald · 2018-09-19T08:30:58Z

I agree it's reaching across a boundary, but I think the answer is to move the custom element to a higher level.

…

On Tue, 18 Sep 2018, 21:20 Jason Miller, ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In src/components/Output/custom-els/RangeInput/index.ts <#136 (comment)> : > @@ -0,0 +1,148 @@ +import { bind } from '../../../../lib/util'; +import './styles.css'; + +const RETARGETED_EVENTS = [ + 'input', + 'change', Yes. In this case the retargeting is pointless, but it invokes this._update() on input and change. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#136 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAFtmiFYsC5Ck-DB6ENDehY-av9_1ArXks5ucPMygaJpZM4V4N5d> .

jakearchibald · 2018-10-02T10:32:12Z

Merging #171

# This is the 1st commit message: Add position reset button and update zoom interaction. (GoogleChromeLabs#292) (GoogleChromeLabs#345) # The commit message GoogleChromeLabs#2 will be skipped: # 1.2.3 # The commit message GoogleChromeLabs#3 will be skipped: # Prevent both sides sharing a download URL. (GoogleChromeLabs#369) # # The commit message GoogleChromeLabs#4 will be skipped: # Add basic history handling (GoogleChromeLabs#288) (GoogleChromeLabs#309) # # * Add basic history handling (GoogleChromeLabs#288) # # * Move history management to Compress component # # * Remove unused pathname property from history # # * Rename history listener functions # # * Use history.back instead of history.replace # # * Support going forward in history. Persist last selected file in runtime # # * Add netlify redirects file # # * Use 301 status code for redirect # # * Cleanup _redirects file # # * Use 200 status code for redirects # # * Simplify onPopState function # # * Always redirect to 301 with url rewrite # # * Remove redundant history function # # * Remove file check on render. Call openEditor synchronously # # * Use pushState only if user is on the initial screen. Mount history listener in constructor # # * Simplify openEditor condition # # * Update early return condition # # * Rolling abstractions back into the main component # The commit message GoogleChromeLabs#5 will be skipped: # 1.3.0 # The commit message GoogleChromeLabs#6 will be skipped: # Add renovate.json # The commit message GoogleChromeLabs#7 will be skipped: # Merge pull request GoogleChromeLabs#373 from GoogleChromeLabs/renovate/configure # # Configure Renovate # The commit message GoogleChromeLabs#8 will be skipped: # Pin dependencies # The commit message GoogleChromeLabs#9 will be skipped: # Merge pull request GoogleChromeLabs#374 from GoogleChromeLabs/renovate/pin-dependencies # # Pin dependencies # The commit message GoogleChromeLabs#10 will be skipped: # Update dependency mini-css-extract-plugin to v0.5.0 # The commit message GoogleChromeLabs#11 will be skipped: # Merge pull request GoogleChromeLabs#380 from GoogleChromeLabs/renovate/mini-css-extract-plugin-0.x # # Update dependency mini-css-extract-plugin to v0.5.0 # The commit message GoogleChromeLabs#12 will be skipped: # Update dependency @types/node to v10.12.14 # The commit message GoogleChromeLabs#13 will be skipped: # Merge pull request GoogleChromeLabs#376 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.14 # The commit message GoogleChromeLabs#14 will be skipped: # Update dependency @types/node to v10.12.15 # The commit message GoogleChromeLabs#15 will be skipped: # Merge pull request GoogleChromeLabs#384 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.15 # The commit message GoogleChromeLabs#16 will be skipped: # Update dependency comlink to v3.1.1 # The commit message GoogleChromeLabs#17 will be skipped: # Merge pull request GoogleChromeLabs#377 from GoogleChromeLabs/renovate/comlink-3.x # # Update dependency comlink to v3.1.1 # The commit message GoogleChromeLabs#18 will be skipped: # Update dependency @types/webassembly-js-api to v0.0.2 # The commit message GoogleChromeLabs#19 will be skipped: # Merge pull request GoogleChromeLabs#375 from GoogleChromeLabs/renovate/webassembly-js-api-0.x # # Update dependency @types/webassembly-js-api to v0.0.2 # The commit message GoogleChromeLabs#20 will be skipped: # Update dependency critters-webpack-plugin to v2.1.1 # The commit message GoogleChromeLabs#21 will be skipped: # Merge pull request GoogleChromeLabs#378 from GoogleChromeLabs/renovate/critters-webpack-plugin-2.x # # Update dependency critters-webpack-plugin to v2.1.1 # The commit message GoogleChromeLabs#22 will be skipped: # Update dependency husky to v1.2.1 # The commit message GoogleChromeLabs#23 will be skipped: # Merge pull request GoogleChromeLabs#379 from GoogleChromeLabs/renovate/husky-1.x # # Update dependency husky to v1.2.1 # The commit message GoogleChromeLabs#24 will be skipped: # Update dependency preact to v8.4.2 # The commit message GoogleChromeLabs#25 will be skipped: # Merge pull request GoogleChromeLabs#381 from GoogleChromeLabs/renovate/preact-8.x # # Update dependency preact to v8.4.2 # The commit message GoogleChromeLabs#26 will be skipped: # Update dependency ts-loader to v5.3.1 # The commit message GoogleChromeLabs#27 will be skipped: # Merge pull request GoogleChromeLabs#382 from GoogleChromeLabs/renovate/ts-loader-5.x # # Update dependency ts-loader to v5.3.1 # The commit message GoogleChromeLabs#28 will be skipped: # Update dependency tslint-config-airbnb to v5.11.1 # The commit message GoogleChromeLabs#29 will be skipped: # Merge pull request GoogleChromeLabs#383 from GoogleChromeLabs/renovate/tslint-config-airbnb-5.x # # Update dependency tslint-config-airbnb to v5.11.1 # The commit message GoogleChromeLabs#30 will be skipped: # Update dependency webpack to v4.27.1 # The commit message GoogleChromeLabs#31 will be skipped: # Merge pull request GoogleChromeLabs#386 from GoogleChromeLabs/renovate/webpack-4.x # # Update dependency webpack to v4.27.1 # The commit message GoogleChromeLabs#32 will be skipped: # Update dependency raw-loader to v1 # The commit message GoogleChromeLabs#33 will be skipped: # Merge pull request GoogleChromeLabs#388 from GoogleChromeLabs/renovate/raw-loader-1.x # # Update dependency raw-loader to v1 # The commit message GoogleChromeLabs#34 will be skipped: # Update dependency worker-plugin to v3 # The commit message GoogleChromeLabs#35 will be skipped: # Merge pull request GoogleChromeLabs#390 from GoogleChromeLabs/renovate/worker-plugin-3.x # # Update dependency worker-plugin to v3 # The commit message GoogleChromeLabs#36 will be skipped: # Fixing sharp & preprocess settings # The commit message GoogleChromeLabs#37 will be skipped: # Using use_argb conditionally # The commit message GoogleChromeLabs#38 will be skipped: # Merge pull request GoogleChromeLabs#393 from GoogleChromeLabs/webp-sharp-fix # # Fixing sharp & preprocess settings. Fixes GoogleChromeLabs#392. # The commit message GoogleChromeLabs#39 will be skipped: # Debouncing input. Fixes GoogleChromeLabs#277 (GoogleChromeLabs#394) # # * Debouncing input # # * Clarifying comment # # * More comments and clarifications # The commit message GoogleChromeLabs#40 will be skipped: # Update dependency typescript to v3.2.2 # The commit message GoogleChromeLabs#41 will be skipped: # Fix typings for TypeScript v3.2 # The commit message GoogleChromeLabs#42 will be skipped: # Merge pull request GoogleChromeLabs#385 from GoogleChromeLabs/renovate/typescript-3.x # # Update dependency typescript to v3.2.2 # The commit message GoogleChromeLabs#43 will be skipped: # Preventing zoom in iOS Safari. (GoogleChromeLabs#395) # # The commit message GoogleChromeLabs#44 will be skipped: # Update README.md # # closes GoogleChromeLabs#367 # updating incorrect URL # The commit message GoogleChromeLabs#45 will be skipped: # Merge pull request GoogleChromeLabs#396 from GoogleChromeLabs/kosamari-patch-2 # # Update README.md for OptiPNG # The commit message GoogleChromeLabs#46 will be skipped: # 1.3.1 # The commit message GoogleChromeLabs#47 will be skipped: # Update dependency tslint to v5.12.0 # The commit message GoogleChromeLabs#48 will be skipped: # Merge pull request GoogleChromeLabs#398 from GoogleChromeLabs/renovate/tslint-5.x # # Update dependency tslint to v5.12.0 # The commit message GoogleChromeLabs#49 will be skipped: # Update dependency husky to v1.3.0 # The commit message GoogleChromeLabs#50 will be skipped: # Merge pull request GoogleChromeLabs#399 from GoogleChromeLabs/renovate/husky-1.x # # Update dependency husky to v1.3.0 # The commit message GoogleChromeLabs#51 will be skipped: # Update dependency @types/node to v10.12.17 # The commit message GoogleChromeLabs#52 will be skipped: # Merge pull request GoogleChromeLabs#400 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.17 # The commit message GoogleChromeLabs#53 will be skipped: # Update dependency webpack to v4.28.0 # The commit message GoogleChromeLabs#54 will be skipped: # Merge pull request GoogleChromeLabs#402 from GoogleChromeLabs/renovate/webpack-4.x # # Update dependency webpack to v4.28.0 # The commit message GoogleChromeLabs#55 will be skipped: # Update dependency @types/node to v10.12.18 # The commit message GoogleChromeLabs#56 will be skipped: # Merge pull request GoogleChromeLabs#403 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.18 # The commit message GoogleChromeLabs#57 will be skipped: # Update dependency file-loader to v3 # The commit message GoogleChromeLabs#58 will be skipped: # Merge pull request GoogleChromeLabs#404 from GoogleChromeLabs/renovate/file-loader-3.x # # Update dependency file-loader to v3 # The commit message GoogleChromeLabs#59 will be skipped: # Update dependency ts-loader to v5.3.2 # The commit message GoogleChromeLabs#60 will be skipped: # Merge pull request GoogleChromeLabs#406 from GoogleChromeLabs/renovate/ts-loader-5.x # # Update dependency ts-loader to v5.3.2 # The commit message GoogleChromeLabs#61 will be skipped: # Update dependency webpack-dev-server to v3.1.11 # The commit message GoogleChromeLabs#62 will be skipped: # Merge pull request GoogleChromeLabs#407 from GoogleChromeLabs/renovate/webpack-dev-server-3.x # # Update dependency webpack-dev-server to v3.1.11 # The commit message GoogleChromeLabs#63 will be skipped: # Update dependency webpack-dev-server to v3.1.12 # The commit message GoogleChromeLabs#64 will be skipped: # Merge pull request GoogleChromeLabs#408 from GoogleChromeLabs/renovate/webpack-dev-server-3.x # # Update dependency webpack-dev-server to v3.1.12 # The commit message GoogleChromeLabs#65 will be skipped: # Update dependency terser-webpack-plugin to v1.2.0 # The commit message GoogleChromeLabs#66 will be skipped: # Merge pull request GoogleChromeLabs#409 from GoogleChromeLabs/renovate/terser-webpack-plugin-1.x # # Update dependency terser-webpack-plugin to v1.2.0 # The commit message GoogleChromeLabs#67 will be skipped: # Update dependency webpack-dev-server to v3.1.13 # The commit message GoogleChromeLabs#68 will be skipped: # Merge pull request GoogleChromeLabs#410 from GoogleChromeLabs/renovate/webpack-dev-server-3.x # # Update dependency webpack-dev-server to v3.1.13 # The commit message GoogleChromeLabs#69 will be skipped: # Update dependency webpack-dev-server to v3.1.14 # The commit message GoogleChromeLabs#70 will be skipped: # Merge pull request GoogleChromeLabs#411 from GoogleChromeLabs/renovate/webpack-dev-server-3.x # # Update dependency webpack-dev-server to v3.1.14 # The commit message GoogleChromeLabs#71 will be skipped: # Update dependency loader-utils to v1.2.0 # The commit message GoogleChromeLabs#72 will be skipped: # Merge pull request GoogleChromeLabs#412 from GoogleChromeLabs/renovate/loader-utils-1.x # # Update dependency loader-utils to v1.2.0 # The commit message GoogleChromeLabs#73 will be skipped: # Update dependency terser-webpack-plugin to v1.2.1 # The commit message GoogleChromeLabs#74 will be skipped: # Merge pull request GoogleChromeLabs#414 from GoogleChromeLabs/renovate/terser-webpack-plugin-1.x # # Update dependency terser-webpack-plugin to v1.2.1 # The commit message GoogleChromeLabs#75 will be skipped: # Update dependency husky to v1.3.1 # The commit message GoogleChromeLabs#76 will be skipped: # Merge pull request GoogleChromeLabs#418 from GoogleChromeLabs/renovate/husky-1.x # # Update dependency husky to v1.3.1 # The commit message GoogleChromeLabs#77 will be skipped: # Update dependency webpack-cli to v3.2.0 # The commit message GoogleChromeLabs#78 will be skipped: # Merge pull request GoogleChromeLabs#421 from GoogleChromeLabs/renovate/webpack-cli-3.x # # Update dependency webpack-cli to v3.2.0 # The commit message GoogleChromeLabs#79 will be skipped: # Update dependency @webpack-cli/serve to v0.1.3 # The commit message GoogleChromeLabs#80 will be skipped: # Merge pull request GoogleChromeLabs#420 from GoogleChromeLabs/renovate/webpack-cli-serve-0.x # # Update dependency @webpack-cli/serve to v0.1.3 # The commit message GoogleChromeLabs#81 will be skipped: # Update dependency critters-webpack-plugin to v2.1.2 # The commit message GoogleChromeLabs#82 will be skipped: # Merge pull request GoogleChromeLabs#415 from GoogleChromeLabs/renovate/critters-webpack-plugin-2.x # # Update dependency critters-webpack-plugin to v2.1.2 # The commit message GoogleChromeLabs#83 will be skipped: # Update dependency ts-loader to v5.3.3 # The commit message GoogleChromeLabs#84 will be skipped: # Merge pull request GoogleChromeLabs#423 from GoogleChromeLabs/renovate/ts-loader-5.x # # Update dependency ts-loader to v5.3.3 # The commit message GoogleChromeLabs#85 will be skipped: # Update dependency critters-webpack-plugin to v2.1.3 # The commit message GoogleChromeLabs#86 will be skipped: # Merge pull request GoogleChromeLabs#422 from GoogleChromeLabs/renovate/critters-webpack-plugin-2.x # # Update dependency critters-webpack-plugin to v2.1.3 # The commit message GoogleChromeLabs#87 will be skipped: # Update dependency webpack-cli to v3.2.1 # The commit message GoogleChromeLabs#88 will be skipped: # Merge pull request GoogleChromeLabs#424 from GoogleChromeLabs/renovate/webpack-cli-3.x # # Update dependency webpack-cli to v3.2.1 # The commit message GoogleChromeLabs#89 will be skipped: # Update dependency tslint to v5.12.1 # The commit message GoogleChromeLabs#90 will be skipped: # Merge pull request GoogleChromeLabs#427 from GoogleChromeLabs/renovate/tslint-5.x # # Update dependency tslint to v5.12.1 # The commit message GoogleChromeLabs#91 will be skipped: # Update dependency typescript to v3.2.4 # The commit message GoogleChromeLabs#92 will be skipped: # Merge pull request GoogleChromeLabs#431 from GoogleChromeLabs/renovate/typescript-3.x # # Update dependency typescript to v3.2.4 # The commit message GoogleChromeLabs#93 will be skipped: # Update dependency critters-webpack-plugin to v2.2.0 # The commit message GoogleChromeLabs#94 will be skipped: # Merge pull request GoogleChromeLabs#432 from GoogleChromeLabs/renovate/critters-webpack-plugin-2.x # # Update dependency critters-webpack-plugin to v2.2.0 # The commit message GoogleChromeLabs#95 will be skipped: # Update dependency clean-webpack-plugin to v1.0.1 # The commit message GoogleChromeLabs#96 will be skipped: # Merge pull request GoogleChromeLabs#434 from GoogleChromeLabs/renovate/clean-webpack-plugin-1.x # # Update dependency clean-webpack-plugin to v1.0.1 # The commit message GoogleChromeLabs#97 will be skipped: # Update dependency progress-bar-webpack-plugin to v1.12.0 # The commit message GoogleChromeLabs#98 will be skipped: # Merge pull request GoogleChromeLabs#435 from GoogleChromeLabs/renovate/progress-bar-webpack-plugin-1.x # # Update dependency progress-bar-webpack-plugin to v1.12.0 # The commit message GoogleChromeLabs#99 will be skipped: # Add rotate user timing # The commit message GoogleChromeLabs#100 will be skipped: # Use Uint32Array to copy an entire pixel per op # The commit message GoogleChromeLabs#101 will be skipped: # Revert "Add rotate user timing" # # This reverts commit 887db67. # The commit message GoogleChromeLabs#102 will be skipped: # Remove unused bpp # The commit message GoogleChromeLabs#103 will be skipped: # Merge pull request GoogleChromeLabs#436 from GoogleChromeLabs/optimize-rotate # # Optimize rotate # The commit message GoogleChromeLabs#104 will be skipped: # Update dependency @types/node to v10.12.19 # The commit message GoogleChromeLabs#105 will be skipped: # Merge pull request GoogleChromeLabs#441 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.19 # The commit message GoogleChromeLabs#106 will be skipped: # Update dependency progress-bar-webpack-plugin to v1.12.1 # The commit message GoogleChromeLabs#107 will be skipped: # Merge pull request GoogleChromeLabs#442 from GoogleChromeLabs/renovate/progress-bar-webpack-plugin-1.x # # Update dependency progress-bar-webpack-plugin to v1.12.1 # The commit message GoogleChromeLabs#108 will be skipped: # Update dependency @types/node to v10.12.20 # The commit message GoogleChromeLabs#109 will be skipped: # Merge pull request GoogleChromeLabs#443 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.20 # The commit message GoogleChromeLabs#110 will be skipped: # Update dependency @types/node to v10.12.21 # The commit message GoogleChromeLabs#111 will be skipped: # Merge pull request GoogleChromeLabs#445 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.21 # The commit message GoogleChromeLabs#112 will be skipped: # This fixes GoogleChromeLabs#446 and sometimes it's best not to ask too many questions. (GoogleChromeLabs#447) # # The commit message GoogleChromeLabs#113 will be skipped: # Update dependency terser-webpack-plugin to v1.2.2 # The commit message GoogleChromeLabs#114 will be skipped: # Merge pull request GoogleChromeLabs#448 from GoogleChromeLabs/renovate/terser-webpack-plugin-1.x # # Update dependency terser-webpack-plugin to v1.2.2 # The commit message GoogleChromeLabs#115 will be skipped: # # This is a combination of 20 commits. # # This is the 1st commit message: # Merge from upstream/master branch # # # This is the commit message GoogleChromeLabs#2: # # Update zoom and positioning behaviours # # # This is the commit message GoogleChromeLabs#3: # # Merge branch 'master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#4: # # Merge branch 'master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#5: # # Merge branch 'master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#6: # # Merge branch 'master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#7: # # Merge branch 'master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#8: # # Merge branch 'master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#9: # # Merge branch 'master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#10: # # Merge branch 'master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#11: # # Merge from remote branch # # # This is the commit message GoogleChromeLabs#12: # # Merge from upstream/master # # # This is the commit message GoogleChromeLabs#13: # # Lazy-load the intersection-observer polyfill and optionally control wheel event # # # This is the commit message GoogleChromeLabs#14: # # Fix threshold handling issue # # # This is the commit message GoogleChromeLabs#15: # # merge remote-tracking branch 'upstream/master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#16: # # merge remote-tracking branch 'upstream/master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#17: # # Update double click listener and position reset behaviour # # # This is the commit message GoogleChromeLabs#18: # # Change back the indentations # # # This is the commit message GoogleChromeLabs#19: # # Update double click listener and position reset behaviour # # # This is the commit message GoogleChromeLabs#20: # # Change back the indentations # The commit message GoogleChromeLabs#116 will be skipped: # Merge from upstream/master branch # The commit message GoogleChromeLabs#117 will be skipped: # Update zoom and positioning behaviours # The commit message GoogleChromeLabs#118 will be skipped: # Merge branch 'master' into update-zoom-interaction # The commit message GoogleChromeLabs#119 will be skipped: # Merge branch 'master' into update-zoom-interaction # The commit message GoogleChromeLabs#120 will be skipped: # Merge branch 'master' into update-zoom-interaction # The commit message GoogleChromeLabs#121 will be skipped: # Merge branch 'master' into update-zoom-interaction # The commit message GoogleChromeLabs#122 will be skipped: # Merge branch 'master' into update-zoom-interaction # The commit message GoogleChromeLabs#123 will be skipped: # Merge branch 'master' into update-zoom-interaction # The commit message GoogleChromeLabs#124 will be skipped: # Merge branch 'master' into update-zoom-interaction # The commit message GoogleChromeLabs#125 will be skipped: # Merge branch 'master' into update-zoom-interaction # The commit message GoogleChromeLabs#126 will be skipped: # Merge from remote branch # The commit message GoogleChromeLabs#127 will be skipped: # Update dependency webpack-cli to v3.2.3 # The commit message GoogleChromeLabs#128 will be skipped: # Merge pull request GoogleChromeLabs#449 from GoogleChromeLabs/renovate/webpack-cli-3.x # # Update dependency webpack-cli to v3.2.3 # The commit message GoogleChromeLabs#129 will be skipped: # Update libwebp to 1.0.2 (GoogleChromeLabs#439) # # * Update package.json # # * Update package.json # # * Update README.md # # * Update README.md # # * Use cmake for libwebp # # * Minimize libwebp # The commit message GoogleChromeLabs#130 will be skipped: # Update dependency chokidar to v2.1.0 # The commit message GoogleChromeLabs#131 will be skipped: # Merge pull request GoogleChromeLabs#451 from GoogleChromeLabs/renovate/chokidar-2.x # # Update dependency chokidar to v2.1.0 # The commit message GoogleChromeLabs#132 will be skipped: # Update dependency loader-utils to v1.2.3 # The commit message GoogleChromeLabs#133 will be skipped: # Merge pull request GoogleChromeLabs#413 from GoogleChromeLabs/renovate/loader-utils-1.x # # Update dependency loader-utils to v1.2.3 # The commit message GoogleChromeLabs#134 will be skipped: # Update dependency @types/node to v10.12.23 # The commit message GoogleChromeLabs#135 will be skipped: # Merge pull request GoogleChromeLabs#453 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.23 # The commit message GoogleChromeLabs#136 will be skipped: # Merge from upstream/master # The commit message GoogleChromeLabs#137 will be skipped: # Lazy-load the intersection-observer polyfill and optionally control wheel event # The commit message GoogleChromeLabs#138 will be skipped: # Fix threshold handling issue # The commit message GoogleChromeLabs#139 will be skipped: # Adding CI step to compare build size to previous master build. (GoogleChromeLabs#450) # # The commit message GoogleChromeLabs#140 will be skipped: # no one must know I did this, or that it got through review. # The commit message GoogleChromeLabs#141 will be skipped: # Pin dependencies (GoogleChromeLabs#456) # # The commit message GoogleChromeLabs#142 will be skipped: # Switching to 1.4x rather than 140% # The commit message GoogleChromeLabs#143 will be skipped: # Rotate implementation in Rust # The commit message GoogleChromeLabs#144 will be skipped: # Reuse rotate instance and calculate pages correctly # The commit message GoogleChromeLabs#145 will be skipped: # Update wasm build # The commit message GoogleChromeLabs#146 will be skipped: # Merge pull request GoogleChromeLabs#438 from GoogleChromeLabs/rust-rotate # # Rotate implementation in Rust # The commit message GoogleChromeLabs#147 will be skipped: # Fix buffer size/offset calculations in rotate/processor.ts # The commit message GoogleChromeLabs#148 will be skipped: # Merge pull request GoogleChromeLabs#458 from jviide/rust-rotate # # Fix buffer offset/size calculations in rotate/processor.ts # The commit message GoogleChromeLabs#149 will be skipped: # 1.3.2 # The commit message GoogleChromeLabs#150 will be skipped: # Update dependency webpack-bundle-analyzer to v3.0.4 # The commit message GoogleChromeLabs#151 will be skipped: # Merge pull request GoogleChromeLabs#459 from GoogleChromeLabs/renovate/webpack-bundle-analyzer-3.x # # Update dependency webpack-bundle-analyzer to v3.0.4 # The commit message GoogleChromeLabs#152 will be skipped: # Update dependency @types/node to v10.12.25 # The commit message GoogleChromeLabs#153 will be skipped: # Merge pull request GoogleChromeLabs#455 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.25 # The commit message GoogleChromeLabs#154 will be skipped: # Update dependency chokidar to v2.1.1 # The commit message GoogleChromeLabs#155 will be skipped: # Merge pull request GoogleChromeLabs#457 from GoogleChromeLabs/renovate/chokidar-2.x # # Update dependency chokidar to v2.1.1 # The commit message GoogleChromeLabs#156 will be skipped: # Update dependency @types/node to v10.12.26 # The commit message GoogleChromeLabs#157 will be skipped: # Merge pull request GoogleChromeLabs#461 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.26 # The commit message GoogleChromeLabs#158 will be skipped: # Updating package lock to fix Netlify # The commit message GoogleChromeLabs#159 will be skipped: # Make Rust rotate code smaller (GoogleChromeLabs#462) # # * Make Rust rotate code smaller # # * Back on the rust happy path # The commit message GoogleChromeLabs#160 will be skipped: # 1.3.3 # The commit message GoogleChromeLabs#161 will be skipped: # Update dependency chokidar to v2.1.2 # The commit message GoogleChromeLabs#162 will be skipped: # Merge pull request GoogleChromeLabs#467 from GoogleChromeLabs/renovate/chokidar-2.x # # Update dependency chokidar to v2.1.2 # The commit message GoogleChromeLabs#163 will be skipped: # merge remote-tracking branch 'upstream/master' into update-zoom-interaction # The commit message GoogleChromeLabs#164 will be skipped: # Update double click listener and position reset behaviour # The commit message GoogleChromeLabs#165 will be skipped: # Change back the indentations # The commit message GoogleChromeLabs#166 will be skipped: # Update double click listener and position reset behaviour # The commit message GoogleChromeLabs#167 will be skipped: # Change back the indentations

Add a <range-input> WC.

8b2d17c

developit requested review from jakearchibald and surma August 10, 2018 13:41

Add precision property and truncate value display text

d8ac090

surma approved these changes Aug 14, 2018

View reviewed changes

jakearchibald requested changes Aug 15, 2018

View reviewed changes

developit added 3 commits August 19, 2018 22:06

Better names for constants

fb70ac6

Address @jakearchibald's PR feedback

535088d

Make undefined precision the default, which just displays whatever va…

424dd38

…lue is derived from the input.

jakearchibald mentioned this pull request Aug 20, 2018

Range input: implement 'disabled'. #142

Closed

jakearchibald requested changes Aug 20, 2018

View reviewed changes

developit added 2 commits September 17, 2018 21:46

Make property/attribute reflection follow input, and use attributes a…

bec6022

…s the source of authority.

Add disabled styles.

3bc7d32

jakearchibald reviewed Sep 18, 2018

View reviewed changes

jakearchibald closed this Oct 2, 2018

jakearchibald deleted the feature/custom-range-inputs branch October 2, 2018 14:17

Add a <range-input> WC. #136

Add a <range-input> WC. #136

Conversation

developit commented Aug 10, 2018

surma commented Aug 10, 2018

jakearchibald commented Aug 10, 2018 • edited Loading

developit commented Aug 10, 2018

jakearchibald commented Aug 10, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jakearchibald Aug 15, 2018 • edited by developit Loading

Choose a reason for hiding this comment

jakearchibald left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jakearchibald Aug 15, 2018 • edited by developit Loading

Choose a reason for hiding this comment

jakearchibald Aug 15, 2018 • edited by developit Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jakearchibald Aug 15, 2018 • edited by developit Loading

Choose a reason for hiding this comment

jakearchibald Aug 15, 2018 • edited by developit Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jakearchibald Aug 15, 2018 • edited by developit Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

developit commented Aug 20, 2018

jakearchibald left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jakearchibald commented Aug 20, 2018

developit commented Sep 6, 2018

jakearchibald commented Sep 6, 2018

developit commented Sep 18, 2018

jakearchibald left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jakearchibald commented Sep 19, 2018 via email

jakearchibald commented Oct 2, 2018

Add a `<range-input>` WC. #136

Add a `<range-input>` WC. #136

jakearchibald commented Aug 10, 2018 •

edited

Loading

jakearchibald Aug 15, 2018 •

edited by developit

Loading

jakearchibald left a comment •

edited

Loading

jakearchibald Aug 15, 2018 •

edited by developit

Loading

jakearchibald Aug 15, 2018 •

edited by developit

Loading

jakearchibald Aug 15, 2018 •

edited by developit

Loading

jakearchibald Aug 15, 2018 •

edited by developit

Loading

jakearchibald Aug 15, 2018 •

edited by developit

Loading